render.accordionpane.js

一个ajax富客户端的ajax类库

                background = EchoAppRender.Color.adjust(this._parent._getTabBackground(), 20, 20, 20);
            }
            EchoAppRender.Color.render(background, tabDivElement, "backgroundColor");
            var backgroundImage = this._parent.component.render("tabRolloverBackgroundImage");
            if (backgroundImage) {
                tabDivElement.style.backgroundImage = "";
                tabDivElement.style.backgroundPosition = "";
                tabDivElement.style.backgroundRepeat = "";
                EchoAppRender.FillImage.render(backgroundImage, tabDivElement, null);
            }
            var foreground = this._parent.component.render("tabRolloverForeground");
            if (foreground) {
                EchoAppRender.Color.render(foreground, tabDivElement, "color");
            }
            var border = this._parent.component.render("tabRolloverBorder");
            if (!border) {
                var borderData = EchoAppRender.Border.parse(this._parent._getTabBorder());
                border = EchoAppRender.Border.compose(borderData.size, borderData.style,
                        EchoAppRender.Color.adjust(borderData.color, 20, 20, 20));
            }
            EchoAppRender.Border.render(border, tabDivElement, "borderTop");
            EchoAppRender.Border.render(border, tabDivElement, "borderBottom");
        } else {
            var border = this._parent._getTabBorder();
            EchoAppRender.Border.render(border, tabDivElement, "borderTop");
            EchoAppRender.Border.render(border, tabDivElement, "borderBottom");
            EchoAppRender.Color.render(this._parent._getTabBackground(), tabDivElement, "backgroundColor");
            EchoAppRender.Color.render(this._parent.component.render("tabForeground", 
                    ExtrasRender.ComponentSync.AccordionPane._defaultTabForeground), tabDivElement, "color");
            tabDivElement.style.backgroundImage = "";
            tabDivElement.style.backgroundPosition = "";
            tabDivElement.style.backgroundRepeat = "";
            EchoAppRender.FillImage.render(this._parent.component.render("tabBackgroundImage"), tabDivElement);
        }
    },
    
    _addEventListeners: function() {
        WebCore.EventProcessor.add(this._tabDivElement, "click", Core.method(this, this._processClick), false);
        if (this._parent.component.render("tabRolloverEnabled", true)) {
            WebCore.EventProcessor.add(this._tabDivElement, "mouseover", Core.method(this, this._processEnter), false);
            WebCore.EventProcessor.add(this._tabDivElement, "mouseout", Core.method(this, this._processExit), false);
        }
        WebCore.EventProcessor.Selection.disable(this._tabDivElement);
    },
    
    _getTitle: function() {
        var layoutData = this._childComponent.render("layoutData");
        return layoutData ? layoutData.title : null;
    },
    
    _getContentInsets: function() {
        if (this._childComponent.pane) {
            return ExtrasRender.ComponentSync.AccordionPane._paneInsets;
        } else {
            var insets = this._parent.component.render("defaultContentInsets");
            return insets ? insets : ExtrasRender.ComponentSync.AccordionPane._defaultTabContentInsets;
        }
    },
    
    _processClick: function(e) {
        if (!this._parent.component.isActive()) {
            return;
        }
        this._parent._selectTab(this._childComponent.renderId);
        // FIXME notify server
    },
    
    _processEnter: function(e) {
        if (!this._parent.component.isActive()) {
            return;
        }
        this._highlight(true);
    },
    
    _processExit: function(e) {
        if (!this._parent.component.isActive()) {
            return;
        }
        this._highlight(false);
    }
});

/**
 * Object to manage rotation animation of an AccordionPane.
 * These objects are created and assigned to a specific AccordionPane
 * while it is animating.
 *
 * Creates and starts a new Rotation.  This constructor will store the
 * created Rotation object in the specified AccordionPane's 'rotation'
 * property.
 *
 * @param parent the AccordionPane to rotate
 * @param oldTab the old (current) tab
 * @param newTab the new tab to display
 */
