render.button.js

一个ajax富客户端的ajax类库

// FIXME TriCellTable orientations
// FIXME alignment

/**
 * Component rendering peer: Button
 */
EchoAppRender.ButtonSync = Core.extend(EchoRender.ComponentSync, {

    $static: {
        _createPrototypeButton: function() {
            var divElement = document.createElement("div");
            divElement.tabIndex = "0";
            divElement.style.outlineStyle = "none";
            divElement.style.cursor = "pointer";
            divElement.style.overflow = "hidden";
            return divElement;
        },

        _defaultIconTextMargin: 5
    },
    
    $load: function() {
        this._prototypeButton = this._createPrototypeButton();
        EchoRender.registerPeer("Button", this);
    },
    
    _prototypeButton: null,
    
    _processRolloverExitRef: null,
    
    _processInitEventRef: null,
    
    $construct: function() { 
        this._processInitEventRef = Core.method(this, this._processInitEvent);
    },
    
    $virtual: {
        
        doAction: function() {
            this.component.doAction();
        },
        
        renderContent: function() {
            var text = this.component.render("text");
            var icon = EchoAppRender.getEffectProperty(this.component, "icon", "disabledIcon", !this._enabled);
            if (text != null) {
                if (icon) {
                    // Text and icon.
                    var iconTextMargin = this.component.render("iconTextMargin", 
                            EchoAppRender.ButtonSync._defaultIconTextMargin);
                    var orientation = EchoAppRender.TriCellTable.getOrientation(this.component, "textPosition");
                    var tct = new EchoAppRender.TriCellTable(orientation, 
                            EchoAppRender.Extent.toPixels(iconTextMargin));
                    this._renderButtonText(tct.tdElements[0], text);
                    this._iconElement = this._renderButtonIcon(tct.tdElements[1], icon);
                    this._divElement.appendChild(tct.tableElement);
                } else {
                    // Text only.
                    this._renderButtonText(this._divElement, text);
                }
            } else if (icon) {
                // Icon only.
                this._iconElement = this._renderButtonIcon(this._divElement, icon);
            }
        }
    },
    
    /**
     * Registers listners on the button.  This method is invoked lazily, i.e., the first time the button
     * is focused or moused over.  The initial focus/mouseover listeners are removed by this method.
     * This strategy is used for performance reasons due to the fact that many buttons may be present 
     * on the screen, and each button has many event listeners.
     */
    _addEventListeners: function() {
        this._processRolloverExitRef = Core.method(this, this._processRolloverExit);
    
        // Remove initialization listeners.
        WebCore.EventProcessor.remove(this._divElement, "focus", this._processInitEventRef);
        WebCore.EventProcessor.remove(this._divElement, "mouseover", this._processInitEventRef);
        
        WebCore.EventProcessor.add(this._divElement, "click", Core.method(this, this._processClick), false);
        WebCore.EventProcessor.add(this._divElement, "keypress", Core.method(this, this._processKeyPress), false);
        if (this.component.render("rolloverEnabled")) {
            var mouseEnterLeaveSupport = WebCore.Environment.PROPRIETARY_EVENT_MOUSE_ENTER_LEAVE_SUPPORTED;
            var enterEvent = mouseEnterLeaveSupport ? "mouseenter" : "mouseover";
            var exitEvent = mouseEnterLeaveSupport ? "mouseleave" : "mouseout";
            WebCore.EventProcessor.add(this._divElement, enterEvent, 
                    Core.method(this, this._processRolloverEnter), false);
            WebCore.EventProcessor.add(this._divElement, exitEvent, 
                    Core.method(this, this._processRolloverExit), false);
        }
        if (this.component.render("pressedEnabled")) {
            WebCore.EventProcessor.add(this._divElement, "mousedown", Core.method(this, this._processPress), false);
            WebCore.EventProcessor.add(this._divElement, "mouseup", Core.method(this, this._processRelease), false);
        }
        WebCore.EventProcessor.add(this._divElement, "focus", Core.method(this, this._processFocus), false);
        WebCore.EventProcessor.add(this._divElement, "blur", Core.method(this, this._processBlur), false);
        
        WebCore.EventProcessor.Selection.disable(this._divElement);
    },
    
    getFocusFlags: function() {
        return EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_ALL;
    },
    
    _processBlur: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
        this._setFocusState(false);
    },
    
    _processClick: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
        this.component.application.setFocusedComponent(this.component);
        this.doAction();
    },
    
    _processFocus: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
        this._setFocusState(true);
    },
    
    /**
     * Initial focus/mouseover listener.
     * This listener is invoked the FIRST TIME the button is focused or moused over.
     * It invokes the addListeners() method to lazily add the full listener set to the button.
     */
    _processInitEvent: function(e) {
        this._addEventListeners();
        switch (e.type) {
        case "focus":
            this._processFocus(e);
            break;
        case "mouseover":
            if (this.component.render("rolloverEnabled")) {
                this._processRolloverEnter(e);
            }
            break;
        }
    },
    
    _processKeyPress: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return true;
        }
        if (e.keyCode == 13) { // FIXME This will fail in IE (I think)
            this.doAction();
            return false;
        } else {
            return true;
        }
    },
    
    _processPress: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
        WebCore.DOM.preventEventDefault(e);
        this._setPressedState(true);
    },
    
    _processRelease: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
        this._setPressedState(false);
    },
    
    _processRolloverEnter: function(e) {
        if (!this.client.verifyInput(this.component) || WebCore.dragInProgress) {
            return;
        }
        this.component.application.addFocusListener(this._processRolloverExitRef);
        this._setRolloverState(true);
    },
    
    _processRolloverExit: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
        if (this._processRolloverExitRef) {
            this.component.application.removeFocusListener(this._processRolloverExitRef);
        }
        this._setRolloverState(false);
    },
    
    renderAdd: function(update, parentElement) {
        this._enabled = this.component.isRenderEnabled();
        
        this._divElement = EchoAppRender.ButtonSync._prototypeButton.cloneNode(false); 
        this._divElement.id = this.component.renderId;
    
        if (this._enabled) {
            EchoAppRender.Color.render(this.component.render("foreground"), this._divElement, "color");
            EchoAppRender.Color.render(this.component.render("background"), this._divElement, "backgroundColor");
            EchoAppRender.Border.render(this.component.render("border"), this._divElement);
            EchoAppRender.Font.render(this.component.render("font"), this._divElement);
            EchoAppRender.FillImage.render(this.component.render("backgroundImage"), this._divElement);
        } else {
            EchoAppRender.Color.render(EchoAppRender.getEffectProperty(this.component, "foreground", "disabledForeground", true), 
                    this._divElement, "color");
            EchoAppRender.Color.render(EchoAppRender.getEffectProperty(this.component, "background", "disabledBackground", true), 
                    this._divElement, "backgroundColor");
            EchoAppRender.Border.render(EchoAppRender.getEffectProperty(this.component, "border", "disabledBorder", true), 
                    this._divElement);
            EchoAppRender.Font.render(EchoAppRender.getEffectProperty(this.component, "font", "disabledFont", true), 
                    this._divElement);
            EchoAppRender.FillImage.render(EchoAppRender.getEffectProperty(this.component, 
                    "backgroundImage", "disabledBackgroundImage", true), this._divElement);
        }
        
        EchoAppRender.Insets.render(this.component.render("insets"), this._divElement, "padding");
        EchoAppRender.Alignment.render(this.component.render("alignment"), this._divElement, true, this.component);
        
        var toolTipText = this.component.render("toolTipText");
        if (toolTipText) {
            this._divElement.title = toolTipText;
        }
        var width = this.component.render("width");
        if (width) {
            this._divElement.style.width = EchoAppRender.Extent.toCssValue(width, true, true);
        }
        var height = this.component.render("height");
        if (height) {
            this._divElement.style.height = EchoAppRender.Extent.toCssValue(height, false);
            this._divElement.style.overflow = "hidden";
        }
        
        this.renderContent();
        
        if (this._enabled) {
            // Add event listeners for focus and mouseover.  When invoked, these listeners will register the full gamut
            // of button event listeners.  There may be a large number of such listeners depending on how many effects
            // are enabled, and as such we do this lazily for performance reasons.
            WebCore.EventProcessor.add(this._divElement, "focus", this._processInitEventRef, false);
            WebCore.EventProcessor.add(this._divElement, "mouseover", this._processInitEventRef, false);
        }
    
        parentElement.appendChild(this._divElement);
    },
    
    _renderButtonText: function(element, text) {
        var textAlignment = this.component.render("textAlignment") 
        if (textAlignment) {
            EchoAppRender.Alignment.render(textAlignment, element, true, this.component);
        }
        element.appendChild(document.createTextNode(text));
        if (!this.component.render("lineWrap", true)) {
            element.style.whiteSpace = "nowrap";
        }
    },
    
    _renderButtonIcon: function(element, icon) {
        var alignment = this.component.render("alignment") 
        if (alignment) {
            EchoAppRender.Alignment.render(alignment, element, true, this.component);
        }
        var imgElement = document.createElement("img");
        EchoAppRender.ImageReference.renderImg(icon, imgElement);
        element.appendChild(imgElement);
        return imgElement;
    },
    
    renderDispose: function(update) {
        if (this._processRolloverExitRef) {
            this.client.application.removeFocusListener(this._processRolloverExitRef);
        }
        WebCore.EventProcessor.removeAll(this._divElement);
        this._iconElement = null;
    },

    renderFocus: function() {
        WebCore.DOM.focusElement(this._divElement);
        this._setFocusState(true);
    },
    
    renderUpdate: function(update) {
        var element = this._divElement;
        var containerElement = element.parentNode;
        this.renderDispose(update);
        containerElement.removeChild(element);
        this.renderAdd(update, containerElement);
        return false; // Child elements not supported: safe to return false.
    },
    
    _setFocusState: function(focusState) {
        if (!this.component.render("focusedEnabled")) {
            // Render default focus aesthetic.
            var background = this.component.render("background");
            if (background != null) {
                var newBackground = focusState ? EchoAppRender.Color.adjust(background, 0x20, 0x20, 0x20) : background;
                EchoAppRender.Color.render(newBackground, this._divElement, "backgroundColor");
            }
            return;
        } else {
            var foreground = EchoAppRender.getEffectProperty(this.component, "foreground", "focusedForeground", focusState);
            var background = EchoAppRender.getEffectProperty(this.component, "background", "focusedBackground", focusState);
            var backgroundImage = EchoAppRender.getEffectProperty(
                    this.component, "backgroundImage", "focusedBackgroundImage", focusState);
            var font = EchoAppRender.getEffectProperty(this.component, "font", "focusedFont", focusState);
            var border = EchoAppRender.getEffectProperty(this.component, "border", "focusedBorder", focusState);
            
            EchoAppRender.Color.renderClear(foreground, this._divElement, "color");
            EchoAppRender.Color.renderClear(background, this._divElement, "backgroundColor");
            EchoAppRender.FillImage.renderClear(backgroundImage, this._divElement, "backgroundColor");
            EchoAppRender.Font.renderClear(font, this._divElement);
            EchoAppRender.Border.renderClear(border, this._divElement);
        
            if (this._iconElement) {
                var iconUrl = EchoAppRender.ImageReference.getUrl(
                        EchoAppRender.getEffectProperty(this.component, "icon", "focusedIcon", focusState));
                if (iconUrl != this._iconElement.src) {
                    this._iconElement.src = iconUrl;
                }
            }
        }
    },
    
    _setPressedState: function(pressedState) {
        var foreground = EchoAppRender.getEffectProperty(this.component, "foreground", "pressedForeground", pressedState);
        var background = EchoAppRender.getEffectProperty(this.component, "background", "pressedBackground", pressedState);
        var backgroundImage = EchoAppRender.getEffectProperty(
                this.component, "backgroundImage", "pressedBackgroundImage", pressedState);
        var font = EchoAppRender.getEffectProperty(this.component, "font", "pressedFont", pressedState);
        var border = EchoAppRender.getEffectProperty(this.component, "border", "pressedBorder", pressedState);
        
        EchoAppRender.Color.renderClear(foreground, this._divElement, "color");
        EchoAppRender.Color.renderClear(background, this._divElement, "backgroundColor");
        EchoAppRender.FillImage.renderClear(backgroundImage, this._divElement, "backgroundColor");
        EchoAppRender.Font.renderClear(font, this._divElement);
        EchoAppRender.Border.renderClear(border, this._divElement);
        
        if (this._iconElement) {
            var iconUrl = EchoAppRender.ImageReference.getUrl(
                    EchoAppRender.getEffectProperty(this.component, "icon", "pressedIcon", pressedState));
            if (iconUrl != this._iconElement.src) {
                this._iconElement.src = iconUrl;
            }
        }
    },