third_party/polymer/components/core-animated-pages/demos/grid.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
  14   <script src="../../webcomponentsjs/webcomponents.js"></script>
  15
  16   <link href="../../core-icons/core-icons.html" rel="import">
  17   <link href="../../core-icon-button/core-icon-button.html" rel="import">
  18   <link href="../../core-toolbar/core-toolbar.html" rel="import">
  19   <link href="../core-animated-pages.html" rel="import">
  20
  21   <style>
  22     body {
  23       font-family: sans-serif;
  24     }
  25
  26     .toolbar {
  27       background-color: steelblue;
  28     }
  29
  30     #container {
  31       overflow: auto;
  32     }
  33
  34     .card {
  35       position: relative;
  36       height: 150px;
  37       width: 150px;
  38       font-size: 50px;
  39       margin: 8px;
  40       background-color: tomato;
  41       border-radius: 4px;
  42       cursor: default;
  43     }
  44
  45     .view {
  46       font-size: 250px;
  47       background-color: tomato;
  48     }
  49
  50   </style>
  51
  52 </head>
  53 <body unresolved fullbleed vertical layout>
  54   <template is="auto-binding">
  55     <core-toolbar class="toolbar">
  56       <core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{back}}"></core-icon-button>
  57       <div flex>Stuff</div>
  58       <core-icon-button icon="more-vert"></core-icon-button>
  59     </core-toolbar>
  60     <core-animated-pages id="pages" flex selected="0" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all hero-transition">
  61
  62       <section vertical layout>
  63
  64         <div id="container" flex horizontal wrap around-justified layout hero-p>
  65           <template repeat="{{item in items}}">
  66             <div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || lastSelected === item + 1}}" on-tap="{{selectView}}"><span cross-fade>{{item}}</span></div>
  67           </template>
  68         </div>
  69
  70       </section>
  71
  72       <template repeat="{{item in items}}">
  73         <section vertical layout>
  74           <div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"><span cross-fade>{{item}}</span></div>
  75         </section>
  76       </template>
  77
  78     </core-animated-pages>
  79   </template>
  80
  81   <script>
  82
  83     addEventListener('template-bound', function(e) {
  84       var scope = e.target;
  85       var items = [], count=50;
  86       for (var i=0; i < count; i++) {
  87         items.push(i);
  88       }
  89
  90       scope.items = items;
  91
  92       scope.selectView = function(e) {
  93         var i = e.target.templateInstance.model.item;
  94         this.$.pages.selected = i+1;
  95       }
  96
  97       scope.back = function() {
  98         this.lastSelected = this.$.pages.selected;
  99         console.log(this.lastSelected);
 100         this.$.pages.selected = 0;
 101       }
 102
 103       scope.transitionend = function() {
 104         if (this.lastSelected) {
 105           this.lastSelected = null;
 106         }
 107       }
 108     })
 109
 110   </script>
 111
 112 </body>
 113 </html>