render.tabpane.js

一个ajax富客户端的ajax类库

        parentElement.appendChild(this._element);
    },
    
    renderDisplay: function() {
        WebCore.VirtualPosition.redraw(this._element);
        WebCore.VirtualPosition.redraw(this._contentContainerDivElement);
        
        for (var i = 0; i < this._tabs.length; ++i) {
            this._tabs[i]._renderDisplay();
        }
    },
    
    renderDispose: function(update) {
        this._activeTabId = null;
        for (var i = 0; i < this._tabs.length; i++) {
            this._tabs[i]._dispose();
        }
        this._tabs = [];
        this._element = null;
        this._headerContainerTrElement = null;
        this._contentContainerDivElement = null;
    },
    
    renderUpdate: function(update) {
        var fullRender = false;
        if (update.hasUpdatedLayoutDataChildren()) {
            // Layout data children updated: must full render.
            fullRender = true;
        }
        if (!fullRender) {
            if (!Core.Arrays.containsAll(ExtrasRender.ComponentSync.TabPane._supportedPartialProperties, 
                    update.getUpdatedPropertyNames(), true)) {
                // Update contains property changes that cannot be partially re-rendered.
                fullRender = true;
            }
        }
        if (!fullRender) {
            var removedChildren = update.getRemovedChildren();
            if (removedChildren) {
                // Remove children.
                for (var i = 0; i < removedChildren.length; ++i) {
                    var tab = this._getTabById(removedChildren[i].renderId);
                    this._removeTab(tab);
                }
            }
            var addedChildren = update.getAddedChildren();
            if (addedChildren) {
                // Add children.
                for (var i = 0; i < addedChildren.length; ++i) {
                    var tab = new ExtrasRender.ComponentSync.TabPane.Tab(addedChildren[i], this);
                    this._addTab(update, tab, this.component.indexOf(addedChildren[i]));
                }
            }
            if (update.hasUpdatedProperties()) {
                // partial update
                var activeTabUpdate = update.getUpdatedProperty("activeTab");
                if (activeTabUpdate) {
                    this._selectTab(activeTabUpdate.newValue);
                }
            }
        }
    
        // FIXME lazy rendering
        if (fullRender) {
            var element = this._element;
            var containerElement = element.parentNode;
            EchoRender.renderComponentDispose(update, update.parent);
            containerElement.removeChild(element);
            this.renderAdd(update, containerElement);
        }
        return fullRender;
    },
    
    /**
     * Selects a specific tab.
     * 
     * @param tabId {String} the id of the tab to select
     */
    _selectTab: function(tabId) {
        if (tabId == this._activeTabId) {
            return;
        }
        if (this._activeTabId) {
            var tab = this._getTabById(this._activeTabId);
            if (tab) {
                tab._highlight(false);
            }
        }
        
        var tab = this._getTabById(tabId);
        if (tab) {
            this._activeTabId = tabId;
            tab._highlight(true);
        } else {
            this._activeTabId = null;
        }
    },
    
    _setActiveTabId: function(activeTabId) {
        this.component.set("activeTab", activeTabId);
        var indexSet = false;
        for (var i = 0; i < this.component.children.length; ++i) {
            if (this.component.children[i].renderId == activeTabId) {
                this.component.set("activeTabIndex", i);
                indexSet = true;
                break;
            }
        }
        if (!indexSet) {
            this.component.set("activeTabIndex", null);
        }
    }
});

