1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 <title>neon-animated-pages demo: grid</title> 14 15 <meta charset="utf-8"> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 17 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 18 19 <script src="../../../webcomponentsjs/webcomponents-lite.js"></script> 20 <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> 21 <link rel="import" href="../../neon-animations.html"> 22 <link rel="import" href="reprojected-pages.html"> 23 <link rel="import" href="animated-grid.html"> 24 <link rel="import" href="fullsize-page-with-card.html"> 25 26 <style is="custom-style"> 27 body { 28 overflow: hidden; 29 @apply(--layout-fullbleed); 30 } 31 reprojected-pages { 32 height: 100%; 33 } 34 </style> 35 </head> 36 <body> 37 <template is="dom-bind"> 38 39 <reprojected-pages id="pages" selected="0"> 40 <animated-grid on-tile-click="_onTileClick"></animated-grid> 41 <fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick"> 42 </fullsize-page-with-card> 43 </reprojected-pages> 44 45 </template> 46 47 <script> 48 49 var scope = document.querySelector('template[is="dom-bind"]'); 50 51 scope._onTileClick = function(event) { 52 this.$['fullsize-card'].color = event.detail.data.color; 53 this.$.pages.selected = 1; 54 }; 55 56 scope._onFullsizeClick = function(event) { 57 this.$.pages.selected = 0; 58 }; 59 60 </script> 61 62 </body> 63 </html> 64
