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

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;
                }
        });
});