path: root/contexts/data/lib/closure-library/closure/goog/ui/popupdatepicker.js

// Copyright 2007 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 Popup Date Picker implementation.  Pairs a goog.ui.DatePicker
 * with a goog.ui.Popup allowing the DatePicker to be attached to elements.
 *
 * @see ../demos/popupdatepicker.html
 */

goog.provide('goog.ui.PopupDatePicker');

goog.require('goog.events.EventType');
goog.require('goog.positioning.AnchoredPosition');
goog.require('goog.positioning.Corner');
goog.require('goog.style');
goog.require('goog.ui.Component');
goog.require('goog.ui.DatePicker');
goog.require('goog.ui.DatePicker.Events');
goog.require('goog.ui.Popup');
goog.require('goog.ui.PopupBase.EventType');



/**
 * Popup date picker widget.
 *
 * @param {goog.ui.DatePicker=} opt_datePicker Optional DatePicker.  This
 *     enables the use of a custom date-picker instance.
 * @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
 * @extends {goog.ui.Component}
 * @constructor
 */
goog.ui.PopupDatePicker = function(opt_datePicker, opt_domHelper) {
  goog.ui.Component.call(this, opt_domHelper);

  this.datePicker_ = opt_datePicker || new goog.ui.DatePicker();
};
goog.inherits(goog.ui.PopupDatePicker, goog.ui.Component);


/**
 * Instance of a date picker control.
 * @type {goog.ui.DatePicker?}
 * @private
 */
goog.ui.PopupDatePicker.prototype.datePicker_ = null;


/**
 * Instance of goog.ui.Popup used to manage the behavior of the date picker.
 * @type {goog.ui.Popup?}
 * @private
 */
goog.ui.PopupDatePicker.prototype.popup_ = null;


/**
 * Reference to the element that triggered the last popup.
 * @type {Element}
 * @private
 */
goog.ui.PopupDatePicker.prototype.lastTarget_ = null;


/**
 * Whether the date picker can move the focus to its key event target when it
 * is shown.  The default is true.  Setting to false can break keyboard
 * navigation, but this is needed for certain scenarios, for example the
 * toolbar menu in trogedit which can't have the selection changed.
 * @type {boolean}
 * @private
 */
goog.ui.PopupDatePicker.prototype.allowAutoFocus_ = true;


/** @override */
goog.ui.PopupDatePicker.prototype.createDom = function() {
  goog.ui.PopupDatePicker.superClass_.createDom.call(this);
  this.getElement().className = goog.getCssName('goog-popupdatepicker');
  this.popup_ = new goog.ui.Popup(this.getElement());
};


/** @override */
goog.ui.PopupDatePicker.prototype.enterDocument = function() {
  goog.ui.PopupDatePicker.superClass_.enterDocument.call(this);
  // Create the DatePicker, if it isn't already.
  // Done here as DatePicker assumes that the element passed to it is attached
  // to a document.
  if (!this.datePicker_.isInDocument()) {
    var el = this.getElement();
    // Make it initially invisible
    el.style.visibility = 'hidden';
    goog.style.showElement(el, false);
    this.datePicker_.decorate(el);
  }
  this.getHandler().listen(this.datePicker_, goog.ui.DatePicker.Events.CHANGE,
                           this.onDateChanged_);
};


/** @override */
goog.ui.PopupDatePicker.prototype.disposeInternal = function() {
  goog.ui.PopupDatePicker.superClass_.disposeInternal.call(this);
  if (this.popup_) {
    this.popup_.dispose();
    this.popup_ = null;
  }
  this.datePicker_.dispose();
  this.datePicker_ = null;
  this.lastTarget_ = null;
};


/**
 * DatePicker cannot be used to decorate pre-existing html, since they're
 * not based on Components.
 * @param {Element} element Element to decorate.
 * @return {boolean} Returns always false.
 * @override
 */
goog.ui.PopupDatePicker.prototype.canDecorate = function(element) {
  return false;
};


/**
 * @return {goog.ui.DatePicker} The date picker instance.
 */
