/**
* @license
* Copyright The Closure Library Authors.
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview DHTML prompt to replace javascript's prompt().
*
* @see ../demos/prompt.html
*/
goog.provide('goog.ui.Prompt');
goog.require('goog.Timer');
goog.require('goog.dom');
goog.require('goog.dom.InputType');
goog.require('goog.dom.TagName');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.functions');
goog.require('goog.html.SafeHtml');
goog.require('goog.ui.Component');
goog.require('goog.ui.Dialog');
/**
* Creates an object that represents a prompt (used in place of javascript's
* prompt). The html structure of the prompt is the same as the layout for
* dialog.js except for the addition of a text box which is placed inside the
* "Content area" and has the default class-name 'modal-dialog-userInput'
*
* @param {string} promptTitle The title of the prompt.
* @param {string|!goog.html.SafeHtml} promptBody The body of the prompt.
* String is treated as plain text and it will be HTML-escaped.
* @param {Function} callback The function to call when the user selects Ok or
* Cancel. The function should expect a single argument which represents
* what the user entered into the prompt. If the user presses cancel, the
* value of the argument will be null.
* @param {string=} opt_defaultValue Optional default value that should be in
* the text box when the prompt appears.
* @param {string=} opt_class Optional prefix for the classes.
* @param {boolean=} opt_useIframeForIE For IE, workaround windowed controls
* z-index issue by using a an iframe instead of a div for bg element.
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper; see {@link
* goog.ui.Component} for semantics.
* @constructor
* @extends {goog.ui.Dialog}
*/
goog.ui.Prompt = function(
promptTitle, promptBody, callback, opt_defaultValue, opt_class,
opt_useIframeForIE, opt_domHelper) {
'use strict';
goog.ui.Prompt.base(
this, 'constructor', opt_class, opt_useIframeForIE, opt_domHelper);
/**
* The id of the input element.
* @type {string}
* @private
*/
this.inputElementId_ = this.makeId('ie');
this.setTitle(promptTitle);
var label = goog.html.SafeHtml.create(
'label', {'for': this.inputElementId_},
goog.html.SafeHtml.htmlEscapePreservingNewlines(promptBody));
var br = goog.html.SafeHtml.BR;
this.setSafeHtmlContent(goog.html.SafeHtml.concat(label, br, br));
this.callback_ = callback;
this.defaultValue_ = (opt_defaultValue !== undefined) ? opt_defaultValue : '';
/** @desc label for a dialog button. */
var MSG_PROMPT_OK = goog.getMsg('OK');
/** @desc label for a dialog button. */
var MSG_PROMPT_CANCEL = goog.getMsg('Cancel');
var buttonSet = new goog.ui.Dialog.ButtonSet(opt_domHelper);
buttonSet.set(goog.ui.Dialog.DefaultButtonKeys.OK, MSG_PROMPT_OK, true);
buttonSet.set(
goog.ui.Dialog.DefaultButtonKeys.CANCEL, MSG_PROMPT_CANCEL, false, true);
this.setButtonSet(buttonSet);
};
goog.inherits(goog.ui.Prompt, goog.ui.Dialog);
/**
* Callback function which is invoked with the response to the prompt
* @type {Function}
* @private
*/
goog.ui.Prompt.prototype.callback_ = goog.nullFunction;
/**
* Default value to display in prompt window
* @type {string}
* @private
*/
goog.ui.Prompt.prototype.defaultValue_ = '';
/**
* Element in which user enters response (HTML <input> text box)
* @type {?HTMLInputElement|?HTMLTextAreaElement}
* @private
*/
goog.ui.Prompt.prototype.userInputEl_ = null;
/**
* Tracks whether the prompt is in the process of closing to prevent multiple
* calls to the callback when the user presses enter.
* @type {boolean}
* @private
*/
goog.ui.Prompt.prototype.isClosing_ = false;
/**
* Number of rows in the user input element.
* The default is 1 which means use an <input> element.
* @type {number}
* @private
*/
goog.ui.Prompt.prototype.rows_ = 1;
/**
* Number of cols in the user input element.
* The default is 0 which means use browser default.
* @type {number}
* @private
*/
goog.ui.Prompt.prototype.cols_ = 0;
/**
* The input decorator function.
* @type {?function(?Element)}
* @private
*/
goog.ui.Prompt.prototype.inputDecoratorFn_ = null;
/**
* A validation function that takes a string and returns true if the string is
* accepted, false otherwise.
* @type {function(string):boolean}
* @private
*/
goog.ui.Prompt.prototype.validationFn_ = goog.functions.TRUE;
/**
* Sets the validation function that takes a string and returns true if the
* string is accepted, false otherwise.
* @param {function(string): boolean} fn The validation function to use on user
* input.
*/
goog.ui.Prompt.prototype.setValidationFunction = function(fn) {
'use strict';
this.validationFn_ = fn;
};
/** @override */
goog.ui.Prompt.prototype.enterDocument = function() {
'use strict';
if (this.inputDecoratorFn_) {
this.inputDecoratorFn_(this.userInputEl_);
}
goog.ui.Prompt.superClass_.enterDocument.call(this);
this.getHandler().listen(
this, goog.ui.Dialog.EventType.SELECT, this.onPromptExit_);
this.getHandler().listen(
this.userInputEl_,
[goog.events.EventType.KEYUP, goog.events.EventType.CHANGE],
this.handleInputChanged_);
};
/**
* @return {?HTMLInputElement|?HTMLTextAreaElement} The user input element. May
* be null if the Prompt has not been rendered.
*/
goog.ui.Prompt.prototype.getInputElement = function() {
'use strict';
return this.userInputEl_;
};
/**
* Sets an input decorator function. This function will be called in
* #enterDocument and will be passed the input element. This is useful for
* attaching handlers to the input element for specific change events,
* for example.
* @param {function(Element)} inputDecoratorFn A function to call on the input
* element on #enterDocument.
*/
goog.ui.Prompt.prototype.setInputDecoratorFn = function(inputDecoratorFn) {
'use strict';
this.inputDecoratorFn_ = inputDecoratorFn;
};
/**
* Set the number of rows in the user input element.
* A values of 1 means use an `<input>` element. If the prompt is already
* rendered then you cannot change from `<input>` to `<textarea>` or vice versa.
* @param {number} rows Number of rows for user input element.
* @throws {goog.ui.Component.Error.ALREADY_RENDERED} If the component is
* already rendered and an attempt to change between `<input>` and
* `<textarea>` is made.
*/
goog.ui.Prompt.prototype.setRows = function(rows) {
'use strict';
if (this.isInDocument()) {
if (this.userInputEl_.tagName == goog.dom.TagName.INPUT) {
if (rows > 1) {
throw new Error(goog.ui.Component.Error.ALREADY_RENDERED);
}
} else {
if (rows <= 1) {
throw new Error(goog.ui.Component.Error.ALREADY_RENDERED);
}
this.userInputEl_.rows = rows;
}
}
this.rows_ = rows;
};
/**
* @return {number} The number of rows in the user input element.
*/
goog.ui.Prompt.prototype.getRows = function() {
'use strict';
return this.rows_;
};
/**
* Set the number of cols in the user input element.
* @param {number} cols Number of cols for user input element.
*/
goog.ui.Prompt.prototype.setCols = function(cols) {
'use strict';
this.cols_ = cols;
if (this.userInputEl_) {
if (this.userInputEl_.tagName == goog.dom.TagName.INPUT) {
this.userInputEl_.size = cols;
} else {
this.userInputEl_.cols = cols;
}
}
};
/**
* @return {number} The number of cols in the user input element.
*/
goog.ui.Prompt.prototype.getCols = function() {
'use strict';
return this.cols_;
};
/**
* Create the initial DOM representation for the prompt.
* @override
*/
goog.ui.Prompt.prototype.createDom = function() {
'use strict';
goog.ui.Prompt.superClass_.createDom.call(this);
var cls = this.getClass();
// add input box to the content
if (this.rows_ == 1) {
// If rows == 1 then use an input element.
this.userInputEl_ = this.getDomHelper().createDom(goog.dom.TagName.INPUT, {
'className': goog.getCssName(cls, 'userInput'),
'value': this.defaultValue_
});
this.userInputEl_.type = goog.dom.InputType.TEXT;
if (this.cols_) {
this.userInputEl_.size = this.cols_;
}
} else {
// If rows > 1 then use a textarea.
this.userInputEl_ =
this.getDomHelper().createDom(goog.dom.TagName.TEXTAREA, {
'className': goog.getCssName(cls, 'userInput'),
'value': this.defaultValue_
});
this.userInputEl_.rows = this.rows_;
if (this.cols_) {
this.userInputEl_.cols = this.cols_;
}
}
this.userInputEl_.id = this.inputElementId_;
var contentEl = this.getContentElement();
contentEl.appendChild(
this.getDomHelper().createDom(
goog.dom.TagName.DIV, {'style': 'overflow: auto'},
this.userInputEl_));
};
/**
* Handles input change events on the input field. Disables the OK button if
* validation fails on the new input value.
* @private
*/
goog.ui.Prompt.prototype.handleInputChanged_ = function() {
'use strict';
this.updateOkButtonState_();
};
/**
* Set OK button enabled/disabled state based on input.
* @private
*/
goog.ui.Prompt.prototype.updateOkButtonState_ = function() {
'use strict';
var enableOkButton = this.validationFn_(this.userInputEl_.value);
var buttonSet = this.getButtonSet();
buttonSet.setButtonEnabled(
goog.ui.Dialog.DefaultButtonKeys.OK, enableOkButton);
};
/**
* Causes the prompt to appear, centered on the screen, gives focus
* to the text box, and selects the text
* @param {boolean} visible Whether the dialog should be visible.
* @override
*/
goog.ui.Prompt.prototype.setVisible = function(visible) {
'use strict';
goog.ui.Prompt.base(this, 'setVisible', visible);
if (visible) {
this.isClosing_ = false;
this.userInputEl_.value = this.defaultValue_;
this.focus();
this.updateOkButtonState_();
}
};
/**
* Overrides setFocus to put focus on the input element.
* @override
*/
goog.ui.Prompt.prototype.focus = function() {
'use strict';
goog.ui.Prompt.base(this, 'focus');
this.userInputEl_.select();
};
/**
* Sets the default value of the prompt when it is displayed.
* @param {string} defaultValue The default value to display.
*/
goog.ui.Prompt.prototype.setDefaultValue = function(defaultValue) {
'use strict';
this.defaultValue_ = defaultValue;
};
/**
* Handles the closing of the prompt, invoking the callback function that was
* registered to handle the value returned by the prompt.
* @param {goog.ui.Dialog.Event} e The dialog's selection event.
* @private
*/
goog.ui.Prompt.prototype.onPromptExit_ = function(e) {
'use strict';
/*
* The timeouts below are required for one edge case. If after the dialog
* hides, suppose validation of the input fails which displays an alert. If
* the user pressed the Enter key to dismiss the alert that was displayed it
* can trigger the event handler a second time. This timeout ensures that the
* alert is displayed only after the prompt is able to clean itself up.
*/
if (!this.isClosing_) {
this.isClosing_ = true;
if (e.key == 'ok') {
goog.Timer.callOnce(
goog.bind(this.callback_, this, this.userInputEl_.value), 1);
} else {
goog.Timer.callOnce(goog.bind(this.callback_, this, null), 1);
}
}
};
/** @override */
goog.ui.Prompt.prototype.disposeInternal = function() {
'use strict';
goog.dom.removeNode(this.userInputEl_);
goog.events.unlisten(
this, goog.ui.Dialog.EventType.SELECT, this.onPromptExit_, true, this);
goog.ui.Prompt.superClass_.disposeInternal.call(this);
this.userInputEl_ = null;
};
Codebase Browser
chromium