goog.ui.prompt.js Maven / Gradle / Ivy

Go to download
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/**
 * @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');
goog.require('goog.userAgent');



/**
 * 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) {
  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_ = goog.isDef(opt_defaultValue) ? 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);
goog.tagUnsealableClass(goog.ui.Prompt);


/**
 * 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  text box)
 * @type {HTMLInputElement}
 * @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  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) {
  this.validationFn_ = fn;
};


/** @override */
goog.ui.Prompt.prototype.enterDocument = function() {
  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} The user input element. May be null if the Prompt
 *     has not been rendered.
 */
goog.ui.Prompt.prototype.getInputElement = function() {
  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) {
  this.inputDecoratorFn_ = inputDecoratorFn;
};


/**
 * Set the number of rows in the user input element.
 * A values of 1 means use an `` element.  If the prompt is already
 * rendered then you cannot change from `` to `` 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) {
  if (this.isInDocument()) {
    if (this.userInputEl_.tagName == goog.dom.TagName.INPUT) {
      if (rows > 1) {
        throw Error(goog.ui.Component.Error.ALREADY_RENDERED);
      }
    } else {
      if (rows <= 1) {
        throw 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() {
  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) {
  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() {
  return this.cols_;
};


/**
 * Create the initial DOM representation for the prompt.
 * @override
 */
goog.ui.Prompt.prototype.createDom = function() {
  goog.ui.Prompt.superClass_.createDom.call(this);

  var cls = this.getClass();

  // add input box to the content
  var attrs = {
    'className': goog.getCssName(cls, 'userInput'),
    'value': this.defaultValue_
  };
  if (this.rows_ == 1) {
    // If rows == 1 then use an input element.
    this.userInputEl_ = /** @type {!HTMLInputElement} */
        (this.getDomHelper().createDom(goog.dom.TagName.INPUT, attrs));
    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_ = /** @type {!HTMLInputElement} */
        (this.getDomHelper().createDom(goog.dom.TagName.TEXTAREA, attrs));
    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() {
  this.updateOkButtonState_();
};


/**
 * Set OK button enabled/disabled state based on input.
 * @private
 */
goog.ui.Prompt.prototype.updateOkButtonState_ = function() {
  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) {
  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() {
  goog.ui.Prompt.base(this, 'focus');

  if (goog.userAgent.OPERA) {
    // select() doesn't focus <input> elements in Opera.
    this.userInputEl_.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) {
  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) {
  /*
   * 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() {
  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;
};
</code></pre>    <br/>
    <br/>
<div class='clear'></div>
</main>
</div>
<br/><br/>
    <div class="align-center">© 2015 - 2025 <a href="/legal-notice.php">Weber Informatics LLC</a> | <a href="/data-protection.php">Privacy Policy</a></div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>