| 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 */ |
| 11 var MainPageBehaviorImpl = { | 11 var MainPageBehaviorImpl = { |
| 12 /** @type {?HTMLElement} The scrolling container. */ | 12 /** @type {?HTMLElement} The scrolling container. */ |
| 13 scroller: null, | 13 scroller: null, |
| 14 | 14 |
| 15 /** @override */ | 15 /** @override */ |
| 16 attached: function() { | 16 attached: function() { |
| 17 if (this.domHost && this.domHost.parentNode.tagName == 'PAPER-HEADER-PANEL') | 17 if (this.domHost && this.domHost.parentNode.tagName == 'PAPER-HEADER-PANEL') |
| 18 this.scroller = this.domHost.parentNode.scroller; | 18 this.scroller = this.domHost.parentNode.scroller; |
| 19 else | 19 else |
| 20 this.scroller = document.body; // Used in unit tests. | 20 this.scroller = document.body; // Used in unit tests. |
| 21 }, | 21 }, |
| 22 | 22 |
| 23 /** | 23 /** |
| 24 * @param {!settings.Route} newRoute | 24 * @param {!settings.Route} newRoute |
| 25 * @param {settings.Route} oldRoute | 25 * @param {settings.Route} oldRoute |
| 26 */ | 26 */ |
| 27 currentRouteChanged: function(newRoute, oldRoute) { | 27 currentRouteChanged: function(newRoute, oldRoute) { |
| 28 // Scroll to the section except for back/forward. Also scroll for any |
| 29 // back/forward navigations that are in-page. |
| 30 var oldRouteWasSection = |
| 31 !!oldRoute && !!oldRoute.parent && !!oldRoute.section && |
| 32 oldRoute.parent.section != oldRoute.section; |
| 33 var scrollToSection = |
| 34 !settings.lastRouteChangeWasPopstate() || oldRouteWasSection; |
| 35 |
| 28 // If this is the first route, or the page was hidden, allow the page to | 36 // If this is the first route, or the page was hidden, allow the page to |
| 29 // render before expanding the section. | 37 // render before expanding the section. |
| 30 if (!oldRoute && newRoute.contains(settings.getCurrentRoute()) || | 38 if (!oldRoute && newRoute.contains(settings.getCurrentRoute()) || |
| 31 this.scrollHeight == 0) { | 39 this.scrollHeight == 0) { |
| 32 setTimeout(this.tryTransitionToSection_.bind(this)); | 40 setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection)); |
| 33 } else { | 41 } else { |
| 34 this.tryTransitionToSection_(); | 42 this.tryTransitionToSection_(scrollToSection); |
| 35 } | 43 } |
| 36 }, | 44 }, |
| 37 | 45 |
| 38 /** | 46 /** |
| 39 * If possible, transitions to the current route's section (by expanding or | 47 * If possible, transitions to the current route's section (by expanding or |
| 40 * scrolling to it). If another transition is running, finishes or cancels | 48 * scrolling to it). If another transition is running, finishes or cancels |
| 41 * that one, then schedules this function again. This ensures the current | 49 * that one, then schedules this function again. This ensures the current |
| 42 * section is quickly shown, without getting the page into a broken state -- | 50 * section is quickly shown, without getting the page into a broken state -- |
| 43 * if currentRoute changes in between calls, just transition to the new route. | 51 * if currentRoute changes in between calls, just transition to the new route. |
| 52 * @param {boolean} scrollToSection |
| 44 * @private | 53 * @private |
| 45 */ | 54 */ |
| 46 tryTransitionToSection_: function() { | 55 tryTransitionToSection_: function(scrollToSection) { |
| 47 var currentRoute = settings.getCurrentRoute(); | 56 var currentRoute = settings.getCurrentRoute(); |
| 48 var currentSection = this.getSection(currentRoute.section); | 57 var currentSection = this.getSection(currentRoute.section); |
| 49 | 58 |
| 50 // If an animation is already playing, try finishing or canceling it. | 59 // If an animation is already playing, try finishing or canceling it. |
| 51 if (this.currentAnimation_) { | 60 if (this.currentAnimation_) { |
| 52 this.maybeStopCurrentAnimation_(); | 61 this.maybeStopCurrentAnimation_(); |
| 53 // Either way, this function will be called again once the current | 62 // Either way, this function will be called again once the current |
| 54 // animation ends. | 63 // animation ends. |
| 55 return; | 64 return; |
| 56 } | 65 } |
| 57 | 66 |
| 58 var promise; | 67 var promise; |
| 59 var expandedSection = /** @type {?SettingsSectionElement} */( | 68 var expandedSection = /** @type {?SettingsSectionElement} */( |
| 60 this.$$('settings-section.expanded')); | 69 this.$$('settings-section.expanded')); |
| 61 if (expandedSection) { | 70 if (expandedSection) { |
| 62 // If the section shouldn't be expanded, collapse it. | 71 // If the section shouldn't be expanded, collapse it. |
| 63 if (!currentRoute.isSubpage() || expandedSection != currentSection) { | 72 if (!currentRoute.isSubpage() || expandedSection != currentSection) { |
| 64 promise = this.collapseSection_(expandedSection); | 73 promise = this.collapseSection_(expandedSection); |
| 65 // Scroll to the collapsed section. | 74 // Scroll to the collapsed section. |
| 66 if (currentSection && !settings.lastRouteChangeWasPopstate()) | 75 if (currentSection && scrollToSection) |
| 67 currentSection.scrollIntoView(); | 76 currentSection.scrollIntoView(); |
| 68 } else { | 77 } else { |
| 69 // Scroll to top while sliding to another subpage. | 78 // Scroll to top while sliding to another subpage. |
| 70 this.scroller.scrollTop = 0; | 79 this.scroller.scrollTop = 0; |
| 71 } | 80 } |
| 72 } else if (currentSection) { | 81 } else if (currentSection) { |
| 73 // Expand the section into a subpage or scroll to it on the main page. | 82 // Expand the section into a subpage or scroll to it on the main page. |
| 74 if (currentRoute.isSubpage()) | 83 if (currentRoute.isSubpage()) |
| 75 promise = this.expandSection_(currentSection); | 84 promise = this.expandSection_(currentSection); |
| 76 else if (!settings.lastRouteChangeWasPopstate()) | 85 else if (scrollToSection) |
| 77 currentSection.scrollIntoView(); | 86 currentSection.scrollIntoView(); |
| 78 } | 87 } |
| 79 | 88 |
| 80 // When this animation ends, another may be necessary. Call this function | 89 // When this animation ends, another may be necessary. Call this function |
| 81 // again after the promise resolves. | 90 // again after the promise resolves. |
| 82 if (promise) | 91 if (promise) |
| 83 promise.then(this.tryTransitionToSection_.bind(this)); | 92 promise.then(this.tryTransitionToSection_.bind(this, scrollToSection)); |
| 84 }, | 93 }, |
| 85 | 94 |
| 86 /** | 95 /** |
| 87 * If the current animation is inconsistent with the current route, stops the | 96 * If the current animation is inconsistent with the current route, stops the |
| 88 * animation by finishing or canceling it so the new route can be animated to. | 97 * animation by finishing or canceling it so the new route can be animated to. |
| 89 * @private | 98 * @private |
| 90 */ | 99 */ |
| 91 maybeStopCurrentAnimation_: function() { | 100 maybeStopCurrentAnimation_: function() { |
| 92 var currentRoute = settings.getCurrentRoute(); | 101 var currentRoute = settings.getCurrentRoute(); |
| 93 var animatingSection = /** @type {?SettingsSectionElement} */( | 102 var animatingSection = /** @type {?SettingsSectionElement} */( |
| (...skipping 165 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 259 return /** @type {?SettingsSectionElement} */( | 268 return /** @type {?SettingsSectionElement} */( |
| 260 this.$$('settings-section[section="' + section + '"]')); | 269 this.$$('settings-section[section="' + section + '"]')); |
| 261 }, | 270 }, |
| 262 }; | 271 }; |
| 263 | 272 |
| 264 /** @polymerBehavior */ | 273 /** @polymerBehavior */ |
| 265 var MainPageBehavior = [ | 274 var MainPageBehavior = [ |
| 266 settings.RouteObserverBehavior, | 275 settings.RouteObserverBehavior, |
| 267 MainPageBehaviorImpl, | 276 MainPageBehaviorImpl, |
| 268 ]; | 277 ]; |
| OLD | NEW |