| 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 |