1 <!-- 2 @license 3 Copyright (c) 2015 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 rel="import" href="../../../polymer/polymer.html"> 11 <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html"> 12 <link rel="import" href="../../neon-shared-element-animatable-behavior.html"> 13 <link rel="import" href="../../../paper-styles/typography.html"> 14 <link rel="import" href="../../../paper-styles/color.html"> 15 <link rel="import" href="../shared-styles.html"> 16 17 <dom-module id="animated-grid"> 18 <template> 19 <style include="shared-styles"></style> 20 <style> 21 22 :host { 23 display: block; 24 background: #000; 25 } 26 27 .tile { 28 display: inline-block; 29 float: left; 30 vertical-align: top; 31 width: calc(100% / 6); 32 height: calc(100% / 3); 33 34 @apply(--paper-font-title); 35 @apply(--layout-vertical); 36 @apply(--layout-center-center); 37 } 38 39 .tile:nth-of-type(1) { 40 width: calc(100% / 3); 41 height: calc(100% / 3 * 2); 42 } 43 44 .tile:nth-of-type(4) { 45 width: calc(100% / 3); 46 } 47 48 .tile:nth-of-type(5) { 49 width: calc(100% / 3); 50 height: calc(100% / 3 * 2); 51 } 52 53 .tile:nth-of-type(8) { 54 width: calc(100% / 3); 55 height: calc(100% / 3); 56 } 57 58 .tile:nth-of-type(9) { 59 position: absolute; 60 top: calc(100% / 3 * 2); 61 left: 0; 62 width: calc(100% / 6); 63 height: calc(100% / 3); 64 } 65 66 .tile:nth-of-type(10) { 67 position: absolute; 68 top: calc(100% / 3 * 2); 69 left: calc(100% / 6);; 70 width: calc(100% / 6); 71 height: calc(100% / 3); 72 } 73 74 </style> 75 76 <template is="dom-repeat" items="[[config]]"> 77 <div class$="[[_computeTileClass(item.color)]]"> 78 <span>[[item.value]]</span> 79 </div> 80 </template> 81 82 </template> 83 84 </dom-module> 85 86 <script> 87 88 Polymer({ 89 90 is: 'animated-grid', 91 92 behaviors: [ 93 Polymer.NeonSharedElementAnimatableBehavior 94 ], 95 96 properties: { 97 98 config: { 99 type: Array, 100 value: function() { 101 return [ 102 {value: 1, color: 'blue'}, 103 {value: 2, color: 'red'}, 104 {value: 3, color: 'blue'}, 105 {value: 4, color: 'green'}, 106 {value: 5, color: 'yellow'}, 107 {value: 6, color: 'blue'}, 108 {value: 7, color: 'red'}, 109 {value: 8, color: 'green'}, 110 {value: 9, color: 'yellow'}, 111 {value: 10, color: 'red'} 112 ] 113 } 114 }, 115 116 animationConfig: { 117 type: Object, 118 value: function() { 119 return { 120 'exit': [{ 121 name: 'ripple-animation', 122 id: 'ripple', 123 fromPage: this 124 }, { 125 name: 'hero-animation', 126 id: 'hero', 127 fromPage: this 128 }] 129 } 130 } 131 } 132 133 }, 134 135 listeners: { 136 click: '_onClick' 137 }, 138 139 _computeTileClass: function(color) { 140 return 'tile ' + color + '-300'; 141 }, 142 143 _onClick: function(event) { 144 var target = event.target; 145 while (target !== this && !target._templateInstance) { 146 target = target.parentNode; 147 } 148 149 // configure the page animation 150 this.sharedElements = { 151 'hero': target, 152 'ripple': target 153 }; 154 this.animationConfig['exit'][0].gesture = { 155 x: event.x, 156 y: event.y 157 }; 158 159 this.fire('tile-click', { 160 tile: target, 161 data: target._templateInstance.item 162 }); 163 } 164 165 }); 166 167 </script> 168
