sync.splitpane.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

            this._separatorDiv.style[positionAttr] = position + "px";
        }
    },
    
    /**
     * Removes listeners from the separator used to monitor its state while it is being dragging.
     */
    _removeSeparatorListeners: function() {
        Core.Web.Event.remove(document.body, "mousemove", this._processSeparatorMouseMoveRef, true);
        Core.Web.Event.remove(document.body, "mouseup", this._processSeparatorMouseUpRef, true);
    },
    
    /**
     * Adds basic structure of SplitPane to DOM, but much work is delayed for initial invocation
     * of renderDisplay().
     * @see Echo.Render.ComponentSync#renderAdd
     */
    renderAdd: function(update, parentElement) {
        this._initialAutoSizeComplete = false;
        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._splitPaneDiv = document.createElement("div");
        this._splitPaneDiv.id = this.component.renderId;
        this._splitPaneDiv.style.cssText = "position:absolute;overflow:hidden;top:0;left:0;right:0;bottom:0;";
        
        Echo.Sync.renderComponentDefaults(this.component, this._splitPaneDiv);
        
        if (this._separatorVisible) {
            this._separatorDiv = document.createElement("div");
            this._separatorDiv.style.cssText = "position:absolute;font-size:1px;line-height:0;z-index:2;";
            Echo.Sync.Color.render(this.component.render("separatorColor", Echo.SplitPane.DEFAULT_SEPARATOR_COLOR), 
                    this._separatorDiv, "backgroundColor");
    
            var resizeCursor = null;
            if (this._orientationVertical) {
                resizeCursor = this._orientationTopLeft ? "s-resize" : "n-resize";
                this._separatorDiv.style.width = "100%";
                this._separatorDiv.style.height = this._separatorSize + "px";
                Echo.Sync.FillImage.render(this.component.render("separatorVerticalImage"), this._separatorDiv, 0);
            } else {
                resizeCursor = this._orientationTopLeft ? "e-resize" : "w-resize";
                this._separatorDiv.style.height = "100%";
                this._separatorDiv.style.width = this._separatorSize + "px";
                Echo.Sync.FillImage.render(this.component.render("separatorHorizontalImage"), this._separatorDiv, 0);
            }
            if (this._resizable && resizeCursor) {
                this._separatorDiv.style.cursor = resizeCursor;
            }
            this._splitPaneDiv.appendChild(this._separatorDiv);
        } else {
            this._separatorDiv = null;
        }
        
        for (var i = 0; i < childCount && i < 2; ++i) {
            var child = this.component.getComponent(i);
            this._renderAddChild(update, child, i);
        }
        
        parentElement.appendChild(this._splitPaneDiv);
        
        Core.Web.Event.add(this._splitPaneDiv, 
                Core.Web.Env.QUIRK_IE_KEY_DOWN_EVENT_REPEAT ? "keydown" : "keypress", 
                Core.method(this, this._processKeyPress), false);
                
        if (this._resizable) {
            Core.Web.Event.add(this._separatorDiv, "mousedown", 
                    Core.method(this, this._processSeparatorMouseDown), false);
            Core.Web.Event.add(this._separatorDiv, "mouseover", 
                    Core.method(this, this._processSeparatorRolloverEnter), false);
            Core.Web.Event.add(this._separatorDiv, "mouseout", 
                    Core.method(this, this._processSeparatorRolloverExit), false);
        }
    },
    
    /**
     * Renders the addition of a child.
     * 
     * @param {Echo.Update.ComponentUpdate} update the update
     * @param {Echo.Component} child the added child
     * @param {Number} index the index of the child within the SplitPane 
     */
    _renderAddChild: function(update, child, index) {
        var childIndex = this.component.indexOf(child);
        var paneDiv = document.createElement("div");
        this._paneDivs[index] = paneDiv;
        
        paneDiv.style.cssText = "position: absolute; overflow: auto; z-index: 1;";
        
        var layoutData = child.render("layoutData");
        if (layoutData) {
            Echo.Sync.Alignment.render(layoutData.alignment, paneDiv, false, this.component);
            Echo.Sync.Color.render(layoutData.background, paneDiv, "backgroundColor");
            Echo.Sync.FillImage.render(layoutData.backgroundImage, paneDiv);
            if (!child.pane) {
                Echo.Sync.Insets.render(layoutData.insets, paneDiv, "padding");
                switch (layoutData.overflow) {
                case Echo.SplitPane.OVERFLOW_HIDDEN:
                    paneDiv.style.overflow = "hidden";
                    break;
                case Echo.SplitPane.OVERFLOW_SCROLL:
                    paneDiv.style.overflow = "scroll";
                    break;
                }
            }
        }
        if (child.pane) {
            paneDiv.style.overflow = "hidden";
        }
                
        // Set static CSS positioning attributes on pane DIV.
        if (this._orientationVertical) {
            paneDiv.style.left = 0;
            paneDiv.style.right = 0;
            if ((this._orientationTopLeft && index === 0) || (!this._orientationTopLeft && index == 1)) {
                paneDiv.style.top = 0;
            } else {
                paneDiv.style.bottom = 0;
            }
        } else {
            paneDiv.style.top = "0";
            paneDiv.style.bottom = "0";
            if ((this._orientationTopLeft && index === 0) || (!this._orientationTopLeft && index == 1)) {
                paneDiv.style.left = 0;
            } else {
                paneDiv.style.right = 0;
            }
        }
        
        Echo.Render.renderComponentAdd(update, child, paneDiv);
        this._splitPaneDiv.appendChild(paneDiv);
    
        if (this._childPanes[index] && this._childPanes[index].component == child) {
            this._childPanes[index].scrollRequired = true;
        } else {
            this._childPanes[index] = new Echo.Sync.SplitPane.ChildPane(this, child);
        }
    },
    
    /** @see Echo.Render.ComponentSync#renderDisplay */
    renderDisplay: function() {
        Core.Web.VirtualPosition.redraw(this._splitPaneDiv);
        Core.Web.VirtualPosition.redraw(this._paneDivs[0]);
        Core.Web.VirtualPosition.redraw(this._paneDivs[1]);

        this._size = null;
        
        if (this._childPanes[0]) {
            this._childPanes[0].loadDisplayData();
        }
        if (this._childPanes[1]) {
            this._childPanes[1].loadDisplayData();
        }

        var position = this._requested;
        
        if (position == null && this._autoPositioned && this._paneDivs[0]) {
            // Automatic sizing requested: set separator and pane 1 positions to be adjacent to browser's 
            // rendered size of pane 0.

            if (this.component.children[0].peer.getPreferredSize) {
                // Query child 0 component for preferred size if available.
                var prefSize = this.component.children[0].peer.getPreferredSize(
                        this._orientationVertical ? Echo.Render.ComponentSync.SIZE_HEIGHT : Echo.Render.ComponentSync.SIZE_WIDTH);
                position = prefSize ? (this._orientationVertical ? prefSize.height : prefSize.width) : null;
            }
            
            if (position == null && this._orientationVertical && !this.component.children[0].pane) {
                // Automatically position vertical SplitPane based on height of non-pane child 0.
                this._paneDivs[0].style.height = "";
                var bounds0 = new Core.Web.Measure.Bounds(this._paneDivs[0]);
                position = bounds0.height;
            }

            if (position != null && !this._initialAutoSizeComplete) {
                // If position was successfully set, perform initial operations related to automatic sizing 
                // (executed on first renderDisplay() after renderAdd()).
                this._initialAutoSizeComplete = true;
                var imageListener = Core.method(this, function() {
                    if (this.component) { // Verify component still registered.
                        Echo.Render.renderComponentDisplay(this.component);
                    }
                });
                Core.Web.Image.monitor(this._paneDivs[0], imageListener);
            }
        }

        if (position == null) {
            // Use default separator position if none has been provided at this point.
            position = Echo.SplitPane.DEFAULT_SEPARATOR_POSITION;
        }

        if (Echo.Sync.Extent.isPercent(position)) {
            // Convert percent position to integer value.
            var totalSize = this._orientationVertical ? this._getSize().height : this._getSize().width;
            position = Math.round((parseInt(position, 10) / 100) * totalSize);
        } else {
            // Convert non-percent extent position to integer position.
            position = Math.round(Echo.Sync.Extent.toPixels(position, !this._orientationVertical));
        }
        
        // Constrain position and assign as rendered position.
        this._rendered = this._getBoundedSeparatorPosition(position);
        
        // Redraw dynamic elements of SplitPane.
        this._redraw(this._rendered);
        
        // IE Virtual positioning updates.
        Core.Web.VirtualPosition.redraw(this._paneDivs[0]);
        Core.Web.VirtualPosition.redraw(this._paneDivs[1]);

        // Update scroll bar positions for scenario where pane has been disposed and redrawn.
        for (var i = 0; i < this._childPanes.length; ++i) {
            if (this._childPanes[i] && this._childPanes[i].scrollRequired && this._paneDivs[i]) {
                this._childPanes[i].loadScrollPositions(this._paneDivs[i]);
                this._childPanes[i].scrollRequired = false;
            }
        }
    },
    
    /** @see Echo.Render.ComponentSync#renderDispose */
    renderDispose: function(update) {
        this._overlayRemove();

        for (var i = 0; i < 2; ++i) {
            if (this._paneDivs[i]) {
                if (this._childPanes[i]) {
                    this._childPanes[i].storeScrollPositions(this._paneDivs[i]);
                }
                this._paneDivs[i] = null;
            }
        }
        
        if (this._separatorDiv) {
            Core.Web.Event.removeAll(this._separatorDiv);
            this._separatorDiv = null;
        }

        Core.Web.Event.removeAll(this._splitPaneDiv);
    
        this._splitPaneDiv = null;
    },
    
    /**
     * Renders the removal a single child component.
     * 
     * @param {Echo.Update.ComponentUpdate} update the update
     * @param {Echo.Component} child the removed 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 {
            // Do nothing (component was never rendered within the SplitPane).
            return;
        }

        this._childPanes[index] = null;
        
        Core.Web.DOM.removeNode(this._paneDivs[index]);
        this._paneDivs[index] = null;
    },
        
    /** @see Echo.Render.ComponentSync#renderUpdate */
    renderUpdate: function(update) {
        var fullRender = false,
            i;
        
        if (this._hasRelocatedChildren()) {
            fullRender = true;
        } else if (update.hasUpdatedProperties() || update.hasUpdatedLayoutDataChildren()) {
            if (update.isUpdatedPropertySetIn({ separatorPosition: true })) {
                this._requested = this.component.render("separatorPosition");
            } else {
                fullRender = true;
            }
        }
        
        if (!fullRender && (update.hasAddedChildren() || update.hasRemovedChildren())) {
            var removedChildren = update.getRemovedChildren();
            if (removedChildren) {
                // Remove children.
                for (i = 0; i < removedChildren.length; ++i) {
                    this._renderRemoveChild(update, removedChildren[i]);
                }
            }
            var addedChildren = update.getAddedChildren();
            if (addedChildren) {
                // Add children.
                for (i = 0; i < addedChildren.length; ++i) {
                    this._renderAddChild(update, addedChildren[i], this.component.indexOf(addedChildren[i])); 
                }
            }
        }
        
        if (fullRender) {
            var element = this._splitPaneDiv;
            var containerElement = element.parentNode;
            Echo.Render.renderComponentDispose(update, update.parent);
            containerElement.removeChild(element);
            this.renderAdd(update, containerElement);
        }
        
        return fullRender;
    }
});