AutorÃa | Ultima modificación | Ver Log |
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:* <ul>* <li>`single` - One date at a time</li>* <li>`multiple-sticky` - Multiple dates, selected one at a time (the dates "stick"). This option* is appropriate for mobile devices, where function keys from the keyboard are not available.</li>* <li>`multiple` - Multiple dates, selected with Ctrl/Meta keys for additional single* dates, and Shift key for date ranges.</li>** @attribute selectionMode* @type String* @default single*/selectionMode: {value: "single"},/*** The date corresponding to the current calendar view. Always* normalized to the first of the month that contains the date* at assignment time. Used as the first date visible in the* calendar.** @attribute date* @type Date* @default Today's date as set on the user's computer.*/date: {value: new Date(),lazyAdd: false,setter: function (val) {var newDate = this._normalizeDate(val),newEndDate = ydate.addMonths(newDate, this._paneNumber - 1),minDate = this.get("minimumDate"),maxDate = this.get("maximumDate");if ((!minDate || ydate.isGreaterOrEqual(newDate, minDate)) &&(!maxDate || ydate.isGreaterOrEqual(maxDate, newEndDate))) {return newDate;} else if (minDate && ydate.isGreater(minDate, newDate)) {return this._normalizeDate(minDate);} else if (maxDate && ydate.isGreater(newEndDate, maxDate)) {return ydate.addMonths(this._normalizeDate(maxDate), 1 - this._paneNumber);}}},/*** Unless minimumDate is null, it will not be possible to display and select dates earlier than this one.** @attribute minimumDate* @type Date* @default null*/minimumDate: {value: null,setter: function (val) {if (Y.Lang.isDate(val)) {var curDate = this.get('date'),newMin = this._normalizeTime(val);if (curDate && !ydate.isGreaterOrEqual(curDate, newMin)) {this.set('date', val);}return newMin;} else {return null;}}},/*** Unless maximumDate is null, it will not be possible to display and select dates later than this one.** @attribute maximumDate* @type Date* @default null*/maximumDate: {value: null,setter: function (val) {if (Y.Lang.isDate(val)) {var curDate = this.get('date');if (curDate && !ydate.isGreaterOrEqual(val, ydate.addMonths(curDate, this._paneNumber - 1))) {this.set('date', ydate.addMonths(this._normalizeDate(val), 1 - this._paneNumber));}return this._normalizeTime(val);} else {return null;}}}}});}, '3.18.1', {"requires": ["calendar-base", "calendarnavigator"], "skinnable": true});