| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also | 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> | 8 --> |
| 9 <link rel="import" href="../polymer/polymer.html"> | 9 <link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> | 10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> |
| 11 <link rel="import" href="../iron-selector/iron-selectable.html"> | 11 <link rel="import" href="../iron-selector/iron-selectable.html"> |
| 12 <link rel="import" href="../paper-styles/paper-styles.html"> | |
| 13 <link rel="import" href="neon-animation-runner-behavior.html"> | 12 <link rel="import" href="neon-animation-runner-behavior.html"> |
| 14 <link rel="import" href="animations/opaque-animation.html"> | 13 <link rel="import" href="animations/opaque-animation.html"> |
| 15 | 14 |
| 16 <!-- | 15 <!-- |
| 17 `neon-animated-pages` manages a set of pages and runs an animation when switchin
g between them. Its | 16 `neon-animated-pages` manages a set of pages and runs an animation when switchin
g between them. Its |
| 18 children pages should implement `Polymer.NeonAnimatableBehavior` and define `ent
ry` and `exit` | 17 children pages should implement `Polymer.NeonAnimatableBehavior` and define `ent
ry` and `exit` |
| 19 animations to be run when switching to or switching out of the page. | 18 animations to be run when switching to or switching out of the page. |
| 20 | 19 |
| 21 @group Neon Elements | 20 @group Neon Elements |
| 22 @element neon-animated-pages | 21 @element neon-animated-pages |
| 23 @demo demo/index.html | 22 @demo demo/index.html |
| 24 --> | 23 --> |
| 25 | 24 |
| 26 <dom-module id="neon-animated-pages"> | 25 <dom-module id="neon-animated-pages"> |
| 27 | 26 |
| 28 <style> | 27 <style> |
| 29 | 28 |
| 30 :host { | 29 :host { |
| 31 display: block; | 30 display: block; |
| 32 position: relative; | 31 position: relative; |
| 33 } | 32 } |
| 34 | 33 |
| 35 :host > ::content > * { | 34 :host > ::content > * { |
| 36 @apply(--layout-fit); | 35 position: absolute; |
| 36 top: 0; |
| 37 left: 0; |
| 38 bottom: 0; |
| 39 right: 0; |
| 37 height: 100%; | 40 height: 100%; |
| 38 } | 41 } |
| 39 | 42 |
| 40 :host > ::content > :not(.iron-selected):not(.neon-animating) { | 43 :host > ::content > :not(.iron-selected):not(.neon-animating) { |
| 41 display: none !important; | 44 display: none !important; |
| 42 } | 45 } |
| 43 | 46 |
| 44 :host > ::content > .neon-animating { | 47 :host > ::content > .neon-animating { |
| 45 pointer-events: none; | 48 pointer-events: none; |
| 46 } | 49 } |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 85 '_selectedChanged(selected)' | 88 '_selectedChanged(selected)' |
| 86 ], | 89 ], |
| 87 | 90 |
| 88 listeners: { | 91 listeners: { |
| 89 'neon-animation-finish': '_onNeonAnimationFinish' | 92 'neon-animation-finish': '_onNeonAnimationFinish' |
| 90 }, | 93 }, |
| 91 | 94 |
| 92 _selectedChanged: function(selected) { | 95 _selectedChanged: function(selected) { |
| 93 | 96 |
| 94 var selectedPage = this.selectedItem; | 97 var selectedPage = this.selectedItem; |
| 95 var oldPage = this._prevSelected || false; | 98 var oldPage = this._valueToItem(this._prevSelected) || false; |
| 96 this._prevSelected = selectedPage; | 99 this._prevSelected = selected; |
| 97 | 100 |
| 98 // on initial load and if animateInitialSelection is negated, simply displ
ay selectedPage. | 101 // on initial load and if animateInitialSelection is negated, simply displ
ay selectedPage. |
| 99 if (!oldPage && !this.animateInitialSelection) { | 102 if (!oldPage && !this.animateInitialSelection) { |
| 100 this._completeSelectedChanged(); | 103 this._completeSelectedChanged(); |
| 101 return; | 104 return; |
| 102 } | 105 } |
| 103 | 106 |
| 104 // insert safari fix. | 107 // insert safari fix. |
| 105 this.animationConfig = [{ | 108 this.animationConfig = [{ |
| 106 name: 'opaque-animation', | 109 name: 'opaque-animation', |
| (...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 153 | 156 |
| 154 // display the selectedPage during the transition. | 157 // display the selectedPage during the transition. |
| 155 selectedPage.classList.add('neon-animating'); | 158 selectedPage.classList.add('neon-animating'); |
| 156 | 159 |
| 157 // actually run the animations. | 160 // actually run the animations. |
| 158 if (this.animationConfig.length > 1) { | 161 if (this.animationConfig.length > 1) { |
| 159 | 162 |
| 160 // on first load, ensure we run animations only after element is attache
d. | 163 // on first load, ensure we run animations only after element is attache
d. |
| 161 if (!this.isAttached) { | 164 if (!this.isAttached) { |
| 162 this.async(function () { | 165 this.async(function () { |
| 163 this.playAnimation(null, { | 166 this.playAnimation(undefined, { |
| 164 fromPage: null, | 167 fromPage: null, |
| 165 toPage: selectedPage | 168 toPage: selectedPage |
| 166 }); | 169 }); |
| 167 }); | 170 }); |
| 168 | 171 |
| 169 } else { | 172 } else { |
| 170 this.playAnimation(null, { | 173 this.playAnimation(undefined, { |
| 171 fromPage: oldPage, | 174 fromPage: oldPage, |
| 172 toPage: selectedPage | 175 toPage: selectedPage |
| 173 }); | 176 }); |
| 174 } | 177 } |
| 175 | 178 |
| 176 } else { | 179 } else { |
| 177 this._completeSelectedChanged(oldPage, selectedPage); | 180 this._completeSelectedChanged(oldPage, selectedPage); |
| 178 } | 181 } |
| 179 }, | 182 }, |
| 180 | 183 |
| 184 /** |
| 185 * @param {Object=} oldPage |
| 186 * @param {Object=} selectedPage |
| 187 */ |
| 181 _completeSelectedChanged: function(oldPage, selectedPage) { | 188 _completeSelectedChanged: function(oldPage, selectedPage) { |
| 182 if (selectedPage) { | 189 if (selectedPage) { |
| 183 selectedPage.classList.remove('neon-animating'); | 190 selectedPage.classList.remove('neon-animating'); |
| 184 } | 191 } |
| 185 if (oldPage) { | 192 if (oldPage) { |
| 186 oldPage.classList.remove('neon-animating'); | 193 oldPage.classList.remove('neon-animating'); |
| 187 } | 194 } |
| 188 if (!selectedPage || !oldPage) { | 195 if (!selectedPage || !oldPage) { |
| 189 var nodes = Polymer.dom(this.$.content).getDistributedNodes(); | 196 var nodes = Polymer.dom(this.$.content).getDistributedNodes(); |
| 190 for (var node, index = 0; node = nodes[index]; index++) { | 197 for (var node, index = 0; node = nodes[index]; index++) { |
| 191 node.classList && node.classList.remove('neon-animating'); | 198 node.classList && node.classList.remove('neon-animating'); |
| 192 } | 199 } |
| 193 } | 200 } |
| 194 this.async(this.notifyResize); | 201 this.async(this._notifyPageResize); |
| 195 }, | 202 }, |
| 196 | 203 |
| 197 _onNeonAnimationFinish: function(event) { | 204 _onNeonAnimationFinish: function(event) { |
| 198 if (this._squelchNextFinishEvent) { | 205 if (this._squelchNextFinishEvent) { |
| 199 this._squelchNextFinishEvent = false; | 206 this._squelchNextFinishEvent = false; |
| 200 return; | 207 return; |
| 201 } | 208 } |
| 202 this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage); | 209 this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage); |
| 210 }, |
| 211 |
| 212 _notifyPageResize: function() { |
| 213 var selectedPage = this.selectedItem; |
| 214 this.resizerShouldNotify = function(element) { |
| 215 return element == selectedPage; |
| 216 } |
| 217 this.notifyResize(); |
| 203 } | 218 } |
| 204 | 219 |
| 205 }) | 220 }) |
| 206 | 221 |
| 207 })(); | 222 })(); |
| 208 </script> | 223 </script> |
| OLD | NEW |