OLD | NEW |
1 | 1 |
2 (function() { | 2 (function() { |
3 | 3 |
4 Polymer({ | 4 Polymer({ |
5 | 5 |
6 is: 'neon-animated-pages', | 6 is: 'neon-animated-pages', |
7 | 7 |
8 behaviors: [ | 8 behaviors: [ |
9 Polymer.IronResizableBehavior, | 9 Polymer.IronResizableBehavior, |
10 Polymer.IronSelectableBehavior, | 10 Polymer.IronSelectableBehavior, |
(...skipping 19 matching lines...) Expand all Loading... |
30 '_selectedChanged(selected)' | 30 '_selectedChanged(selected)' |
31 ], | 31 ], |
32 | 32 |
33 listeners: { | 33 listeners: { |
34 'neon-animation-finish': '_onNeonAnimationFinish' | 34 'neon-animation-finish': '_onNeonAnimationFinish' |
35 }, | 35 }, |
36 | 36 |
37 _selectedChanged: function(selected) { | 37 _selectedChanged: function(selected) { |
38 | 38 |
39 var selectedPage = this.selectedItem; | 39 var selectedPage = this.selectedItem; |
40 var oldPage = this._prevSelected || false; | 40 var oldPage = this._valueToItem(this._prevSelected) || false; |
41 this._prevSelected = selectedPage; | 41 this._prevSelected = selected; |
42 | 42 |
43 // on initial load and if animateInitialSelection is negated, simply displ
ay selectedPage. | 43 // on initial load and if animateInitialSelection is negated, simply displ
ay selectedPage. |
44 if (!oldPage && !this.animateInitialSelection) { | 44 if (!oldPage && !this.animateInitialSelection) { |
45 this._completeSelectedChanged(); | 45 this._completeSelectedChanged(); |
46 return; | 46 return; |
47 } | 47 } |
48 | 48 |
49 // insert safari fix. | 49 // insert safari fix. |
50 this.animationConfig = [{ | 50 this.animationConfig = [{ |
51 name: 'opaque-animation', | 51 name: 'opaque-animation', |
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
98 | 98 |
99 // display the selectedPage during the transition. | 99 // display the selectedPage during the transition. |
100 selectedPage.classList.add('neon-animating'); | 100 selectedPage.classList.add('neon-animating'); |
101 | 101 |
102 // actually run the animations. | 102 // actually run the animations. |
103 if (this.animationConfig.length > 1) { | 103 if (this.animationConfig.length > 1) { |
104 | 104 |
105 // on first load, ensure we run animations only after element is attache
d. | 105 // on first load, ensure we run animations only after element is attache
d. |
106 if (!this.isAttached) { | 106 if (!this.isAttached) { |
107 this.async(function () { | 107 this.async(function () { |
108 this.playAnimation(null, { | 108 this.playAnimation(undefined, { |
109 fromPage: null, | 109 fromPage: null, |
110 toPage: selectedPage | 110 toPage: selectedPage |
111 }); | 111 }); |
112 }); | 112 }); |
113 | 113 |
114 } else { | 114 } else { |
115 this.playAnimation(null, { | 115 this.playAnimation(undefined, { |
116 fromPage: oldPage, | 116 fromPage: oldPage, |
117 toPage: selectedPage | 117 toPage: selectedPage |
118 }); | 118 }); |
119 } | 119 } |
120 | 120 |
121 } else { | 121 } else { |
122 this._completeSelectedChanged(oldPage, selectedPage); | 122 this._completeSelectedChanged(oldPage, selectedPage); |
123 } | 123 } |
124 }, | 124 }, |
125 | 125 |
| 126 /** |
| 127 * @param {Object=} oldPage |
| 128 * @param {Object=} selectedPage |
| 129 */ |
126 _completeSelectedChanged: function(oldPage, selectedPage) { | 130 _completeSelectedChanged: function(oldPage, selectedPage) { |
127 if (selectedPage) { | 131 if (selectedPage) { |
128 selectedPage.classList.remove('neon-animating'); | 132 selectedPage.classList.remove('neon-animating'); |
129 } | 133 } |
130 if (oldPage) { | 134 if (oldPage) { |
131 oldPage.classList.remove('neon-animating'); | 135 oldPage.classList.remove('neon-animating'); |
132 } | 136 } |
133 if (!selectedPage || !oldPage) { | 137 if (!selectedPage || !oldPage) { |
134 var nodes = Polymer.dom(this.$.content).getDistributedNodes(); | 138 var nodes = Polymer.dom(this.$.content).getDistributedNodes(); |
135 for (var node, index = 0; node = nodes[index]; index++) { | 139 for (var node, index = 0; node = nodes[index]; index++) { |
136 node.classList && node.classList.remove('neon-animating'); | 140 node.classList && node.classList.remove('neon-animating'); |
137 } | 141 } |
138 } | 142 } |
139 this.async(this.notifyResize); | 143 this.async(this._notifyPageResize); |
140 }, | 144 }, |
141 | 145 |
142 _onNeonAnimationFinish: function(event) { | 146 _onNeonAnimationFinish: function(event) { |
143 if (this._squelchNextFinishEvent) { | 147 if (this._squelchNextFinishEvent) { |
144 this._squelchNextFinishEvent = false; | 148 this._squelchNextFinishEvent = false; |
145 return; | 149 return; |
146 } | 150 } |
147 this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage); | 151 this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage); |
| 152 }, |
| 153 |
| 154 _notifyPageResize: function() { |
| 155 var selectedPage = this.selectedItem; |
| 156 this.resizerShouldNotify = function(element) { |
| 157 return element == selectedPage; |
| 158 } |
| 159 this.notifyResize(); |
148 } | 160 } |
149 | 161 |
150 }) | 162 }) |
151 | 163 |
152 })(); | 164 })(); |
OLD | NEW |