render.splitpane.js

一个ajax富客户端的ajax类库

                this._redrawItem(this._firstPaneDivElement, "height", (this._separatorPosition - insetsAdjustment) + "px");
                this._redrawItem(this._secondPaneDivElement, "top", (this._separatorPosition + this._separatorSize) + "px");
                this._redrawItem(this._separatorDivElement, "top", this._separatorPosition + "px");
            } else {
                this._redrawItem(this._firstPaneDivElement, "height", (this._separatorPosition - insetsAdjustment) + "px");
                this._redrawItem(this._secondPaneDivElement, "bottom", (this._separatorPosition + this._separatorSize) + "px"); 
                this._redrawItem(this._separatorDivElement, "bottom", this._separatorPosition + "px");
            }
        } else {
            if (this._orientationTopLeft) {
                this._redrawItem(this._firstPaneDivElement, "width", (this._separatorPosition - insetsAdjustment) + "px");
                this._redrawItem(this._secondPaneDivElement, "left", (this._separatorPosition + this._separatorSize) + "px");
                this._redrawItem(this._separatorDivElement, "left", this._separatorPosition + "px");
            } else {
                this._redrawItem(this._firstPaneDivElement, "width", (this._separatorPosition - insetsAdjustment) + "px");
                this._redrawItem(this._secondPaneDivElement, "right", (this._separatorPosition + this._separatorSize) + "px"); 
                this._redrawItem(this._separatorDivElement, "right", this._separatorPosition + "px");
            }
        }
    },
    
    _redrawItem: function(element, styleProperty, newValue) {
        if (element) {
            element.style[styleProperty] = newValue;
        }
    },
    
    _removeSeparatorListeners: function() {
        var bodyElement = document.getElementsByTagName("body")[0];
        WebCore.EventProcessor.remove(bodyElement, "mousemove", this._processSeparatorMouseMoveRef, true);
        WebCore.EventProcessor.remove(bodyElement, "mouseup", this._processSeparatorMouseUpRef, true);
    },
    
    renderAdd: function(update, parentElement) {
        this.loadRenderData();

        var childCount = this.component.getComponentCount();
        if (childCount > 2) {
            throw new Error("Cannot render SplitPane with more than two child components.");
        }
        var child0 = childCount < 1 ? null : this.component.getComponent(0);
        var child1 = childCount < 2 ? null : this.component.getComponent(1);
    
        this._splitPaneDivElement = document.createElement("div");
        this._splitPaneDivElement.id = this.component.renderId;
        this._splitPaneDivElement.style.cssText = "position: absolute; overflow: hidden; " 
                + "top: 0px; left: 0px; right: 0px; bottom: 0px;";
        
        EchoAppRender.Color.renderFB(this.component, this._splitPaneDivElement);
        EchoAppRender.Font.render(this.component.render("font"), this._splitPaneDivElement);
        
        if (this._separatorSize > 0) {
            this._separatorDivElement = document.createElement("div");
            this._separatorDivElement.style.cssText = "position: absolute; font-size: 1px; line-height: 0; z-index: 2;";
            EchoAppRender.Color.render(this.component.render("separatorColor", EchoApp.SplitPane.DEFAULT_SEPARATOR_COLOR), 
                    this._separatorDivElement, "backgroundColor");
    
            var resizeCursor = null;
            if (this._orientationVertical) {
                if (this._orientationTopLeft) {
                    this._separatorDivElement.style.top = this._separatorPosition + "px";
                    resizeCursor = "s-resize";
                } else {
                    this._separatorDivElement.style.bottom = this._separatorPosition + "px";
                    resizeCursor = "n-resize";
                }
                this._separatorDivElement.style.width = "100%";
                this._separatorDivElement.style.height = this._separatorSize + "px";
                EchoAppRender.FillImage.render(this.component.render("separatorVerticalImage"), this._separatorDivElement, 0);
            } else {
                if (this._orientationTopLeft) {
                    this._separatorDivElement.style.left = this._separatorPosition + "px";
                    resizeCursor = "e-resize";
                } else {
                    this._separatorDivElement.style.right = this._separatorPosition + "px";
                    resizeCursor = "w-resize";
                }
                this._separatorDivElement.style.height = "100%";
                this._separatorDivElement.style.width = this._separatorSize + "px";
                EchoAppRender.FillImage.render(this.component.render("separatorHorizontalImage"), this._separatorDivElement, 0);
            }
            if (this._resizable && resizeCursor) {
                this._separatorDivElement.style.cursor = resizeCursor;
            }
            this._splitPaneDivElement.appendChild(this._separatorDivElement);
        } else {
            this._separatorDivElement = null;
        }
        
        for (var i = 0; i < childCount && i < 2; ++i) {
            var child = this.component.getComponent(i);
            this._renderAddChild(update, child, i);
        }
        
        parentElement.appendChild(this._splitPaneDivElement);
        
        WebCore.EventProcessor.add(this._splitPaneDivElement, 
                WebCore.Environment.QUIRK_IE_KEY_DOWN_EVENT_REPEAT ? "keydown" : "keypress", 
                Core.method(this, this._processKeyPress), false);
                
        if (this._resizable) {
            WebCore.EventProcessor.add(this._separatorDivElement, "mousedown", 
                    Core.method(this, this._processSeparatorMouseDown), false);
        }
    },
    
    _renderAddChild: function(update, child, index) {
        var childIndex = this.component.indexOf(child);
        var paneDivElement = document.createElement("div");
        
        if (index == 0) {
           this._firstPaneDivElement = paneDivElement;
        } else {
           this._secondPaneDivElement = paneDivElement;
        }
        
        paneDivElement.style.cssText = "position: absolute; overflow: auto; z-index: 1;";
        
        var layoutData = child.render("layoutData");
        if (layoutData) {
            EchoAppRender.Alignment.render(layoutData.alignment, paneDivElement, false, this.component);
            EchoAppRender.Color.render(layoutData.background, paneDivElement, "backgroundColor");
            EchoAppRender.FillImage.render(layoutData.backgroundImage, paneDivElement);
            if (!child.pane) {
                EchoAppRender.Insets.render(layoutData.insets, paneDivElement, "padding");
            }
            switch (layoutData.overflow) {
            case EchoApp.SplitPane.OVERFLOW_HIDDEN:
                paneDivElement.style.overflow = "hidden";
                break;
            case EchoApp.SplitPane.OVERFLOW_SCROLL:
                paneDivElement.style.overflow = "scroll";
                break;
            }
        }
        
        var insetsAdjustment = this._getInsetsSizeAdjustment(layoutData);
        var renderingTopLeft = (index == 0 && this._orientationTopLeft) || (index != 0 && !this._orientationTopLeft);
                
        if (this._orientationVertical) {
            paneDivElement.style.left = "0px";
            paneDivElement.style.right = "0px";
            if (this._orientationTopLeft) {
                if (index == 0) {
                    paneDivElement.style.top = "0px";
                    paneDivElement.style.height = (this._separatorPosition - insetsAdjustment) + "px";
                } else {
                    paneDivElement.style.top = (this._separatorPosition + this._separatorSize) + "px";
                    paneDivElement.style.bottom = "0px";
                }
            } else {
                if (index == 0) {
                    paneDivElement.style.bottom = "0px";
                    paneDivElement.style.height = (this._separatorPosition - insetsAdjustment) + "px";
                } else {
                    paneDivElement.style.top = "0px";
                    paneDivElement.style.bottom = (this._separatorPosition + this._separatorSize) + "px";
                }
            }
        } else {
            paneDivElement.style.top = "0px";
            paneDivElement.style.bottom = "0px";
            if (this._orientationTopLeft) {
                if (index == 0) {
                    paneDivElement.style.left = "0px";
                    paneDivElement.style.width = (this._separatorPosition - insetsAdjustment) + "px";
                } else {
                    paneDivElement.style.left = (this._separatorPosition + this._separatorSize) + "px";
                    paneDivElement.style.right = "0px";
                }
            } else {
                if (index == 0) {
                    paneDivElement.style.width = (this._separatorPosition - insetsAdjustment) + "px";
                    paneDivElement.style.right = "0px";
                } else {
                    paneDivElement.style.left = "0px";
                    paneDivElement.style.right = (this._separatorPosition + this._separatorSize) + "px";
                }
            }
        }
        
        EchoRender.renderComponentAdd(update, child, paneDivElement);
        this._splitPaneDivElement.appendChild(paneDivElement);
    
        if (this._childPanes[index] && this._childPanes[index].component == child) {
            this._childPanes[index].loadScrollPositions(paneDivElement);
        } else {
            this._childPanes[index] = new EchoAppRender.SplitPaneSync.ChildPane(this, child);
        }
    },
    
    _renderRemoveChild: function(update, child) {
        var index;
        if (this._childPanes[0] && this._childPanes[0].component == child) {
            index = 0;
        } else if (this._childPanes[1] && this._childPanes[1].component == child) {
            index = 1;
        } else {
            throw new Error("Specified component is not a child of the SplitPane.");
        }

        this._childPanes[index] = null;
        switch (index) {
        case 0:
            WebCore.DOM.removeNode(this._firstPaneDivElement);
            this._firstPaneDivElement = null;
            break;
        case 1:
            WebCore.DOM.removeNode(this._secondPaneDivElement);
            this._secondPaneDivElement = null;
            break;
        }
    },
        
    renderDisplay: function() {
        WebCore.VirtualPosition.redraw(this._splitPaneDivElement);
        if (this.component.render("resizable")) {
            this._setSeparatorPosition(this._userSeparatorPosition);
        }
        if (this._firstPaneDivElement) {
            WebCore.VirtualPosition.redraw(this._firstPaneDivElement);
        }
        if (this._secondPaneDivElement) {
            WebCore.VirtualPosition.redraw(this._secondPaneDivElement);
        }
    },
    
    renderUpdate: function(update) {
        var fullRender = false;
        if (update.hasUpdatedProperties() || update.hasUpdatedLayoutDataChildren()
                || this._hasRelocatedChildren()) {
            if (update.isUpdatedPropertySetIn({ separatorPosition: true })) {
                this._userSeparatorPosition =  EchoAppRender.Extent.toPixels(this.component.render("separatorPosition",
                        EchoApp.SplitPane.DEFAULT_SEPARATOR_POSITION), this._orientationVertical);
                this._setSeparatorPosition(this._userSeparatorPosition);
            } else {
                fullRender = true;
            }
        }
        
        if (!fullRender && (update.hasAddedChildren() || update.hasRemovedChildren())) {
            var removedChildren = update.getRemovedChildren();
            if (removedChildren) {
                // Remove children.
                for (var i = 0; i < removedChildren.length; ++i) {
                    this._renderRemoveChild(update, removedChildren[i]);
                }
            }
            var addedChildren = update.getAddedChildren();
            if (addedChildren) {
                // Add children.
                for (var i = 0; i < addedChildren.length; ++i) {
                    this._renderAddChild(update, addedChildren[i], this.component.indexOf(addedChildren[i])); 
                }
            }
        }
        if (fullRender) {
            var element = this._splitPaneDivElement;
            var containerElement = element.parentNode;
            EchoRender.renderComponentDispose(update, update.parent);
            containerElement.removeChild(element);
            this.renderAdd(update, containerElement);
        }
        
        return fullRender;
    },
    
    _setSeparatorPosition: function(newValue) {
        var oldValue = this._separatorPosition;
    
        if (this._childPanes[1]) {
            var totalSize = this._orientationVertical ? 
                    this._splitPaneDivElement.offsetHeight : this._splitPaneDivElement.offsetWidth;
            if (newValue > totalSize - this._childPanes[1].minimumSize - this._separatorSize) {
                newValue = totalSize - this._childPanes[1].minimumSize - this._separatorSize;
            } else if (this._childPanes[1].maximumSize != null
                    && newValue < totalSize - this._childPanes[1].maximumSize - this._separatorSize) {
                newValue = totalSize - this._childPanes[1].maximumSize - this._separatorSize;
            }
        }
        if (this._childPanes[0]) {
            if (newValue < this._childPanes[0].minimumSize) {
                newValue = this._childPanes[0].minimumSize;
            } else if (this._childPanes[0].maximumSize  != null && newValue > this._childPanes[0].maximumSize) {
                newValue = this._childPanes[0].maximumSize;
            }
        }
        
        this._separatorPosition = newValue;
        
        if (oldValue != newValue) {
            this._redraw();
        }
        
        //FIXME.
        return oldValue != newValue;
    }
});