/* YUI 3.17.2 (build 9c3c78e) Copyright 2014 Yahoo! Inc. All rights reserved. Licensed under the BSD License. http://yuilibrary.com/license/ */ YUI.add('calendar', function (Y, NAME) { /** * The Calendar component is a UI widget that allows users * to view dates in a two-dimensional month grid, as well as * to select one or more dates, or ranges of dates. Calendar * is generated dynamically and relies on the developer to * provide for a progressive enhancement alternative. * * * @module calendar */ var getCN = Y.ClassNameManager.getClassName, CALENDAR = 'calendar', KEY_DOWN = 40, KEY_UP = 38, KEY_LEFT = 37, KEY_RIGHT = 39, KEY_ENTER = 13, KEY_SPACE = 32, CAL_DAY_SELECTED = getCN(CALENDAR, 'day-selected'), CAL_DAY_HILITED = getCN(CALENDAR, 'day-highlighted'), CAL_DAY = getCN(CALENDAR, 'day'), CAL_PREVMONTH_DAY = getCN(CALENDAR, 'prevmonth-day'), CAL_NEXTMONTH_DAY = getCN(CALENDAR, 'nextmonth-day'), CAL_GRID = getCN(CALENDAR, 'grid'), ydate = Y.DataType.Date, CAL_PANE = getCN(CALENDAR, 'pane'), os = Y.UA.os; /** Create a calendar view to represent a single or multiple * month range of dates, rendered as a grid with date and * weekday labels. * * @class Calendar * @extends CalendarBase * @param config {Object} Configuration object (see Configuration attributes) * @constructor */ function Calendar() { Calendar.superclass.constructor.apply ( this, arguments ); } Y.Calendar = Y.extend(Calendar, Y.CalendarBase, { _keyEvents: [], _highlightedDateNode: null, /** * A property tracking the last selected date on the calendar, for the * purposes of multiple selection. * * @property _lastSelectedDate * @type Date * @default null * @private */ _lastSelectedDate: null, /** * Designated initializer. Activates the navigation plugin for the calendar. * * @method initializer */ initializer : function () { this.plug(Y.Plugin.CalendarNavigator); this._keyEvents = []; this._highlightedDateNode = null; this._lastSelectedDate = null; }, /** * Overrides the _bindCalendarEvents placeholder in CalendarBase * and binds calendar events during bindUI stage. * @method _bindCalendarEvents * @protected */ _bindCalendarEvents : function () { var contentBox = this.get('contentBox'), pane = contentBox.one("." + CAL_PANE); pane.on("selectstart", this._preventSelectionStart); pane.delegate("click", this._clickCalendar, "." + CAL_DAY + ", ." + CAL_PREVMONTH_DAY + ", ." + CAL_NEXTMONTH_DAY, this); pane.delegate("keydown", this._keydownCalendar, "." + CAL_GRID, this); pane.delegate("focus", this._focusCalendarGrid, "." + CAL_GRID, this); pane.delegate("focus", this._focusCalendarCell, "." + CAL_DAY, this); pane.delegate("blur", this._blurCalendarGrid, "." + CAL_GRID + ",." + CAL_DAY, this); this.after(['minimumDateChange', 'maximumDateChange'], this._afterCustomRendererChange); }, /** * Prevents text selection if it is started within the calendar pane * @method _preventSelectionStart * @param event {Event} The selectstart event * @protected */ _preventSelectionStart : function (event) { event.preventDefault(); }, /** * Highlights a specific date node with keyboard highlight class * @method _highlightDateNode * @param oDate {Date} Date corresponding the node to be highlighted * @protected */ _highlightDateNode : function (oDate) { this._unhighlightCurrentDateNode(); var newNode = this._dateToNode(oDate); newNode.focus(); newNode.addClass(CAL_DAY_HILITED); }, /** * Unhighlights a specific date node currently highlighted with keyboard highlight class * @method _unhighlightCurrentDateNode * @protected */ _unhighlightCurrentDateNode : function () { var allHilitedNodes = this.get("contentBox").all("." + CAL_DAY_HILITED); if (allHilitedNodes) { allHilitedNodes.removeClass(CAL_DAY_HILITED); } }, /** * Returns the grid number for a specific calendar grid (for multi-grid templates) * @method _getGridNumber * @param gridNode {Node} Node corresponding to a specific grid * @protected */ _getGridNumber : function (gridNode) { var idParts = gridNode.get("id").split("_").reverse(); return parseInt(idParts[0], 10); }, /** * Handler for loss of focus of calendar grid * @method _blurCalendarGrid * @protected */ _blurCalendarGrid : function () { this._unhighlightCurrentDateNode(); }, /** * Handler for gain of focus of calendar cell * @method _focusCalendarCell * @protected */ _focusCalendarCell : function (ev) { this._highlightedDateNode = ev.target; ev.stopPropagation(); }, /** * Handler for gain of focus of calendar grid * @method _focusCalendarGrid * @protected */ _focusCalendarGrid : function () { this._unhighlightCurrentDateNode(); this._highlightedDateNode = null; }, /** * Handler for keyboard press on a calendar grid * @method _keydownCalendar * @protected */ _keydownCalendar : function (ev) { var gridNum = this._getGridNumber(ev.target), curDate = !this._highlightedDateNode ? null : this._nodeToDate(this._highlightedDateNode), keyCode = ev.keyCode, dayNum = 0, dir = '', selMode, newDate, startDate, endDate, lastPaneDate; switch(keyCode) { case KEY_DOWN: dayNum = 7; dir = 's'; break; case KEY_UP: dayNum = -7; dir = 'n'; break; case KEY_LEFT: dayNum = -1; dir = 'w'; break; case KEY_RIGHT: dayNum = 1; dir = 'e'; break; case KEY_SPACE: case KEY_ENTER: ev.preventDefault(); if (this._highlightedDateNode) { selMode = this.get("selectionMode"); if (selMode === "single" && !this._highlightedDateNode.hasClass(CAL_DAY_SELECTED)) { this._clearSelection(true); this._addDateToSelection(curDate); } else if (selMode === "multiple" || selMode === "multiple-sticky") { if (this._highlightedDateNode.hasClass(CAL_DAY_SELECTED)) { this._removeDateFromSelection(curDate); } else { this._addDateToSelection(curDate); } } } break; } if (keyCode === KEY_DOWN || keyCode === KEY_UP || keyCode === KEY_LEFT || keyCode === KEY_RIGHT) { if (!curDate) { curDate = ydate.addMonths(this.get("date"), gridNum); dayNum = 0; } ev.preventDefault(); newDate = ydate.addDays(curDate, dayNum); startDate = this.get("date"); endDate = ydate.addMonths(this.get("date"), this._paneNumber - 1); lastPaneDate = new Date(endDate); endDate.setDate(ydate.daysInMonth(endDate)); if (ydate.isInRange(newDate, startDate, endDate)) { /* var paneShift = (newDate.getMonth() - curDate.getMonth()) % 10; if (paneShift != 0) { var newGridNum = gridNum + paneShift, contentBox = this.get('contentBox'), newPane = contentBox.one("#" + this._calendarId + "_pane_" + newGridNum); newPane.focus(); } */ this._highlightDateNode(newDate); } else if (ydate.isGreater(startDate, newDate)) { if (!ydate.isGreaterOrEqual(this.get("minimumDate"), startDate)) { this.set("date", ydate.addMonths(startDate, -1)); this._highlightDateNode(newDate); } } else if (ydate.isGreater(newDate, endDate)) { if (!ydate.isGreaterOrEqual(lastPaneDate, this.get("maximumDate"))) { this.set("date", ydate.addMonths(startDate, 1)); this._highlightDateNode(newDate); } } } }, /** * Handles the calendar clicks based on selection mode. * @method _clickCalendar * @param {Event} ev A click event * @private */ _clickCalendar : function (ev) { var clickedCell = ev.currentTarget, clickedCellIsDay = clickedCell.hasClass(CAL_DAY) && !clickedCell.hasClass(CAL_PREVMONTH_DAY) && !clickedCell.hasClass(CAL_NEXTMONTH_DAY), clickedCellIsSelected = clickedCell.hasClass(CAL_DAY_SELECTED), selectedDate; switch (this.get("selectionMode")) { case("single"): if (clickedCellIsDay) { if (!clickedCellIsSelected) { this._clearSelection(true); this._addDateToSelection(this._nodeToDate(clickedCell)); } } break; case("multiple-sticky"): if (clickedCellIsDay) { if (clickedCellIsSelected) { this._removeDateFromSelection(this._nodeToDate(clickedCell)); } else { this._addDateToSelection(this._nodeToDate(clickedCell)); } } break; case("multiple"): if (clickedCellIsDay) { if (!ev.metaKey && !ev.ctrlKey && !ev.shiftKey) { this._clearSelection(true); this._lastSelectedDate = this._nodeToDate(clickedCell); this._addDateToSelection(this._lastSelectedDate); } else if (((os === 'macintosh' && ev.metaKey) || (os !== 'macintosh' && ev.ctrlKey)) && !ev.shiftKey) { if (clickedCellIsSelected) { this._removeDateFromSelection(this._nodeToDate(clickedCell)); this._lastSelectedDate = null; } else { this._lastSelectedDate = this._nodeToDate(clickedCell); this._addDateToSelection(this._lastSelectedDate); } } else if (((os === 'macintosh' && ev.metaKey) || (os !== 'macintosh' && ev.ctrlKey)) && ev.shiftKey) { if (this._lastSelectedDate) { selectedDate = this._nodeToDate(clickedCell); this._addDateRangeToSelection(selectedDate, this._lastSelectedDate); this._lastSelectedDate = selectedDate; } else { this._lastSelectedDate = this._nodeToDate(clickedCell); this._addDateToSelection(this._lastSelectedDate); } } else if (ev.shiftKey) { if (this._lastSelectedDate) { selectedDate = this._nodeToDate(clickedCell); this._clearSelection(true); this._addDateRangeToSelection(selectedDate, this._lastSelectedDate); this._lastSelectedDate = selectedDate; } else { this._clearSelection(true); this._lastSelectedDate = this._nodeToDate(clickedCell); this._addDateToSelection(this._lastSelectedDate); } } } break; } if (clickedCellIsDay) { /** * Fired when a specific date cell in the calendar is clicked. The event carries a * payload which includes a `cell` property corresponding to the node of the actual * date cell, and a `date` property, with the `Date` that was clicked. * * @event dateClick */ this.fire("dateClick", {cell: clickedCell, date: this._nodeToDate(clickedCell)}); } else if (clickedCell.hasClass(CAL_PREVMONTH_DAY)) { /** * Fired when any of the previous month's days displayed before the calendar grid * are clicked. * * @event prevMonthClick */ this.fire("prevMonthClick"); } else if (clickedCell.hasClass(CAL_NEXTMONTH_DAY)) { /** * Fired when any of the next month's days displayed after the calendar grid * are clicked. * * @event nextMonthClick */ this.fire("nextMonthClick"); } }, /** * Overrides CalendarBase.prototype._canBeSelected to disable * nodes earlier than minimumDate and later than maximumDate * @method _canBeSelected * @private */ _canBeSelected : function (date) { var minDate = this.get('minimumDate'), maxDate = this.get('maximumDate'); if ((minDate && !ydate.isGreaterOrEqual(date, minDate)) || (maxDate && ydate.isGreater(date, maxDate))) { return false; } return Calendar.superclass._canBeSelected.call(this, date); }, /** * Overrides CalendarBase.prototype._renderCustomRules to disable * nodes earlier than minimumDate and later than maximumDate * @method _renderCustomRules * @private */ _renderCustomRules: function () { Calendar.superclass._renderCustomRules.call(this); var minDate = this.get('minimumDate'), maxDate = this.get('maximumDate'), dates = [], i, l, paneDate, paneNum; if (!minDate && !maxDate) { return; } for (paneNum = 0; paneNum < this._paneNumber; paneNum++) { paneDate = ydate.addMonths(this.get("date"), paneNum); dates = dates.concat(ydate.listOfDatesInMonth(paneDate)); } if (minDate) { for (i = 0, l = dates.length; i < l; i++) { if (!ydate.isGreaterOrEqual(dates[i], minDate)) { this._disableDate(dates[i]); } else { break; } } } if (maxDate) { for (i = dates.length - 1; i >= 0; i--) { if (ydate.isGreater(dates[i], maxDate)) { this._disableDate(dates[i]); } else { break; } } } }, /** * Subtracts one month from the current calendar view. * @method subtractMonth * @return {Calendar} A reference to this object * @chainable */ subtractMonth : function (e) { this.set("date", ydate.addMonths(this.get("date"), -1)); if (e) { e.halt(); } return this; }, /** * Subtracts one year from the current calendar view. * @method subtractYear * @return {Calendar} A reference to this object * @chainable */ subtractYear : function (e) { this.set("date", ydate.addYears(this.get("date"), -1)); if (e) { e.halt(); } return this; }, /** * Adds one month to the current calendar view. * @method addMonth * @return {Calendar} A reference to this object * @chainable */ addMonth : function (e) { this.set("date", ydate.addMonths(this.get("date"), 1)); if (e) { e.halt(); } return this; }, /** * Adds one year to the current calendar view. * @method addYear * @return {Calendar} A reference to this object * @chainable */ addYear : function (e) { this.set("date", ydate.addYears(this.get("date"), 1)); if (e) { e.halt(); } return this; } }, { /** * The identity of the widget. * * @property NAME * @type String * @default 'calendar' * @readOnly * @protected * @static */ NAME: "calendar", /** * Static property used to define the default attribute configuration of * the Widget. * * @property ATTRS * @type {Object} * @protected * @static */ ATTRS: { /** * A setting specifying the type of selection the calendar allows. * Possible values include: *