OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 <include src="../node_utils.js"> | 5 // <include src="../node_utils.js"> |
6 | 6 |
7 cr.define('cr.ui.pageManager', function() { | 7 cr.define('cr.ui.pageManager', function() { |
8 var PageManager = cr.ui.pageManager.PageManager; | 8 var PageManager = cr.ui.pageManager.PageManager; |
9 | 9 |
10 /** | 10 /** |
11 * Base class for pages that can be shown and hidden by PageManager. Each Page | 11 * Base class for pages that can be shown and hidden by PageManager. Each Page |
12 * is like a node in a forest, corresponding to a particular div. At any | 12 * is like a node in a forest, corresponding to a particular div. At any |
13 * point, one root Page is visible, and any visible Page can show a child Page | 13 * point, one root Page is visible, and any visible Page can show a child Page |
14 * as an overlay. The host of the root Page(s) should provide a container div | 14 * as an overlay. The host of the root Page(s) should provide a container div |
15 * for each nested level to enforce the stack order of overlays. | 15 * for each nested level to enforce the stack order of overlays. |
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
71 /** | 71 /** |
72 * Called by the PageManager when this.hash changes while the page is | 72 * Called by the PageManager when this.hash changes while the page is |
73 * already visible. This is analogous to the hashchange DOM event. | 73 * already visible. This is analogous to the hashchange DOM event. |
74 */ | 74 */ |
75 didChangeHash: function() {}, | 75 didChangeHash: function() {}, |
76 | 76 |
77 /** | 77 /** |
78 * Sets focus on the first focusable element. Override for a custom focus | 78 * Sets focus on the first focusable element. Override for a custom focus |
79 * strategy. | 79 * strategy. |
80 */ | 80 */ |
81 focus: function() { | 81 focus: function() { cr.ui.setInitialFocus(this.pageDiv); }, |
82 cr.ui.setInitialFocus(this.pageDiv); | |
83 }, | |
84 | 82 |
85 /** | 83 /** |
86 * Reverse any buttons strips in this page (only applies to overlays). | 84 * Reverse any buttons strips in this page (only applies to overlays). |
87 * @see cr.ui.reverseButtonStrips for an explanation of why this is | 85 * @see cr.ui.reverseButtonStrips for an explanation of why this is |
88 * necessary and when it's done. | 86 * necessary and when it's done. |
89 */ | 87 */ |
90 reverseButtonStrip: function() { | 88 reverseButtonStrip: function() { |
91 assert(this.isOverlay); | 89 assert(this.isOverlay); |
92 cr.ui.reverseButtonStrips(this.pageDiv); | 90 cr.ui.reverseButtonStrips(this.pageDiv); |
93 }, | 91 }, |
94 | 92 |
95 /** | 93 /** |
96 * Whether it should be possible to show the page. | 94 * Whether it should be possible to show the page. |
97 * @return {boolean} True if the page should be shown. | 95 * @return {boolean} True if the page should be shown. |
98 */ | 96 */ |
99 canShowPage: function() { | 97 canShowPage: function() { return true; }, |
100 return true; | |
101 }, | |
102 | 98 |
103 /** | 99 /** |
104 * Updates the hash of the current page. If the page is topmost, the history | 100 * Updates the hash of the current page. If the page is topmost, the history |
105 * state is updated. | 101 * state is updated. |
106 * @param {string} hash The new hash value. Like location.hash, this | 102 * @param {string} hash The new hash value. Like location.hash, this |
107 * should include the leading '#' if not empty. | 103 * should include the leading '#' if not empty. |
108 */ | 104 */ |
109 setHash: function(hash) { | 105 setHash: function(hash) { |
110 if (this.hash == hash) | 106 if (this.hash == hash) |
111 return; | 107 return; |
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
145 return this.pageDiv.parentNode; | 141 return this.pageDiv.parentNode; |
146 }, | 142 }, |
147 | 143 |
148 /** | 144 /** |
149 * Gets page visibility state. | 145 * Gets page visibility state. |
150 * @type {boolean} | 146 * @type {boolean} |
151 */ | 147 */ |
152 get visible() { | 148 get visible() { |
153 // If this is an overlay dialog it is no longer considered visible while | 149 // If this is an overlay dialog it is no longer considered visible while |
154 // the overlay is fading out. See http://crbug.com/118629. | 150 // the overlay is fading out. See http://crbug.com/118629. |
155 if (this.isOverlay && | 151 if (this.isOverlay && this.container.classList.contains('transparent')) { |
156 this.container.classList.contains('transparent')) { | |
157 return false; | 152 return false; |
158 } | 153 } |
159 if (this.pageDiv.hidden) | 154 if (this.pageDiv.hidden) |
160 return false; | 155 return false; |
161 return this.pageDiv.page == this; | 156 return this.pageDiv.page == this; |
162 }, | 157 }, |
163 | 158 |
164 /** | 159 /** |
165 * Sets page visibility. | 160 * Sets page visibility. |
166 * @type {boolean} | 161 * @type {boolean} |
(...skipping 14 matching lines...) Expand all Loading... |
181 } | 176 } |
182 | 177 |
183 cr.dispatchPropertyChange(this, 'visible', visible, !visible); | 178 cr.dispatchPropertyChange(this, 'visible', visible, !visible); |
184 }, | 179 }, |
185 | 180 |
186 /** | 181 /** |
187 * Whether the page is considered 'sticky', such that it will remain a root | 182 * Whether the page is considered 'sticky', such that it will remain a root |
188 * page even if sub-pages change. | 183 * page even if sub-pages change. |
189 * @type {boolean} True if this page is sticky. | 184 * @type {boolean} True if this page is sticky. |
190 */ | 185 */ |
191 get sticky() { | 186 get sticky() { return false; }, |
192 return false; | |
193 }, | |
194 | 187 |
195 /** | 188 /** |
196 * @type {boolean} True if this page should always be considered the | 189 * @type {boolean} True if this page should always be considered the |
197 * top-most page when visible. | 190 * top-most page when visible. |
198 */ | 191 */ |
199 get alwaysOnTop() { | 192 get alwaysOnTop() { return this.alwaysOnTop_; }, |
200 return this.alwaysOnTop_; | |
201 }, | |
202 | 193 |
203 /** | 194 /** |
204 * @type {boolean} True if this page should always be considered the | 195 * @type {boolean} True if this page should always be considered the |
205 * top-most page when visible. Only overlays can be always on top. | 196 * top-most page when visible. Only overlays can be always on top. |
206 */ | 197 */ |
207 set alwaysOnTop(value) { | 198 set alwaysOnTop(value) { |
208 assert(this.isOverlay); | 199 assert(this.isOverlay); |
209 this.alwaysOnTop_ = value; | 200 this.alwaysOnTop_ = value; |
210 }, | 201 }, |
211 | 202 |
(...skipping 25 matching lines...) Expand all Loading... |
237 } | 228 } |
238 return; | 229 return; |
239 } | 230 } |
240 | 231 |
241 var self = this; | 232 var self = this; |
242 var loading = PageManager.isLoading(); | 233 var loading = PageManager.isLoading(); |
243 if (!loading) { | 234 if (!loading) { |
244 // TODO(flackr): Use an event delegate to avoid having to subscribe and | 235 // TODO(flackr): Use an event delegate to avoid having to subscribe and |
245 // unsubscribe for webkitTransitionEnd events. | 236 // unsubscribe for webkitTransitionEnd events. |
246 container.addEventListener('webkitTransitionEnd', function f(e) { | 237 container.addEventListener('webkitTransitionEnd', function f(e) { |
247 var propName = e.propertyName; | 238 var propName = e.propertyName; |
248 if (e.target != e.currentTarget || | 239 if (e.target != e.currentTarget || |
249 (propName && propName != 'opacity')) { | 240 (propName && propName != 'opacity')) { |
250 return; | 241 return; |
251 } | 242 } |
252 container.removeEventListener('webkitTransitionEnd', f); | 243 container.removeEventListener('webkitTransitionEnd', f); |
253 self.fadeCompleted_(); | 244 self.fadeCompleted_(); |
254 }); | 245 }); |
255 // -webkit-transition is 200ms. Let's wait for 400ms. | 246 // -webkit-transition is 200ms. Let's wait for 400ms. |
256 ensureTransitionEndEvent(container, 400); | 247 ensureTransitionEndEvent(container, 400); |
257 } | 248 } |
258 | 249 |
259 if (visible) { | 250 if (visible) { |
260 container.hidden = false; | 251 container.hidden = false; |
261 pageDiv.hidden = false; | 252 pageDiv.hidden = false; |
262 pageDiv.page = this; | 253 pageDiv.page = this; |
263 // NOTE: This is a hacky way to force the container to layout which | 254 // NOTE: This is a hacky way to force the container to layout which |
264 // will allow us to trigger the webkit transition. | 255 // will allow us to trigger the webkit transition. |
265 /** @suppress {uselessCode} */ | 256 /** @suppress {uselessCode} */ |
266 container.scrollTop; | 257 container.scrollTop; |
267 | 258 |
268 this.pageDiv.removeAttribute('aria-hidden'); | 259 this.pageDiv.removeAttribute('aria-hidden'); |
269 if (this.parentPage) { | 260 if (this.parentPage) { |
270 this.parentPage.pageDiv.parentElement.setAttribute('aria-hidden', | 261 this.parentPage.pageDiv.parentElement.setAttribute( |
271 true); | 262 'aria-hidden', true); |
272 } | 263 } |
273 container.classList.remove('transparent'); | 264 container.classList.remove('transparent'); |
274 PageManager.onPageVisibilityChanged(this); | 265 PageManager.onPageVisibilityChanged(this); |
275 } else { | 266 } else { |
276 // Kick change events for text fields. | 267 // Kick change events for text fields. |
277 if (pageDiv.contains(document.activeElement)) | 268 if (pageDiv.contains(document.activeElement)) |
278 document.activeElement.blur(); | 269 document.activeElement.blur(); |
279 container.classList.add('transparent'); | 270 container.classList.add('transparent'); |
280 } | 271 } |
281 | 272 |
(...skipping 12 matching lines...) Expand all Loading... |
294 | 285 |
295 if (this.parentPage) | 286 if (this.parentPage) |
296 this.parentPage.pageDiv.parentElement.removeAttribute('aria-hidden'); | 287 this.parentPage.pageDiv.parentElement.removeAttribute('aria-hidden'); |
297 | 288 |
298 PageManager.onPageVisibilityChanged(this); | 289 PageManager.onPageVisibilityChanged(this); |
299 } | 290 } |
300 }, | 291 }, |
301 }; | 292 }; |
302 | 293 |
303 // Export | 294 // Export |
304 return { | 295 return {Page: Page}; |
305 Page: Page | |
306 }; | |
307 }); | 296 }); |
OLD | NEW |