OLD | NEW |
---|---|
(Empty) | |
1 // Copyright 2017 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 * The different pages that can be shown at a time. | |
7 * Note: This must remain in sync with the order in manager.html! | |
michaelpg
2017/05/01 23:41:25
with the page ids
Devlin
2017/05/02 01:04:07
Done.
| |
8 * @enum {string} | |
9 */ | |
10 var Page = { | |
11 LIST: 'items-list', | |
12 DETAILS: 'details-view', | |
13 SHORTCUTS: 'keyboard-shortcuts', | |
14 ERRORS: 'error-page', | |
15 }; | |
16 | |
17 /** @enum {string} */ | |
18 var Dialog = { | |
19 OPTIONS: 'options', | |
20 }; | |
21 | |
22 /** @typedef {{page: Page, | |
23 id: (string|undefined), | |
michaelpg
2017/05/01 23:41:25
You probably have this problem all throughout exte
Devlin
2017/05/02 01:04:07
done.
| |
24 subpage: (!Dialog|undefined)}} */ | |
25 var PageState; | |
26 | |
27 cr.define('extensions', function() { | |
28 'use strict'; | |
29 | |
30 /** | |
31 * A helper object to manage in-page navigations. Since the extensions page | |
32 * needs to support different urls for different subpages (like the details | |
33 * page), we use this object to manage the history and url conversions. | |
34 * @param {!function(!PageState):void} onHistoryChange A function to call when | |
35 * the page has changed as a result of the user going back or forward in | |
36 * history; called with the new active page. | |
37 * @constructor */ | |
38 function NavigationHelper(onHistoryChange) { | |
39 this.onHistoryChange_ = onHistoryChange; | |
40 window.addEventListener('popstate', this.onPopState_.bind(this)); | |
41 } | |
42 | |
43 NavigationHelper.prototype = { | |
44 /** @private */ | |
45 onPopState_: function() { | |
46 this.onHistoryChange_(this.getCurrentPage()); | |
47 }, | |
48 | |
49 /** | |
50 * Returns the page that should be displayed for the current URL. | |
51 * @return {!PageState} | |
52 */ | |
53 getCurrentPage: function() { | |
54 if (location.search == '' && location.pathname == '/') | |
michaelpg
2017/05/01 23:41:25
i'd be in favor of removing this, as it's already
Devlin
2017/05/02 01:04:07
Done.
| |
55 return {page: Page.LIST}; | |
56 | |
57 var search = new URLSearchParams(location.search); | |
58 var id = search.get('id'); | |
59 if (id) | |
60 return {page: Page.DETAILS, id: id}; | |
61 id = search.get('options'); | |
62 if (id) | |
63 return {page: Page.DETAILS, id: id, subpage: Dialog.OPTIONS}; | |
64 id = search.get('errors'); | |
65 if (id) | |
66 return {page: Page.ERRORS, id: id}; | |
67 | |
68 if (location.pathname == '/shortcuts') | |
69 return {page: Page.SHORTCUTS}; | |
70 | |
71 return {page: Page.LIST}; | |
72 }, | |
73 | |
74 /** | |
75 * Called when a page changes, and pushes state to history to reflect it. | |
76 * @param {!PageState} entry | |
77 */ | |
78 updateHistory: function(entry) { | |
79 var relative; | |
michaelpg
2017/05/01 23:41:25
absolute? :-\
Devlin
2017/05/02 01:04:07
s/relative/path
| |
80 switch (entry.page) { | |
81 case Page.LIST: | |
82 relative = '/'; | |
83 break; | |
84 case Page.DETAILS: | |
85 if (entry.subpage) { | |
86 assert(entry.subpage == Dialog.OPTIONS); | |
87 relative = '/?options=' + entry.id; | |
88 } else { | |
89 relative = '/?id=' + entry.id; | |
90 } | |
91 break; | |
92 case Page.SHORTCUTS: | |
93 relative = '/shortcuts'; | |
94 break; | |
95 case Page.ERRORS: | |
96 relative = '/?errors=' + entry.id; | |
michaelpg
2017/05/01 23:41:25
add a break; so adding another case doesn't cause
Devlin
2017/05/02 01:04:07
Done.
| |
97 } | |
98 assert(relative); | |
99 var state = {url: relative}; | |
100 var currentPage = this.getCurrentPage(); | |
101 var isDialogNavigation = | |
102 currentPage.page == entry.page && | |
103 currentPage.id == entry.id; | |
104 // Navigating to a dialog doesn't visually change pages; it just opens | |
105 // a dialog. As such, we replace state rather than pushing a new state | |
106 // on the stack so that hitting the back button doesn't just toggle the | |
107 // dialog. | |
108 if (isDialogNavigation) | |
109 history.replaceState(state, '', relative); | |
110 else | |
111 history.pushState(state, '', relative); | |
112 }, | |
113 }; | |
114 | |
115 return {NavigationHelper: NavigationHelper}; | |
116 }); | |
OLD | NEW |