third_party/polymer/components-chromium/core-animated-pages/demos/nested.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <title>core-animated-pages</title>
   5   <script src="../../platform/platform.js"></script>
   6   <link href="nested-animated-pages.html" rel="import">
   7
   8   <style>
   9     body {
  10       font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  11       margin: 0;
  12       background: #f1f1f1;
  13     }
  14
  15     nested-demo {
  16       display: block;
  17       position: absolute;
  18       top: 0;
  19       left: 0;
  20       bottom: 0;
  21       right: 0;
  22     }
  23   </style>
  24 </head>
  25 <body>
  26
  27   <polymer-element name="nested-demo">
  28   <template>
  29
  30     <style>
  31
  32       core-animated-pages {
  33         display: block;
  34         position: absolute;
  35         top: 0;
  36         left: 0;
  37         bottom: 0;
  38         right: 0;
  39       }
  40
  41       section {
  42         text-align: center;
  43         padding-top: 250px;
  44       }
  45
  46       .square {
  47         display: inline-block;
  48         margin: 8px;
  49         padding: 8px;
  50         width: 200px;
  51         height: 200px;
  52         background-color: orange;
  53         color: #fff;
  54       }
  55     </style>
  56
  57     <core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade">
  58
  59       <section on-tap="{{transition}}" layout horizontal center-justified>
  60
  61         <div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div>
  62         <div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div>
  63
  64       </section>
  65
  66       <nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages>
  67
  68     </core-animated-pages>
  69   </template>
  70   <script>
  71
  72     Polymer('nested-demo', {
  73
  74       page: 0,
  75       subpage: 0,
  76
  77       transition: function(e) {
  78
  79         var el = e.target;
  80         if (el.id === "thing1") {
  81           this.subpage = 0;
  82         } else {
  83           this.subpage = 1;
  84         }
  85
  86         setTimeout(function() {
  87           this.page = 1;
  88         }.bind(this), 200);
  89       },
  90
  91       back: function() {
  92         this.page = 0;
  93       }
  94
  95     });
  96
  97   </script>
  98   </polymer-element>
  99
 100   <nested-demo></nested-demo>
 101
 102 </body>
 103 </html>