ExtrasRender.ComponentSync.TabPane.Tab = Core.extend({

    $construct: function(childComponent, parent) {
        // state
        this._childComponent = childComponent;
        this._parent = parent;
        this._rendered = false;
        // elements
        this._headerTdElement = null;
        this._headerContentTableElement = null;
        this._contentDivElement = null;
        this._leftTdElement = null;
        this._centerTdElement = null;
        this._rightTdElement = null;
        this._closeImageTdElement = null;
    },
    
    _addEventListeners: function() {
        WebCore.EventProcessor.add(this._headerTdElement, "click", Core.method(this, this._processClick), false);
        WebCore.EventProcessor.Selection.disable(this._headerTdElement);
        
        if (this._closeImageTdElement) {
            WebCore.EventProcessor.add(this._headerTdElement, "mouseover", 
                    Core.method(this, this._processEnter), false);
            WebCore.EventProcessor.add(this._headerTdElement, "mouseout", 
                    Core.method(this, this._processExit), false);
        }
    },
    
    _dispose: function() {
        WebCore.EventProcessor.removeAll(this._headerTdElement);
        
        this._parent = null;
        this._childComponent = null;
        this._headerTdElement = null;
        this._headerContentTableElement = null;
        this._contentDivElement = null;
        this._leftTdElement = null;
        this._centerTdElement = null;
        this._rightTdElement = null;
        this._closeImageTdElement = null;
    },
    
    _getCloseImage: function(rollover) {
        if (this._isTabCloseEnabled()) {
            if (rollover && this._parent.component.render("tabCloseIconRolloverEnabled")) {
                var image = this._parent.component.render("tabRolloverCloseIcon");
                if (image) {
                    return image;
                }
            }
            return this._parent.component.render("tabCloseIcon");
        } else {
            return this._parent.component.render("tabDisabledCloseIcon");
        }
    },
    
    _getContentInsets: function() {
        if (this._childComponent.pane) {
            return ExtrasRender.ComponentSync.TabPane._paneInsets;
        } else {
            return this._parent.component.render("defaultContentInsets", 
                    ExtrasRender.ComponentSync.TabPane._defaultTabContentInsets);
        }
    },
    
    _getLeftImage: function(state) {
        var propertyName = state ? "tabActiveLeftImage" : "tabInactiveLeftImage";
        var image = this._parent.component.render(propertyName);
        if (!image) {
            return;
        }
        return { url: image, repeat: "no-repeat", x: 0, y: 0 };
    },
    
    _getRightImage: function(state) {
        var propertyName = state ? "tabActiveRightImage" : "tabInactiveRightImage";
        var image = this._parent.component.render(propertyName);
        if (!image) {
            return;
        }
        return { url: image, repeat: "no-repeat", x: "100%", y: 0 };
    },
    
    _hasLeftImage: function() {
        return this._getLeftImage(true) != null || this._getLeftImage(false) != null;
    },
    
    _hasRightImage: function() {
        return this._getRightImage(true) != null || this._getRightImage(false) != null;
    },
    
    _highlight: function(state) {
        var headerContentTableElement = this._headerContentTableElement;
        var centerTdElement = this._centerTdElement;
        var contentDivElement = this._contentDivElement;
        
        var foreground;
        var background;
        var border;
        if (state) {
            foreground = this._parent.component.render("tabActiveForeground");
            background = this._parent.component.render("tabActiveBackground");
            border = this._parent._tabActiveBorder;
        } else {
            foreground = this._parent.component.render("tabInactiveForeground");
            background = this._parent.component.render("tabInactiveBackground");
            border = this._parent._tabInactiveBorder;
        }
        EchoAppRender.Color.renderClear(foreground, headerContentTableElement, "color");
        EchoAppRender.Color.renderClear(background, headerContentTableElement, "backgroundColor");
        headerContentTableElement.style.cursor = state ? "default" : "pointer";
        headerContentTableElement.style.height = this._parent._calculateTabHeight(state) + "px";
        
        var backgroundImage;
        if (state) {
            backgroundImage = this._parent.component.render("tabActiveBackgroundImage");
        } else {
            backgroundImage = this._parent.component.render("tabInactiveBackgroundImage");
        }
        EchoAppRender.FillImage.renderClear(backgroundImage, centerTdElement, null);
        
        var borderSize = EchoAppRender.Border.getPixelSize(this._parent._tabActiveBorder);
        if (this._parent._tabPosition == ExtrasApp.TabPane.TAB_POSITION_BOTTOM) {
            headerContentTableElement.style.marginTop = state ? "0px" : borderSize + "px";
            headerContentTableElement.style.marginBottom = state ? "0px" : this._parent._tabActiveHeightIncreasePx + "px";
            EchoAppRender.Border.render(border, headerContentTableElement, "borderBottom");
        } else {
            headerContentTableElement.style.marginBottom = state ? "0px" : borderSize + "px";
            headerContentTableElement.style.marginTop = state ? "0px" : this._parent._tabActiveHeightIncreasePx + "px";
            EchoAppRender.Border.render(border, headerContentTableElement, "borderTop");
        }