| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 cr.define('cr.ui.dialogs', function() { | 5 cr.define('cr.ui.dialogs', function() { |
| 6 /** | 6 /** |
| 7 * @constructor | 7 * @constructor |
| 8 */ | 8 */ |
| 9 function BaseDialog(parentNode) { | 9 function BaseDialog(parentNode) { |
| 10 this.parentNode_ = parentNode; | 10 this.parentNode_ = parentNode; |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 * Number of miliseconds animation is expected to take, plus some margin for | 33 * Number of miliseconds animation is expected to take, plus some margin for |
| 34 * error. | 34 * error. |
| 35 */ | 35 */ |
| 36 BaseDialog.ANIMATE_STABLE_DURATION = 500; | 36 BaseDialog.ANIMATE_STABLE_DURATION = 500; |
| 37 | 37 |
| 38 /** @private */ | 38 /** @private */ |
| 39 BaseDialog.prototype.initDom_ = function() { | 39 BaseDialog.prototype.initDom_ = function() { |
| 40 var doc = this.document_; | 40 var doc = this.document_; |
| 41 this.container_ = doc.createElement('div'); | 41 this.container_ = doc.createElement('div'); |
| 42 this.container_.className = 'cr-dialog-container'; | 42 this.container_.className = 'cr-dialog-container'; |
| 43 this.container_.addEventListener('keydown', | 43 this.container_.addEventListener( |
| 44 this.onContainerKeyDown_.bind(this)); | 44 'keydown', this.onContainerKeyDown_.bind(this)); |
| 45 this.shield_ = doc.createElement('div'); | 45 this.shield_ = doc.createElement('div'); |
| 46 this.shield_.className = 'cr-dialog-shield'; | 46 this.shield_.className = 'cr-dialog-shield'; |
| 47 this.container_.appendChild(this.shield_); | 47 this.container_.appendChild(this.shield_); |
| 48 this.container_.addEventListener('mousedown', | 48 this.container_.addEventListener( |
| 49 this.onContainerMouseDown_.bind(this)); | 49 'mousedown', this.onContainerMouseDown_.bind(this)); |
| 50 | 50 |
| 51 this.frame_ = doc.createElement('div'); | 51 this.frame_ = doc.createElement('div'); |
| 52 this.frame_.className = 'cr-dialog-frame'; | 52 this.frame_.className = 'cr-dialog-frame'; |
| 53 // Elements that have negative tabIndex can be focused but are not traversed | 53 // Elements that have negative tabIndex can be focused but are not traversed |
| 54 // by Tab key. | 54 // by Tab key. |
| 55 this.frame_.tabIndex = -1; | 55 this.frame_.tabIndex = -1; |
| 56 this.container_.appendChild(this.frame_); | 56 this.container_.appendChild(this.frame_); |
| 57 | 57 |
| 58 this.title_ = doc.createElement('div'); | 58 this.title_ = doc.createElement('div'); |
| 59 this.title_.className = 'cr-dialog-title'; | 59 this.title_.className = 'cr-dialog-title'; |
| 60 this.frame_.appendChild(this.title_); | 60 this.frame_.appendChild(this.title_); |
| 61 | 61 |
| 62 this.closeButton_ = doc.createElement('div'); | 62 this.closeButton_ = doc.createElement('div'); |
| 63 this.closeButton_.className = 'cr-dialog-close'; | 63 this.closeButton_.className = 'cr-dialog-close'; |
| 64 this.closeButton_.addEventListener('click', | 64 this.closeButton_.addEventListener('click', this.onCancelClick_.bind(this)); |
| 65 this.onCancelClick_.bind(this)); | |
| 66 this.frame_.appendChild(this.closeButton_); | 65 this.frame_.appendChild(this.closeButton_); |
| 67 | 66 |
| 68 this.text_ = doc.createElement('div'); | 67 this.text_ = doc.createElement('div'); |
| 69 this.text_.className = 'cr-dialog-text'; | 68 this.text_.className = 'cr-dialog-text'; |
| 70 this.frame_.appendChild(this.text_); | 69 this.frame_.appendChild(this.text_); |
| 71 | 70 |
| 72 this.buttons = doc.createElement('div'); | 71 this.buttons = doc.createElement('div'); |
| 73 this.buttons.className = 'cr-dialog-buttons'; | 72 this.buttons.className = 'cr-dialog-buttons'; |
| 74 this.frame_.appendChild(this.buttons); | 73 this.frame_.appendChild(this.buttons); |
| 75 | 74 |
| 76 this.okButton_ = doc.createElement('button'); | 75 this.okButton_ = doc.createElement('button'); |
| 77 this.okButton_.className = 'cr-dialog-ok'; | 76 this.okButton_.className = 'cr-dialog-ok'; |
| 78 this.okButton_.textContent = BaseDialog.OK_LABEL; | 77 this.okButton_.textContent = BaseDialog.OK_LABEL; |
| 79 this.okButton_.addEventListener('click', this.onOkClick_.bind(this)); | 78 this.okButton_.addEventListener('click', this.onOkClick_.bind(this)); |
| 80 this.buttons.appendChild(this.okButton_); | 79 this.buttons.appendChild(this.okButton_); |
| 81 | 80 |
| 82 this.cancelButton_ = doc.createElement('button'); | 81 this.cancelButton_ = doc.createElement('button'); |
| 83 this.cancelButton_.className = 'cr-dialog-cancel'; | 82 this.cancelButton_.className = 'cr-dialog-cancel'; |
| 84 this.cancelButton_.textContent = BaseDialog.CANCEL_LABEL; | 83 this.cancelButton_.textContent = BaseDialog.CANCEL_LABEL; |
| 85 this.cancelButton_.addEventListener('click', | 84 this.cancelButton_.addEventListener( |
| 86 this.onCancelClick_.bind(this)); | 85 'click', this.onCancelClick_.bind(this)); |
| 87 this.buttons.appendChild(this.cancelButton_); | 86 this.buttons.appendChild(this.cancelButton_); |
| 88 | 87 |
| 89 this.initialFocusElement_ = this.okButton_; | 88 this.initialFocusElement_ = this.okButton_; |
| 90 }; | 89 }; |
| 91 | 90 |
| 92 /** @private {Function|undefined} */ | 91 /** @private {Function|undefined} */ |
| 93 BaseDialog.prototype.onOk_ = null; | 92 BaseDialog.prototype.onOk_ = null; |
| 94 | 93 |
| 95 /** @private {Function|undefined} */ | 94 /** @private {Function|undefined} */ |
| 96 BaseDialog.prototype.onCancel_ = null; | 95 BaseDialog.prototype.onCancel_ = null; |
| (...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 157 this.showWithTitle('', message, opt_onOk, opt_onCancel, opt_onShow); | 156 this.showWithTitle('', message, opt_onOk, opt_onCancel, opt_onShow); |
| 158 }; | 157 }; |
| 159 | 158 |
| 160 /** | 159 /** |
| 161 * @param {string} title | 160 * @param {string} title |
| 162 * @param {string} message | 161 * @param {string} message |
| 163 * @param {Function=} opt_onOk | 162 * @param {Function=} opt_onOk |
| 164 * @param {Function=} opt_onCancel | 163 * @param {Function=} opt_onCancel |
| 165 * @param {Function=} opt_onShow | 164 * @param {Function=} opt_onShow |
| 166 */ | 165 */ |
| 167 BaseDialog.prototype.showHtml = function(title, message, | 166 BaseDialog.prototype.showHtml = function( |
| 168 opt_onOk, opt_onCancel, opt_onShow) { | 167 title, message, opt_onOk, opt_onCancel, opt_onShow) { |
| 169 this.text_.innerHTML = message; | 168 this.text_.innerHTML = message; |
| 170 this.show_(title, opt_onOk, opt_onCancel, opt_onShow); | 169 this.show_(title, opt_onOk, opt_onCancel, opt_onShow); |
| 171 }; | 170 }; |
| 172 | 171 |
| 173 /** @private */ | 172 /** @private */ |
| 174 BaseDialog.prototype.findFocusableElements_ = function(doc) { | 173 BaseDialog.prototype.findFocusableElements_ = function(doc) { |
| 175 var elements = Array.prototype.filter.call( | 174 var elements = Array.prototype.filter.call( |
| 176 doc.querySelectorAll('*'), | 175 doc.querySelectorAll('*'), function(n) { return n.tabIndex >= 0; }); |
| 177 function(n) { return n.tabIndex >= 0; }); | |
| 178 | 176 |
| 179 var iframes = doc.querySelectorAll('iframe'); | 177 var iframes = doc.querySelectorAll('iframe'); |
| 180 for (var i = 0; i < iframes.length; i++) { | 178 for (var i = 0; i < iframes.length; i++) { |
| 181 // Some iframes have an undefined contentDocument for security reasons, | 179 // Some iframes have an undefined contentDocument for security reasons, |
| 182 // such as chrome://terms (which is used in the chromeos OOBE screens). | 180 // such as chrome://terms (which is used in the chromeos OOBE screens). |
| 183 var iframe = iframes[i]; | 181 var iframe = iframes[i]; |
| 184 var contentDoc; | 182 var contentDoc; |
| 185 try { | 183 try { |
| 186 contentDoc = iframe.contentDocument; | 184 contentDoc = iframe.contentDocument; |
| 187 } catch(e) {} // ignore SecurityError | 185 } catch (e) { |
| 186 } // ignore SecurityError |
| 188 if (contentDoc) | 187 if (contentDoc) |
| 189 elements = elements.concat(this.findFocusableElements_(contentDoc)); | 188 elements = elements.concat(this.findFocusableElements_(contentDoc)); |
| 190 } | 189 } |
| 191 return elements; | 190 return elements; |
| 192 }; | 191 }; |
| 193 | 192 |
| 194 /** | 193 /** |
| 195 * @param {string} title | 194 * @param {string} title |
| 196 * @param {string} message | 195 * @param {string} message |
| 197 * @param {Function=} opt_onOk | 196 * @param {Function=} opt_onOk |
| 198 * @param {Function=} opt_onCancel | 197 * @param {Function=} opt_onCancel |
| 199 * @param {Function=} opt_onShow | 198 * @param {Function=} opt_onShow |
| 200 */ | 199 */ |
| 201 BaseDialog.prototype.showWithTitle = function(title, message, | 200 BaseDialog.prototype.showWithTitle = function( |
| 202 opt_onOk, opt_onCancel, opt_onShow) { | 201 title, message, opt_onOk, opt_onCancel, opt_onShow) { |
| 203 this.text_.textContent = message; | 202 this.text_.textContent = message; |
| 204 this.show_(title, opt_onOk, opt_onCancel, opt_onShow); | 203 this.show_(title, opt_onOk, opt_onCancel, opt_onShow); |
| 205 }; | 204 }; |
| 206 | 205 |
| 207 /** | 206 /** |
| 208 * @param {string} title | 207 * @param {string} title |
| 209 * @param {Function=} opt_onOk | 208 * @param {Function=} opt_onOk |
| 210 * @param {Function=} opt_onCancel | 209 * @param {Function=} opt_onCancel |
| 211 * @param {Function=} opt_onShow | 210 * @param {Function=} opt_onShow |
| 212 * @private | 211 * @private |
| 213 */ | 212 */ |
| 214 BaseDialog.prototype.show_ = function( | 213 BaseDialog.prototype.show_ = function( |
| 215 title, opt_onOk, opt_onCancel, opt_onShow) { | 214 title, opt_onOk, opt_onCancel, opt_onShow) { |
| 216 // Make all outside nodes unfocusable while the dialog is active. | 215 // Make all outside nodes unfocusable while the dialog is active. |
| 217 this.deactivatedNodes_ = this.findFocusableElements_(this.document_); | 216 this.deactivatedNodes_ = this.findFocusableElements_(this.document_); |
| 218 this.tabIndexes_ = this.deactivatedNodes_.map( | 217 this.tabIndexes_ = this.deactivatedNodes_.map(function(n) { |
| 219 function(n) { return n.getAttribute('tabindex'); }); | 218 return n.getAttribute('tabindex'); |
| 220 this.deactivatedNodes_.forEach( | 219 }); |
| 221 function(n) { n.tabIndex = -1; }); | 220 this.deactivatedNodes_.forEach(function(n) { n.tabIndex = -1; }); |
| 222 | 221 |
| 223 this.previousActiveElement_ = this.document_.activeElement; | 222 this.previousActiveElement_ = this.document_.activeElement; |
| 224 this.parentNode_.appendChild(this.container_); | 223 this.parentNode_.appendChild(this.container_); |
| 225 | 224 |
| 226 this.onOk_ = opt_onOk; | 225 this.onOk_ = opt_onOk; |
| 227 this.onCancel_ = opt_onCancel; | 226 this.onCancel_ = opt_onCancel; |
| 228 | 227 |
| 229 if (title) { | 228 if (title) { |
| 230 this.title_.textContent = title; | 229 this.title_.textContent = title; |
| 231 this.title_.hidden = false; | 230 this.title_.hidden = false; |
| (...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 300 AlertDialog.prototype.show = function(message, opt_onOk, opt_onShow) { | 299 AlertDialog.prototype.show = function(message, opt_onOk, opt_onShow) { |
| 301 return BaseDialog.prototype.show.call( | 300 return BaseDialog.prototype.show.call( |
| 302 this, message, opt_onOk, opt_onOk, opt_onShow); | 301 this, message, opt_onOk, opt_onOk, opt_onShow); |
| 303 }; | 302 }; |
| 304 | 303 |
| 305 /** | 304 /** |
| 306 * ConfirmDialog contains a message, an ok button, and a cancel button. | 305 * ConfirmDialog contains a message, an ok button, and a cancel button. |
| 307 * @constructor | 306 * @constructor |
| 308 * @extends {cr.ui.dialogs.BaseDialog} | 307 * @extends {cr.ui.dialogs.BaseDialog} |
| 309 */ | 308 */ |
| 310 function ConfirmDialog(parentNode) { | 309 function ConfirmDialog(parentNode) { BaseDialog.call(this, parentNode); } |
| 311 BaseDialog.call(this, parentNode); | |
| 312 } | |
| 313 | 310 |
| 314 ConfirmDialog.prototype = {__proto__: BaseDialog.prototype}; | 311 ConfirmDialog.prototype = {__proto__: BaseDialog.prototype}; |
| 315 | 312 |
| 316 /** | 313 /** |
| 317 * PromptDialog contains a message, a text input, an ok button, and a | 314 * PromptDialog contains a message, a text input, an ok button, and a |
| 318 * cancel button. | 315 * cancel button. |
| 319 * @constructor | 316 * @constructor |
| 320 * @extends {cr.ui.dialogs.BaseDialog} | 317 * @extends {cr.ui.dialogs.BaseDialog} |
| 321 */ | 318 */ |
| 322 function PromptDialog(parentNode) { | 319 function PromptDialog(parentNode) { |
| (...skipping 30 matching lines...) Expand all Loading... |
| 353 * TODO(fukino): remove suppression if there is a better way to avoid warning | 350 * TODO(fukino): remove suppression if there is a better way to avoid warning |
| 354 * about overriding method with different signature. | 351 * about overriding method with different signature. |
| 355 */ | 352 */ |
| 356 PromptDialog.prototype.show = function( | 353 PromptDialog.prototype.show = function( |
| 357 message, defaultValue, opt_onOk, opt_onCancel, opt_onShow) { | 354 message, defaultValue, opt_onOk, opt_onCancel, opt_onShow) { |
| 358 this.input_.value = defaultValue || ''; | 355 this.input_.value = defaultValue || ''; |
| 359 return BaseDialog.prototype.show.call( | 356 return BaseDialog.prototype.show.call( |
| 360 this, message, opt_onOk, opt_onCancel, opt_onShow); | 357 this, message, opt_onOk, opt_onCancel, opt_onShow); |
| 361 }; | 358 }; |
| 362 | 359 |
| 363 PromptDialog.prototype.getValue = function() { | 360 PromptDialog.prototype.getValue = function() { return this.input_.value; }; |
| 364 return this.input_.value; | |
| 365 }; | |
| 366 | 361 |
| 367 /** @private */ | 362 /** @private */ |
| 368 PromptDialog.prototype.onOkClick_ = function(event) { | 363 PromptDialog.prototype.onOkClick_ = function(event) { |
| 369 this.hide(); | 364 this.hide(); |
| 370 if (this.onOk_) | 365 if (this.onOk_) |
| 371 this.onOk_(this.getValue()); | 366 this.onOk_(this.getValue()); |
| 372 }; | 367 }; |
| 373 | 368 |
| 374 return { | 369 return { |
| 375 BaseDialog: BaseDialog, | 370 BaseDialog: BaseDialog, |
| 376 AlertDialog: AlertDialog, | 371 AlertDialog: AlertDialog, |
| 377 ConfirmDialog: ConfirmDialog, | 372 ConfirmDialog: ConfirmDialog, |
| 378 PromptDialog: PromptDialog | 373 PromptDialog: PromptDialog |
| 379 }; | 374 }; |
| 380 }); | 375 }); |
| OLD | NEW |