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

Side by Side Diff: chrome/browser/resources/settings/settings_page/main_page_behavior.js

Issue 2504483002: MD Settings: Fix popstate behavior from section route to section route. (Closed)
Patch Set: fix closure compile Created 4 years, 1 month 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
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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 ];
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698