Context Navigation

source: Dev/branches/rest-dojo-ui/client/dijit/CalendarLite.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago
Reworked project structure based on REST interaction and Dojo library. As soon as this is stable, the old jQueryUI branch can be removed (it's kept for reference).
File size: 15.6 KB

Rev	Line
[256]	1	define([
	2	"dojo/_base/array", // array.forEach array.map
	3	"dojo/_base/declare", // declare
	4	"dojo/cldr/supplemental", // cldrSupplemental.getFirstDayOfWeek
	5	"dojo/date", // date
	6	"dojo/date/locale",
	7	"dojo/dom", // dom.setSelectable
	8	"dojo/dom-class", // domClass.contains
	9	"dojo/_base/event", // event.stop
	10	"dojo/_base/lang", // lang.getObject, lang.hitch
	11	"dojo/_base/sniff", // has("ie") has("webkit")
	12	"dojo/string", // string.substitute
	13	"dojo/_base/window", // win.doc.createTextNode
	14	"./_WidgetBase",
	15	"./_TemplatedMixin",
	16	"dojo/text!./templates/Calendar.html"
	17	], function(array, declare, cldrSupplemental, date, local, dom, domClass, event, lang, has, string, win,
	18	_WidgetBase, _TemplatedMixin, template){
	19
	20	/*=====
	21	var _WidgetBase = dijit._WidgetBase;
	22	var _TemplatedMixin = dijit._TemplatedMixin;
	23	=====*/
	24
	25	// module:
	26	// dijit/CalendarLite
	27	// summary:
	28	// Lightweight version of Calendar widget aimed towards mobile use
	29
	30	var CalendarLite = declare("dijit.CalendarLite", [_WidgetBase, _TemplatedMixin], {
	31	// summary:
	32	// Lightweight version of Calendar widget aimed towards mobile use
	33	//
	34	// description:
	35	// A simple GUI for choosing a date in the context of a monthly calendar.
	36	// This widget can't be used in a form because it doesn't serialize the date to an
	37	// `<input>` field. For a form element, use dijit.form.DateTextBox instead.
	38	//
	39	// Note that the parser takes all dates attributes passed in the
	40	// [RFC 3339 format](http://www.faqs.org/rfcs/rfc3339.html), e.g. `2005-06-30T08:05:00-07:00`
	41	// so that they are serializable and locale-independent.
	42	//
	43	// Also note that this widget isn't keyboard accessible; use dijit.Calendar for that
	44	// example:
	45	// \| var calendar = new dijit.CalendarLite({}, dojo.byId("calendarNode"));
	46	//
	47	// example:
	48	// \| <div data-dojo-type="dijit.CalendarLite"></div>
	49
	50	// Template for main calendar
	51	templateString: template,
	52
	53	// Template for cell for a day of the week (ex: M)
	54	dowTemplateString: '<th class="dijitReset dijitCalendarDayLabelTemplate" role="columnheader"><span class="dijitCalendarDayLabel">${d}</span></th>',
	55
	56	// Templates for a single date (ex: 13), and for a row for a week (ex: 20 21 22 23 24 25 26)
	57	dateTemplateString: '<td class="dijitReset" role="gridcell" data-dojo-attach-point="dateCells"><span class="dijitCalendarDateLabel" data-dojo-attach-point="dateLabels"></span></td>',
	58	weekTemplateString: '<tr class="dijitReset dijitCalendarWeekTemplate" role="row">${d}${d}${d}${d}${d}${d}${d}</tr>',
	59
	60	// value: Date
	61	// The currently selected Date, initially set to invalid date to indicate no selection.
	62	value: new Date(""),
	63	// TODO: for 2.0 make this a string (ISO format) rather than a Date
	64
	65	// datePackage: String
	66	// JavaScript object containing Calendar functions. Uses Gregorian Calendar routines
	67	// from dojo.date by default.
	68	datePackage: date,
	69
	70	// dayWidth: String
	71	// How to represent the days of the week in the calendar header. See locale
	72	dayWidth: "narrow",
	73
	74	// tabIndex: Integer
	75	// Order fields are traversed when user hits the tab key
	76	tabIndex: "0",
	77
	78	// currentFocus: Date
	79	// Date object containing the currently focused date, or the date which would be focused
	80	// if the calendar itself was focused. Also indicates which year and month to display,
	81	// i.e. the current "page" the calendar is on.
	82	currentFocus: new Date(),
	83
	84	baseClass:"dijitCalendar",
	85
	86	_isValidDate: function(/Date/ value){
	87	// summary:
	88	// Runs various tests on the value, checking that it's a valid date, rather
	89	// than blank or NaN.
	90	// tags:
	91	// private
	92	return value && !isNaN(value) && typeof value == "object" &&
	93	value.toString() != this.constructor.prototype.value.toString();
	94	},
	95
	96	_getValueAttr: function(){
	97	// summary:
	98	// Support get('value')
	99
	100	// this.value is set to 1AM, but return midnight, local time for back-compat
	101	if(this.value && !isNaN(this.value)){
	102	var value = new this.dateClassObj(this.value);
	103	value.setHours(0, 0, 0, 0);
	104
	105	// If daylight savings pushes midnight to the previous date, fix the Date
	106	// object to point at 1am so it will represent the correct day. See #9366
	107	if(value.getDate() < this.value.getDate()){
	108	value = this.dateFuncObj.add(value, "hour", 1);
	109	}
	110	return value;
	111	}else{
	112	return null;
	113	}
	114	},
	115
	116	_setValueAttr: function(/Date\|Number/ value, /Boolean/ priorityChange){
	117	// summary:
	118	// Support set("value", ...)
	119	// description:
	120	// Set the current date and update the UI. If the date is disabled, the value will
	121	// not change, but the display will change to the corresponding month.
	122	// value:
	123	// Either a Date or the number of seconds since 1970.
	124	// tags:
	125	// protected
	126	if(value){
	127	// convert from Number to Date, or make copy of Date object so that setHours() call below
	128	// doesn't affect original value
	129	value = new this.dateClassObj(value);
	130	}
	131	if(this._isValidDate(value)){
	132	if(!this._isValidDate(this.value) \|\| this.dateFuncObj.compare(value, this.value)){
	133	value.setHours(1, 0, 0, 0); // round to nearest day (1am to avoid issues when DST shift occurs at midnight, see #8521, #9366)
	134
	135	if(!this.isDisabledDate(value, this.lang)){
	136	this._set("value", value);
	137
	138	// Set focus cell to the new value. Arguably this should only happen when there isn't a current
	139	// focus point. This will also repopulate the grid, showing the new selected value (and possibly
	140	// new month/year).
	141	this.set("currentFocus", value);
	142
	143	if(priorityChange \|\| typeof priorityChange == "undefined"){
	144	this.onChange(this.get('value'));
	145	}
	146	}
	147	}
	148	}else{
	149	// clear value, and repopulate grid (to deselect the previously selected day) without changing currentFocus
	150	this._set("value", null);
	151	this.set("currentFocus", this.currentFocus);
	152	}
	153	},
	154
	155	_setText: function(node, text){
	156	// summary:
	157	// This just sets the content of node to the specified text.
	158	// Can't do "node.innerHTML=text" because of an IE bug w/tables, see #3434.
	159	// tags:
	160	// private
	161	while(node.firstChild){
	162	node.removeChild(node.firstChild);
	163	}
	164	node.appendChild(win.doc.createTextNode(text));
	165	},
	166
	167	_populateGrid: function(){
	168	// summary:
	169	// Fills in the calendar grid with each day (1-31)
	170	// tags:
	171	// private
	172
	173	var month = new this.dateClassObj(this.currentFocus);
	174	month.setDate(1);
	175
	176	var firstDay = month.getDay(),
	177	daysInMonth = this.dateFuncObj.getDaysInMonth(month),
	178	daysInPreviousMonth = this.dateFuncObj.getDaysInMonth(this.dateFuncObj.add(month, "month", -1)),
	179	today = new this.dateClassObj(),
	180	dayOffset = cldrSupplemental.getFirstDayOfWeek(this.lang);
	181	if(dayOffset > firstDay){ dayOffset -= 7; }
	182
	183	// Mapping from date (as specified by number returned from Date.valueOf()) to corresponding <td>
	184	this._date2cell = {};
	185
	186	// Iterate through dates in the calendar and fill in date numbers and style info
	187	array.forEach(this.dateCells, function(template, idx){
	188	var i = idx + dayOffset;
	189	var date = new this.dateClassObj(month),
	190	number, clazz = "dijitCalendar", adj = 0;
	191
	192	if(i < firstDay){
	193	number = daysInPreviousMonth - firstDay + i + 1;
	194	adj = -1;
	195	clazz += "Previous";
	196	}else if(i >= (firstDay + daysInMonth)){
	197	number = i - firstDay - daysInMonth + 1;
	198	adj = 1;
	199	clazz += "Next";
	200	}else{
	201	number = i - firstDay + 1;
	202	clazz += "Current";
	203	}
	204
	205	if(adj){
	206	date = this.dateFuncObj.add(date, "month", adj);
	207	}
	208	date.setDate(number);
	209
	210	if(!this.dateFuncObj.compare(date, today, "date")){
	211	clazz = "dijitCalendarCurrentDate " + clazz;
	212	}
	213
	214	if(this._isSelectedDate(date, this.lang)){
	215	clazz = "dijitCalendarSelectedDate " + clazz;
	216	template.setAttribute("aria-selected", true);
	217	}else{
	218	template.setAttribute("aria-selected", false);
	219	}
	220
	221	if(this.isDisabledDate(date, this.lang)){
	222	clazz = "dijitCalendarDisabledDate " + clazz;
	223	template.setAttribute("aria-disabled", true);
	224	}else{
	225	clazz = "dijitCalendarEnabledDate " + clazz;
	226	template.removeAttribute("aria-disabled");
	227	}
	228
	229	var clazz2 = this.getClassForDate(date, this.lang);
	230	if(clazz2){
	231	clazz = clazz2 + " " + clazz;
	232	}
	233
	234	template.className = clazz + "Month dijitCalendarDateTemplate";
	235
	236	// Each cell has an associated integer value representing it's date
	237	var dateVal = date.valueOf();
	238	this._date2cell[dateVal] = template;
	239	template.dijitDateValue = dateVal;
	240
	241	// Set Date string (ex: "13").
	242	this._setText(this.dateLabels[idx], date.getDateLocalized ? date.getDateLocalized(this.lang) : date.getDate());
	243	}, this);
	244
	245	// set name of this month
	246	this.monthWidget.set("month", month);
	247
	248	// Fill in localized prev/current/next years
	249	var y = month.getFullYear() - 1;
	250	var d = new this.dateClassObj();
	251	array.forEach(["previous", "current", "next"], function(name){
	252	d.setFullYear(y++);
	253	this._setText(this[name+"YearLabelNode"],
	254	this.dateLocaleModule.format(d, {selector:'year', locale:this.lang}));
	255	}, this);
	256	},
	257
	258	goToToday: function(){
	259	// summary:
	260	// Sets calendar's value to today's date
	261	this.set('value', new this.dateClassObj());
	262	},
	263
	264	constructor: function(/Object/args){
	265	this.datePackage = args.datePackage \|\| this.datePackage;
	266	this.dateFuncObj = typeof this.datePackage == "string" ?
	267	lang.getObject(this.datePackage, false) :// "string" part for back-compat, remove for 2.0
	268	this.datePackage;
	269	this.dateClassObj = this.dateFuncObj.Date \|\| Date;
	270	this.dateLocaleModule = lang.getObject("locale", false, this.dateFuncObj);
	271	},
	272
	273	_createMonthWidget: function(){
	274	// summary:
	275	// Creates the drop down button that displays the current month and lets user pick a new one
	276
	277	return CalendarLite._MonthWidget({
	278	id: this.id + "_mw",
	279	lang: this.lang,
	280	dateLocaleModule: this.dateLocaleModule
	281	}, this.monthNode);
	282	},
	283
	284	buildRendering: function(){
	285	// Markup for days of the week (referenced from template)
	286	var d = this.dowTemplateString,
	287	dayNames = this.dateLocaleModule.getNames('days', this.dayWidth, 'standAlone', this.lang),
	288	dayOffset = cldrSupplemental.getFirstDayOfWeek(this.lang);
	289	this.dayCellsHtml = string.substitute([d,d,d,d,d,d,d].join(""), {d: ""}, function(){
	290	return dayNames[dayOffset++ % 7]
	291	});
	292
	293	// Markup for dates of the month (referenced from template), but without numbers filled in
	294	var r = string.substitute(this.weekTemplateString, {d: this.dateTemplateString});
	295	this.dateRowsHtml = [r,r,r,r,r,r].join("");
	296
	297	// Instantiate from template.
	298	// dateCells and dateLabels arrays filled when _Templated parses my template.
	299	this.dateCells = [];
	300	this.dateLabels = [];
	301	this.inherited(arguments);
	302
	303	dom.setSelectable(this.domNode, false);
	304
	305	var dateObj = new this.dateClassObj(this.currentFocus);
	306
	307	this._supportingWidgets.push(this.monthWidget = this._createMonthWidget());
	308
	309	this.set('currentFocus', dateObj, false); // draw the grid to the month specified by currentFocus
	310
	311	// Set up connects for increment/decrement of months/years
	312	var connect = lang.hitch(this, function(nodeProp, part, amount){
	313	this.connect(this[nodeProp], "onclick", function(){
	314	this._setCurrentFocusAttr(this.dateFuncObj.add(this.currentFocus, part, amount));
	315	});
	316	});
	317	connect("incrementMonth", "month", 1);
	318	connect("decrementMonth", "month", -1);
	319	connect("nextYearLabelNode", "year", 1);
	320	connect("previousYearLabelNode", "year", -1);
	321	},
	322
	323	_setCurrentFocusAttr: function(/Date/ date, /Boolean/ forceFocus){
	324	// summary:
	325	// If the calendar currently has focus, then focuses specified date,
	326	// changing the currently displayed month/year if necessary.
	327	// If the calendar doesn't have focus, updates currently
	328	// displayed month/year, and sets the cell that will get focus.
	329	// forceFocus:
	330	// If true, will focus() the cell even if calendar itself doesn't have focus
	331
	332	var oldFocus = this.currentFocus,
	333	oldCell = oldFocus && this._date2cell ? this._date2cell[oldFocus.valueOf()] : null;
	334
	335	// round specified value to nearest day (1am to avoid issues when DST shift occurs at midnight, see #8521, #9366)
	336	date = new this.dateClassObj(date);
	337	date.setHours(1, 0, 0, 0);
	338
	339	this._set("currentFocus", date);
	340
	341	// TODO: only re-populate grid when month/year has changed
	342	this._populateGrid();
	343
	344	// set tabIndex=0 on new cell, and focus it (but only if Calendar itself is focused)
	345	var newCell = this._date2cell[date.valueOf()];
	346	newCell.setAttribute("tabIndex", this.tabIndex);
	347	if(this.focused \|\| forceFocus){
	348	newCell.focus();
	349	}
	350
	351	// set tabIndex=-1 on old focusable cell
	352	if(oldCell && oldCell != newCell){
	353	if(has("webkit")){ // see #11064 about webkit bug
	354	oldCell.setAttribute("tabIndex", "-1");
	355	}else{
	356	oldCell.removeAttribute("tabIndex");
	357	}
	358	}
	359	},
	360
	361	focus: function(){
	362	// summary:
	363	// Focus the calendar by focusing one of the calendar cells
	364	this._setCurrentFocusAttr(this.currentFocus, true);
	365	},
	366
	367	_onDayClick: function(/Event/ evt){
	368	// summary:
	369	// Handler for day clicks, selects the date if appropriate
	370	// tags:
	371	// protected
	372	event.stop(evt);
	373	for(var node = evt.target; node && !node.dijitDateValue; node = node.parentNode);
	374	if(node && !domClass.contains(node, "dijitCalendarDisabledDate")){
	375	this.set('value', node.dijitDateValue);
	376	}
	377	},
	378
	379	onChange: function(/Date/ /===== date =====/){
	380	// summary:
	381	// Called only when the selected date has changed
	382	},
	383
	384	_isSelectedDate: function(dateObject /===== , locale =====/){
	385	// summary:
	386	// Extension point so developers can subclass Calendar to
	387	// support multiple (concurrently) selected dates
	388	// dateObject: Date
	389	// locale: String?
	390	// tags:
	391	// protected extension
	392	return this._isValidDate(this.value) && !this.dateFuncObj.compare(dateObject, this.value, "date")
	393	},
	394
	395	isDisabledDate: function(/===== dateObject, locale =====/){
	396	// summary:
	397	// May be overridden to disable certain dates in the calendar e.g. `isDisabledDate=dojo.date.locale.isWeekend`
	398	// dateObject: Date
	399	// locale: String?
	400	// tags:
	401	// extension
	402	/*=====
	403	return false; // Boolean
	404	=====*/
	405	},
	406
	407	getClassForDate: function(/===== dateObject, locale =====/){
	408	// summary:
	409	// May be overridden to return CSS classes to associate with the date entry for the given dateObject,
	410	// for example to indicate a holiday in specified locale.
	411	// dateObject: Date
	412	// locale: String?
	413	// tags:
	414	// extension
	415
	416	/*=====
	417	return ""; // String
	418	=====*/
	419	}
	420	});
	421
	422	CalendarLite._MonthWidget = declare("dijit.CalendarLite._MonthWidget", _WidgetBase, {
	423	// summary:
	424	// Displays name of current month padded to the width of the month
	425	// w/the longest name, so that changing months doesn't change width.
	426	//
	427	// Create as new dijit.Calendar._MonthWidget({
	428	// lang: ...,
	429	// dateLocaleModule: ...
	430	// })
	431
	432	_setMonthAttr: function(month){
	433	// summary:
	434	// Set the current month to display as a label
	435	var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, month),
	436	spacer =
	437	(has("ie") == 6 ? "" : "<div class='dijitSpacer'>" +
	438	array.map(monthNames, function(s){ return "<div>" + s + "</div>"; }).join("") + "</div>");
	439
	440	// Set name of current month and also fill in spacer element with all the month names
	441	// (invisible) so that the maximum width will affect layout. But not on IE6 because then
	442	// the center <TH> overlaps the right <TH> (due to a browser bug).
	443	this.domNode.innerHTML =
	444	spacer +
	445	"<div class='dijitCalendarMonthLabel dijitCalendarCurrentMonthLabel'>" +
	446	monthNames[month.getMonth()] + "</div>";
	447	}
	448	});
	449
	450	return CalendarLite;
	451	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: