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 this.currentRoute = historicRoute || settings.Route.BASIC; |
53 }.bind(this)); | 53 }.bind(this)); |
54 | 54 |
55 settings.navigateTo = this.navigateTo_.bind(this); | 55 settings.navigateTo = this.navigateTo_.bind(this); |
56 }, | 56 }, |
57 | 57 |
58 /** | 58 /** |
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. | 59 * Navigates to a canonical route. |
78 * @param {!settings.Route} route | 60 * @param {!settings.Route} route |
79 * @private | 61 * @private |
80 */ | 62 */ |
81 navigateTo_: function(route) { | 63 navigateTo_: function(route) { |
82 assert(!!route); | 64 assert(!!route); |
83 | 65 |
84 if (route == this.currentRoute) | 66 if (route == this.currentRoute) |
85 return; | 67 return; |
86 | 68 |
87 window.history.pushState(undefined, document.title, route.path); | 69 window.history.pushState(undefined, document.title, route.path); |
88 this.currentRoute = route; | 70 this.currentRoute = route; |
89 }, | 71 }, |
90 }); | 72 }); |
OLD | NEW |