third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.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 <link href="../../core-icons/core-icons.html" rel="import">
  11 <link href="../../core-icon-button/core-icon-button.html" rel="import">
  12 <link href="../core-animated-pages.html" rel="import">
  13
  14 <polymer-element name="nested-animated-pages">
  15 <template>
  16   <style>
  17     :host {
  18       display: block;
  19       position: relative;
  20     }
  21
  22     core-animated-pages {
  23       position: absolute;
  24       top: 0;
  25       left: 0;
  26       right: 0;
  27       bottom: 0;
  28     }
  29
  30     .tall-toolbar {
  31       box-sizing: border-box;
  32       height: 240px;
  33     }
  34
  35     .tall-toolbar.colored {
  36       fill: #fff;
  37       color: #fff;
  38     }
  39
  40     .tall-toolbar [flex] {
  41       font-size: 1.5em;
  42     }
  43
  44     core-icon-button {
  45       margin: 16px;
  46     }
  47
  48     .body {
  49       background-color: #f1f1f1;
  50     }
  51
  52     .square {
  53       position: absolute;
  54       width: 150px;
  55       height: 150px;
  56       left: 16px;
  57       top: 175px;
  58     }
  59
  60   </style>
  61   <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">
  62
  63     <section id="page1" cross-fade>
  64       <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
  65         <div layout horizontal center>
  66           <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
  67           <div flex>One</div>
  68           <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
  69         </div>
  70         <div flex></div>
  71       </div>
  72       <div flex class="body"></div>
  73     </section>
  74
  75     <section layout vertical id="page2" cross-fade>
  76       <div class="tall-toolbar" layout vertical>
  77         <div layout horizontal center>
  78           <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
  79           <div flex>Two</div>
  80           <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
  81         </div>
  82         <div flex></div>
  83       </div>
  84       <div flex class="body"></div>
  85       <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
  86     </section>
  87
  88   </core-animated-pages>
  89 </template>
  90 <script>
  91
  92   Polymer({
  93
  94     publish: {
  95       page: {value: 0}
  96     },
  97
  98     selectedItem: null,
  99     noTransition: true,
 100
 101     back: function() {
 102       this.noTransition = true;
 103       this.fire('nested-back');
 104     },
 105
 106     transition: function() {
 107       this.noTransition = false;
 108       this.page = this.page === 0 ? 1 : 0;
 109     }
 110
 111   });
 112 </script>
 113 </polymer-element>