Index: polymer_1.0.4/bower_components/neon-animation/demo/reprojection/animated-grid.html |
diff --git a/polymer_1.0.4/bower_components/neon-animation/demo/reprojection/animated-grid.html b/polymer_1.0.4/bower_components/neon-animation/demo/reprojection/animated-grid.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..e65ba51e1b946c44d286fffa62abe6535a57a5f3 |
--- /dev/null |
+++ b/polymer_1.0.4/bower_components/neon-animation/demo/reprojection/animated-grid.html |
@@ -0,0 +1,166 @@ |
+<!-- |
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+<link rel="import" href="../../../polymer/polymer.html"> |
+<link rel="import" href="../../../paper-styles/paper-styles.html"> |
+<link rel="import" href="../../neon-shared-element-animatable-behavior.html"> |
+ |
+<dom-module id="animated-grid"> |
+ |
+ <link rel="import" type="css" href="../shared.css"> |
+ |
+ <style> |
+ |
+ :host { |
+ display: block; |
+ background: #000; |
+ } |
+ |
+ .tile { |
+ display: inline-block; |
+ float: left; |
+ vertical-align: top; |
+ width: calc(100% / 6); |
+ height: calc(100% / 3); |
+ |
+ @apply(--paper-font-title); |
+ @apply(--layout-vertical); |
+ @apply(--layout-center-center); |
+ } |
+ |
+ .tile:nth-of-type(1) { |
+ width: calc(100% / 3); |
+ height: calc(100% / 3 * 2); |
+ } |
+ |
+ .tile:nth-of-type(4) { |
+ width: calc(100% / 3); |
+ } |
+ |
+ .tile:nth-of-type(5) { |
+ width: calc(100% / 3); |
+ height: calc(100% / 3 * 2); |
+ } |
+ |
+ .tile:nth-of-type(8) { |
+ width: calc(100% / 3); |
+ height: calc(100% / 3); |
+ } |
+ |
+ .tile:nth-of-type(9) { |
+ position: absolute; |
+ top: calc(100% / 3 * 2); |
+ left: 0; |
+ width: calc(100% / 6); |
+ height: calc(100% / 3); |
+ } |
+ |
+ .tile:nth-of-type(10) { |
+ position: absolute; |
+ top: calc(100% / 3 * 2); |
+ left: calc(100% / 6);; |
+ width: calc(100% / 6); |
+ height: calc(100% / 3); |
+ } |
+ |
+ </style> |
+ |
+ <template> |
+ |
+ <template is="dom-repeat" items="[[config]]"> |
+ <div class$="[[_computeTileClass(item.color)]]"> |
+ <span>[[item.value]]</span> |
+ </div> |
+ </template> |
+ |
+ </template> |
+ |
+</dom-module> |
+ |
+<script> |
+ |
+ Polymer({ |
+ |
+ is: 'animated-grid', |
+ |
+ behaviors: [ |
+ Polymer.NeonSharedElementAnimatableBehavior |
+ ], |
+ |
+ properties: { |
+ |
+ config: { |
+ type: Array, |
+ value: function() { |
+ return [ |
+ {value: 1, color: 'blue'}, |
+ {value: 2, color: 'red'}, |
+ {value: 3, color: 'blue'}, |
+ {value: 4, color: 'green'}, |
+ {value: 5, color: 'yellow'}, |
+ {value: 6, color: 'blue'}, |
+ {value: 7, color: 'red'}, |
+ {value: 8, color: 'green'}, |
+ {value: 9, color: 'yellow'}, |
+ {value: 10, color: 'red'} |
+ ] |
+ } |
+ }, |
+ |
+ animationConfig: { |
+ type: Object, |
+ value: function() { |
+ return { |
+ 'exit': [{ |
+ name: 'ripple-animation', |
+ id: 'ripple', |
+ fromPage: this |
+ }, { |
+ name: 'hero-animation', |
+ id: 'hero', |
+ fromPage: this |
+ }] |
+ } |
+ } |
+ } |
+ |
+ }, |
+ |
+ listeners: { |
+ click: '_onClick' |
+ }, |
+ |
+ _computeTileClass: function(color) { |
+ return 'tile ' + color + '-300'; |
+ }, |
+ |
+ _onClick: function(event) { |
+ var target = event.target; |
+ while (target !== this && !target._templateInstance) { |
+ target = target.parentNode; |
+ } |
+ |
+ // configure the page animation |
+ this.sharedElements = { |
+ 'hero': target, |
+ 'ripple': target |
+ }; |
+ this.animationConfig['exit'][0].gesture = { |
+ x: event.x, |
+ y: event.y |
+ }; |
+ |
+ this.fire('tile-click', { |
+ tile: target, |
+ data: target._templateInstance.item |
+ }); |
+ } |
+ |
+ }); |
+ |
+</script> |