diff options
author | Allan Sandfeld Jensen <allan.jensen@qt.io> | 2020-01-23 17:21:03 +0100 |
---|---|---|
committer | Allan Sandfeld Jensen <allan.jensen@qt.io> | 2020-01-23 16:25:15 +0000 |
commit | c551f43206405019121bd2b2c93714319a0a3300 (patch) | |
tree | 1f48c30631c421fd4bbb3c36da20183c8a2ed7d7 /chromium/chrome/browser/resources/welcome/navigation_behavior.js | |
parent | 7961cea6d1041e3e454dae6a1da660b453efd238 (diff) |
BASELINE: Update Chromium to 79.0.3945.139
Change-Id: I336b7182fab9bca80b709682489c07db112eaca5
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>
Diffstat (limited to 'chromium/chrome/browser/resources/welcome/navigation_behavior.js')
-rw-r--r-- | chromium/chrome/browser/resources/welcome/navigation_behavior.js | 316 |
1 files changed, 154 insertions, 162 deletions
diff --git a/chromium/chrome/browser/resources/welcome/navigation_behavior.js b/chromium/chrome/browser/resources/welcome/navigation_behavior.js index 5e10ba646d0..c2c9445216d 100644 --- a/chromium/chrome/browser/resources/welcome/navigation_behavior.js +++ b/chromium/chrome/browser/resources/welcome/navigation_behavior.js @@ -2,6 +2,9 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. +import {assert} from 'chrome://resources/js/assert.m.js'; +import {afterNextRender} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + /** * @fileoverview The NavigationBehavior is in charge of manipulating and * watching window.history.state changes. The page is using the history @@ -12,183 +15,172 @@ * or popping history state without actually changing the path. */ -cr.define('welcome', function() { - 'use strict'; +/** + * Valid route pathnames. + * @enum {string} + */ +export const Routes = { + LANDING: 'landing', + NEW_USER: 'new-user', + RETURNING_USER: 'returning-user', +}; - /** - * Valid route pathnames. - * @enum {string} - */ - const Routes = { - LANDING: 'landing', - NEW_USER: 'new-user', - RETURNING_USER: 'returning-user', - }; +/** + * Regular expression that captures the leading slash, the content and the + * trailing slash in three different groups. + * @const {!RegExp} + */ +const CANONICAL_PATH_REGEX = /(^\/)([\/-\w]+)(\/$)/; +const path = location.pathname.replace(CANONICAL_PATH_REGEX, '$1$2'); + +// Sets up history state based on the url path, unless it's already set (e.g. +// when user uses browser-back button to get back on chrome://welcome/...). +if (!history.state || !history.state.route || !history.state.step) { + switch (path) { + case `/${Routes.NEW_USER}`: + history.replaceState({route: Routes.NEW_USER, step: 1}, '', path); + break; + case `/${Routes.RETURNING_USER}`: + history.replaceState({route: Routes.RETURNING_USER, step: 1}, '', path); + break; + default: + history.replaceState( + {route: Routes.LANDING, step: Routes.LANDING}, '', '/'); + } +} - /** - * Regular expression that captures the leading slash, the content and the - * trailing slash in three different groups. - * @const {!RegExp} - */ - const CANONICAL_PATH_REGEX = /(^\/)([\/-\w]+)(\/$)/; - const path = location.pathname.replace(CANONICAL_PATH_REGEX, '$1$2'); - - // Sets up history state based on the url path, unless it's already set (e.g. - // when user uses browser-back button to get back on chrome://welcome/...). - if (!history.state || !history.state.route || !history.state.step) { - switch (path) { - case `/${Routes.NEW_USER}`: - history.replaceState({route: Routes.NEW_USER, step: 1}, '', path); - break; - case `/${Routes.RETURNING_USER}`: - history.replaceState({route: Routes.RETURNING_USER, step: 1}, '', path); - break; - default: - history.replaceState( - {route: Routes.LANDING, step: Routes.LANDING}, '', '/'); +/** @type {!Set<!PolymerElement>} */ +const routeObservers = new Set(); + +/** @type {?PolymerElement} */ +let currentRouteElement; + +// Notifies all the elements that extended NavigationBehavior. +function notifyObservers() { + if (currentRouteElement) { + (/** @type {{onRouteExit: Function}} */ (currentRouteElement)) + .onRouteExit(); + currentRouteElement = null; + } + + const route = /** @type {!Routes} */ (history.state.route); + const step = history.state.step; + routeObservers.forEach(observer => { + (/** @type {{onRouteChange: Function}} */ (observer)) + .onRouteChange(route, step); + + // Modules are only attached to DOM if they're for the current route, so + // as long as the id of an element matches up to the current step, it + // means that element is for the current route. + if (observer.id == `step-${step}`) { + currentRouteElement = observer; } + }); + + // If currentRouteElement is not null, it means there was a new route. + if (currentRouteElement) { + (/** @type {{onRouteEnter: Function}} */ (currentRouteElement)) + .onRouteEnter(); + (/** @type {{updateFocusForA11y: Function}} */ (currentRouteElement)) + .updateFocusForA11y(); + } +} + +// Notifies all elements when browser history is popped. +window.addEventListener('popstate', notifyObservers); + +// Notify the active element before unload. +window.addEventListener('beforeunload', () => { + if (currentRouteElement) { + (/** @type {{onRouteUnload: Function}} */ (currentRouteElement)) + .onRouteUnload(); } +}); - /** @type {!Set<!PolymerElement>} */ - const routeObservers = new Set(); +export function navigateToNextStep() { + history.pushState( + { + route: history.state.route, + step: history.state.step + 1, + }, + '', `/${history.state.route}`); + notifyObservers(); +} - /** @type {?PolymerElement} */ - let currentRouteElement; +/** + * @param {!Routes} route + * @param {number} step + */ +export function navigateTo(route, step) { + assert([ + Routes.LANDING, + Routes.NEW_USER, + Routes.RETURNING_USER, + ].includes(route)); + + history.pushState( + { + route: route, + step: step, + }, + '', '/' + (route === Routes.LANDING ? '' : route)); + notifyObservers(); +} - // Notifies all the elements that extended NavigationBehavior. - function notifyObservers() { - if (currentRouteElement) { - (/** @type {{onRouteExit: Function}} */ (currentRouteElement)) - .onRouteExit(); - currentRouteElement = null; - } +/** + * Elements can override onRoute(Change|Enter|Exit) to handle route changes. + * Order of hooks being called: + * 1) onRouteExit() on the old route + * 2) onRouteChange() on all subscribed routes + * 3) onRouteEnter() on the new route + * + * @polymerBehavior + */ +export const NavigationBehavior = { + /** @override */ + attached: function() { + assert(!routeObservers.has(this)); + routeObservers.add(this); - const route = /** @type {!welcome.Routes} */ (history.state.route); + const route = /** @type {!Routes} */ (history.state.route); const step = history.state.step; - routeObservers.forEach(observer => { - (/** @type {{onRouteChange: Function}} */ (observer)) - .onRouteChange(route, step); - - // Modules are only attached to DOM if they're for the current route, so - // as long as the id of an element matches up to the current step, it - // means that element is for the current route. - if (observer.id == `step-${step}`) { - currentRouteElement = observer; - } - }); - - // If currentRouteElement is not null, it means there was a new route. - if (currentRouteElement) { - (/** @type {{onRouteEnter: Function}} */ (currentRouteElement)) - .onRouteEnter(); - (/** @type {{updateFocusForA11y: Function}} */ (currentRouteElement)) - .updateFocusForA11y(); - } - } - // Notifies all elements when browser history is popped. - window.addEventListener('popstate', notifyObservers); + // history state was set when page loaded, so when the element first + // attaches, call the route-change handler to initialize first. + this.onRouteChange(route, step); + + // Modules are only attached to DOM if they're for the current route, so + // as long as the id of an element matches up to the current step, it + // means that element is for the current route. + if (this.id == `step-${step}`) { + currentRouteElement = this; + this.onRouteEnter(); + this.updateFocusForA11y(); + } + }, - // Notify the active element before unload. - window.addEventListener('beforeunload', () => { - if (currentRouteElement) { - (/** @type {{onRouteUnload: Function}} */ (currentRouteElement)) - .onRouteUnload(); + /** Called to update focus when progressing through the modules. */ + updateFocusForA11y: function() { + const header = this.$$('h1'); + if (header) { + afterNextRender(this, () => header.focus()); } - }); + }, - function navigateToNextStep() { - history.pushState( - { - route: history.state.route, - step: history.state.step + 1, - }, - '', `/${history.state.route}`); - notifyObservers(); - } + /** @override */ + detached: function() { + assert(routeObservers.delete(this)); + }, /** - * @param {!welcome.Routes} route + * @param {!Routes} route * @param {number} step */ - function navigateTo(route, step) { - assert([ - Routes.LANDING, - Routes.NEW_USER, - Routes.RETURNING_USER, - ].includes(route)); - - history.pushState( - { - route: route, - step: step, - }, - '', '/' + (route === Routes.LANDING ? '' : route)); - notifyObservers(); - } + onRouteChange: function(route, step) {}, - /** - * Elements can override onRoute(Change|Enter|Exit) to handle route changes. - * Order of hooks being called: - * 1) onRouteExit() on the old route - * 2) onRouteChange() on all subscribed routes - * 3) onRouteEnter() on the new route - * - * @polymerBehavior - */ - const NavigationBehavior = { - /** @override */ - attached: function() { - assert(!routeObservers.has(this)); - routeObservers.add(this); - - const route = /** @type {!welcome.Routes} */ (history.state.route); - const step = history.state.step; - - // history state was set when page loaded, so when the element first - // attaches, call the route-change handler to initialize first. - this.onRouteChange(route, step); - - // Modules are only attached to DOM if they're for the current route, so - // as long as the id of an element matches up to the current step, it - // means that element is for the current route. - if (this.id == `step-${step}`) { - currentRouteElement = this; - this.onRouteEnter(); - this.updateFocusForA11y(); - } - }, - - /** Called to update focus when progressing through the modules. */ - updateFocusForA11y: function() { - const header = this.$$('h1'); - if (header) { - Polymer.RenderStatus.afterNextRender(this, () => header.focus()); - } - }, - - /** @override */ - detached: function() { - assert(routeObservers.delete(this)); - }, - - /** - * @param {!welcome.Routes} route - * @param {number} step - */ - onRouteChange: function(route, step) {}, - - onRouteEnter: function() {}, - - onRouteExit: function() {}, - - onRouteUnload: function() {}, - }; - - return { - NavigationBehavior: NavigationBehavior, - navigateTo: navigateTo, - navigateToNextStep: navigateToNextStep, - Routes: Routes, - }; -}); + onRouteEnter: function() {}, + + onRouteExit: function() {}, + + onRouteUnload: function() {}, +}; |