Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(349)

Side by Side Diff: third_party/polymer/v1_0/components/neon-animation/neon-animated-pages.html

Issue 1269803005: Remove third_party/polymer from .gitignore (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698