[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('calendarnavigator', function (Y, NAME) {
   9  
  10  /**
  11   * Provides a plugin which adds navigation controls to Calendar.
  12   *
  13   * @module calendarnavigator
  14   */
  15  var CONTENT_BOX = "contentBox",
  16      HOST        = "host",
  17      getCN       = Y.ClassNameManager.getClassName,
  18      substitute  = Y.Lang.sub,
  19      node        = Y.Node,
  20      create      = node.create,
  21      CALENDAR    = 'calendar',
  22      CALENDARNAV = 'calendarnav',
  23      CAL_HD      = getCN(CALENDAR, 'header'),
  24      CAL_PREV_M  = getCN(CALENDARNAV, 'prevmonth'),
  25      CAL_NEXT_M  = getCN(CALENDARNAV, 'nextmonth'),
  26      CAL_DIS_M   = getCN(CALENDARNAV, 'month-disabled'),
  27      ydate       = Y.DataType.Date;
  28  /**
  29   * A plugin class which adds navigation controls to Calendar.
  30   *
  31   * @class CalendarNavigator
  32   * @extends Plugin.Base
  33   * @namespace Plugin
  34   */
  35  function CalendarNavigator() {
  36      CalendarNavigator.superclass.constructor.apply(this, arguments);
  37  }
  38  
  39  /**
  40   * The namespace for the plugin. This will be the property on the widget, which will
  41   * reference the plugin instance, when it's plugged in.
  42   *
  43   * @property NS
  44   * @static
  45   * @type String
  46   * @default "navigator"
  47   */
  48  CalendarNavigator.NS = "navigator";
  49  
  50  /**
  51   * The NAME of the CalendarNavigator class. Used to prefix events generated
  52   * by the plugin class.
  53   *
  54   * @property NAME
  55   * @static
  56   * @type String
  57   * @default "pluginCalendarNavigator"
  58   */
  59  CalendarNavigator.NAME = "pluginCalendarNavigator";
  60  
  61  
  62  /**
  63   * Static property used to define the default attribute
  64   * configuration for the plugin.
  65   *
  66   * @property ATTRS
  67   * @type Object
  68   * @static
  69   */
  70  CalendarNavigator.ATTRS = {
  71  
  72      /**
  73       * The number of months to shift by when the control arrows are clicked.
  74       *
  75       * @attribute shiftByMonths
  76       * @type Number
  77       * @default 1 (months)
  78       */
  79      shiftByMonths : {
  80          value: 1
  81      }
  82  };
  83  
  84     /**
  85      * The CSS classnames for the calendar navigator controls.
  86      * @property CALENDARNAV_STRINGS
  87      * @type Object
  88      * @readOnly
  89      * @protected
  90      * @static
  91      */
  92  CalendarNavigator.CALENDARNAV_STRINGS = {
  93     prev_month_class: CAL_PREV_M,
  94     next_month_class: CAL_NEXT_M
  95  };
  96  
  97     /**
  98      * The template for the calendar navigator previous month control.
  99      * @property PREV_MONTH_CONTROL_TEMPLATE
 100      * @type String
 101      * @protected
 102      * @static
 103      */
 104  CalendarNavigator.PREV_MONTH_CONTROL_TEMPLATE = '<a class="yui3-u {prev_month_class}" role="button" aria-label="{prev_month_arialabel}" ' +
 105                                                      'tabindex="{control_tabindex}" />';
 106     /**
 107      * The template for the calendar navigator next month control.
 108      * @property NEXT_MONTH_CONTROL_TEMPLATE
 109      * @type String
 110      * @readOnly
 111      * @protected
 112      * @static
 113      */
 114  CalendarNavigator.NEXT_MONTH_CONTROL_TEMPLATE = '<a class="yui3-u {next_month_class}" role="button" aria-label="{next_month_arialabel}" ' +
 115                                                      'tabindex="{control_tabindex}" />';
 116  
 117  
 118  Y.extend(CalendarNavigator, Y.Plugin.Base, {
 119  
 120      _eventAttachments : {},
 121      _controls: {},
 122  
 123      /**
 124       * The initializer lifecycle implementation. Modifies the host widget's
 125       * render to add navigation controls.
 126       *
 127       * @method initializer
 128       */
 129      initializer : function() {
 130  
 131          // After the host has rendered its UI, place the navigation cotnrols
 132          this._controls = {};
 133          this._eventAttachments = {};
 134  
 135          this.afterHostMethod("renderUI", this._initNavigationControls);
 136      },
 137  
 138      /**
 139       * The initializer destructor implementation. Responsible for destroying the initialized
 140       * control mechanisms.
 141       *
 142       * @method destructor
 143       */
 144      destructor : function() {
 145  
 146      },
 147  
 148      /**
 149       * Private utility method that focuses on a navigation button when it is clicked
 150       * or pressed with a keyboard.
 151       *
 152       * @method _focusNavigation
 153       * @param {Event} ev Click or keydown event from the controls
 154       * @protected
 155       */
 156      _focusNavigation : function (ev) {
 157          ev.currentTarget.focus();
 158      },
 159  
 160      /**
 161       * Private utility method that subtracts months from the host calendar date
 162       * based on the control click and the shiftByMonths property.
 163       *
 164       * @method _subtractMonths
 165       * @param {Event} ev Click event from the controls
 166       * @protected
 167       */
 168      _subtractMonths : function (ev) {
 169          if ( (ev.type === "click") || (ev.type === "keydown" && (ev.keyCode === 13 || ev.keyCode === 32)) ) {
 170              var host = this.get(HOST),
 171                  oldDate = host.get("date");
 172              host.set("date", ydate.addMonths(oldDate, -1*this.get("shiftByMonths")));
 173              ev.preventDefault();
 174          }
 175      },
 176  
 177      /**
 178       * Private utility method that adds months to the host calendar date
 179       * based on the control click and the shiftByMonths property.
 180       *
 181       * @method _addMonths
 182       * @param {Event} ev Click event from the controls
 183       * @protected
 184       */
 185      _addMonths : function (ev) {
 186          if ( (ev.type === "click") || (ev.type === "keydown" && (ev.keyCode === 13 || ev.keyCode === 32)) ) {
 187              var host = this.get(HOST),
 188                  oldDate = host.get("date");
 189              host.set("date", ydate.addMonths(oldDate, this.get("shiftByMonths")));
 190              ev.preventDefault();
 191          }
 192      },
 193  
 194  
 195      _updateControlState : function () {
 196  
 197          var host      = this.get(HOST),
 198              startDate = host.get('date'),
 199              endDate   = ydate.addMonths(startDate, host._paneNumber - 1),
 200              minDate   = host._normalizeDate(host.get("minimumDate")),
 201              maxDate   = host._normalizeDate(host.get("maximumDate"));
 202  
 203          if (ydate.areEqual(minDate, startDate)) {
 204              if (this._eventAttachments.prevMonth) {
 205                  this._eventAttachments.prevMonth.detach();
 206                  this._eventAttachments.prevMonth = false;
 207              }
 208  
 209              if (!this._controls.prevMonth.hasClass(CAL_DIS_M)) {
 210                  this._controls.prevMonth.addClass(CAL_DIS_M).setAttribute("aria-disabled", "true");
 211              }
 212          }
 213          else {
 214              if (!this._eventAttachments.prevMonth) {
 215              this._eventAttachments.prevMonth = this._controls.prevMonth.on(["click", "keydown"], this._subtractMonths, this);
 216              }
 217              if (this._controls.prevMonth.hasClass(CAL_DIS_M)) {
 218                this._controls.prevMonth.removeClass(CAL_DIS_M).setAttribute("aria-disabled", "false");
 219              }
 220          }
 221  
 222          if (ydate.areEqual(maxDate, endDate)) {
 223              if (this._eventAttachments.nextMonth) {
 224                  this._eventAttachments.nextMonth.detach();
 225                  this._eventAttachments.nextMonth = false;
 226              }
 227  
 228              if (!this._controls.nextMonth.hasClass(CAL_DIS_M)) {
 229                  this._controls.nextMonth.addClass(CAL_DIS_M).setAttribute("aria-disabled", "true");
 230              }
 231          }
 232          else {
 233              if (!this._eventAttachments.nextMonth) {
 234              this._eventAttachments.nextMonth = this._controls.nextMonth.on(["click", "keydown"], this._addMonths, this);
 235              }
 236              if (this._controls.nextMonth.hasClass(CAL_DIS_M)) {
 237                this._controls.nextMonth.removeClass(CAL_DIS_M).setAttribute("aria-disabled", "false");
 238              }
 239          }
 240  
 241          this._controls.prevMonth.on(["click", "keydown"], this._focusNavigation, this);
 242          this._controls.nextMonth.on(["click", "keydown"], this._focusNavigation, this);
 243      },
 244  
 245  
 246  
 247  
 248      /**
 249       * Private render assist method that renders the previous month control
 250       *
 251       * @method _renderPrevControls
 252       * @private
 253       */
 254      _renderPrevControls : function () {
 255        var prevControlNode = create(substitute (CalendarNavigator.PREV_MONTH_CONTROL_TEMPLATE,
 256                                 CalendarNavigator.CALENDARNAV_STRINGS));
 257        prevControlNode.on("selectstart", this.get(HOST)._preventSelectionStart);
 258  
 259        return prevControlNode;
 260      },
 261  
 262      /**
 263       * Private render assist method that renders the next month control
 264       *
 265       * @method _renderNextControls
 266       * @private
 267       */
 268      _renderNextControls : function () {
 269        var nextControlNode = create(substitute (CalendarNavigator.NEXT_MONTH_CONTROL_TEMPLATE,
 270                                 CalendarNavigator.CALENDARNAV_STRINGS));
 271        nextControlNode.on("selectstart", this.get(HOST)._preventSelectionStart);
 272  
 273        return nextControlNode;
 274      },
 275  
 276      /**
 277       * Protected render assist method that initialized and renders the navigation controls.
 278       * @method _initNavigationControls
 279       * @protected
 280       */
 281      _initNavigationControls : function() {
 282          var host = this.get(HOST),
 283              headerCell = host.get(CONTENT_BOX).one("." + CAL_HD);
 284  
 285          CalendarNavigator.CALENDARNAV_STRINGS.control_tabindex = host.get("tabIndex");
 286          CalendarNavigator.CALENDARNAV_STRINGS.prev_month_arialabel = "Go to previous month";
 287          CalendarNavigator.CALENDARNAV_STRINGS.next_month_arialabel = "Go to next month";
 288  
 289          this._controls.prevMonth = this._renderPrevControls();
 290          this._controls.nextMonth = this._renderNextControls();
 291  
 292          this._updateControlState();
 293  
 294          host.after(["dateChange", "minimumDateChange", "maximumDateChange"], this._updateControlState, this);
 295  
 296          headerCell.prepend(this._controls.prevMonth);
 297          headerCell.append(this._controls.nextMonth);
 298      }
 299  });
 300  
 301  Y.namespace("Plugin").CalendarNavigator = CalendarNavigator;
 302  
 303  
 304  }, '3.17.2', {"requires": ["plugin", "classnamemanager", "datatype-date", "node"], "skinnable": true});