]>
git.wh0rd.org - tt-rss.git/blob - lib/dijit/Calendar.js.uncompressed.js
8aafae0b6fe34b6e1b73d740b812cc6b914c7de9
1 define("dijit/Calendar", [
2 "dojo/_base/array", // array.map
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
11 "dojo/_base/lang", // lang.hitch
12 "dojo/sniff", // has("ie")
17 "./form/DropDownButton"
18 ], function(array
, date
, local
, declare
, domAttr
, domClass
, event
, kernel
, keys
, lang
, has
,
19 CalendarLite
, _Widget
, _CssStateMixin
, _TemplatedMixin
, DropDownButton
){
24 var Calendar
= declare("dijit.Calendar",
25 [CalendarLite
, _Widget
, _CssStateMixin
], // _Widget for deprecated methods like setAttribute()
28 // A simple GUI for choosing a date in the context of a monthly calendar.
31 // See CalendarLite for general description. Calendar extends CalendarLite, adding:
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)
38 // Set node classes for various mouse events, see dijit._CssStateMixin for more details
40 "decrementMonth": "dijitCalendarArrow",
41 "incrementMonth": "dijitCalendarArrow",
42 "previousYearLabelNode": "dijitCalendarPreviousYear",
43 "nextYearLabelNode": "dijitCalendarNextYear"
46 setValue: function(/*Date*/ value
){
48 // Deprecated. Use set('value', ...) instead.
51 kernel
.deprecated("dijit.Calendar:setValue() is deprecated. Use set('value', ...) instead.", "", "2.0");
52 this.set('value', value
);
55 _createMonthWidget: function(){
57 // Creates the drop down button that displays the current month and lets user pick a new one
59 return new Calendar
._MonthDropDownButton({
60 id
: this.id
+ "_mddb",
62 onMonthSelect
: lang
.hitch(this, "_onMonthSelect"),
64 dateLocaleModule
: this.dateLocaleModule
68 postCreate: function(){
69 this.inherited(arguments
);
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");
79 _onMonthSelect: function(/*Number*/ newMonth
){
81 // Handler for when user selects a month from the drop down list
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
);
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
);
96 _onDayMouseOver: function(/*Event*/ evt
){
98 // Handler for mouse over events on days, sets hovered style
102 // event can occur on <td> or the <span> inside the td,
103 // set node to the <td>.
105 domClass
.contains(evt
.target
, "dijitCalendarDateLabel") ?
106 evt
.target
.parentNode
:
110 (node
.dijitDateValue
&& !domClass
.contains(node
, "dijitCalendarDisabledDate"))
111 || node
== this.previousYearLabelNode
|| node
== this.nextYearLabelNode
113 domClass
.add(node
, "dijitCalendarHoveredDate");
114 this._currentNode
= node
;
118 _onDayMouseOut: function(/*Event*/ evt
){
120 // Handler for mouse out events on days, clears hovered style
124 if(!this._currentNode
){ return; }
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";
132 domClass
.remove(this._currentNode
, cls
);
133 this._currentNode
= null;
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
;
144 _onDayMouseUp: function(/*Event*/ evt
){
145 var node
= evt
.target
.parentNode
;
146 if(node
&& node
.dijitDateValue
){
147 domClass
.remove(node
, "dijitCalendarActiveDate");
151 handleKey: function(/*Event*/ evt
){
153 // Provides keyboard navigation of calendar.
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
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
165 newValue
= this.currentFocus
;
167 case keys
.RIGHT_ARROW
:
170 case keys
.LEFT_ARROW
:
172 if(!this.isLeftToRight()){ increment
*= -1; }
174 case keys
.DOWN_ARROW
:
184 interval
= evt
.ctrlKey
|| evt
.altKey
? "year" : "month";
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
193 newValue
= new this.dateClassObj(newValue
);
198 this.set("value", this.currentFocus
);
205 newValue
= this.dateModule
.add(newValue
, interval
, increment
);
208 this._setCurrentFocusAttr(newValue
);
213 _onKeyDown: function(/*Event*/ evt
){
215 // For handling keypress events on a stand alone calendar
216 if(!this.handleKey(evt
)){
221 onValueSelected: function(/*Date*/ /*===== date =====*/){
223 // Deprecated. Notification that a date cell was selected. It may be the same as the previous value.
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.
231 onChange: function(value
){
232 this.onValueSelected(value
); // remove in 2.0
235 getClassForDate: function(/*===== dateObject, locale =====*/){
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.
250 Calendar
._MonthDropDownButton
= declare("dijit.Calendar._MonthDropDownButton", DropDownButton
, {
252 // DropDownButton for the current month. Displays name of current month
253 // and a list of month names in the drop down
255 onMonthSelect: function(){ },
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
264 _setMonthAttr: function(month
){
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
);
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>";
279 Calendar
._MonthDropDown
= declare("dijit.Calendar._MonthDropDown", [_Widget
, _TemplatedMixin
], {
281 // The list-of-months drop down from the MonthDropDownButton
284 // List of names of months, possibly w/some undefined entries for Hebrew leap months
285 // (ex: ["January", "February", undefined, "April", ...])
288 templateString
: "<div class='dijitCalendarMonthMenu dijitMenu' " +
289 "data-dojo-attach-event='onclick:_onClick,onmouseover:_onMenuHover,onmouseout:_onMenuHover'></div>",
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>" : "";
297 _onClick: function(/*Event*/ evt
){
298 this.onChange(domAttr
.get(evt
.target
, "month"));
301 onChange: function(/*Number*/ /*===== month =====*/){
303 // Callback when month is selected from drop down
306 _onMenuHover: function(evt
){
307 domClass
.toggle(evt
.target
, "dijitCalendarMonthLabelHover", evt
.type
== "mouseover");