OLD | NEW |
| (Empty) |
1 <!-- | |
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 | |
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 | |
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 | |
8 --> | |
9 <link rel="import" href="../polymer/polymer.html"> | |
10 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> | |
11 <link rel="import" href="../iron-selector/iron-selectable.html"> | |
12 <link rel="import" href="neon-animation-runner-behavior.html"> | |
13 <link rel="import" href="animations/opaque-animation.html"> | |
14 | |
15 <!-- | |
16 `neon-animated-pages` manages a set of pages and runs an animation when switchin
g between them. Its | |
17 children pages should implement `Polymer.NeonAnimatableBehavior` and define `ent
ry` and `exit` | |
18 animations to be run when switching to or switching out of the page. | |
19 | |
20 @group Neon Elements | |
21 @element neon-animated-pages | |
22 @demo demo/index.html | |
23 --> | |
24 | |
25 <dom-module id="neon-animated-pages"> | |
26 | |
27 <style> | |
28 | |
29 :host { | |
30 display: block; | |
31 position: relative; | |
32 } | |
33 | |
34 :host > ::content > * { | |
35 position: absolute; | |
36 top: 0; | |
37 left: 0; | |
38 bottom: 0; | |
39 right: 0; | |
40 height: 100%; | |
41 } | |
42 | |
43 :host > ::content > :not(.iron-selected):not(.neon-animating) { | |
44 display: none !important; | |
45 } | |
46 | |
47 :host > ::content > .neon-animating { | |
48 pointer-events: none; | |
49 } | |
50 | |
51 </style> | |
52 | |
53 <template> | |
54 <content id="content"></content> | |
55 </template> | |
56 | |
57 </dom-module> | |
58 | |
59 <script> | |
60 (function() { | |
61 | |
62 Polymer({ | |
63 | |
64 is: 'neon-animated-pages', | |
65 | |
66 behaviors: [ | |
67 Polymer.IronResizableBehavior, | |
68 Polymer.IronSelectableBehavior, | |
69 Polymer.NeonAnimationRunnerBehavior | |
70 ], | |
71 | |
72 properties: { | |
73 | |
74 activateEvent: { | |
75 type: String, | |
76 value: '' | |
77 }, | |
78 | |
79 // if true, the initial page selection will also be animated according to
its animation config. | |
80 animateInitialSelection: { | |
81 type: Boolean, | |
82 value: false | |
83 } | |
84 | |
85 }, | |
86 | |
87 observers: [ | |
88 '_selectedChanged(selected)' | |
89 ], | |
90 | |
91 listeners: { | |
92 'neon-animation-finish': '_onNeonAnimationFinish' | |
93 }, | |
94 | |
95 _selectedChanged: function(selected) { | |
96 | |
97 var selectedPage = this.selectedItem; | |
98 var oldPage = this._valueToItem(this._prevSelected) || false; | |
99 this._prevSelected = selected; | |
100 | |
101 // on initial load and if animateInitialSelection is negated, simply displ
ay selectedPage. | |
102 if (!oldPage && !this.animateInitialSelection) { | |
103 this._completeSelectedChanged(); | |
104 return; | |
105 } | |
106 | |
107 // insert safari fix. | |
108 this.animationConfig = [{ | |
109 name: 'opaque-animation', | |
110 node: selectedPage | |
111 }]; | |
112 | |
113 // configure selectedPage animations. | |
114 if (this.entryAnimation) { | |
115 this.animationConfig.push({ | |
116 name: this.entryAnimation, | |
117 node: selectedPage | |
118 }); | |
119 } else { | |
120 if (selectedPage.getAnimationConfig) { | |
121 this.animationConfig.push({ | |
122 animatable: selectedPage, | |
123 type: 'entry' | |
124 }); | |
125 } | |
126 } | |
127 | |
128 // configure oldPage animations iff exists. | |
129 if (oldPage) { | |
130 | |
131 // cancel the currently running animation if one is ongoing. | |
132 if (oldPage.classList.contains('neon-animating')) { | |
133 this._squelchNextFinishEvent = true; | |
134 this.cancelAnimation(); | |
135 this._completeSelectedChanged(); | |
136 } | |
137 | |
138 // configure the animation. | |
139 if (this.exitAnimation) { | |
140 this.animationConfig.push({ | |
141 name: this.exitAnimation, | |
142 node: oldPage | |
143 }); | |
144 } else { | |
145 if (oldPage.getAnimationConfig) { | |
146 this.animationConfig.push({ | |
147 animatable: oldPage, | |
148 type: 'exit' | |
149 }); | |
150 } | |
151 } | |
152 | |
153 // display the oldPage during the transition. | |
154 oldPage.classList.add('neon-animating'); | |
155 } | |
156 | |
157 // display the selectedPage during the transition. | |
158 selectedPage.classList.add('neon-animating'); | |
159 | |
160 // actually run the animations. | |
161 if (this.animationConfig.length > 1) { | |
162 | |
163 // on first load, ensure we run animations only after element is attache
d. | |
164 if (!this.isAttached) { | |
165 this.async(function () { | |
166 this.playAnimation(undefined, { | |
167 fromPage: null, | |
168 toPage: selectedPage | |
169 }); | |
170 }); | |
171 | |
172 } else { | |
173 this.playAnimation(undefined, { | |
174 fromPage: oldPage, | |
175 toPage: selectedPage | |
176 }); | |
177 } | |
178 | |
179 } else { | |
180 this._completeSelectedChanged(oldPage, selectedPage); | |
181 } | |
182 }, | |
183 | |
184 /** | |
185 * @param {Object=} oldPage | |
186 * @param {Object=} selectedPage | |
187 */ | |
188 _completeSelectedChanged: function(oldPage, selectedPage) { | |
189 if (selectedPage) { | |
190 selectedPage.classList.remove('neon-animating'); | |
191 } | |
192 if (oldPage) { | |
193 oldPage.classList.remove('neon-animating'); | |
194 } | |
195 if (!selectedPage || !oldPage) { | |
196 var nodes = Polymer.dom(this.$.content).getDistributedNodes(); | |
197 for (var node, index = 0; node = nodes[index]; index++) { | |
198 node.classList && node.classList.remove('neon-animating'); | |
199 } | |
200 } | |
201 this.async(this._notifyPageResize); | |
202 }, | |
203 | |
204 _onNeonAnimationFinish: function(event) { | |
205 if (this._squelchNextFinishEvent) { | |
206 this._squelchNextFinishEvent = false; | |
207 return; | |
208 } | |
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(); | |
218 } | |
219 | |
220 }) | |
221 | |
222 })(); | |
223 </script> | |
OLD | NEW |