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 |