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

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

Issue 1221923003: Update bower.json for Polymer elements and add PRESUBMIT.py (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 5 years, 5 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
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
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
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698