dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
278 lines (240 loc) • 8.59 kB
JavaScript
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;
}
});
});