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

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12 <head>
  13   <title>core-animated-pages</title>
  14   <script src="../../webcomponentsjs/webcomponents.js"></script>
  15   <link href="nested-animated-pages.html" rel="import">
  16
  17   <style>
  18     body {
  19       font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  20       margin: 0;
  21       background: #f1f1f1;
  22     }
  23
  24     nested-demo {
  25       display: block;
  26       position: absolute;
  27       top: 0;
  28       left: 0;
  29       bottom: 0;
  30       right: 0;
  31     }
  32   </style>
  33 </head>
  34 <body>
  35
  36   <polymer-element name="nested-demo">
  37   <template>
  38
  39     <style>
  40
  41       core-animated-pages {
  42         display: block;
  43         position: absolute;
  44         top: 0;
  45         left: 0;
  46         bottom: 0;
  47         right: 0;
  48       }
  49
  50       section {
  51         text-align: center;
  52         padding-top: 250px;
  53       }
  54
  55       .square {
  56         display: inline-block;
  57         margin: 8px;
  58         padding: 8px;
  59         width: 200px;
  60         height: 200px;
  61         background-color: orange;
  62         color: #fff;
  63       }
  64     </style>
  65
  66     <core-animated-pages selected="{{page}}" transitions="hero-transition cross-fade">
  67
  68       <section on-tap="{{transition}}" layout horizontal center-justified>
  69
  70         <div class="square" id="thing1" hero-id="thing" hero?="{{subpage === 0}}" cross-fade?="{{subpage !== 0}}">thing 1</div>
  71         <div class="square" id="thing2" hero-id="thing" hero?="{{subpage === 1}}" cross-fade?="{{subpage !== 1}}">thing 2</div>
  72
  73       </section>
  74
  75       <nested-animated-pages page="{{subpage}}" on-nested-back="{{back}}"></nested-animated-pages>
  76
  77     </core-animated-pages>
  78   </template>
  79   <script>
  80
  81     Polymer('nested-demo', {
  82
  83       page: 0,
  84       subpage: 0,
  85
  86       transition: function(e) {
  87
  88         var el = e.target;
  89         if (el.id === "thing1") {
  90           this.subpage = 0;
  91         } else {
  92           this.subpage = 1;
  93         }
  94
  95         setTimeout(function() {
  96           this.page = 1;
  97         }.bind(this), 200);
  98       },
  99
 100       back: function() {
 101         this.page = 0;
 102       }
 103
 104     });
 105
 106   </script>
 107   </polymer-element>
 108
 109   <nested-demo></nested-demo>
 110
 111 </body>
 112 </html>