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

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