| 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 properties: { | 12 properties: { |
| 13 /** | 13 /** |
| 14 * Help CSS to alter style during the horizontal swipe animation. | 14 * Help CSS to alter style during the horizontal swipe animation. |
| 15 * Note that this is unrelated to the |currentAnimation_| (which refers to | 15 * Note that this is unrelated to the |currentAnimation_| (which refers to |
| 16 * the vertical exapand animation). | 16 * the vertical expand animation). |
| 17 */ | 17 */ |
| 18 isSubpageAnimating: { | 18 isSubpageAnimating: { |
| 19 reflectToAttribute: true, | 19 reflectToAttribute: true, |
| 20 type: Boolean, | 20 type: Boolean, |
| 21 }, | 21 }, |
| 22 | 22 |
| 23 /** | 23 /** |
| 24 * Whether a search operation is in progress or previous search results are | 24 * Whether a search operation is in progress or previous search results are |
| 25 * being displayed. | 25 * being displayed. |
| 26 * @private {boolean} | 26 * @private {boolean} |
| 27 */ | 27 */ |
| 28 inSearchMode: { | 28 inSearchMode: { |
| 29 type: Boolean, | 29 type: Boolean, |
| 30 value: false, | 30 value: false, |
| 31 observer: 'inSearchModeChanged_', | 31 observer: 'inSearchModeChanged_', |
| 32 }, | 32 }, |
| 33 }, | 33 }, |
| 34 | 34 |
| 35 /** @type {?HTMLElement} The scrolling container. */ | 35 /** @type {?HTMLElement} The scrolling container. */ |
| 36 scroller: null, | 36 scroller: null, |
| 37 | 37 |
| 38 listeners: { | 38 listeners: {'neon-animation-finish': 'onNeonAnimationFinish_'}, |
| 39 'neon-animation-finish': 'onNeonAnimationFinish_' | |
| 40 }, | |
| 41 | 39 |
| 42 /** @override */ | 40 /** @override */ |
| 43 attached: function() { | 41 attached: function() { |
| 44 this.scroller = this.domHost ? this.domHost.parentNode : document.body; | 42 this.scroller = this.domHost ? this.domHost.parentNode : document.body; |
| 45 }, | 43 }, |
| 46 | 44 |
| 47 /** | 45 /** |
| 48 * Remove the is-animating attribute once the animation is complete. | 46 * Remove the is-animating attribute once the animation is complete. |
| 49 * This may catch animations finishing more often than needed, which is not | 47 * This may catch animations finishing more often than needed, which is not |
| 50 * known to cause any issues (e.g. when animating from a shallower page to a | 48 * known to cause any issues (e.g. when animating from a shallower page to a |
| (...skipping 23 matching lines...) Expand all Loading... |
| 74 | 72 |
| 75 // When navigating to the About page, we need to scroll to the top, and | 73 // When navigating to the About page, we need to scroll to the top, and |
| 76 // still do the rest of section management. | 74 // still do the rest of section management. |
| 77 if (newRoute == settings.Route.ABOUT) | 75 if (newRoute == settings.Route.ABOUT) |
| 78 this.scroller.scrollTop = 0; | 76 this.scroller.scrollTop = 0; |
| 79 } | 77 } |
| 80 | 78 |
| 81 // Scroll to the section except for back/forward. Also scroll for any | 79 // Scroll to the section except for back/forward. Also scroll for any |
| 82 // in-page back/forward navigations (from a section or the root page). | 80 // in-page back/forward navigations (from a section or the root page). |
| 83 // Also always scroll when coming from either the About or root page. | 81 // Also always scroll when coming from either the About or root page. |
| 84 var scrollToSection = !settings.lastRouteChangeWasPopstate() || | 82 var scrollToSection = !settings.wasLastRouteChangePopstate() || |
| 85 oldRouteWasSection || oldRoute == settings.Route.BASIC || | 83 oldRouteWasSection || oldRoute == settings.Route.BASIC || |
| 86 oldRoute == settings.Route.ABOUT; | 84 oldRoute == settings.Route.ABOUT; |
| 87 | 85 |
| 88 // TODO(dschuyler): This doesn't set the flag in the case of going to or | 86 // TODO(dschuyler): This doesn't set the flag in the case of going to or |
| 89 // from the main page. It seems sensible to set the flag in those cases, | 87 // from the main page. It seems sensible to set the flag in those cases, |
| 90 // unfortunately bug 708465 happens. Figure out why that is and then set | 88 // unfortunately bug 708465 happens. Figure out why that is and then set |
| 91 // this flag more broadly. | 89 // this flag more broadly. |
| 92 if (oldRoute && oldRoute.isSubpage() && newRoute.isSubpage()) | 90 if (oldRoute && oldRoute.isSubpage() && newRoute.isSubpage()) |
| 93 this.isSubpageAnimating = true; | 91 this.isSubpageAnimating = true; |
| 94 | 92 |
| 95 // For previously uncreated pages (including on first load), allow the page | 93 // For previously uncreated pages (including on first load), allow the page |
| 96 // to render before scrolling to or expanding the section. | 94 // to render before scrolling to or expanding the section. |
| 97 if (!oldRoute || this.scrollHeight == 0) | 95 if (!oldRoute || this.scrollHeight == 0) |
| 98 setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection)); | 96 setTimeout(this.tryTransitionToSection_.bind(this, scrollToSection)); |
| 99 else | 97 else |
| 100 this.tryTransitionToSection_(scrollToSection); | 98 this.tryTransitionToSection_(scrollToSection); |
| 101 }, | 99 }, |
| 102 | 100 |
| 103 /** | 101 /** |
| 104 * When exiting search mode, we need to make another attempt to scroll to | 102 * When exiting search mode, we need to make another attempt to scroll to |
| 105 * the correct section, since it has just been re-rendered. | 103 * the correct section, since it has just been re-rendered. |
| 106 * @private | 104 * @private |
| 107 */ | 105 */ |
| 108 inSearchModeChanged_: function(inSearchMode) { | 106 inSearchModeChanged_: function(inSearchMode) { |
| 109 if (!this.isAttached) | 107 if (!this.isAttached) |
| 110 return; | 108 return; |
| 111 | 109 |
| 112 if (!inSearchMode) | 110 if (!inSearchMode) |
| 113 this.tryTransitionToSection_(!settings.lastRouteChangeWasPopstate()); | 111 this.tryTransitionToSection_(!settings.wasLastRouteChangePopstate()); |
| 114 }, | 112 }, |
| 115 | 113 |
| 116 /** | 114 /** |
| 117 * If possible, transitions to the current route's section (by expanding or | 115 * If possible, transitions to the current route's section (by expanding or |
| 118 * scrolling to it). If another transition is running, finishes or cancels | 116 * scrolling to it). If another transition is running, finishes or cancels |
| 119 * that one, then schedules this function again. This ensures the current | 117 * that one, then schedules this function again. This ensures the current |
| 120 * section is quickly shown, without getting the page into a broken state -- | 118 * section is quickly shown, without getting the page into a broken state -- |
| 121 * if currentRoute changes in between calls, just transition to the new route. | 119 * if currentRoute changes in between calls, just transition to the new route. |
| 122 * @param {boolean} scrollToSection | 120 * @param {boolean} scrollToSection |
| 123 * @private | 121 * @private |
| (...skipping 168 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 292 } | 290 } |
| 293 | 291 |
| 294 // Play the actual collapse animation. | 292 // Play the actual collapse animation. |
| 295 return new Promise(function(resolve, reject) { | 293 return new Promise(function(resolve, reject) { |
| 296 // Wait for the other sections to show up so we can scroll properly. | 294 // Wait for the other sections to show up so we can scroll properly. |
| 297 setTimeout(function() { | 295 setTimeout(function() { |
| 298 var newSection = settings.getCurrentRoute().section && | 296 var newSection = settings.getCurrentRoute().section && |
| 299 this.getSection(settings.getCurrentRoute().section); | 297 this.getSection(settings.getCurrentRoute().section); |
| 300 | 298 |
| 301 // Scroll to the new section or the original position. | 299 // Scroll to the new section or the original position. |
| 302 if (newSection && !settings.lastRouteChangeWasPopstate() && | 300 if (newSection && !settings.wasLastRouteChangePopstate() && |
| 303 !settings.getCurrentRoute().isSubpage()) { | 301 !settings.getCurrentRoute().isSubpage()) { |
| 304 newSection.scrollIntoView(); | 302 newSection.scrollIntoView(); |
| 305 } else { | 303 } else { |
| 306 this.scroller.scrollTop = this.origScrollTop_; | 304 this.scroller.scrollTop = this.origScrollTop_; |
| 307 } | 305 } |
| 308 | 306 |
| 309 this.currentAnimation_ = section.animateCollapse( | 307 this.currentAnimation_ = section.animateCollapse( |
| 310 /** @type {!HTMLElement} */(this.scroller)); | 308 /** @type {!HTMLElement} */(this.scroller)); |
| 311 | 309 |
| 312 this.currentAnimation_.finished.catch(function() { | 310 this.currentAnimation_.finished.catch(function() { |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 349 return /** @type {?SettingsSectionElement} */( | 347 return /** @type {?SettingsSectionElement} */( |
| 350 this.$$('settings-section[section="' + section + '"]')); | 348 this.$$('settings-section[section="' + section + '"]')); |
| 351 }, | 349 }, |
| 352 }; | 350 }; |
| 353 | 351 |
| 354 /** @polymerBehavior */ | 352 /** @polymerBehavior */ |
| 355 var MainPageBehavior = [ | 353 var MainPageBehavior = [ |
| 356 settings.RouteObserverBehavior, | 354 settings.RouteObserverBehavior, |
| 357 MainPageBehaviorImpl, | 355 MainPageBehaviorImpl, |
| 358 ]; | 356 ]; |
| OLD | NEW |