Home | History | Annotate | Download | only in grid
      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 
     21     <link rel="import" href="../../neon-animated-pages.html">
     22     <link rel="import" href="../../neon-animations.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 
     32       neon-animated-pages {
     33         height: 100%;
     34       }
     35     </style>
     36 
     37   </head>
     38   <body>
     39 
     40     <template is="dom-bind">
     41       <neon-animated-pages id="pages" selected="0">
     42         <animated-grid on-tile-click="_onTileClick"></animated-grid>
     43         <fullsize-page-with-card id="fullsize-card" on-click="_onFullsizeClick">
     44         </fullsize-page-with-card>
     45       </neon-animated-pages>
     46     </template>
     47 
     48     <script>
     49 
     50       var scope = document.querySelector('template[is="dom-bind"]');
     51 
     52       scope._onTileClick = function(event) {
     53         this.$['fullsize-card'].color = event.detail.data.color;
     54         this.$.pages.selected = 1;
     55       };
     56 
     57       scope._onFullsizeClick = function(event) {
     58         this.$.pages.selected = 0;
     59       };
     60 
     61     </script>
     62 
     63   </body>
     64 </html>
     65