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