Home | History | Annotate | Download | only in demos 
      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>
    104