Context Navigation

source: Dev/trunk/src/client/dojox/widget/_CalendarMonthYearView.js

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 8.4 KB

Rev	Line
[483]	1	define([
	2	"dojo/_base/declare",
	3	"./_CalendarView",
	4	"dijit/_TemplatedMixin",
	5	"dojo/query",
	6	"dojo/dom-class",
	7	"dojo/_base/connect",
	8	"dojo/_base/event",
	9	"dojo/_base/lang",
	10	"dojo/date/locale",
	11	"dojo/text!./Calendar/CalendarMonthYear.html"
	12	], function(declare, _CalendarView, _TemplatedMixin, query, domClass, connect, event, lang, dojoDateLocale, template){
	13	return declare("dojox.widget._CalendarMonthYearView", [_CalendarView, _TemplatedMixin], {
	14
	15	// summary:
	16	// A Calendar view listing the 12 months of the year
	17
	18	// templateString: String
	19	// The template to be used to construct the widget.
	20	templateString: template,
	21
	22	// datePart: String
	23	// Specifies how much to increment the displayed date when the user
	24	// clicks the array button to increment of decrement the view.
	25	datePart: "year",
	26
	27	// displayedYears: Number
	28	// The number of years to display at once.
	29	displayedYears: 10,
	30
	31	useHeader: false,
	32
	33	postCreate: function(){
	34	this.cloneClass(".dojoxCal-MY-G-Template", 5, ".dojoxCal-MY-btns");
	35	this.monthContainer = this.yearContainer = this.myContainer;
	36
	37	var yClass = "dojoxCalendarYearLabel";
	38	var dClass = "dojoxCalendarDecrease";
	39	var iClass = "dojoxCalendarIncrease";
	40
	41	query("." + yClass, this.myContainer).forEach(function(node, idx){
	42	var clazz = iClass;
	43	switch(idx){
	44	case 0:
	45	clazz = dClass;
	46	case 1:
	47	domClass.remove(node, yClass);
	48	domClass.add(node, clazz);
	49	break;
	50	}
	51	});
	52	// Get the year increment and decrement buttons.
	53	this._decBtn = query('.' + dClass, this.myContainer)[0];
	54	this._incBtn = query('.' + iClass, this.myContainer)[0];
	55
	56	query(".dojoxCal-MY-M-Template", this.domNode)
	57	.filter(function(item){
	58	return item.cellIndex == 1;
	59	})
	60	.addClass("dojoxCal-MY-M-last");
	61
	62	connect.connect(this, "onBeforeDisplay", lang.hitch(this, function(){
	63	this._cachedDate = new Date(this.get("value").getTime());
	64	this._populateYears(this._cachedDate.getFullYear());
	65	this._populateMonths();
	66	this._updateSelectedMonth();
	67	this._updateSelectedYear();
	68	}));
	69
	70	connect.connect(this, "_populateYears", lang.hitch(this, function(){
	71	this._updateSelectedYear();
	72	}));
	73	connect.connect(this, "_populateMonths", lang.hitch(this, function(){
	74	this._updateSelectedMonth();
	75	}));
	76
	77	this._cachedDate = this.get("value");
	78
	79	this._populateYears();
	80	this._populateMonths();
	81
	82	// Add visual effects to the view, if any have been mixed in
	83	this.addFx(".dojoxCalendarMonthLabel,.dojoxCalendarYearLabel ", this.myContainer);
	84	},
	85
	86	_setValueAttr: function(value){
	87	if (value && value.getFullYear()) {
	88	this._populateYears(value.getFullYear());
	89	}
	90	},
	91
	92	getHeader: function(){
	93	return null;
	94	},
	95
	96	_getMonthNames: function(format){
	97	// summary:
	98	// Returns localized month names
	99	this._monthNames = this._monthNames \|\| dojoDateLocale.getNames('months', format, 'standAlone', this.getLang());
	100	return this._monthNames;
	101	},
	102
	103	_populateMonths: function(){
	104	// summary:
	105	// Populate the month names using the localized values.
	106	var match,
	107	monthNames = this._getMonthNames('abbr'),
	108	currYear = this.get("value").getFullYear(),
	109	currMonth = monthNames[this.get("value").getMonth()],
	110	displayedYear = this.get("displayedYear");
	111
	112	query(".dojoxCalendarMonthLabel", this.monthContainer).forEach(lang.hitch(this, function(node, cnt){
	113	this._setText(node, monthNames[cnt]);
	114	match = ((currMonth === monthNames[cnt]) && (currYear === displayedYear));
	115	// If this month in this year, style it accordingly.
	116	// Don't use dojox/date stuff, we don't need it here
	117	// http://bugs.dojotoolkit.org/ticket/15520
	118	domClass.toggle(node.parentNode, ["dijitCalendarSelectedDate", "dijitCalendarCurrentDate"], match);
	119	}));
	120	var constraints = this.get('constraints');
	121
	122	if(constraints){
	123	var date = new Date();
	124	date.setFullYear(this._year);
	125	var min = -1, max = 12;
	126	if(constraints.min){
	127	var minY = constraints.min.getFullYear();
	128	if(minY > this._year){
	129	min = 12;
	130	}else if(minY == this._year){
	131	min = constraints.min.getMonth();
	132	}
	133	}
	134	if(constraints.max){
	135	var maxY = constraints.max.getFullYear();
	136	if(maxY < this._year){
	137	max = -1;
	138	}else if(maxY == this._year){
	139	max = constraints.max.getMonth();
	140	}
	141	}
	142
	143	query(".dojoxCalendarMonthLabel", this.monthContainer)
	144	.forEach(lang.hitch(this, function(node, cnt){
	145	domClass[(cnt < min \|\| cnt > max) ? "add" : "remove"]
	146	(node, 'dijitCalendarDisabledDate');
	147	}));
	148	}
	149	},
	150
	151	_populateYears: function(year){
	152	// summary:
	153	// Fills the list of years with a range of 12 numbers, with the current year
	154	// being the 6th number.
	155
	156	var match,
	157	constraints = this.get('constraints'),
	158	thisYear = this.get("value").getFullYear(),
	159	dispYear = year \|\| thisYear,
	160	firstYear = dispYear - Math.floor(this.displayedYears/2),
	161	min = constraints && constraints.min ? constraints.min.getFullYear() : firstYear -10000;
	162
	163	this._displayedYear = dispYear;
	164
	165	var yearLabels = query(".dojoxCalendarYearLabel", this.yearContainer);
	166
	167	var max = constraints && constraints.max ? constraints.max.getFullYear() - firstYear : yearLabels.length;
	168	var disabledClass = 'dijitCalendarDisabledDate';
	169	var today;
	170	yearLabels.forEach(lang.hitch(this, function(node, cnt){
	171	if(cnt <= max){
	172	this._setText(node, firstYear + cnt);
	173	}
	174	today = (firstYear+cnt) == thisYear;
	175	domClass.toggle(node.parentNode, ["dijitCalendarSelectedDate", "dijitCalendarCurrentDate"], today);
	176	domClass.toggle(node, disabledClass, cnt > max);
	177	match = (firstYear+cnt) == thisYear;
	178	domClass.toggle(node.parentNode, ["dijitCalendarSelectedDate", "dijitCalendarCurrentDate"], match);
	179	}));
	180
	181	if(this._incBtn){
	182	domClass.toggle(this._incBtn, disabledClass, max < yearLabels.length);
	183	}
	184	if(this._decBtn){
	185	domClass.toggle(this._decBtn, disabledClass, min >= firstYear);
	186	}
	187
	188	var h = this.getHeader();
	189	if(h){
	190	this._setText(this.getHeader(), firstYear + " - " + (firstYear + 11));
	191	}
	192	},
	193
	194	_updateSelectedYear: function(){
	195	this._year = String((this._cachedDate \|\| this.get("value")).getFullYear());
	196	this._updateSelectedNode(".dojoxCalendarYearLabel", lang.hitch(this, function(node){
	197	return this._year !== null && node.innerHTML == this._year;
	198	}));
	199	},
	200
	201	_updateSelectedMonth: function(){
	202	var month = (this._cachedDate \|\| this.get("value")).getMonth();
	203	this._month = month;
	204	this._updateSelectedNode(".dojoxCalendarMonthLabel", function(node, idx){
	205	return idx == month;
	206	});
	207	},
	208
	209	_updateSelectedNode: function(queryNode, filter){
	210	var sel = "dijitCalendarSelectedDate";
	211	query(queryNode, this.domNode)
	212	.forEach(function(node, idx, array){
	213	domClass.toggle(node.parentNode, sel, filter(node, idx, array));
	214	});
	215	var selMonth = query('.dojoxCal-MY-M-Template div', this.myContainer)
	216	.filter(function(node){
	217	return domClass.contains(node.parentNode, sel);
	218	})[0];
	219	if(!selMonth){return;}
	220	var disabled = domClass.contains(selMonth, 'dijitCalendarDisabledDate');
	221
	222	domClass.toggle(this.okBtn, "dijitDisabled", disabled);
	223	},
	224
	225	onClick: function(evt){
	226	// summary:
	227	// Handles clicks on month names
	228	var clazz;
	229	function hc(c){
	230	return domClass.contains(evt.target, c);
	231	}
	232
	233	if(hc('dijitCalendarDisabledDate')){
	234	event.stop(evt);
	235	return false;
	236	}
	237
	238	if(hc("dojoxCalendarMonthLabel")){
	239	clazz = "dojoxCal-MY-M-Template";
	240	this._month = evt.target.parentNode.cellIndex + (evt.target.parentNode.parentNode.rowIndex * 2);
	241	this._cachedDate.setMonth(this._month);
	242	this._updateSelectedMonth();
	243	}else if(hc( "dojoxCalendarYearLabel")){
	244	clazz = "dojoxCal-MY-Y-Template";
	245	this._year = Number(evt.target.innerHTML);
	246	this._cachedDate.setYear(this._year);
	247	this._populateMonths();
	248	this._updateSelectedYear();
	249	}else if(hc("dojoxCalendarDecrease")){
	250	this._populateYears(this._displayedYear - 10);
	251	return true;
	252	}else if(hc("dojoxCalendarIncrease")){
	253	this._populateYears(this._displayedYear + 10);
	254	return true;
	255	}else{
	256	return true;
	257	}
	258	event.stop(evt);
	259	return false;
	260	},
	261
	262	onOk: function(evt){
	263	event.stop(evt);
	264	if(domClass.contains(this.okBtn, "dijitDisabled")){
	265	return false;
	266	}
	267	this.onValueSelected(this._cachedDate);
	268	return false;
	269	},
	270
	271	onCancel: function(evt){
	272	event.stop(evt);
	273	this.onValueSelected(this.get("value"));
	274	return false;
	275	}
	276	});
	277	});

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

Download in other formats: