OLD | NEW |
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * Responds to route changes by expanding, collapsing, or scrolling to sections | 6 * Responds to route changes by expanding, collapsing, or scrolling to sections |
7 * on the page. Expanded sections take up the full height of the container. At | 7 * on the page. Expanded sections take up the full height of the container. At |
8 * most one section should be expanded at any given time. | 8 * most one section should be expanded at any given time. |
9 * @polymerBehavior MainPageBehavior | 9 * @polymerBehavior MainPageBehavior |
10 */ | 10 */ |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
51 */ | 51 */ |
52 onNeonAnimationFinish_: function() { | 52 onNeonAnimationFinish_: function() { |
53 this.isSubpageAnimating = false; | 53 this.isSubpageAnimating = false; |
54 }, | 54 }, |
55 | 55 |
56 /** | 56 /** |
57 * @param {!settings.Route} newRoute | 57 * @param {!settings.Route} newRoute |
58 * @param {settings.Route} oldRoute | 58 * @param {settings.Route} oldRoute |
59 */ | 59 */ |
60 currentRouteChanged: function(newRoute, oldRoute) { | 60 currentRouteChanged: function(newRoute, oldRoute) { |
61 var oldRouteWasSection = | 61 var oldRouteWasSection = !!oldRoute && !!oldRoute.parent && |
62 !!oldRoute && !!oldRoute.parent && !!oldRoute.section && | 62 !!oldRoute.section && oldRoute.parent.section != oldRoute.section; |
63 oldRoute.parent.section != oldRoute.section; | |
64 | 63 |
65 if (this.scroller) { | 64 if (this.scroller) { |
66 // When navigating from a section to the root route, we just need to | 65 // When navigating from a section to the root route, we just need to |
67 // scroll to the top, and can early exit afterwards. | 66 // scroll to the top, and can early exit afterwards. |
68 if (oldRouteWasSection && newRoute == settings.Route.BASIC) { | 67 if (oldRouteWasSection && newRoute == settings.Route.BASIC) { |
69 this.scroller.scrollTop = 0; | 68 this.scroller.scrollTop = 0; |
70 return; | 69 return; |
71 } | 70 } |
72 | 71 |
73 // When navigating to the About page, we need to scroll to the top, and | 72 // When navigating to the About page, we need to scroll to the top, and |
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
134 | 133 |
135 // If an animation is already playing, try finishing or canceling it. | 134 // If an animation is already playing, try finishing or canceling it. |
136 if (this.currentAnimation_) { | 135 if (this.currentAnimation_) { |
137 this.maybeStopCurrentAnimation_(); | 136 this.maybeStopCurrentAnimation_(); |
138 // Either way, this function will be called again once the current | 137 // Either way, this function will be called again once the current |
139 // animation ends. | 138 // animation ends. |
140 return; | 139 return; |
141 } | 140 } |
142 | 141 |
143 var promise; | 142 var promise; |
144 var expandedSection = /** @type {?SettingsSectionElement} */( | 143 var expandedSection = /** @type {?SettingsSectionElement} */ ( |
145 this.$$('settings-section.expanded')); | 144 this.$$('settings-section.expanded')); |
146 if (expandedSection) { | 145 if (expandedSection) { |
147 // If the section shouldn't be expanded, collapse it. | 146 // If the section shouldn't be expanded, collapse it. |
148 if (!currentRoute.isSubpage() || expandedSection != currentSection) { | 147 if (!currentRoute.isSubpage() || expandedSection != currentSection) { |
149 promise = this.collapseSection_(expandedSection); | 148 promise = this.collapseSection_(expandedSection); |
150 } else { | 149 } else { |
151 // Scroll to top while sliding to another subpage. | 150 // Scroll to top while sliding to another subpage. |
152 this.scroller.scrollTop = 0; | 151 this.scroller.scrollTop = 0; |
153 } | 152 } |
154 } else if (currentSection) { | 153 } else if (currentSection) { |
(...skipping 28 matching lines...) Expand all Loading... |
183 } | 182 } |
184 }, | 183 }, |
185 | 184 |
186 /** | 185 /** |
187 * If the current animation is inconsistent with the current route, stops the | 186 * If the current animation is inconsistent with the current route, stops the |
188 * animation by finishing or canceling it so the new route can be animated to. | 187 * animation by finishing or canceling it so the new route can be animated to. |
189 * @private | 188 * @private |
190 */ | 189 */ |
191 maybeStopCurrentAnimation_: function() { | 190 maybeStopCurrentAnimation_: function() { |
192 var currentRoute = settings.getCurrentRoute(); | 191 var currentRoute = settings.getCurrentRoute(); |
193 var animatingSection = /** @type {?SettingsSectionElement} */( | 192 var animatingSection = /** @type {?SettingsSectionElement} */ ( |
194 this.$$('settings-section.expanding, settings-section.collapsing')); | 193 this.$$('settings-section.expanding, settings-section.collapsing')); |
195 assert(animatingSection); | 194 assert(animatingSection); |
196 | 195 |
197 if (animatingSection.classList.contains('expanding')) { | 196 if (animatingSection.classList.contains('expanding')) { |
198 // Cancel the animation to go back to the main page if the animating | 197 // Cancel the animation to go back to the main page if the animating |
199 // section shouldn't be expanded. | 198 // section shouldn't be expanded. |
200 if (animatingSection.section != currentRoute.section || | 199 if (animatingSection.section != currentRoute.section || |
201 !currentRoute.isSubpage()) { | 200 !currentRoute.isSubpage()) { |
202 this.currentAnimation_.cancel(); | 201 this.currentAnimation_.cancel(); |
203 } | 202 } |
(...skipping 129 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
333 | 332 |
334 // Scroll to the new section or the original position. | 333 // Scroll to the new section or the original position. |
335 if (newSection && !settings.lastRouteChangeWasPopstate() && | 334 if (newSection && !settings.lastRouteChangeWasPopstate() && |
336 !settings.getCurrentRoute().isSubpage()) { | 335 !settings.getCurrentRoute().isSubpage()) { |
337 newSection.scrollIntoView(); | 336 newSection.scrollIntoView(); |
338 } else { | 337 } else { |
339 this.scroller.scrollTop = this.origScrollTop_; | 338 this.scroller.scrollTop = this.origScrollTop_; |
340 } | 339 } |
341 | 340 |
342 this.currentAnimation_ = section.animateCollapse( | 341 this.currentAnimation_ = section.animateCollapse( |
343 /** @type {!HTMLElement} */(this.scroller)); | 342 /** @type {!HTMLElement} */ (this.scroller)); |
344 | 343 |
345 this.currentAnimation_.finished.catch(function() { | 344 this.currentAnimation_.finished |
346 // The collapse was canceled, so the page is showing a subpage still. | 345 .catch(function() { |
347 this.fire('subpage-expand'); | 346 // The collapse was canceled, so the page is showing a subpage |
348 }.bind(this)).then(function() { | 347 // still. |
349 // Clean up after the animation succeeds or cancels. | 348 this.fire('subpage-expand'); |
350 section.setFrozen(false); | 349 }.bind(this)) |
351 section.classList.remove('collapsing'); | 350 .then(function() { |
352 this.fire('freeze-scroll', false); | 351 // Clean up after the animation succeeds or cancels. |
353 this.currentAnimation_ = null; | 352 section.setFrozen(false); |
354 resolve(); | 353 section.classList.remove('collapsing'); |
355 }.bind(this)); | 354 this.fire('freeze-scroll', false); |
| 355 this.currentAnimation_ = null; |
| 356 resolve(); |
| 357 }.bind(this)); |
356 }.bind(this)); | 358 }.bind(this)); |
357 }.bind(this)); | 359 }.bind(this)); |
358 }, | 360 }, |
359 | 361 |
360 /** | 362 /** |
361 /** | 363 /** |
362 * Hides or unhides the sections not being expanded. | 364 * Hides or unhides the sections not being expanded. |
363 * @param {string} sectionName The section to keep visible. | 365 * @param {string} sectionName The section to keep visible. |
364 * @param {boolean} hidden Whether the sections should be hidden. | 366 * @param {boolean} hidden Whether the sections should be hidden. |
365 * @private | 367 * @private |
366 */ | 368 */ |
367 toggleOtherSectionsHidden_: function(sectionName, hidden) { | 369 toggleOtherSectionsHidden_: function(sectionName, hidden) { |
368 var sections = Polymer.dom(this.root).querySelectorAll( | 370 var sections = Polymer.dom(this.root).querySelectorAll('settings-section'); |
369 'settings-section'); | |
370 for (var i = 0; i < sections.length; i++) | 371 for (var i = 0; i < sections.length; i++) |
371 sections[i].hidden = hidden && (sections[i].section != sectionName); | 372 sections[i].hidden = hidden && (sections[i].section != sectionName); |
372 }, | 373 }, |
373 | 374 |
374 /** | 375 /** |
375 * Helper function to get a section from the local DOM. | 376 * Helper function to get a section from the local DOM. |
376 * @param {string} section Section name of the element to get. | 377 * @param {string} section Section name of the element to get. |
377 * @return {?SettingsSectionElement} | 378 * @return {?SettingsSectionElement} |
378 */ | 379 */ |
379 getSection: function(section) { | 380 getSection: function(section) { |
380 if (!section) | 381 if (!section) |
381 return null; | 382 return null; |
382 return /** @type {?SettingsSectionElement} */( | 383 return /** @type {?SettingsSectionElement} */ ( |
383 this.$$('settings-section[section="' + section + '"]')); | 384 this.$$('settings-section[section="' + section + '"]')); |
384 }, | 385 }, |
385 }; | 386 }; |
386 | 387 |
387 /** @polymerBehavior */ | 388 /** @polymerBehavior */ |
388 var MainPageBehavior = [ | 389 var MainPageBehavior = [ |
389 settings.RouteObserverBehavior, | 390 settings.RouteObserverBehavior, |
390 MainPageBehaviorImpl, | 391 MainPageBehaviorImpl, |
391 ]; | 392 ]; |
OLD | NEW |