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

Side by Side Diff: chrome/browser/resources/settings/route.js

Issue 2297663008: MD Settings: Prevent unexpected scrolling to section on popstates. (Closed)
Patch Set: Created 4 years, 3 months 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
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 cr.define('settings', function() { 5 cr.define('settings', function() {
6 /** 6 /**
7 * Class for navigable routes. May only be instantiated within this file. 7 * Class for navigable routes. May only be instantiated within this file.
8 * @constructor 8 * @constructor
9 * @param {string} path 9 * @param {string} path
10 * @private 10 * @private
(...skipping 259 matching lines...) Expand 10 before | Expand all | Expand 10 after
270 currentQueryParameters_ = new URLSearchParams(window.location.search); 270 currentQueryParameters_ = new URLSearchParams(window.location.search);
271 } else { 271 } else {
272 window.history.replaceState(undefined, '', Route.BASIC.path); 272 window.history.replaceState(undefined, '', Route.BASIC.path);
273 } 273 }
274 }; 274 };
275 275
276 /** 276 /**
277 * Helper function to set the current route and notify all observers. 277 * Helper function to set the current route and notify all observers.
278 * @param {!settings.Route} route 278 * @param {!settings.Route} route
279 * @param {!URLSearchParams} queryParameters 279 * @param {!URLSearchParams} queryParameters
280 * @param {boolean} isPopstate
280 */ 281 */
281 var setCurrentRoute = function(route, queryParameters) { 282 var setCurrentRoute = function(route, queryParameters, isPopstate) {
282 var oldRoute = currentRoute_; 283 var oldRoute = currentRoute_;
283 currentRoute_ = route; 284 currentRoute_ = route;
284 currentQueryParameters_ = queryParameters; 285 currentQueryParameters_ = queryParameters;
285 for (var observer of routeObservers_) 286 for (var observer of routeObservers_)
286 observer.currentRouteChanged(currentRoute_, oldRoute); 287 observer.currentRouteChanged(currentRoute_, oldRoute, isPopstate);
287 }; 288 };
288 289
289 /** @return {!settings.Route} */ 290 /** @return {!settings.Route} */
290 var getCurrentRoute = function() { return currentRoute_; }; 291 var getCurrentRoute = function() { return currentRoute_; };
291 292
292 /** @return {!URLSearchParams} */ 293 /** @return {!URLSearchParams} */
293 var getQueryParameters = function() { 294 var getQueryParameters = function() {
294 return new URLSearchParams(currentQueryParameters_); // Defensive copy. 295 return new URLSearchParams(currentQueryParameters_); // Defensive copy.
295 }; 296 };
296 297
297 /** 298 /**
298 * Navigates to a canonical route and pushes a new history entry. 299 * Navigates to a canonical route and pushes a new history entry.
299 * @param {!settings.Route} route 300 * @param {!settings.Route} route
300 * @param {URLSearchParams=} opt_dynamicParameters Navigations to the same 301 * @param {URLSearchParams=} opt_dynamicParameters Navigations to the same
301 * search parameters in a different order will still push to history. 302 * search parameters in a different order will still push to history.
302 */ 303 */
303 var navigateTo = function(route, opt_dynamicParameters) { 304 var navigateTo = function(route, opt_dynamicParameters) {
304 var params = opt_dynamicParameters || new URLSearchParams(); 305 var params = opt_dynamicParameters || new URLSearchParams();
305 306
306 var url = route.path; 307 var url = route.path;
307 if (opt_dynamicParameters) { 308 if (opt_dynamicParameters) {
308 var queryString = opt_dynamicParameters.toString(); 309 var queryString = opt_dynamicParameters.toString();
309 if (queryString) 310 if (queryString)
310 url += '?' + queryString; 311 url += '?' + queryString;
311 } 312 }
312 313
313 // History serializes the state, so we don't push the actual route object. 314 // History serializes the state, so we don't push the actual route object.
314 window.history.pushState(currentRoute_.path, '', url); 315 window.history.pushState(currentRoute_.path, '', url);
315 setCurrentRoute(route, params); 316 setCurrentRoute(route, params, false);
316 }; 317 };
317 318
318 /** 319 /**
319 * Navigates to the previous route if it has an equal or lesser depth. 320 * Navigates to the previous route if it has an equal or lesser depth.
320 * If there is no previous route in history meeting those requirements, 321 * If there is no previous route in history meeting those requirements,
321 * this navigates to the immediate parent. This will never exit Settings. 322 * this navigates to the immediate parent. This will never exit Settings.
322 */ 323 */
323 var navigateToPreviousRoute = function() { 324 var navigateToPreviousRoute = function() {
324 var previousRoute = 325 var previousRoute =
325 window.history.state && 326 window.history.state &&
326 assert(getRouteForPath(/** @type {string} */ (window.history.state))); 327 assert(getRouteForPath(/** @type {string} */ (window.history.state)));
327 328
328 if (previousRoute && previousRoute.depth <= currentRoute_.depth) 329 if (previousRoute && previousRoute.depth <= currentRoute_.depth)
329 window.history.back(); 330 window.history.back();
330 else 331 else
331 navigateTo(currentRoute_.parent || Route.BASIC); 332 navigateTo(currentRoute_.parent || Route.BASIC);
332 }; 333 };
333 334
334 window.addEventListener('popstate', function(event) { 335 window.addEventListener('popstate', function(event) {
335 // On pop state, do not push the state onto the window.history again. 336 // On pop state, do not push the state onto the window.history again.
336 setCurrentRoute(getRouteForPath(window.location.pathname) || Route.BASIC, 337 setCurrentRoute(getRouteForPath(window.location.pathname) || Route.BASIC,
337 new URLSearchParams(window.location.search)); 338 new URLSearchParams(window.location.search), true);
338 }); 339 });
339 340
340 return { 341 return {
341 Route: Route, 342 Route: Route,
342 RouteObserverBehavior: RouteObserverBehavior, 343 RouteObserverBehavior: RouteObserverBehavior,
343 getRouteForPath: getRouteForPath, 344 getRouteForPath: getRouteForPath,
344 initializeRouteFromUrl: initializeRouteFromUrl, 345 initializeRouteFromUrl: initializeRouteFromUrl,
345 getCurrentRoute: getCurrentRoute, 346 getCurrentRoute: getCurrentRoute,
346 getQueryParameters: getQueryParameters, 347 getQueryParameters: getQueryParameters,
347 navigateTo: navigateTo, 348 navigateTo: navigateTo,
348 navigateToPreviousRoute: navigateToPreviousRoute, 349 navigateToPreviousRoute: navigateToPreviousRoute,
349 }; 350 };
350 }); 351 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698