src/third_party/closure_library/closure/goog/ui/defaultdatepickerrenderer.js

// Copyright 2013 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 The default renderer for {@link goog.ui.DatePicker}.
 *
 * @see ../demos/datepicker.html
 */

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

goog.require('goog.dom');
goog.require('goog.dom.TagName');
/** @suppress {extraRequire} Interface. */
goog.require('goog.ui.DatePickerRenderer');



/**
 * Default renderer for {@link goog.ui.DatePicker}. Renders the date picker's
 * navigation header and footer.
 *
 * @param {string} baseCssClass Name of base CSS class of the date picker.
 * @param {goog.dom.DomHelper=} opt_domHelper DOM helper.
 * @constructor
 * @implements {goog.ui.DatePickerRenderer}
 */
goog.ui.DefaultDatePickerRenderer = function(baseCssClass, opt_domHelper) {
  /**
   * Name of base CSS class of datepicker
   * @type {string}
   * @private
   */
  this.baseCssClass_ = baseCssClass;

  /**
   * @type {!goog.dom.DomHelper}
   * @private
   */
  this.dom_ = opt_domHelper || goog.dom.getDomHelper();
};


/**
 * Returns the dom helper that is being used on this component.
 * @return {!goog.dom.DomHelper} The dom helper used on this component.
 */
goog.ui.DefaultDatePickerRenderer.prototype.getDomHelper = function() {
  return this.dom_;
};


/**
 * Returns base CSS class. This getter is used to get base CSS class part.
 * All CSS class names in component are created as:
 *   goog.getCssName(this.getBaseCssClass(), 'CLASS_NAME')
 * @return {string} Base CSS class.
 */
goog.ui.DefaultDatePickerRenderer.prototype.getBaseCssClass = function() {
  return this.baseCssClass_;
};


/**
 * Render the navigation row (navigating months and maybe years).
 *
 * @param {!Element} row The parent element to render the component into.
 * @param {boolean} simpleNavigation Whether the picker should render a simple
 *     navigation menu that only contains controls for navigating to the next
 *     and previous month. The default navigation menu contains controls for
 *     navigating to the next/previous month, next/previous year, and menus for
 *     jumping to specific months and years.
 * @param {boolean} showWeekNum Whether week numbers should be shown.
 * @param {string} fullDateFormat The full date format.
 *     {@see goog.i18n.DateTimeSymbols}.
 * @override
 */
goog.ui.DefaultDatePickerRenderer.prototype.renderNavigationRow =
    function(row, simpleNavigation, showWeekNum, fullDateFormat) {
  // Populate the navigation row according to the configured navigation mode.
  var cell, monthCell, yearCell;

  if (simpleNavigation) {
    cell = this.getDomHelper().createElement(goog.dom.TagName.TD);
    cell.colSpan = showWeekNum ? 1 : 2;
    this.createButton_(cell, '\u00AB',
        goog.getCssName(this.getBaseCssClass(), 'previousMonth'));  // <<
    row.appendChild(cell);

    cell = this.getDomHelper().createElement(goog.dom.TagName.TD);
    cell.colSpan = showWeekNum ? 6 : 5;
    cell.className = goog.getCssName(this.getBaseCssClass(), 'monthyear');
    row.appendChild(cell);

    cell = this.getDomHelper().createElement(goog.dom.TagName.TD);
    this.createButton_(cell, '\u00BB',
        goog.getCssName(this.getBaseCssClass(), 'nextMonth'));  // >>
    row.appendChild(cell);

  } else {
    monthCell = this.getDomHelper().createElement(goog.dom.TagName.TD);
    monthCell.colSpan = 5;
    this.createButton_(monthCell, '\u00AB',
        goog.getCssName(this.getBaseCssClass(), 'previousMonth'));  // <<
    this.createButton_(monthCell, '',
        goog.getCssName(this.getBaseCssClass(), 'month'));
    this.createButton_(monthCell, '\u00BB',
        goog.getCssName(this.getBaseCssClass(), 'nextMonth'));  // >>

    yearCell = this.getDomHelper().createElement(goog.dom.TagName.TD);
    yearCell.colSpan = 3;
    this.createButton_(yearCell, '\u00AB',
        goog.getCssName(this.getBaseCssClass(), 'previousYear'));  // <<
    this.createButton_(yearCell, '',
        goog.getCssName(this.getBaseCssClass(), 'year'));
    this.createButton_(yearCell, '\u00BB',
        goog.getCssName(this.getBaseCssClass(), 'nextYear'));  // <<

    // If the date format has year ('y') appearing first before month ('m'),
    // show the year on the left hand side of the datepicker popup.  Otherwise,
    // show the month on the left side.  This check assumes the data to be
    // valid, and that all date formats contain month and year.
    if (fullDateFormat.indexOf('y') < fullDateFormat.indexOf('m')) {
      row.appendChild(yearCell);
      row.appendChild(monthCell);
    } else {
      row.appendChild(monthCell);
      row.appendChild(yearCell);
    }
  }
};


/**
 * Render the footer row (with select buttons).
 *
 * @param {!Element} row The parent element to render the component into.
 * @param {boolean} showWeekNum Whether week numbers should be shown.
 * @override
 */
goog.ui.DefaultDatePickerRenderer.prototype.renderFooterRow =
    function(row, showWeekNum) {
  // Populate the footer row with buttons for Today and None.
  var cell = this.getDomHelper().createElement(goog.dom.TagName.TD);
  cell.colSpan = showWeekNum ? 2 : 3;
  cell.className = goog.getCssName(this.getBaseCssClass(), 'today-cont');

  /** @desc Label for button that selects the current date. */
  var MSG_DATEPICKER_TODAY_BUTTON_LABEL = goog.getMsg('Today');
  this.createButton_(cell, MSG_DATEPICKER_TODAY_BUTTON_LABEL,
      goog.getCssName(this.getBaseCssClass(), 'today-btn'));
  row.appendChild(cell);

  cell = this.getDomHelper().createElement(goog.dom.TagName.TD);
  cell.colSpan = showWeekNum ? 4 : 3;
  row.appendChild(cell);

  cell = this.getDomHelper().createElement(goog.dom.TagName.TD);
  cell.colSpan = 2;
  cell.className = goog.getCssName(this.getBaseCssClass(), 'none-cont');

  /** @desc Label for button that clears the selection. */
  var MSG_DATEPICKER_NONE = goog.getMsg('None');
  this.createButton_(cell, MSG_DATEPICKER_NONE,
      goog.getCssName(this.getBaseCssClass(), 'none-btn'));
  row.appendChild(cell);
};


/**
 * Support function for button creation.
 *
 * @param {Element} parentNode Container the button should be added to.
 * @param {string} label Button label.
 * @param {string=} opt_className Class name for button, which will be used
 *    in addition to "goog-date-picker-btn".
 * @private
 * @return {!Element} The created button element.
 */
goog.ui.DefaultDatePickerRenderer.prototype.createButton_ =
    function(parentNode, label, opt_className) {
  var classes = [goog.getCssName(this.getBaseCssClass(), 'btn')];
  if (opt_className) {
    classes.push(opt_className);
  }
  var el = this.getDomHelper().createElement(goog.dom.TagName.BUTTON);
  el.className = classes.join(' ');
  el.appendChild(this.getDomHelper().createTextNode(label));
  parentNode.appendChild(el);
  return el;
};