goog.ui.PopupDatePicker.prototype.getDatePicker = function() {
  return this.datePicker_;
};


/**
 * @return {goog.date.Date?} The selected date, if any.  See
 *     goog.ui.DatePicker.getDate().
 */
goog.ui.PopupDatePicker.prototype.getDate = function() {
  return this.datePicker_.getDate();
};


/**
 * Sets the selected date.  See goog.ui.DatePicker.setDate().
 * @param {goog.date.Date?} date The date to select.
 */
goog.ui.PopupDatePicker.prototype.setDate = function(date) {
  this.datePicker_.setDate(date);
};


/**
 * @return {Element} The last element that triggered the popup.
 */
goog.ui.PopupDatePicker.prototype.getLastTarget = function() {
  return this.lastTarget_;
};


/**
 * Attaches the popup date picker to an element.
 * @param {Element} element The element to attach to.
 */
goog.ui.PopupDatePicker.prototype.attach = function(element) {
  this.getHandler().listen(element, goog.events.EventType.MOUSEDOWN,
                           this.showPopup_);
};


/**
 * Detatches the popup date picker from an element.
 * @param {Element} element The element to detach from.
 */
goog.ui.PopupDatePicker.prototype.detach = function(element) {
  this.getHandler().unlisten(element, goog.events.EventType.MOUSEDOWN,
                             this.showPopup_);
};


/**
 * Sets whether the date picker can automatically move focus to its key event
 * target when it is set to visible.
 * @param {boolean} allow Whether to allow auto focus.
 */
goog.ui.PopupDatePicker.prototype.setAllowAutoFocus = function(allow) {
  this.allowAutoFocus_ = allow;
};


/**
 * @return {boolean} Whether the date picker can automatically move focus to
 * its key event target when it is set to visible.
 */
goog.ui.PopupDatePicker.prototype.getAllowAutoFocus = function() {
  return this.allowAutoFocus_;
};


/**
 * Show the popup at the bottom-left corner of the specified element.
 * @param {Element} element Reference element for displaying the popup -- popup
 *     will appear at the bottom-left corner of this element.
 */
goog.ui.PopupDatePicker.prototype.showPopup = function(element) {
  this.lastTarget_ = element;
  this.popup_.setPosition(new goog.positioning.AnchoredPosition(
      element, goog.positioning.Corner.BOTTOM_START));

  // Don't listen to date changes while we're setting up the popup so we don't
  // have to worry about change events when we call setDate().
  this.getHandler().unlisten(this.datePicker_, goog.ui.DatePicker.Events.CHANGE,
                             this.onDateChanged_);
  this.datePicker_.setDate(null);

  // Forward the change event onto our listeners.  Done before we start
  // listening to date changes again, so that listeners can change the date
  // without firing more events.
  this.dispatchEvent(goog.ui.PopupBase.EventType.SHOW);

  this.getHandler().listen(this.datePicker_, goog.ui.DatePicker.Events.CHANGE,
                           this.onDateChanged_);
  this.popup_.setVisible(true);
  if (this.allowAutoFocus_) {
    this.getElement().focus();  // Our element contains the date picker.
  }
};


/**
 * Handles click events on the targets and shows the date picker.
 * @param {goog.events.Event} event The click event.
 * @private
 */
goog.ui.PopupDatePicker.prototype.showPopup_ = function(event) {
  this.showPopup(/** @type {Element} */ (event.currentTarget));
};


/**
 * Hides this popup.
 */
goog.ui.PopupDatePicker.prototype.hidePopup = function() {
  this.popup_.setVisible(false);
  if (this.allowAutoFocus_ && this.lastTarget_) {
    this.lastTarget_.focus();
  }
};


/**
 * Called when the date is changed.
 *
 * @param {goog.events.Event} event The date change event.
 * @private
 */
goog.ui.PopupDatePicker.prototype.onDateChanged_ = function(event) {
  this.hidePopup();

  // Forward the change event onto our listeners.
  this.dispatchEvent(event);
};