Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 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 | 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 * @fileoverview | 6 * @fileoverview |
| 7 * 'settings-router' is a simple router for settings. Its responsibilities: | 7 * 'settings-router' is a simple router for settings. Its responsibilities: |
| 8 * - Update the URL when the routing state changes. | 8 * - Update the URL when the routing state changes. |
| 9 * - Initialize the routing state with the initial URL. | 9 * - Initialize the routing state with the initial URL. |
| 10 * - Process and validate all routing state changes. | 10 * - Process and validate all routing state changes. |
| 11 * | 11 * |
| 12 * Example: | 12 * Example: |
| 13 * | 13 * |
| 14 * <settings-router current-route="{{currentRoute}}"> | 14 * <settings-router current-route="{{currentRoute}}"> |
| 15 * </settings-router> | 15 * </settings-router> |
| 16 */ | 16 */ |
| 17 Polymer({ | 17 Polymer({ |
| 18 is: 'settings-router', | 18 is: 'settings-router', |
| 19 | 19 |
| 20 properties: { | 20 properties: { |
| 21 /** | 21 /** |
| 22 * The current active route. This may only be updated via the global | 22 * The current active route. This may only be updated via the global |
| 23 * function settings.navigateTo. | 23 * function settings.navigateTo. |
| 24 * | 24 * |
| 25 * currentRoute.page refers to top-level pages such as Basic and Advanced. | |
| 26 * | |
| 27 * currentRoute.section is only non-empty when the user is on a subpage. If | 25 * currentRoute.section is only non-empty when the user is on a subpage. If |
| 28 * the user is on Basic, for instance, this is an empty string. | 26 * the user is on Basic, for instance, this is an empty string. |
| 29 * | 27 * |
| 30 * currentRoute.subpage is an Array. The last element is the actual subpage | 28 * currentRoute.subpage is an Array. The last element is the actual subpage |
| 31 * the user is on. The previous elements are the ancestor subpages. This | 29 * the user is on. The previous elements are the ancestor subpages. This |
| 32 * enables support for multiple paths to the same subpage. This is used by | 30 * enables support for multiple paths to the same subpage. This is used by |
| 33 * both the Back button and the Breadcrumb to determine ancestor subpages. | 31 * both the Back button and the Breadcrumb to determine ancestor subpages. |
| 34 * @type {!settings.Route} | 32 * @type {!settings.Route} |
| 35 */ | 33 */ |
| 36 currentRoute: { | 34 currentRoute: { |
| 37 notify: true, | 35 notify: true, |
| 38 type: Object, | 36 type: Object, |
| 39 value: function() { | 37 value: function() { |
| 40 return this.getRouteFor_(window.location.pathname); | 38 return (settings.getRouteForPath(window.location.pathname) || |
| 39 settings.Route.BASIC); | |
| 41 }, | 40 }, |
| 42 }, | 41 }, |
| 43 }, | 42 }, |
| 44 | 43 |
| 45 /** | 44 /** |
| 46 * Sets up a history popstate observer. | 45 * Sets up a history popstate observer. |
| 47 * @override | 46 * @override |
| 48 */ | 47 */ |
| 49 created: function() { | 48 created: function() { |
| 50 window.addEventListener('popstate', function(event) { | 49 window.addEventListener('popstate', function(event) { |
| 51 // On pop state, do not push the state onto the window.history again. | 50 // On pop state, do not push the state onto the window.history again. |
| 52 this.currentRoute = this.getRouteFor_(window.location.pathname); | 51 var historicRoute = settings.getRouteForPath(window.location.pathname); |
| 52 assert(historicRoute); | |
|
michaelpg
2016/07/29 20:28:53
hmmm is it right to assert rather than return sile
tommycli
2016/07/29 21:04:40
Done.
| |
| 53 this.currentRoute = historicRoute; | |
| 53 }.bind(this)); | 54 }.bind(this)); |
| 54 | 55 |
| 55 settings.navigateTo = this.navigateTo_.bind(this); | 56 settings.navigateTo = this.navigateTo_.bind(this); |
| 56 }, | 57 }, |
| 57 | 58 |
| 58 /** | 59 /** |
| 59 * Returns the matching canonical route, or the default route if none matches. | |
| 60 * @param {string} path | |
| 61 * @return {!settings.Route} | |
| 62 * @private | |
| 63 */ | |
| 64 getRouteFor_: function(path) { | |
| 65 // TODO(tommycli): Use Object.values once Closure compilation supports it. | |
| 66 var matchingKey = Object.keys(settings.Route).find(function(key) { | |
| 67 return settings.Route[key].path == path; | |
| 68 }); | |
| 69 | |
| 70 if (!matchingKey) | |
| 71 return settings.Route.BASIC; | |
| 72 | |
| 73 return settings.Route[matchingKey]; | |
| 74 }, | |
| 75 | |
| 76 /** | |
| 77 * Navigates to a canonical route. | 60 * Navigates to a canonical route. |
| 78 * @param {!settings.Route} route | 61 * @param {!settings.Route} route |
| 79 * @private | 62 * @private |
| 80 */ | 63 */ |
| 81 navigateTo_: function(route) { | 64 navigateTo_: function(route) { |
| 82 assert(!!route); | 65 assert(!!route); |
| 83 | 66 |
| 84 if (route == this.currentRoute) | 67 if (route == this.currentRoute) |
| 85 return; | 68 return; |
| 86 | 69 |
| 87 window.history.pushState(undefined, document.title, route.path); | 70 window.history.pushState(undefined, document.title, route.path); |
| 88 this.currentRoute = route; | 71 this.currentRoute = route; |
| 89 }, | 72 }, |
| 90 }); | 73 }); |
| OLD | NEW |