API Docs for: 3.8.0
Show:

File: calendar/js/calendarnavigator.js

  1. /**
  2.  * Provides a plugin which adds navigation controls to Calendar.
  3.  *
  4.  * @module calendarnavigator
  5.  */
  6. var CONTENT_BOX = "contentBox",
  7.     HOST        = "host",
  8.     getCN       = Y.ClassNameManager.getClassName,
  9.     substitute  = Y.Lang.sub,
  10.     node        = Y.Node,
  11.     create      = node.create,
  12.     CALENDAR    = 'calendar',
  13.     CALENDARNAV = 'calendarnav',
  14.     CAL_HD      = getCN(CALENDAR, 'header'),
  15.     CAL_PREV_M  = getCN(CALENDARNAV, 'prevmonth'),
  16.     CAL_NEXT_M  = getCN(CALENDARNAV, 'nextmonth'),
  17.     CAL_DIS_M   = getCN(CALENDARNAV, 'month-disabled'),
  18.     ydate       = Y.DataType.Date;
  19. /**
  20.  * A plugin class which adds navigation controls to Calendar.
  21.  *
  22.  * @class CalendarNavigator
  23.  * @extends Plugin.Base
  24.  * @namespace Plugin
  25.  */
  26. function CalendarNavigator() {
  27.     CalendarNavigator.superclass.constructor.apply(this, arguments);
  28. }

  30. /**
  31.  * The namespace for the plugin. This will be the property on the widget, which will
  32.  * reference the plugin instance, when it's plugged in.
  33.  *
  34.  * @property NS
  35.  * @static
  36.  * @type String
  37.  * @default "navigator"
  38.  */
  39. CalendarNavigator.NS = "navigator";

  41. /**
  42.  * The NAME of the CalendarNavigator class. Used to prefix events generated
  43.  * by the plugin class.
  44.  *
  45.  * @property NAME
  46.  * @static
  47.  * @type String
  48.  * @default "pluginCalendarNavigator"
  49.  */
  50. CalendarNavigator.NAME = "pluginCalendarNavigator";


  53. /**
  54.  * Static property used to define the default attribute
  55.  * configuration for the plugin.
  56.  *
  57.  * @property ATTRS
  58.  * @type Object
  59.  * @static
  60.  */
  61. CalendarNavigator.ATTRS = {

  63.     /**
  64.      * The number of months to shift by when the control arrows are clicked.
  65.      *
  66.      * @attribute shiftByMonths
  67.      * @type Number
  68.      * @default 1 (months)
  69.      */
  70.     shiftByMonths : {
  71.         value: 1
  72.     }
  73. };

  75.    /**
  76.     * The CSS classnames for the calendar navigator controls.
  77.     * @property CALENDARNAV_STRINGS
  78.     * @type Object
  79.     * @readOnly
  80.     * @protected
  81.     * @static
  82.     */
  83. CalendarNavigator.CALENDARNAV_STRINGS = {
  84.    prev_month_class: CAL_PREV_M,
  85.    next_month_class: CAL_NEXT_M
  86. };

  88.    /**
  89.     * The template for the calendar navigator previous month control.
  90.     * @property PREV_MONTH_CONTROL_TEMPLATE
  91.     * @type String
  92.     * @protected
  93.     * @static
  94.     */
  95. CalendarNavigator.PREV_MONTH_CONTROL_TEMPLATE = '<a class="yui3-u {prev_month_class}" role="button" aria-label="{prev_month_arialabel}" ' +
  96.                                                     'tabindex="{control_tabindex}">' +
  97.                                                     "<span>&lt;</span>" +
  98.                                                 '</a>';
  99.    /**
  100.     * The template for the calendar navigator next month control.
  101.     * @property NEXT_MONTH_CONTROL_TEMPLATE
  102.     * @type String
  103.     * @readOnly
  104.     * @protected
  105.     * @static
  106.     */
  107. CalendarNavigator.NEXT_MONTH_CONTROL_TEMPLATE = '<a class="yui3-u {next_month_class}" role="button" aria-label="{next_month_arialabel}" ' +
  108.                                                     'tabindex="{control_tabindex}">' +
  109.                                                     "<span>&gt;</span>" +
  110.                                                 '</a>';


  113. Y.extend(CalendarNavigator, Y.Plugin.Base, {

  115.     _eventAttachments : {},
  116.     _controls: {},

  118.     /**
  119.      * The initializer lifecycle implementation. Modifies the host widget's
  120.      * render to add navigation controls.
  121.      *
  122.      * @method initializer
  123.      */
  124.     initializer : function() {

  126.         // After the host has rendered its UI, place the navigation cotnrols
  127.         this._controls = {};
  128.         this._eventAttachments = {};

  130.         this.afterHostMethod("renderUI", this._initNavigationControls);
  131.     },

  133.     /**
  134.      * The initializer destructor implementation. Responsible for destroying the initialized
  135.      * control mechanisms.
  136.      *
  137.      * @method destructor
  138.      */
  139.     destructor : function() {

  141.     },

  143.     /**
  144.      * Private utility method that focuses on a navigation button when it is clicked
  145.      * or pressed with a keyboard.
  146.      *
  147.      * @method _focusNavigation
  148.      * @param {Event} ev Click or keydown event from the controls
  149.      * @protected
  150.      */
  151.     _focusNavigation : function (ev) {
  152.         ev.currentTarget.focus();
  153.     },

  155.     /**
  156.      * Private utility method that subtracts months from the host calendar date
  157.      * based on the control click and the shiftByMonths property.
  158.      *
  159.      * @method _subtractMonths
  160.      * @param {Event} ev Click event from the controls
  161.      * @protected
  162.      */
  163.     _subtractMonths : function (ev) {
  164.         if ( (ev.type === "click") || (ev.type === "keydown" && (ev.keyCode === 13 || ev.keyCode === 32)) ) {
  165.             var host = this.get(HOST),
  166.                 oldDate = host.get("date");
  167.             host.set("date", ydate.addMonths(oldDate, -1*this.get("shiftByMonths")));
  168.             ev.preventDefault();
  169.         }
  170.     },

  172.     /**
  173.      * Private utility method that adds months to the host calendar date
  174.      * based on the control click and the shiftByMonths property.
  175.      *
  176.      * @method _addMonths
  177.      * @param {Event} ev Click event from the controls
  178.      * @protected
  179.      */
  180.     _addMonths : function (ev) {
  181.         if ( (ev.type === "click") || (ev.type === "keydown" && (ev.keyCode === 13 || ev.keyCode === 32)) ) {
  182.             var host = this.get(HOST),
  183.                 oldDate = host.get("date");
  184.             host.set("date", ydate.addMonths(oldDate, this.get("shiftByMonths")));
  185.             ev.preventDefault();
  186.         }
  187.     },


  190.     _updateControlState : function () {

  192.         var host = this.get(HOST);
  193.         if (ydate.areEqual(host.get("minimumDate"), host.get("date"))) {
  194.             if (this._eventAttachments.prevMonth) {
  195.                 this._eventAttachments.prevMonth.detach();
  196.                 this._eventAttachments.prevMonth = false;
  197.             }

  199.             if (!this._controls.prevMonth.hasClass(CAL_DIS_M)) {
  200.                 this._controls.prevMonth.addClass(CAL_DIS_M).setAttribute("aria-disabled", "true");
  201.             }
  202.         }
  203.         else {
  204.             if (!this._eventAttachments.prevMonth) {
  205.             this._eventAttachments.prevMonth = this._controls.prevMonth.on(["click", "keydown"], this._subtractMonths, this);
  206.             }
  207.             if (this._controls.prevMonth.hasClass(CAL_DIS_M)) {
  208.               this._controls.prevMonth.removeClass(CAL_DIS_M).setAttribute("aria-disabled", "false");
  209.             }
  210.         }

  212.         if (ydate.areEqual(host.get("maximumDate"), ydate.addMonths(host.get("date"), host._paneNumber - 1))) {
  213.             if (this._eventAttachments.nextMonth) {
  214.                 this._eventAttachments.nextMonth.detach();
  215.                 this._eventAttachments.nextMonth = false;
  216.             }

  218.             if (!this._controls.nextMonth.hasClass(CAL_DIS_M)) {
  219.                 this._controls.nextMonth.addClass(CAL_DIS_M).setAttribute("aria-disabled", "true");
  220.             }
  221.         }
  222.         else {
  223.             if (!this._eventAttachments.nextMonth) {
  224.             this._eventAttachments.nextMonth = this._controls.nextMonth.on(["click", "keydown"], this._addMonths, this);
  225.             }
  226.             if (this._controls.nextMonth.hasClass(CAL_DIS_M)) {
  227.               this._controls.nextMonth.removeClass(CAL_DIS_M).setAttribute("aria-disabled", "false");
  228.             }
  229.         }

  231.         this._controls.prevMonth.on(["click", "keydown"], this._focusNavigation, this);
  232.         this._controls.nextMonth.on(["click", "keydown"], this._focusNavigation, this);
  233.     },




  238.     /**
  239.      * Private render assist method that renders the previous month control
  240.      *
  241.      * @method _renderPrevControls
  242.      * @private
  243.      */
  244.     _renderPrevControls : function () {
  245.       var prevControlNode = create(substitute (CalendarNavigator.PREV_MONTH_CONTROL_TEMPLATE,
  246.                                CalendarNavigator.CALENDARNAV_STRINGS));
  247.       prevControlNode.on("selectstart", this.get(HOST)._preventSelectionStart);

  249.       return prevControlNode;
  250.     },

  252.     /**
  253.      * Private render assist method that renders the next month control
  254.      *
  255.      * @method _renderNextControls
  256.      * @private
  257.      */
  258.     _renderNextControls : function () {
  259.       var nextControlNode = create(substitute (CalendarNavigator.NEXT_MONTH_CONTROL_TEMPLATE,
  260.                                CalendarNavigator.CALENDARNAV_STRINGS));
  261.       nextControlNode.on("selectstart", this.get(HOST)._preventSelectionStart);

  263.       return nextControlNode;
  264.     },

  266.     /**
  267.      * Protected render assist method that initialized and renders the navigation controls.
  268.      * @method _initNavigationControls
  269.      * @protected
  270.      */
  271.     _initNavigationControls : function() {
  272.         var host = this.get(HOST),
  273.             headerCell = host.get(CONTENT_BOX).one("." + CAL_HD);

  275.         CalendarNavigator.CALENDARNAV_STRINGS.control_tabindex = host.get("tabIndex");
  276.         CalendarNavigator.CALENDARNAV_STRINGS.prev_month_arialabel = "Go to previous month";
  277.         CalendarNavigator.CALENDARNAV_STRINGS.next_month_arialabel = "Go to next month";

  279.         this._controls.prevMonth = this._renderPrevControls();
  280.         this._controls.nextMonth = this._renderNextControls();

  282.         this._updateControlState();

  284.         host.after("dateChange", this._updateControlState, this);

  286.         headerCell.prepend(this._controls.prevMonth);
  287.         headerCell.append(this._controls.nextMonth);
  288.     }
  289. });

  291. Y.namespace("Plugin").CalendarNavigator = CalendarNavigator;

  293.