render.calendarselect.js

一个ajax富客户端的ajax类库

        this._storeValue();
    },

    _processYearIncrement: function(e) {
        if (!this.client.verifyInput(this.component, EchoClient.FLAG_INPUT_PROPERTY)) {
            retrun;
        }
        ++this._year;
        this._yearField.value = this._year;
        this._updateCalendarDisplay();
        this._storeValue();
    },

    renderAdd: function(update, parentElement) {
        var enabled = this.component.isRenderEnabled()
    
        var i, j, tdElement, trElement;
        var dayOfWeekNameAbbreviationLength = parseInt(this.component.render("dayOfWeekNameAbbreviationLength", 2));
        var firstDayOfWeek = this._msg["FirstDayOfWeek"];
        if (!firstDayOfWeek) {
            firstDayOfWeek = 0;
        }
    
        this._element = document.createElement("div");
        this._element.style.whiteSpace = "nowrap";
        
        this._monthSelect = document.createElement("select");
        for (var i = 0; i < 12; ++i) {
            var optionElement = document.createElement("option");
            optionElement.appendChild(document.createTextNode(this._msg["Month." + i]));
            this._monthSelect.appendChild(optionElement);
        }
        if (!enabled) {
            this._monthSelect.disabled = true;
        }
        this._element.appendChild(this._monthSelect);
        
        this._element.appendChild(document.createTextNode(" "));
        
        this._yearDecrementElement = document.createElement("span");
        this._yearDecrementElement.style.cursor = "pointer";
        if (this._icons.decrement) {
            var imgElement = document.createElement("img");
            imgElement.src = this._icons.decrement;
            this._yearDecrementElement.appendChild(imgElement);
        } else {
            this._yearDecrementElement.appendChild(document.createTextNode("<"));
        }
        this._element.appendChild(this._yearDecrementElement);
        
        this._yearField = document.createElement("input");
        this._yearField.type = "text";
        this._yearField.maxLength = 4;
        this._yearField.size = 5;
        if (!enabled) {
            this._yearField.readOnly = true;
        }
        this._element.appendChild(this._yearField);

        this._yearIncrementElement = document.createElement("span");
        this._yearIncrementElement.style.cursor = "pointer";
        if (this._icons.increment) {
            var imgElement = document.createElement("img");
            imgElement.src = this._icons.increment;
            this._yearIncrementElement.appendChild(imgElement);
        } else {
            this._yearIncrementElement.appendChild(document.createTextNode(">"));
        }
        this._element.appendChild(this._yearIncrementElement);
        
        this._tableElement = document.createElement("table");
        this._tableElement.style.borderCollapse = "collapse";
        this._tableElement.style.margin = "1px";
        EchoAppRender.Border.render(this.component.render("border", 
                ExtrasRender.ComponentSync.CalendarSelect.DEFAULT_BORDER), this._tableElement);
        EchoAppRender.Color.render(this.component.render("foreground",
                ExtrasRender.ComponentSync.CalendarSelect.DEFAULT_FOREGROUND), this._tableElement); 
        EchoAppRender.FillImage.render(this.component.render("backgroundImage"), this._tableElement); 
        
        var tbodyElement = document.createElement("tbody");
        
        trElement = document.createElement("tr");
        for (j = 0; j < 7; ++j) {
            tdElement = document.createElement("td");
            var dayOfWeekName = this._msg["DayOfWeek." + ((firstDayOfWeek + j) % 7)];
            if (dayOfWeekNameAbbreviationLength > 0) {
                dayOfWeekName = dayOfWeekName.substring(0, dayOfWeekNameAbbreviationLength);
            }
            tdElement.appendChild(document.createTextNode(dayOfWeekName));
            trElement.appendChild(tdElement);
        }
        tbodyElement.appendChild(trElement);
        
        this._dayTdElements = [];
        
        var prototypeTdElement = document.createElement("td");
        prototypeTdElement.style.cursor = "pointer";
        prototypeTdElement.style.textAlign = "right";
        prototypeTdElement.style.borderWidth = "0";
        prototypeTdElement.style.padding = "0px 5px";
        
        for (i = 0; i < 6; ++i) {
            this._dayTdElements[i] = [];
            trElement = document.createElement("tr");
            for (j = 0; j < 7; ++j) {
                this._dayTdElements[i][j] = prototypeTdElement.cloneNode(false);
                this._dayTdElements[i][j]._cellIndex = i * 7 + j;
                trElement.appendChild(this._dayTdElements[i][j]);
            }
            tbodyElement.appendChild(trElement);
        }
        
        this._tableElement.appendChild(tbodyElement);
        this._element.appendChild(this._tableElement);
        
        parentElement.appendChild(this._element);
        

        WebCore.EventProcessor.add(this._monthSelect, "change", Core.method(this, this._processMonthSelect), false);
        WebCore.EventProcessor.add(this._yearField, "change", Core.method(this, this._processYearChange), false);
        WebCore.EventProcessor.add(this._yearDecrementElement, "click", Core.method(this, this._processYearDecrement), false);
        WebCore.EventProcessor.add(this._yearIncrementElement, "click", Core.method(this, this._processYearIncrement), false);
        WebCore.EventProcessor.add(this._tableElement, "click", Core.method(this, this._processDateSelect), false);

        var date = this.component.get("date");
        if (!date) {
            date = new Date();
        }
        this._setDate(date.getFullYear(), date.getMonth(), date.getDate());
        
        this._updateCalendarDisplay();
    },
    
    renderDispose: function(update) {
        WebCore.EventProcessor.removeAll(this._monthSelect);
        WebCore.EventProcessor.removeAll(this._yearField);
        WebCore.EventProcessor.removeAll(this._yearDecrementElement);
        WebCore.EventProcessor.removeAll(this._yearIncrementElement);
        WebCore.EventProcessor.removeAll(this._tableElement);
    
        this._dayTdElements = null;
        this._element = null;
        this._monthSelect = null;
        this._yearField = null;
    },
    
    renderUpdate: function(update) {
        var element = this._element;
        var containerElement = element.parentNode;
        EchoRender.renderComponentDispose(update, update.parent);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return false;
    },
    
    _setDate: function(year, month, day) {
        this._year = year;
        this._month = month;
        this._day = day;
    },
    
    _storeValue: function() {
        this.component.set("date", new Date(this._year, this._month, this._day));
    },
    
    _updateCalendarDisplay: function() {
        this._yearField.value = this._year;
        this._monthSelect.selectedIndex = this._month;

        this._calculateCalendarInformation();
        var day = 1 - this._firstDayOfMonth;
        
        var adjacentMonthDateForeground = this.component.render("adjacentMonthDateForeground",
                ExtrasRender.ComponentSync.CalendarSelect.DEFAULT_ADJACENT_MONTH_DATE_FOREGROUND);
        var foreground = this.component.render("foreground", 
                ExtrasRender.ComponentSync.CalendarSelect.DEFAULT_FOREGROUND);
        var selectedForeground = this.component.render("selectedForeground", 
                ExtrasRender.ComponentSync.CalendarSelect.DEFAULT_SELECTED_DATE_FOREGROUND);
        var selectedBackground = this.component.render("selectedBackground", 
                ExtrasRender.ComponentSync.CalendarSelect.DEFAULT_SELECTED_DATE_BACKGROUND);
        
        for (var i = 0; i < 6; ++i) {
            for (var j = 0; j < 7; ++j) {
                var tdElement = this._dayTdElements[i][j];
                
                while (tdElement.hasChildNodes()) {
                    tdElement.removeChild(tdElement.firstChild);
                }
                
                var renderedText;
                var styleText;
                if (day < 1) {
                    renderedText = this._daysInPreviousMonth + day;
                    EchoAppRender.Color.renderClear(adjacentMonthDateForeground, tdElement, "color");
                    EchoAppRender.Color.renderClear(null, tdElement, "backgroundColor");
                } else if (day > this._daysInMonth) {
                    renderedText = day - this._daysInMonth;
                    EchoAppRender.Color.renderClear(adjacentMonthDateForeground, tdElement, "color");
                    EchoAppRender.Color.renderClear(null, tdElement, "backgroundColor");
                } else {
                    renderedText = day;
                    if (day == this._day) {
                        EchoAppRender.Color.renderClear(selectedForeground, tdElement, "color");
                        EchoAppRender.Color.renderClear(selectedBackground, tdElement, "backgroundColor");
                    } else {
                        EchoAppRender.Color.renderClear(foreground, tdElement, "color");
                        EchoAppRender.Color.renderClear(null, tdElement, "backgroundColor");
                    }
                }
                var textNode = document.createTextNode(renderedText);
                tdElement.appendChild(textNode);
                ++day;
            }
        }
    }
});