chrome/browser/resources/settings/settings_page/settings_router.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * 'settings-router' is a simple router for settings. Its responsibilites:
   8  *  - Update the URL when the routing state changes.
   9  *  - Initialize the routing state with the initial URL.
  10  *  - Process and validate all routing state changes.
  11  *
  12  * Example:
  13  *
  14  *    <settings-router current-route="{{currentRoute}}">
  15  *    </settings-router>
  16  *
  17  * @group Chrome Settings Elements
  18  * @element settings-router
  19  */
  20 Polymer({
  21   is: 'settings-router',
  22
  23   properties: {
  24     /**
  25      * The current active route. This is reflected to the URL. Updates to this
  26      * property should replace the whole object.
  27      *
  28      * currentRoute.page refers to top-level pages such as Basic and Advanced.
  29      *
  30      * currentRoute.section is only non-empty when the user is on a subpage. If
  31      * the user is on Basic, for instance, this is an empty string.
  32      *
  33      * currentRoute.subpage is an Array. The last element is the actual subpage
  34      * the user is on. The previous elements are the ancestor subpages. This
  35      * enables support for multiple paths to the same subpage. This is used by
  36      * both the Back button and the Breadcrumb to determine ancestor subpages.
  37      */
  38     currentRoute: {
  39       notify: true,
  40       observer: 'currentRouteChanged_',
  41       type: Object,
  42       value: function() {
  43         // Take the current URL, find a matching pre-defined route, and
  44         // initialize the currentRoute to that pre-defined route.
  45         for (var i = 0; i < this.routes_.length; ++i) {
  46           var route = this.routes_[i];
  47           if (route.url == window.location.pathname) {
  48             return {
  49               page: route.page,
  50               section: route.section,
  51               subpage: route.subpage,
  52             };
  53           }
  54         }
  55
  56         // As a fallback return the default route.
  57         return this.routes_[0];
  58       },
  59     },
  60
  61     /**
  62      * Page titles for the currently active route. Updated by the currentRoute
  63      * property observer.
  64      * @type {{pageTitle: string, subpageTitles: Array<string>}}
  65      */
  66     currentRouteTitles: {
  67       notify: true,
  68       type: Object,
  69       value: function() { return {}; },
  70     },
  71   },
  72
  73
  74  /**
  75   * @private
  76   * The 'url' property is not accessible to other elements.
  77   */
  78  routes_: [
  79     {
  80       url: '/',
  81       page: 'basic',
  82       section: '',
  83       subpage: [],
  84       subpageTitles: [],
  85     },
  86     {
  87       url: '/advanced',
  88       page: 'advanced',
  89       section: '',
  90       subpage: [],
  91       subpageTitles: [],
  92     },
  93     {
  94       url: '/searchEngines',
  95       page: 'basic',
  96       section: 'search',
  97       subpage: ['search-engines'],
  98       subpageTitles: ['searchEnginesPageTitle'],
  99     },
 100     {
 101       url: '/searchEngines/advanced',
 102       page: 'basic',
 103       section: 'search',
 104       subpage: ['search-engines', 'search-engines-advanced'],
 105       subpageTitles: ['searchEnginesPageTitle', 'advancedPageTitle'],
 106     },
 107     {
 108       url: '/certificates',
 109       page: 'advanced',
 110       section: 'privacy',
 111       subpage: ['manage-certificates'],
 112       subpageTitles: ['manageCertificates'],
 113     },
 114     {
 115       url: '/content',
 116       page: 'advanced',
 117       section: 'privacy',
 118       subpage: ['site-settings'],
 119       subpageTitles: ['siteSettings'],
 120     },
 121   ],
 122
 123   /**
 124    * Sets up a history popstate observer.
 125    */
 126   created: function() {
 127     window.addEventListener('popstate', function(event) {
 128       if (event.state && event.state.page)
 129         this.currentRoute = event.state;
 130     }.bind(this));
 131   },
 132
 133   /**
 134    * @private
 135    * Is called when another element modifies the route. This observer validates
 136    * the route change against the pre-defined list of routes, and updates the
 137    * URL appropriately.
 138    */
 139   currentRouteChanged_: function(newRoute, oldRoute) {
 140     for (var i = 0; i < this.routes_.length; ++i) {
 141       var route = this.routes_[i];
 142       if (route.page == newRoute.page && route.section == newRoute.section &&
 143           route.subpage.length == newRoute.subpage.length &&
 144           newRoute.subpage.every(function(value, index) {
 145             return value == route.subpage[index];
 146           })) {
 147
 148         // Update the property containing the titles for the current route.
 149         this.currentRouteTitles = {
 150           pageTitle: loadTimeData.getString(route.page + 'PageTitle'),
 151           subpageTitles: route.subpageTitles.map(function(titleCode) {
 152             return loadTimeData.getString(titleCode);
 153           }),
 154         };
 155
 156         // If we are restoring a state from history, don't push it again.
 157         if (newRoute.inHistory)
 158           return;
 159
 160         // Mark routes persisted in history as already stored in history.
 161         var historicState = {
 162           inHistory: true,
 163           page: newRoute.page,
 164           section: newRoute.section,
 165           subpage: newRoute.subpage,
 166         };
 167
 168         // Push the current route to the history state, so when the user
 169         // navigates with the browser back button, we can recall the route.
 170         if (oldRoute) {
 171           history.pushState(historicState, null, route.url);
 172         } else {
 173           // For the very first route (oldRoute will be undefined), we replace
 174           // the existing state instead of pushing a new one. This is to allow
 175           // the user to use the browser back button to exit Settings entirely.
 176           history.replaceState(historicState, null);
 177         }
 178
 179         return;
 180       }
 181     }
 182
 183     assertNotReached('Route not found: ' + JSON.stringify(newRoute));
 184   },
 185 });