| 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 |