ExtrasRender.ComponentSync.AccordionPane.Rotation = Core.extend({

    $static: {
    
        /**
         * Contains mappings from AccordionPane render ids to Rotation objects.
         * 
         * @type {Object}
         */
        _idToRotation: {},

        /**
         * Static method invoked by window.setTimeout which invokes appropriate Rotation instance method.
         *
         * @param renderId the render id of the Rotation's AccordionPane to step
         */
        _animationStep: function(renderId) {
            var rotation = ExtrasRender.ComponentSync.AccordionPane.Rotation._idToRotation[renderId];
            if (rotation) {
                rotation._animationStep();
            }
        }
    },
    
    $construct: function(parent, oldTab, newTab) {
        this._parent = parent;
        this._oldTab = oldTab;
        this._newTab = newTab;
        
        this._oldTabContentInsets = EchoAppRender.Insets.toPixels(this._oldTab._getContentInsets());
        this._newTabContentInsets = EchoAppRender.Insets.toPixels(this._newTab._getContentInsets());
        
        this._animationStartTime = new Date().getTime();
        this._animationEndTime = this._animationStartTime + this._parent._animationTime;
        
        this._tabHeight = this._parent._calculateTabHeight();
        
        this._rotatingTabs = [];
        
        this._animationStepIndex = 0;
        
        this._oldTabIndex = Core.Arrays.indexOf(this._parent._tabs, this._oldTab);
        this._newTabIndex = Core.Arrays.indexOf(this._parent._tabs, this._newTab);
        this._directionDown = this._newTabIndex < this._oldTabIndex;
        
        if (this._directionDown) {
            // Tabs are sliding down (a tab on the top has been selected).
            for (var i = this._oldTabIndex; i > this._newTabIndex; --i) {
                this._rotatingTabs.push(this._parent._tabs[i]);
            }
        } else {
            // Tabs are sliding up (a tab on the bottom has been selected).
            for (var i = this._oldTabIndex + 1; i <= this._newTabIndex; ++i) {
                this._rotatingTabs.push(this._parent._tabs[i]);
            }
        }
        
        this._regionHeight = this._newTab._tabDivElement.parentNode.offsetHeight;
        
        if (this._directionDown) {
            // Numbers of tabs above that will not be moving.
            this._numberOfTabsAbove = this._newTabIndex + 1;
            
            // Number of tabs below that will not be moving.
            this._numberOfTabsBelow = this._parent._tabs.length - 1 - this._newTabIndex;
            
            // Initial top position of topmost moving tab.
            this._startTopPosition = this._tabHeight * this._numberOfTabsAbove;
            
            // Final top position of topmost moving tab.
            this._endTopPosition = this._regionHeight - this._tabHeight * (this._numberOfTabsBelow);
            
            // Number of pixels across which animation will occur.
            this._animationDistance = this._endTopPosition - this._startTopPosition;
        
        } else {
            // Numbers of tabs above that will not be moving.
            this._numberOfTabsAbove = this._newTabIndex;
        
            // Numbers of tabs below that will not be moving.
            this._numberOfTabsBelow = this._parent._tabs.length - 1 - this._newTabIndex;
    
            // Initial bottom position of bottommost moving tab.
            this._startBottomPosition = this._tabHeight * this._numberOfTabsBelow;
    
            // Final bottom position of bottommost moving tab.
            this._endBottomPosition = this._regionHeight - this._tabHeight * (this._numberOfTabsAbove + 1);
            
            // Number of pixels across which animation will occur.
            this._animationDistance = this._endBottomPosition - this._startBottomPosition;
        }

        this._overflowUpdate();
        this._animationStep();
    },
    
    /**
     * Renders the next step of the rotation animation.
     * Queues subsequent frame of animation via Window.setTimeout() call to self.
     */
    _animationStep: function() {
        var currentTime = new Date().getTime();
        
        if (currentTime < this._animationEndTime) {
            // Number of pixels (from 0) to step current current frame.
            
            var stepFactor = (currentTime - this._animationStartTime) / this._parent._animationTime;
            var stepPosition = Math.round(stepFactor * this._animationDistance);
    
            if (this._directionDown) {
    
                // Move each moving tab to next step position.
                for (var i = 0; i < this._rotatingTabs.length; ++i) {
                    var newPosition = stepPosition + this._startTopPosition 
                            + (this._tabHeight * (this._rotatingTabs.length - i - 1));
                    this._rotatingTabs[i]._tabDivElement.style.top = newPosition + "px";
                }
                
                // Adjust height of expanding new tab content to fill expanding space.
                var newContentHeight = stepPosition - this._oldTabContentInsets.top - this._oldTabContentInsets.bottom;
                if (newContentHeight < 0) {
                    newContentHeight = 0;
                }
                this._newTab._contentDivElement.style.height = newContentHeight + "px";
                
                // On first frame, display new tab content.
                if (this._animationStepIndex == 0) {
                    this._oldTab._contentDivElement.style.bottom = "";
                    this._newTab._contentDivElement.style.display = "block";
                    this._newTab._contentDivElement.style.top = (this._numberOfTabsAbove * this._tabHeight) + "px";
                }
                
                // Move top of old content downward.
                var oldTop = stepPosition + this._startTopPosition + (this._rotatingTabs.length * this._tabHeight);
                this._oldTab._contentDivElement.style.top = oldTop + "px";
                
                // Reduce height of contracting old tab content to fit within contracting space.
                var oldContentHeight = this._regionHeight - oldTop - ((this._numberOfTabsBelow - 1) * this._tabHeight) 
                        - this._oldTabContentInsets.top - this._oldTabContentInsets.bottom;
                if (oldContentHeight < 0) {
                    oldContentHeight = 0;
                }
                this._oldTab._contentDivElement.style.height = oldContentHeight + "px";
            } else {
                // Move each moving tab to next step position.
                for (var i = 0; i < this._rotatingTabs.length; ++i) {
                    var newPosition = stepPosition + this._startBottomPosition 
                            + (this._tabHeight * (this._rotatingTabs.length - i - 1));
                    this._rotatingTabs[i]._tabDivElement.style.bottom = newPosition + "px";
                }
                
                // On first frame, display new tab content.
                if (this._animationStepIndex == 0) {
                    this._oldTab._contentDivElement.style.bottom = "";
                    this._newTab._contentDivElement.style.top = "";
                    this._newTab._contentDivElement.style.bottom = (this._numberOfTabsBelow * this._tabHeight) + "px";
                    this._newTab._contentDivElement.style.height = "0px";
                    this._newTab._contentDivElement.style.display = "block";
                }
                
                // Reduce height of contracting old tab content to fit within contracting space.
                var oldContentHeight = this._regionHeight - stepPosition 
                        - ((this._numberOfTabsAbove + this._numberOfTabsBelow + 1) * this._tabHeight)
                        - this._oldTabContentInsets.top - this._oldTabContentInsets.bottom;
                if (oldContentHeight < 0) {
                    oldContentHeight = 0;
                }
                this._oldTab._contentDivElement.style.height = oldContentHeight + "px";
                
                // Increase height of expanding tab content to fit within expanding space.
                var newContentHeight = stepPosition - this._newTabContentInsets.top - this._newTabContentInsets.bottom;
                if (newContentHeight < 0) {
                    newContentHeight = 0;
                };
                this._newTab._contentDivElement.style.height = newContentHeight + "px";
            }
            
            ++this._animationStepIndex;
        
            // Continue Rotation.
            var renderId = this._parent.component.renderId;
            ExtrasRender.ComponentSync.AccordionPane.Rotation._idToRotation[renderId] = this;
            window.setTimeout("ExtrasRender.ComponentSync.AccordionPane.Rotation._animationStep(\"" + renderId + "\")", 
                    this._parent._animationSleepInterval);
        } else {
            // Complete Rotation.
            this._overflowRestore();
            var parent = this._parent;
            this._dispose();
            parent._redrawTabs();
        }
    },
    
    _overflowUpdate: function() {
        if (this._oldTab._contentDivElement.style.overflow) {
            this._oldContentOverflow = this._oldTab._contentDivElement.style.overflow; 
        }
        if (this._newTab._contentDivElement.style.overflow) {
            this._newContentOverflow = this._newTab._contentDivElement.style.overflow; 
        }
    
        this._oldTab._contentDivElement.style.overflow = "hidden";
        this._newTab._contentDivElement.style.overflow = "hidden";
    },
    
    _overflowRestore: function() {
        this._oldTab._contentDivElement.style.overflow = this._oldContentOverflow ? this._oldContentOverflow : ""; 
        this._newTab._contentDivElement.style.overflow = this._newContentOverflow ? this._newContentOverflow : "";
    },
    
    _cancel: function() {
        this._overflowRestore();
        this._dispose();
    },
    
    _dispose: function() {
        var renderId = this._parent.component.renderId;
        delete ExtrasRender.ComponentSync.AccordionPane.Rotation._idToRotation[renderId];
        this._parent._rotation = null;
        this._parent = null;
        this._oldTab = null;
        this._newTab = null;
        this._rotatingTabs = null;
    }
});