render.tabpane.js

一个ajax富客户端的ajax类库

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

    $static: {
        _supportedPartialProperties: ["activeTab"],
        _paneInsets: 0,
        _defaultBorderType: ExtrasApp.TabPane.BORDER_TYPE_ADJACENT_TO_TABS,
        _defaultForeground: "#000000",
        _defaultInsets: 2,
        _defaultTabActiveBorder: "1px solid #00004f",
        _defaultTabActiveHeightIncrease: 2,
        _defaultTabAlignment: "top",
        _defaultTabCloseIconTextMargin: 5,
        _defaultTabContentInsets: 0,
        _defaultTabHeight: 32,
        _defaultTabIconTextMargin: 5,
        _defaultTabInactiveBorder: "1px solid #7f7f7f",
        _defaultTabInset: 10,
        _defaultTabInsets: "3px 8px",
        _defaultTabPosition: ExtrasApp.TabPane.TAB_POSITION_TOP,
        _defaultTabSpacing: 0
    },
    
    $load: function() {
        EchoRender.registerPeer("ExtrasApp.TabPane", this);
    },
    
    _element: null,
    _activeTabId: null,
    _tabs: null,
    _contentContainerDivElement: null,
    _headerContainerTrElement: null,
    
    $construct: function() {
        this._tabs = [];
    },
    
    /**
     * Adds a tab.
     */
    _addTab: function(update, tab, index) {
        if (index == null || index == this._tabs.length) {
            this._tabs.push(tab);
            tab._render(update);
            this._headerContainerTrElement.appendChild(tab._headerTdElement);
            this._contentContainerDivElement.appendChild(tab._contentDivElement);
        } else {
            this._tabs.splice(index, 0, tab);
            tab._render(update);
            this._headerContainerTrElement.insertBefore(tab._headerTdElement, 
                    this._headerContainerTrElement.childNodes[index]);
            this._contentContainerDivElement.insertBefore(tab._contentDivElement,
                    this._contentContainerDivElement.childNodes[index]);
        }
    },
    
    /**
     * @param state {Boolean} whether the tab is active or inactive
     * @return the tab height in pixels
     * @type {Number}
     */
    _calculateTabHeight: function(state) {
        if (state) {
            return this._tabHeightPx + EchoAppRender.Border.getPixelSize(this._tabActiveBorder);
        } else {
            return this._tabHeightPx - this._tabActiveHeightIncreasePx;
        }
    },

    _getActiveTabId: function() {
        var activeTabId = this.component.get("activeTab")
        if (!activeTabId) {
            var activeTabIndex = this.component.get("activeTabIndex");
            if (activeTabIndex != null && activeTabIndex < this.component.children.length) {
                activeTabId = this.component.children[activeTabIndex].renderId;
            }
        }
        return activeTabId;
    },

    /**
     * Retrieves the tab instance with the specified tab id.
     * 
     * @param tabId the tab id
     * @return the tab, or null if no tab is present with the specified id
     */
    _getTabById: function(tabId) {
        for (var i = 0; i < this._tabs.length; ++i) {
            var tab = this._tabs[i];
            if (tab._childComponent.renderId == tabId) {
                return tab;
            }
        }
        return null;
    },
    
    /**
     * Removes a specific tab.
     *
     * @param tab the tab to remove
     */
    _removeTab: function(tab) {
        var tabIndex = Core.Arrays.indexOf(this._tabs, tab);
        if (tabIndex == -1) {
            return;
        }
        if (tab._childComponent.renderId == this._activeTabId) {
            this._activeTabId = null;
        }
        this._tabs.splice(tabIndex, 1);
    
        tab._headerTdElement.parentNode.removeChild(tab._headerTdElement);
        tab._contentDivElement.parentNode.removeChild(tab._contentDivElement);
        tab._dispose();
    },
    
    renderAdd: function(update, parentElement) {
        // Configure Properties
        this._activeTabId = this._getActiveTabId();
        this._borderType = this.component.render("borderType", ExtrasRender.ComponentSync.TabPane._defaultBorderType);
        this._insets = this.component.render("insets", ExtrasRender.ComponentSync.TabPane._defaultInsets);
        this._tabActiveBorder = this.component.render("tabActiveBorder", 
                ExtrasRender.ComponentSync.TabPane._defaultTabActiveBorder);
        this._tabActiveHeightIncreasePx = EchoAppRender.Extent.toPixels(this.component.render("tabActiveHeightIncrease", 
                ExtrasRender.ComponentSync.TabPane._defaultTabActiveHeightIncrease));
        this._tabInactiveBorder = this.component.render("tabInactiveBorder", 
                ExtrasRender.ComponentSync.TabPane._defaultTabInactiveBorder);
        this._tabHeightPx = EchoAppRender.Extent.toPixels(this.component.render("tabHeight",
                ExtrasRender.ComponentSync.TabPane._defaultTabHeight));
        this._tabInsetPx = EchoAppRender.Extent.toPixels(this.component.render("tabInset",
                 ExtrasRender.ComponentSync.TabPane._defaultTabInset));
        this._tabPosition = this.component.render("tabPosition", ExtrasRender.ComponentSync.TabPane._defaultTabPosition);
        this._tabSpacing = this.component.render("tabSpacing", ExtrasRender.ComponentSync.TabPane._defaultTabSpacing);
        this._tabCloseEnabled = this.component.render("tabCloseEnabled", false);

        // Create Main Element
        this._element = document.createElement("div");
        this._element.id = this.component.renderId;
        this._element.style.position = "absolute";
        this._element.style.overflow = "hidden";
    
        // Render Border Insets
        var pixelInsets = EchoAppRender.Insets.toPixels(this._insets);
        if (this._borderType == ExtrasApp.TabPane.BORDER_TYPE_SURROUND) {
            // Do nothing, pixelInsets values are correct.
        } else if (this._borderType == ExtrasApp.TabPane.BORDER_TYPE_PARALLEL_TO_TABS) {
            pixelInsets.left = pixelInsets.right = 0;
        } else if (this._tabPosition == ExtrasApp.TabPane.TAB_POSITION_BOTTOM) {
            pixelInsets.left = pixelInsets.right = pixelInsets.top = 0;
        } else {
            pixelInsets.left = pixelInsets.right = pixelInsets.bottom = 0;
        }
        this._element.style.top = pixelInsets.top + "px";
        this._element.style.right = pixelInsets.right + "px";
        this._element.style.bottom = pixelInsets.bottom + "px";
        this._element.style.left = pixelInsets.left + "px";
        
        // Render Header Container
        var headerContainerDivElement = document.createElement("div");
        headerContainerDivElement.style.overflow = "hidden";
        headerContainerDivElement.style.zIndex = 1;
        headerContainerDivElement.style.position = "absolute";
        headerContainerDivElement.style.width = "100%";
        
        if (this._tabPosition == ExtrasApp.TabPane.TAB_POSITION_BOTTOM) {
            headerContainerDivElement.style.bottom = "0px";
        } else {
            headerContainerDivElement.style.top = "0px";
        }
        headerContainerDivElement.style.left = this._tabInsetPx + "px";
        headerContainerDivElement.style.right = this._tabInsetPx + "px";
        
        var borderSize = EchoAppRender.Border.getPixelSize(this._tabActiveBorder);
        headerContainerDivElement.style.height = (this._tabHeightPx + borderSize) + "px";
        EchoAppRender.Font.render(this.component.render("font"), headerContainerDivElement);
        EchoAppRender.FillImage.render(this.component.render("tabBackgroundImage"), headerContainerDivElement);
    
        var headerTableElement = document.createElement("table");
        headerTableElement.style.borderWidth = "0px";
        headerTableElement.cellPadding = "0px";
        headerTableElement.cellSpacing = "0px";
        headerTableElement.style.padding = "0px";
        
        var headerTbodyElement = document.createElement("tbody");
        headerTableElement.appendChild(headerTbodyElement);
        
        this._headerContainerTrElement = document.createElement("tr");
        headerTbodyElement.appendChild(this._headerContainerTrElement);
        
        headerContainerDivElement.appendChild(headerTableElement);
        
        this._element.appendChild(headerContainerDivElement);
        
        // Render Content Container
        this._contentContainerDivElement = document.createElement("div");
        this._contentContainerDivElement.style.position = "absolute";
        this._contentContainerDivElement.style.overflow = "hidden";
        EchoAppRender.Color.renderFB(this.component, this._contentContainerDivElement);
        
        if (this._tabPosition == ExtrasApp.TabPane.TAB_POSITION_BOTTOM) {
            this._contentContainerDivElement.style.top = "0px";
            this._contentContainerDivElement.style.bottom = this._tabHeightPx + "px";
        } else {
            this._contentContainerDivElement.style.top = this._tabHeightPx + "px";
            this._contentContainerDivElement.style.bottom = "0px";
        }
        this._contentContainerDivElement.style.left = "0px";
        this._contentContainerDivElement.style.right = "0px";
        
        if (this._borderType == ExtrasApp.TabPane.BORDER_TYPE_NONE) {
            this._contentContainerDivElement.style.border = "0px none";
        } else if (this._borderType == ExtrasApp.TabPane.BORDER_TYPE_SURROUND) {
            EchoAppRender.Border.render(this._tabActiveBorder, this._contentContainerDivElement);
        } else if (this._borderType == ExtrasApp.TabPane.BORDER_TYPE_PARALLEL_TO_TABS) {
            EchoAppRender.Border.render(this._tabActiveBorder, this._contentContainerDivElement, "borderTop")
            EchoAppRender.Border.render(this._tabActiveBorder, this._contentContainerDivElement, "borderBottom")
        } else if (this._tabPosition == ExtrasApp.TabPane.TAB_POSITION_BOTTOM) {
            EchoAppRender.Border.render(this._tabActiveBorder, this._contentContainerDivElement, "borderBottom")
        } else {
            EchoAppRender.Border.render(this._tabActiveBorder, this._contentContainerDivElement, "borderTop")
        }
        
        this._element.appendChild(this._contentContainerDivElement);
        
        // Render Tabs
        var activeTabFound = false;
        var componentCount = this.component.getComponentCount();
        for (var i = 0; i < componentCount; ++i) {
            var child = this.component.getComponent(i);
            if (this._activeTabId == child.renderId) {
                activeTabFound = true;
            }
            var tab = new ExtrasRender.ComponentSync.TabPane.Tab(child, this);
            this._addTab(update, tab);
        }
        
        if (!activeTabFound) {
            this._activeTabId = null;
            if (componentCount > 0) {
                this._selectTab(this.component.getComponent(0).renderId);
                this._setActiveTabId(this._activeTabId);
            }
        }