render.calendarselect.js

一个ajax富客户端的ajax类库

/**
 * Component rendering peer: CalendarSelect
 */
ExtrasRender.ComponentSync.CalendarSelect = Core.extend(EchoRender.ComponentSync, {

    $static: {
    
        DEFAULT_FOREGROUND: "#000000",
        DEFAULT_BACKGROUND: "#ffffff",
        DEFAULT_BORDER: "2px groove #5f5faf",
        DEFAULT_SELECTED_DATE_FOREGROUND: "#000000",
        DEFAULT_SELECTED_DATE_BACKGROUND: "#ffffaf",
        DEFAULT_ADJACENT_MONTH_DATE_FOREGROUND: "#7f7f7f",

        _DAYS_IN_MONTH: [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
        
        messages: new Core.ResourceBundle({
            "DayOfWeek.0":     "Sunday",
            "DayOfWeek.1":     "Monday",
            "DayOfWeek.2":     "Tuesday",
            "DayOfWeek.3":     "Wednesday",
            "DayOfWeek.4":     "Thursday",
            "DayOfWeek.5":     "Friday",
            "DayOfWeek.6":     "Saturday",
            "Month.0":         "January",
            "Month.1":         "February",
            "Month.2":         "March",
            "Month.3":         "April",
            "Month.4":         "May",
            "Month.5":         "June",
            "Month.6":         "July",
            "Month.7":         "August",
            "Month.8":         "September",
            "Month.9":         "October",
            "Month.10":        "November",
            "Month.11":        "December",
            "FirstDayOfWeek":  "0"
        }),
        
        /**
         * Determines the number of days in a specific month.
         *
         * @param year the year of the month
         * @param month the month
         * @return the number of days in the month
         */
        getDaysInMonth: function(year, month) {
            if (month == 1) {
                if (year % 400 === 0) {
                    return 29;
                } else if (year % 100 === 0) {
                    return 28;
                } else if (year % 4 === 0) {
                    return 29;
                } else {
                    return 28;
                }
            } else {
                return this._DAYS_IN_MONTH[month];
            }
        },
        
        _processClientResourceChanged: function(e) {
            if (e.path[0] != "ExtrasRender.ComponentSync.CalendarSelect" != 0) {
                return;
            }
            
            var messageMaps = EchoClient.getResource(["ExtrasRender.ComponentSync.CalendarSelect", "messages"]);
            for (var x in messageMaps) {
                this.messages.set(x, messageMaps[x]);
            } 
        }
    },

    $load: function() {
        EchoRender.registerPeer("ExtrasApp.CalendarSelect", this);
        
        EchoClient.addResourceChangeListener(Core.method(this, this._processClientResourceChanged));
        
// FIXME. Following is test code for localization stuff that is in-development in Echo3 core.        
        
//        EchoClient.setResource(["ExtrasRender.ComponentSync.CalendarSelect", "messages", "de"], {
//            "DayOfWeek.0":      "Sonntag",
//            "DayOfWeek.1":      "Montag",
//            "DayOfWeek.2":      "Dienstag",
//            "DayOfWeek.3":      "Mittwoch",
//            "DayOfWeek.4":      "Donnerstag",
//            "DayOfWeek.5":      "Freitag",
//            "DayOfWeek.6":      "Samstag",
//            "Month.0":          "Januar",
//            "Month.1":          "Februar",
//            "Month.2":          "M\u00e4rz",
//            "Month.3":          "April",
//            "Month.4":          "Mai",
//            "Month.5":          "Juni",
//            "Month.6":          "Juli",
//            "Month.7":          "August",
//            "Month.8":          "September",
//            "Month.10":         "November",
//            "Month.11":         "Dezember",
//            "FirstDayOfWeek":   "1"
//        });
//
//        EchoClient.setResource(["ExtrasRender.ComponentSync.CalendarSelect", "messages", "de-DE"], {
//            "DayOfWeek.0":      "Sonntag",
//            "DayOfWeek.1":      "Montag",
//            "DayOfWeek.2":      "Dienstag",
//            "DayOfWeek.3":      "Mittwoch",
//            "DayOfWeek.4":      "Donnerstag",
//            "DayOfWeek.5":      "Freitag",
//            "DayOfWeek.6":      "Samstag",
//            "Month.0":          "Januaraaaaaaaa",
//            "Month.2":          "M\u00e4rz",
//            "Month.3":          "April",
//            "Month.4":          "Mai",
//            "Month.5":          "Juni",
//            "FirstDayOfWeek":   "1"
//        });
    },
    
    _element: null,
    _monthSelect: null,
    _yearField: null,
    _dayTdElements: null,
    
    _year: null,
    _month: null,
    _day: null,
    
    _msg: null,
    
    // FIXME temporary
    _icons: { },
    
    $construct: function() {
        this._msg = ExtrasRender.ComponentSync.CalendarSelect.messages.get(null);
    },
    
    _calculateCalendarInformation: function() {
        var firstDate = new Date(this._year, this._month, 1);
        this._firstDayOfMonth = firstDate.getDay();
        
        this._daysInMonth = ExtrasRender.ComponentSync.CalendarSelect.getDaysInMonth(this._year, this._month);
        if (this._month == 0) {
            this._daysInPreviousMonth = ExtrasRender.ComponentSync.CalendarSelect.getDaysInMonth(this._year - 1, 11);
        } else {
            this._daysInPreviousMonth = ExtrasRender.ComponentSync.CalendarSelect.getDaysInMonth(this._year, this._month - 1);
        }
    },
    
    _processDateSelect: function(e) {
        if (!this.client.verifyInput(this.component, EchoClient.FLAG_INPUT_PROPERTY)) {
            return;
        }
        if (e.target._cellIndex == null) {
            return;
        }
        var cellIndex = e.target._cellIndex;
        
        var selectedDay, selectedMonth, selectedYear;
        if (cellIndex < this._firstDayOfMonth) {
            if (this._month == 0) {
                selectedMonth = 11;
                selectedYear = this._year - 1;
            } else {
                selectedMonth = this._month - 1;
                selectedYear = this._year;
            }
            selectedDay = this._daysInPreviousMonth - this._firstDayOfMonth + cellIndex + 1;
        } else if (cellIndex >= (this._firstDayOfMonth + this._daysInMonth)) {
            if (this._month == 11) {
                selectedMonth = 0;
                selectedYear = this._year + 1;
            } else {
                selectedMonth = this._month + 1;
                selectedYear = this._year;
            }
            selectedDay = cellIndex - this._firstDayOfMonth - this._daysInMonth + 1;
        } else {
            selectedMonth = this._month;
            selectedYear = this._year;
            selectedDay = cellIndex - this._firstDayOfMonth + 1;
        }
        
        this._setDate(selectedYear, selectedMonth, selectedDay);
        this._updateCalendarDisplay();
        this._storeValue();
    },
    
    _processMonthSelect: function(e) {
        if (!this.client.verifyInput(this.component, EchoClient.FLAG_INPUT_PROPERTY)) {
            this._monthSelect.selectedIndex = this._month;
            return;
        }
        
        this._month = this._monthSelect.selectedIndex;
        this._updateCalendarDisplay();
        this._storeValue();
    },
    
    _processYearChange: function(e) {
        if (!this.client.verifyInput(this.component, EchoClient.FLAG_INPUT_PROPERTY)) {
            this._yearField.value = this._year;
            return;
        }
        this._year = parseInt(this._yearField.value);
        this._updateCalendarDisplay();
        this._storeValue();
    },
    
    _processYearDecrement: function(e) {
        if (!this.client.verifyInput(this.component, EchoClient.FLAG_INPUT_PROPERTY)) {
            return;
        }
        --this._year;
        this._yearField.value = this._year;
        this._updateCalendarDisplay();