dojo_app/js/library/dojox/widget/_CalendarMonthYearView.js

define([
	"dojo/_base/declare",
	"./_CalendarView",
	"dijit/_TemplatedMixin",
	"dojo/query",
	"dojo/dom-class",
	"dojo/_base/connect",
	"dojo/_base/event",
	"dojo/_base/lang",
	"dojo/date/locale",
	"dojo/text!./Calendar/CalendarMonthYear.html"
], function(declare, _CalendarView, _TemplatedMixin, query, domClass, connect, event, lang, dojoDateLocale, template){
	return declare("dojox.widget._CalendarMonthYearView", [_CalendarView, _TemplatedMixin], {

		// summary:
		//		A Calendar view listing the 12 months of the year

		// templateString: String
		//		The template to be used to construct the widget.
		templateString: template,

		// datePart: String
		//		Specifies how much to increment the displayed date when the user
		//		clicks the array button to increment of decrement the view.
		datePart: "year",

		// displayedYears: Number
		//		The number of years to display at once.
		displayedYears: 10,

		useHeader: false,

		postCreate: function(){
			this.cloneClass(".dojoxCal-MY-G-Template", 5, ".dojoxCal-MY-btns");
			this.monthContainer = this.yearContainer = this.myContainer;

			var yClass = "dojoxCalendarYearLabel";
			var dClass = "dojoxCalendarDecrease";
			var iClass = "dojoxCalendarIncrease";

			query("." + yClass, this.myContainer).forEach(function(node, idx){
				var clazz = iClass;
				switch(idx){
					case 0:
						clazz = dClass;
					case 1:
						domClass.remove(node, yClass);
						domClass.add(node, clazz);
						break;
				}
			});
			// Get the year increment and decrement buttons.
			this._decBtn = query('.' + dClass, this.myContainer)[0];
			this._incBtn = query('.' + iClass, this.myContainer)[0];

			query(".dojoxCal-MY-M-Template", this.domNode)
				.filter(function(item){
					return item.cellIndex == 1;
				})
				.addClass("dojoxCal-MY-M-last");

			connect.connect(this, "onBeforeDisplay", lang.hitch(this, function(){
				this._cachedDate = new Date(this.get("value").getTime());
				this._populateYears(this._cachedDate.getFullYear());
				this._populateMonths();
				this._updateSelectedMonth();
				this._updateSelectedYear();
			}));

			connect.connect(this, "_populateYears", lang.hitch(this, function(){
				this._updateSelectedYear();
			}));
			connect.connect(this, "_populateMonths", lang.hitch(this, function(){
				this._updateSelectedMonth();
			}));

			this._cachedDate = this.get("value");

			this._populateYears();
			this._populateMonths();

			// Add visual effects to the view, if any have been mixed in
			this.addFx(".dojoxCalendarMonthLabel,.dojoxCalendarYearLabel ", this.myContainer);
		},

		_setValueAttr: function(value){
			if (value && value.getFullYear()) {
				this._populateYears(value.getFullYear());
			}
		},

		getHeader: function(){
			return null;
		},

		_getMonthNames: function(format){
			// summary:
			//		Returns localized month names
			this._monthNames	= this._monthNames || dojoDateLocale.getNames('months', format, 'standAlone', this.getLang());
			return this._monthNames;
		},

		_populateMonths: function(){
			// summary:
			//		Populate the month names using the localized values.
			var match,
				monthNames = this._getMonthNames('abbr'),
				currYear = this.get("value").getFullYear(),
				currMonth = monthNames[this.get("value").getMonth()],
				displayedYear = this.get("displayedYear");

			query(".dojoxCalendarMonthLabel", this.monthContainer).forEach(lang.hitch(this, function(node, cnt){
				this._setText(node, monthNames[cnt]);
				match = ((currMonth === monthNames[cnt]) && (currYear === displayedYear));
				// If this month in this year, style it accordingly.
				// Don't use dojox/date stuff, we don't need it here
				// http://bugs.dojotoolkit.org/ticket/15520
				domClass.toggle(node.parentNode, ["dijitCalendarSelectedDate", "dijitCalendarCurrentDate"], match);
			}));
			var constraints = this.get('constraints');

			if(constraints){
				var date = new Date();
				date.setFullYear(this._year);
				var min = -1, max = 12;
				if(constraints.min){
					var minY = constraints.min.getFullYear();
					if(minY > this._year){
						min = 12;
					}else if(minY == this._year){
						min = constraints.min.getMonth();
					}
				}
				if(constraints.max){
					var maxY = constraints.max.getFullYear();
					if(maxY < this._year){
						max = -1;
					}else if(maxY == this._year){
						max = constraints.max.getMonth();
					}
				}

				query(".dojoxCalendarMonthLabel", this.monthContainer)
					.forEach(lang.hitch(this, function(node, cnt){
						domClass[(cnt < min || cnt > max) ? "add" : "remove"]
							(node, 'dijitCalendarDisabledDate');
				}));
			}
		},

		_populateYears: function(year){
			// summary:
			//		Fills the list of years with a range of 12 numbers, with the current year
			//		being the 6th number.

			var match,
				constraints = this.get('constraints'),
				thisYear = this.get("value").getFullYear(),
				dispYear = year || thisYear,
				firstYear = dispYear - Math.floor(this.displayedYears/2),
				min = constraints && constraints.min ? constraints.min.getFullYear() : firstYear -10000;

			this._displayedYear = dispYear;

			var yearLabels = query(".dojoxCalendarYearLabel", this.yearContainer);

			var max = constraints && constraints.max ? constraints.max.getFullYear() - firstYear :	yearLabels.length;
			var disabledClass = 'dijitCalendarDisabledDate';
			var today;
			yearLabels.forEach(lang.hitch(this, function(node, cnt){
				if(cnt <= max){
					this._setText(node, firstYear + cnt);
				}
				today = (firstYear+cnt) == thisYear;
				domClass.toggle(node.parentNode, ["dijitCalendarSelectedDate", "dijitCalendarCurrentDate"], today);
				domClass.toggle(node, disabledClass, cnt > max);
				match = (firstYear+cnt) == thisYear;
				domClass.toggle(node.parentNode, ["dijitCalendarSelectedDate", "dijitCalendarCurrentDate"], match);
			}));

			if(this._incBtn){
				domClass.toggle(this._incBtn, disabledClass, max < yearLabels.length);
			}
			if(this._decBtn){
				domClass.toggle(this._decBtn, disabledClass, min >= firstYear);
			}

			var h = this.getHeader();
			if(h){
				this._setText(this.getHeader(), firstYear + " - " + (firstYear + 11));
			}
		},

		_updateSelectedYear: function(){
			this._year = String((this._cachedDate || this.get("value")).getFullYear());
			this._updateSelectedNode(".dojoxCalendarYearLabel", lang.hitch(this, function(node){
				return this._year !== null && node.innerHTML == this._year;
			}));
		},

		_updateSelectedMonth: function(){
			var month = (this._cachedDate || this.get("value")).getMonth();
			this._month = month;
			this._updateSelectedNode(".dojoxCalendarMonthLabel", function(node, idx){
				return idx == month;
			});
		},

		_updateSelectedNode: function(queryNode, filter){
			var sel = "dijitCalendarSelectedDate";
			query(queryNode, this.domNode)
				.forEach(function(node, idx, array){
					domClass.toggle(node.parentNode, sel, filter(node, idx, array));
			});
			var selMonth = query('.dojoxCal-MY-M-Template div', this.myContainer)
				.filter(function(node){
					return domClass.contains(node.parentNode, sel);
			})[0];
			if(!selMonth){return;}
			var disabled = domClass.contains(selMonth, 'dijitCalendarDisabledDate');

			domClass.toggle(this.okBtn, "dijitDisabled", disabled);
		},

		onClick: function(evt){
			// summary:
			//		Handles clicks on month names
			var clazz;
			function hc(c){
				return domClass.contains(evt.target, c);
			}

			if(hc('dijitCalendarDisabledDate')){
				event.stop(evt);
				return false;
			}

			if(hc("dojoxCalendarMonthLabel")){
				clazz = "dojoxCal-MY-M-Template";
				this._month = evt.target.parentNode.cellIndex + (evt.target.parentNode.parentNode.rowIndex * 2);
				this._cachedDate.setMonth(this._month);
				this._updateSelectedMonth();
			}else if(hc( "dojoxCalendarYearLabel")){
				clazz = "dojoxCal-MY-Y-Template";
				this._year = Number(evt.target.innerHTML);
				this._cachedDate.setYear(this._year);
				this._populateMonths();
				this._updateSelectedYear();
			}else if(hc("dojoxCalendarDecrease")){
				this._populateYears(this._displayedYear - 10);
				return true;
			}else if(hc("dojoxCalendarIncrease")){
				this._populateYears(this._displayedYear + 10);
				return true;
			}else{
				return true;
			}
			event.stop(evt);
			return false;
		},

		onOk: function(evt){
			event.stop(evt);
			if(domClass.contains(this.okBtn, "dijitDisabled")){
				return false;
			}
			this.onValueSelected(this._cachedDate);
			return false;
		},

		onCancel: function(evt){
			event.stop(evt);
			this.onValueSelected(this.get("value"));
			return false;
		}
	});
});