lib/dijit/Calendar.js.uncompressed.js

   1 define("dijit/Calendar", [
   2         "dojo/_base/array", // array.map
   3         "dojo/date",
   4         "dojo/date/locale",
   5         "dojo/_base/declare", // declare
   6         "dojo/dom-attr", // domAttr.get
   7         "dojo/dom-class", // domClass.add domClass.contains domClass.remove domClass.toggle
   8         "dojo/_base/event", // event.stop
   9         "dojo/_base/kernel", // kernel.deprecated
  10         "dojo/keys", // keys
  11         "dojo/_base/lang", // lang.hitch
  12         "dojo/sniff", // has("ie")
  13         "./CalendarLite",
  14         "./_Widget",
  15         "./_CssStateMixin",
  16         "./_TemplatedMixin",
  17         "./form/DropDownButton"
  18 ], function(array, date, local, declare, domAttr, domClass, event, kernel, keys, lang, has,
  19                         CalendarLite, _Widget, _CssStateMixin, _TemplatedMixin, DropDownButton){
  20
  21         // module:
  22         //              dijit/Calendar
  23
  24         var Calendar = declare("dijit.Calendar",
  25                 [CalendarLite, _Widget, _CssStateMixin], // _Widget for deprecated methods like setAttribute()
  26                 {
  27                 // summary:
  28                 //              A simple GUI for choosing a date in the context of a monthly calendar.
  29                 //
  30                 // description:
  31                 //              See CalendarLite for general description.   Calendar extends CalendarLite, adding:
  32                 //
  33                 //              - month drop down list
  34                 //              - keyboard navigation
  35                 //              - CSS classes for hover/mousepress on date, month, and year nodes
  36                 //              - support of deprecated methods (will be removed in 2.0)
  37
  38                 // Set node classes for various mouse events, see dijit._CssStateMixin for more details
  39                 cssStateNodes: {
  40                         "decrementMonth": "dijitCalendarArrow",
  41                         "incrementMonth": "dijitCalendarArrow",
  42                         "previousYearLabelNode": "dijitCalendarPreviousYear",
  43                         "nextYearLabelNode": "dijitCalendarNextYear"
  44                 },
  45
  46                 setValue: function(/*Date*/ value){
  47                         // summary:
  48                         //              Deprecated.   Use set('value', ...) instead.
  49                         // tags:
  50                         //              deprecated
  51                         kernel.deprecated("dijit.Calendar:setValue() is deprecated.  Use set('value', ...) instead.", "", "2.0");
  52                         this.set('value', value);
  53                 },
  54
  55                 _createMonthWidget: function(){
  56                         // summary:
  57                         //              Creates the drop down button that displays the current month and lets user pick a new one
  58
  59                         return new Calendar._MonthDropDownButton({
  60                                 id: this.id + "_mddb",
  61                                 tabIndex: -1,
  62                                 onMonthSelect: lang.hitch(this, "_onMonthSelect"),
  63                                 lang: this.lang,
  64                                 dateLocaleModule: this.dateLocaleModule
  65                         }, this.monthNode);
  66                 },
  67
  68                 postCreate: function(){
  69                         this.inherited(arguments);
  70
  71                         // Events specific to Calendar, not used in CalendarLite
  72                         this.connect(this.domNode, "onkeydown", "_onKeyDown");
  73                         this.connect(this.dateRowsNode, "onmouseover", "_onDayMouseOver");
  74                         this.connect(this.dateRowsNode, "onmouseout", "_onDayMouseOut");
  75                         this.connect(this.dateRowsNode, "onmousedown", "_onDayMouseDown");
  76                         this.connect(this.dateRowsNode, "onmouseup", "_onDayMouseUp");
  77                 },
  78
  79                 _onMonthSelect: function(/*Number*/ newMonth){
  80                         // summary:
  81                         //              Handler for when user selects a month from the drop down list
  82                         // tags:
  83                         //              protected
  84
  85                         // move to selected month, bounding by the number of days in the month
  86                         // (ex: jan 31 --> feb 28, not feb 31)
  87                         var date  = new this.dateClassObj(this.currentFocus);
  88                         date.setDate(1);
  89                         date.setMonth(newMonth);
  90                         var daysInMonth = this.dateModule.getDaysInMonth(date);
  91                         var currentDate = this.currentFocus.getDate();
  92                         date.setDate(Math.min(currentDate, daysInMonth));
  93                         this._setCurrentFocusAttr(date);
  94                 },
  95
  96                 _onDayMouseOver: function(/*Event*/ evt){
  97                         // summary:
  98                         //              Handler for mouse over events on days, sets hovered style
  99                         // tags:
 100                         //              protected
 101
 102                         // event can occur on <td> or the <span> inside the td,
 103                         // set node to the <td>.
 104                         var node =
 105                                 domClass.contains(evt.target, "dijitCalendarDateLabel") ?
 106                                 evt.target.parentNode :
 107                                 evt.target;
 108
 109                         if(node && (
 110                                 (node.dijitDateValue && !domClass.contains(node, "dijitCalendarDisabledDate"))
 111                                         || node == this.previousYearLabelNode || node == this.nextYearLabelNode
 112                                 )){
 113                                 domClass.add(node, "dijitCalendarHoveredDate");
 114                                 this._currentNode = node;
 115                         }
 116                 },
 117
 118                 _onDayMouseOut: function(/*Event*/ evt){
 119                         // summary:
 120                         //              Handler for mouse out events on days, clears hovered style
 121                         // tags:
 122                         //              protected
 123
 124                         if(!this._currentNode){ return; }
 125
 126                         // if mouse out occurs moving from <td> to <span> inside <td>, ignore it
 127                         if(evt.relatedTarget && evt.relatedTarget.parentNode == this._currentNode){ return; }
 128                         var cls = "dijitCalendarHoveredDate";
 129                         if(domClass.contains(this._currentNode, "dijitCalendarActiveDate")){
 130                                 cls += " dijitCalendarActiveDate";
 131                         }
 132                         domClass.remove(this._currentNode, cls);
 133                         this._currentNode = null;
 134                 },
 135
 136                 _onDayMouseDown: function(/*Event*/ evt){
 137                         var node = evt.target.parentNode;
 138                         if(node && node.dijitDateValue && !domClass.contains(node, "dijitCalendarDisabledDate")){
 139                                 domClass.add(node, "dijitCalendarActiveDate");
 140                                 this._currentNode = node;
 141                         }
 142                 },
 143
 144                 _onDayMouseUp: function(/*Event*/ evt){
 145                         var node = evt.target.parentNode;
 146                         if(node && node.dijitDateValue){
 147                                 domClass.remove(node, "dijitCalendarActiveDate");
 148                         }
 149                 },
 150
 151                 handleKey: function(/*Event*/ evt){
 152                         // summary:
 153                         //              Provides keyboard navigation of calendar.
 154                         // description:
 155                         //              Called from _onKeyDown() to handle keypress on a stand alone Calendar,
 156                         //              and also from `dijit/form/_DateTimeTextBox` to pass a keydown event
 157                         //              from the `dijit/form/DateTextBox` to be handled in this widget
 158                         // returns:
 159                         //              False if the key was recognized as a navigation key,
 160                         //              to indicate that the event was handled by Calendar and shouldn't be propagated
 161                         // tags:
 162                         //              protected
 163                         var increment = -1,
 164                                 interval,
 165                                 newValue = this.currentFocus;
 166                         switch(evt.keyCode){
 167                                 case keys.RIGHT_ARROW:
 168                                         increment = 1;
 169                                         //fallthrough...
 170                                 case keys.LEFT_ARROW:
 171                                         interval = "day";
 172                                         if(!this.isLeftToRight()){ increment *= -1; }
 173                                         break;
 174                                 case keys.DOWN_ARROW:
 175                                         increment = 1;
 176                                         //fallthrough...
 177                                 case keys.UP_ARROW:
 178                                         interval = "week";
 179                                         break;
 180                                 case keys.PAGE_DOWN:
 181                                         increment = 1;
 182                                         //fallthrough...
 183                                 case keys.PAGE_UP:
 184                                         interval = evt.ctrlKey || evt.altKey ? "year" : "month";
 185                                         break;
 186                                 case keys.END:
 187                                         // go to the next month
 188                                         newValue = this.dateModule.add(newValue, "month", 1);
 189                                         // subtract a day from the result when we're done
 190                                         interval = "day";
 191                                         //fallthrough...
 192                                 case keys.HOME:
 193                                         newValue = new this.dateClassObj(newValue);
 194                                         newValue.setDate(1);
 195                                         break;
 196                                 case keys.ENTER:
 197                                 case keys.SPACE:
 198                                         this.set("value", this.currentFocus);
 199                                         break;
 200                                 default:
 201                                         return true;
 202                         }
 203
 204                         if(interval){
 205                                 newValue = this.dateModule.add(newValue, interval, increment);
 206                         }
 207
 208                         this._setCurrentFocusAttr(newValue);
 209
 210                         return false;
 211                 },
 212
 213                 _onKeyDown: function(/*Event*/ evt){
 214                         // summary:
 215                         //              For handling keypress events on a stand alone calendar
 216                         if(!this.handleKey(evt)){
 217                                 event.stop(evt);
 218                         }
 219                 },
 220
 221                 onValueSelected: function(/*Date*/ /*===== date =====*/){
 222                         // summary:
 223                         //              Deprecated.   Notification that a date cell was selected.  It may be the same as the previous value.
 224                         // description:
 225                         //              Formerly used by `dijit/form/_DateTimeTextBox` (and thus `dijit/form/DateTextBox`)
 226                         //              to get notification when the user has clicked a date.  Now onExecute() (above) is used.
 227                         // tags:
 228                         //              protected
 229                 },
 230
 231                 onChange: function(value){
 232                         this.onValueSelected(value);    // remove in 2.0
 233                 },
 234
 235                 getClassForDate: function(/*===== dateObject, locale =====*/){
 236                         // summary:
 237                         //              May be overridden to return CSS classes to associate with the date entry for the given dateObject,
 238                         //              for example to indicate a holiday in specified locale.
 239                         // dateObject: Date
 240                         // locale: String?
 241                         // tags:
 242                         //              extension
 243
 244 /*=====
 245                         return ""; // String
 246 =====*/
 247                 }
 248         });
 249
 250         Calendar._MonthDropDownButton = declare("dijit.Calendar._MonthDropDownButton", DropDownButton, {
 251                 // summary:
 252                 //              DropDownButton for the current month.    Displays name of current month
 253                 //              and a list of month names in the drop down
 254
 255                 onMonthSelect: function(){ },
 256
 257                 postCreate: function(){
 258                         this.inherited(arguments);
 259                         this.dropDown = new Calendar._MonthDropDown({
 260                                 id: this.id + "_mdd", //do not change this id because it is referenced in the template
 261                                 onChange: this.onMonthSelect
 262                         });
 263                 },
 264                 _setMonthAttr: function(month){
 265                         // summary:
 266                         //              Set the current month to display as a label
 267                         var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, month);
 268                         this.dropDown.set("months", monthNames);
 269
 270                         // Set name of current month and also fill in spacer element with all the month names
 271                         // (invisible) so that the maximum width will affect layout.   But not on IE6 because then
 272                         // the center <TH> overlaps the right <TH> (due to a browser bug).
 273                         this.containerNode.innerHTML =
 274                                 (has("ie") == 6 ? "" : "<div class='dijitSpacer'>" + this.dropDown.domNode.innerHTML + "</div>") +
 275                                 "<div class='dijitCalendarMonthLabel dijitCalendarCurrentMonthLabel'>" +  monthNames[month.getMonth()] + "</div>";
 276                 }
 277         });
 278
 279         Calendar._MonthDropDown = declare("dijit.Calendar._MonthDropDown", [_Widget, _TemplatedMixin], {
 280                 // summary:
 281                 //              The list-of-months drop down from the MonthDropDownButton
 282
 283                 // months: String[]
 284                 //              List of names of months, possibly w/some undefined entries for Hebrew leap months
 285                 //              (ex: ["January", "February", undefined, "April", ...])
 286                 months: [],
 287
 288                 templateString: "<div class='dijitCalendarMonthMenu dijitMenu' " +
 289                         "data-dojo-attach-event='onclick:_onClick,onmouseover:_onMenuHover,onmouseout:_onMenuHover'></div>",
 290
 291                 _setMonthsAttr: function(/*String[]*/ months){
 292                         this.domNode.innerHTML = array.map(months, function(month, idx){
 293                                         return month ? "<div class='dijitCalendarMonthLabel' month='" + idx +"'>" + month + "</div>" : "";
 294                                 }).join("");
 295                 },
 296
 297                 _onClick: function(/*Event*/ evt){
 298                         this.onChange(domAttr.get(evt.target, "month"));
 299                 },
 300
 301                 onChange: function(/*Number*/ /*===== month =====*/){
 302                         // summary:
 303                         //              Callback when month is selected from drop down
 304                 },
 305
 306                 _onMenuHover: function(evt){
 307                         domClass.toggle(evt.target, "dijitCalendarMonthLabelHover", evt.type == "mouseover");
 308                 }
 309         });
 310
 311         return Calendar;
 312 });