Index: chrome/browser/resources/shared/js/cr/ui/dialogs.js |
=================================================================== |
--- chrome/browser/resources/shared/js/cr/ui/dialogs.js (revision 177292) |
+++ chrome/browser/resources/shared/js/cr/ui/dialogs.js (working copy) |
@@ -1,302 +0,0 @@ |
-// Copyright (c) 2012 The Chromium Authors. All rights reserved. |
-// Use of this source code is governed by a BSD-style license that can be |
-// found in the LICENSE file. |
- |
-cr.define('cr.ui.dialogs', function() { |
- |
- function BaseDialog(parentNode) { |
- this.parentNode_ = parentNode; |
- this.document_ = parentNode.ownerDocument; |
- |
- // The DOM element from the dialog which should receive focus when the |
- // dialog is first displayed. |
- this.initialFocusElement_ = null; |
- |
- // The DOM element from the parent which had focus before we were displayed, |
- // so we can restore it when we're hidden. |
- this.previousActiveElement_ = null; |
- |
- this.initDom_(); |
- } |
- |
- /** |
- * Default text for Ok and Cancel buttons. |
- * |
- * Clients should override these with localized labels. |
- */ |
- BaseDialog.OK_LABEL = '[LOCALIZE ME] Ok'; |
- BaseDialog.CANCEL_LABEL = '[LOCALIZE ME] Cancel'; |
- |
- /** |
- * Number of miliseconds animation is expected to take, plus some margin for |
- * error. |
- */ |
- BaseDialog.ANIMATE_STABLE_DURATION = 500; |
- |
- BaseDialog.prototype.initDom_ = function() { |
- var doc = this.document_; |
- this.container_ = doc.createElement('div'); |
- this.container_.className = 'cr-dialog-container'; |
- this.container_.addEventListener('keydown', |
- this.onContainerKeyDown_.bind(this)); |
- this.shield_ = doc.createElement('div'); |
- this.shield_.className = 'cr-dialog-shield'; |
- this.container_.appendChild(this.shield_); |
- this.container_.addEventListener('mousedown', |
- this.onContainerMouseDown_.bind(this)); |
- |
- this.frame_ = doc.createElement('div'); |
- this.frame_.className = 'cr-dialog-frame'; |
- this.frame_.tabIndex = 0; |
- this.container_.appendChild(this.frame_); |
- |
- this.title_ = doc.createElement('div'); |
- this.title_.className = 'cr-dialog-title'; |
- this.frame_.appendChild(this.title_); |
- |
- this.closeButton_ = doc.createElement('div'); |
- this.closeButton_.className = 'cr-dialog-close'; |
- this.closeButton_.addEventListener('click', |
- this.onCancelClick_.bind(this)); |
- this.frame_.appendChild(this.closeButton_); |
- |
- this.text_ = doc.createElement('div'); |
- this.text_.className = 'cr-dialog-text'; |
- this.frame_.appendChild(this.text_); |
- |
- var buttons = doc.createElement('div'); |
- buttons.className = 'cr-dialog-buttons'; |
- this.frame_.appendChild(buttons); |
- |
- this.okButton_ = doc.createElement('button'); |
- this.okButton_.className = 'cr-dialog-ok'; |
- this.okButton_.textContent = BaseDialog.OK_LABEL; |
- this.okButton_.addEventListener('click', this.onOkClick_.bind(this)); |
- buttons.appendChild(this.okButton_); |
- |
- this.cancelButton_ = doc.createElement('button'); |
- this.cancelButton_.className = 'cr-dialog-cancel'; |
- this.cancelButton_.textContent = BaseDialog.CANCEL_LABEL; |
- this.cancelButton_.addEventListener('click', |
- this.onCancelClick_.bind(this)); |
- buttons.appendChild(this.cancelButton_); |
- |
- this.initialFocusElement_ = this.okButton_; |
- }; |
- |
- BaseDialog.prototype.onOk_ = null; |
- BaseDialog.prototype.onCancel_ = null; |
- |
- BaseDialog.prototype.onContainerKeyDown_ = function(event) { |
- // Handle Escape. |
- if (event.keyCode == 27 && !this.cancelButton_.disabled) { |
- this.onCancelClick_(event); |
- event.preventDefault(); |
- } |
- }; |
- |
- BaseDialog.prototype.onContainerMouseDown_ = function(event) { |
- if (event.target == this.container_) { |
- var classList = this.frame_.classList; |
- // Start 'pulse' animation. |
- classList.remove('pulse'); |
- setTimeout(classList.add.bind(classList, 'pulse'), 0); |
- event.preventDefault(); |
- } |
- }; |
- |
- BaseDialog.prototype.onOkClick_ = function(event) { |
- this.hide(); |
- if (this.onOk_) |
- this.onOk_(); |
- }; |
- |
- BaseDialog.prototype.onCancelClick_ = function(event) { |
- this.hide(); |
- if (this.onCancel_) |
- this.onCancel_(); |
- }; |
- |
- BaseDialog.prototype.setOkLabel = function(label) { |
- this.okButton_.textContent = label; |
- }; |
- |
- BaseDialog.prototype.setCancelLabel = function(label) { |
- this.cancelButton_.textContent = label; |
- }; |
- |
- BaseDialog.prototype.setInitialFocusOnCancel = function() { |
- this.initialFocusElement_ = this.cancelButton_; |
- }; |
- |
- BaseDialog.prototype.show = function(message, onOk, onCancel, onShow) { |
- this.showWithTitle(null, message, onOk, onCancel, onShow); |
- }; |
- |
- BaseDialog.prototype.showHtml = function(title, message, |
- onOk, onCancel, onShow) { |
- this.text_.innerHTML = message; |
- this.show_(title, onOk, onCancel, onShow); |
- }; |
- |
- BaseDialog.prototype.findFocusableElements_ = function(doc) { |
- var elements = Array.prototype.filter.call( |
- doc.querySelectorAll('*'), |
- function(n) { return n.tabIndex >= 0; }); |
- |
- var iframes = doc.querySelectorAll('iframe'); |
- for (var i = 0; i < iframes.length; i++) { |
- // Some iframes have an undefined contentDocument for security reasons, |
- // such as chrome://terms (which is used in the chromeos OOBE screens). |
- var contentDoc = iframes[i].contentDocument; |
- if (contentDoc) |
- elements = elements.concat(this.findFocusableElements_(contentDoc)); |
- } |
- return elements; |
- }; |
- |
- BaseDialog.prototype.showWithTitle = function(title, message, |
- onOk, onCancel, onShow) { |
- this.text_.textContent = message; |
- this.show_(title, onOk, onCancel, onShow); |
- }; |
- |
- BaseDialog.prototype.show_ = function(title, onOk, onCancel, onShow) { |
- // Make all outside nodes unfocusable while the dialog is active. |
- this.deactivatedNodes_ = this.findFocusableElements_(this.document_); |
- this.tabIndexes_ = this.deactivatedNodes_.map( |
- function(n) { return n.getAttribute('tabindex'); }); |
- this.deactivatedNodes_.forEach( |
- function(n) { n.tabIndex = -1; }); |
- |
- this.previousActiveElement_ = this.document_.activeElement; |
- this.parentNode_.appendChild(this.container_); |
- |
- this.onOk_ = onOk; |
- this.onCancel_ = onCancel; |
- |
- if (title) { |
- this.title_.textContent = title; |
- this.title_.hidden = false; |
- } else { |
- this.title_.textContent = ''; |
- this.title_.hidden = true; |
- } |
- |
- var self = this; |
- setTimeout(function() { |
- // Note that we control the opacity of the *container*, but the top/left |
- // of the *frame*. |
- self.container_.classList.add('shown'); |
- self.initialFocusElement_.focus(); |
- setTimeout(function() { |
- if (onShow) |
- onShow(); |
- }, BaseDialog.ANIMATE_STABLE_DURATION); |
- }, 0); |
- }; |
- |
- BaseDialog.prototype.hide = function(onHide) { |
- // Restore focusability. |
- for (var i = 0; i < this.deactivatedNodes_.length; i++) { |
- var node = this.deactivatedNodes_[i]; |
- if (this.tabIndexes_[i] === null) |
- node.removeAttribute('tabindex'); |
- else |
- node.setAttribute('tabindex', this.tabIndexes_[i]); |
- } |
- this.deactivatedNodes_ = null; |
- this.tabIndexes_ = null; |
- |
- // Note that we control the opacity of the *container*, but the top/left |
- // of the *frame*. |
- this.container_.classList.remove('shown'); |
- |
- if (this.previousActiveElement_) { |
- this.previousActiveElement_.focus(); |
- } else { |
- this.document_.body.focus(); |
- } |
- this.frame_.classList.remove('pulse'); |
- |
- var self = this; |
- setTimeout(function() { |
- // Wait until the transition is done before removing the dialog. |
- self.parentNode_.removeChild(self.container_); |
- if (onHide) |
- onHide(); |
- }, BaseDialog.ANIMATE_STABLE_DURATION); |
- }; |
- |
- /** |
- * AlertDialog contains just a message and an ok button. |
- */ |
- function AlertDialog(parentNode) { |
- BaseDialog.apply(this, [parentNode]); |
- this.cancelButton_.style.display = 'none'; |
- } |
- |
- AlertDialog.prototype = {__proto__: BaseDialog.prototype}; |
- |
- AlertDialog.prototype.show = function(message, onOk, onShow) { |
- return BaseDialog.prototype.show.apply(this, [message, onOk, onOk, onShow]); |
- }; |
- |
- /** |
- * ConfirmDialog contains a message, an ok button, and a cancel button. |
- */ |
- function ConfirmDialog(parentNode) { |
- BaseDialog.apply(this, [parentNode]); |
- } |
- |
- ConfirmDialog.prototype = {__proto__: BaseDialog.prototype}; |
- |
- /** |
- * PromptDialog contains a message, a text input, an ok button, and a |
- * cancel button. |
- */ |
- function PromptDialog(parentNode) { |
- BaseDialog.apply(this, [parentNode]); |
- this.input_ = this.document_.createElement('input'); |
- this.input_.setAttribute('type', 'text'); |
- this.input_.addEventListener('focus', this.onInputFocus.bind(this)); |
- this.input_.addEventListener('keydown', this.onKeyDown_.bind(this)); |
- this.initialFocusElement_ = this.input_; |
- this.frame_.insertBefore(this.input_, this.text_.nextSibling); |
- } |
- |
- PromptDialog.prototype = {__proto__: BaseDialog.prototype}; |
- |
- PromptDialog.prototype.onInputFocus = function(event) { |
- this.input_.select(); |
- }; |
- |
- PromptDialog.prototype.onKeyDown_ = function(event) { |
- if (event.keyCode == 13) // Enter |
- this.onOkClick_(event); |
- }; |
- |
- PromptDialog.prototype.show = function(message, defaultValue, onOk, onCancel, |
- onShow) { |
- this.input_.value = defaultValue || ''; |
- return BaseDialog.prototype.show.apply(this, [message, onOk, onCancel, |
- onShow]); |
- }; |
- |
- PromptDialog.prototype.getValue = function() { |
- return this.input_.value; |
- }; |
- |
- PromptDialog.prototype.onOkClick_ = function(event) { |
- this.hide(); |
- if (this.onOk_) |
- this.onOk_(this.getValue()); |
- }; |
- |
- return { |
- BaseDialog: BaseDialog, |
- AlertDialog: AlertDialog, |
- ConfirmDialog: ConfirmDialog, |
- PromptDialog: PromptDialog |
- }; |
-}); |