sync.splitpane.js

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

        // Determine size of pane 1.
        var size1;
        if (this.component.children.length == 1) {
            // Pane 1 does not exist.
            size1 = { width: 0, height: 0 };
        } else if (this.component.children[1].peer.getPreferredSize) {
            // Use getPreferredSize() if available.
            size1 = this.component.children[1].peer.getPreferredSize(dimension);
        } else if (!this.component.children[1].pane && (dimension & Echo.Render.ComponentSync.SIZE_HEIGHT) &&
                this._paneDivs[1].firstChild) {
            // Measure height of non-pane child (assuming height is being requested).
            bounds = new Core.Web.Measure.Bounds(this._paneDivs[1].firstChild);
            size1 = { height: bounds.height === 0 ? null : bounds.height };
        } else {
            // Pane 1 cannot be measured.
            size1 = { };
        }
        
        var height = null;
        if ((dimension & Echo.Render.ComponentSync.SIZE_HEIGHT) && size0.height != null && size1.height != null) {
            if (this._orientationVertical) {
                // Measure height of vertical SplitPane: sum pane heights and separator.
                height = size0.height + size1.height + this._separatorSize;
            } else {
                // Measure height of horizontal SplitPane: use maximum pane height.
                height = size0.height > size1.height ? size0.height : size1.height;
            }
        }
        
        var width = null;
        if ((dimension & Echo.Render.ComponentSync.SIZE_WIDTH) && size0.width != null && size1.width != null) {
            if (this._orientationVertical) {
                // Measure width of vertical SplitPane: use maximum pane width.
                width = size0.width > size1.width ? size0.width : size1.width;
            } else {
                // Measure width of horizontal SplitPane: sum pane widths and separator.
                width = size0.width + size1.width + this._separatorSize;
            }
        }
        
        return { height: height, width: width };
    },
    
    /**
     * Retrieves the (potentially cached) dimensions of the SplitPane outer DIV.
     * 
     * @return the dimensions
     * @type Core.Web.Measure.Bounds
     */
    _getSize: function() {
        if (!this._size) {
            this._size = new Core.Web.Measure.Bounds(this._splitPaneDiv);
        }
        return this._size;
    },
    
    /**
     * Determines if the specified update has caused either child of the SplitPane to
     * be relocated (i.e., a child which existed before continues to exist, but at a
     * different index).
     * 
     * @param {Echo.Update.ComponentUpdate} update the component update
     * @return true if a child has been relocated
     * @type Boolean
     */
    _hasRelocatedChildren: function(update) {
        var oldChild0 = this._childPanes[0] ? this._childPanes[0].component : null; 
        var oldChild1 = this._childPanes[1] ? this._childPanes[1].component : null; 
        var childCount = this.component.getComponentCount();
        var newChild0 = childCount > 0 ? this.component.getComponent(0) : null;
        var newChild1 = childCount > 1 ? this.component.getComponent(1) : null;
        return (oldChild0 != null && oldChild0 == newChild1) || 
                (oldChild1 != null && oldChild1 == newChild0);
    },

    /**
     * Retrieves properties from Echo.SplitPane component instances and
     * stores them in local variables in a format more convenient for processing
     * by this synchronization peer.
     */
    _loadRenderData: function() {
        var orientation = this.component.render("orientation", 
                Echo.SplitPane.ORIENTATION_HORIZONTAL_LEADING_TRAILING);
        
        switch (orientation) {
        case Echo.SplitPane.ORIENTATION_HORIZONTAL_LEADING_TRAILING:
            this._orientationTopLeft = this.component.getRenderLayoutDirection().isLeftToRight();
            this._orientationVertical = false;
            break;
        case Echo.SplitPane.ORIENTATION_HORIZONTAL_TRAILING_LEADING:
            this._orientationTopLeft = !this.component.getRenderLayoutDirection().isLeftToRight();
            this._orientationVertical = false;
            break;
        case Echo.SplitPane.ORIENTATION_HORIZONTAL_LEFT_RIGHT:
            this._orientationTopLeft = true;
            this._orientationVertical = false;
            break;
        case Echo.SplitPane.ORIENTATION_HORIZONTAL_RIGHT_LEFT:
            this._orientationTopLeft = false;
            this._orientationVertical = false;
            break;
        case Echo.SplitPane.ORIENTATION_VERTICAL_TOP_BOTTOM:
            this._orientationTopLeft = true;
            this._orientationVertical = true;
            break;
        case Echo.SplitPane.ORIENTATION_VERTICAL_BOTTOM_TOP:
            this._orientationTopLeft = false;
            this._orientationVertical = true;
            break;
        default:
            throw new Error("Invalid orientation: " + orientation);
        }

        this._resizable = this.component.render("resizable");
        this._autoPositioned = this.component.render("autoPositioned");
        this._requested = this.component.render("separatorPosition");
        
        var defaultSeparatorSize = this._resizable ? Echo.SplitPane.DEFAULT_SEPARATOR_SIZE_RESIZABLE : 
                Echo.SplitPane.DEFAULT_SEPARATOR_SIZE_FIXED;
        var separatorSizeExtent = this.component.render(
                this._orientationVertical ? "separatorHeight" : "separatorWidth", defaultSeparatorSize);
        this._separatorSize = Echo.Sync.Extent.toPixels(separatorSizeExtent, this._orientationVertical);
        if (this._separatorSize == null) {
            this._separatorSize = defaultSeparatorSize;
        }
        
        this._separatorColor = this.component.render("separatorColor", Echo.SplitPane.DEFAULT_SEPARATOR_COLOR); 
        this._separatorRolloverColor = this.component.render("separatorRolloverColor") || 
                Echo.Sync.Color.adjust(this._separatorColor, 0x20, 0x20, 0x20);
        
        this._separatorImage = this.component.render(this._orientationVertical ? 
                "separatorVerticalImage" : "separatorHorizontalImage");
        this._separatorRolloverImage = this.component.render(this._orientationVertical ? 
                "separatorVerticalRolloverImage" : "separatorHorizontalRolloverImage");
        
        this._separatorVisible = this._resizable || (this.component.render("separatorVisible", true) && this._separatorSize > 0);
    },
    
    /**
     * Adds an overlay DIV at maximum z-index to cover any objects that will not provide move mouseup freedback.
     * @see #_overlayRemove
     */ 
    _overlayAdd: function() {
        if (this._overlay) {
            return;
        }
        this._overlay = document.createElement("div");
        this._overlay.style.cssText = "position:absolute;z-index:32767;width:100%;height:100%;";
        Echo.Sync.FillImage.render(this.client.getResourceUrl("Echo", "resource/Transparent.gif"), this._overlay);
        document.body.appendChild(this._overlay);
    },
    
    /**
     * Removes the overlay DIV.
     * @see #_overlayAdd
     */
    _overlayRemove: function() {
        if (!this._overlay) {
            return;
        }
        document.body.removeChild(this._overlay);
        this._overlay = null;
    },
    
    /** Processes a key press event. */
    _processKeyPress: function(e) {
        if (!this.client) {
            return;
        }
        
        var focusPrevious,
            focusedComponent,
            focusFlags,
            focusChild;
        switch (e.keyCode) {
        case 37:
        case 39:
            if (!this._orientationVertical) {
                focusPrevious = (e.keyCode == 37) ^ (!this._orientationTopLeft);
                focusedComponent = this.client.application.getFocusedComponent();
                if (focusedComponent && focusedComponent.peer && focusedComponent.peer.getFocusFlags) {
                    focusFlags = focusedComponent.peer.getFocusFlags();
                    if ((focusPrevious && focusFlags & Echo.Render.ComponentSync.FOCUS_PERMIT_ARROW_LEFT) || 
                            (!focusPrevious && focusFlags & Echo.Render.ComponentSync.FOCUS_PERMIT_ARROW_RIGHT)) {
                        focusChild = this.client.application.focusManager.findInParent(this.component, focusPrevious);
                        if (focusChild) {
                            this.client.application.setFocusedComponent(focusChild);
                            Core.Web.DOM.preventEventDefault(e);
                            return false;
                        }
                    }
                }
            }
            break;
        case 38:
        case 40:
            if (this._orientationVertical) {
                focusPrevious = (e.keyCode == 38) ^ (!this._orientationTopLeft);
                focusedComponent = this.client.application.getFocusedComponent();
                if (focusedComponent && focusedComponent.peer && focusedComponent.peer.getFocusFlags) {
                    focusFlags = focusedComponent.peer.getFocusFlags();
                    if ((focusPrevious && focusFlags & Echo.Render.ComponentSync.FOCUS_PERMIT_ARROW_UP) ||
                            (!focusPrevious && focusFlags & Echo.Render.ComponentSync.FOCUS_PERMIT_ARROW_DOWN)) {
                        focusChild = this.client.application.focusManager.findInParent(this.component, focusPrevious);
                        if (focusChild) {
                            this.client.application.setFocusedComponent(focusChild);
                            Core.Web.DOM.preventEventDefault(e);
                            return false;
                        }
                    }
                }
            }
            break;
        }
        return true;
    }, 
    
    /** Processes a mouse down event on a SplitPane separator that is about to be dragged. */
    _processSeparatorMouseDown: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
    
        Core.Web.DOM.preventEventDefault(e);
        
        Core.Web.dragInProgress = true;
    
        this._dragInitPosition = this._rendered;
        if (this._orientationVertical) {
            this._dragInitMouseOffset = e.clientY;
        } else {
            this._dragInitMouseOffset = e.clientX;
        }
        
        Core.Web.Event.add(document.body, "mousemove", this._processSeparatorMouseMoveRef, true);
        Core.Web.Event.add(document.body, "mouseup", this._processSeparatorMouseUpRef, true);
        this._overlayAdd();
    },
    
    /** Processes a mouse move event on a SplitPane separator that is being dragged. */
    _processSeparatorMouseMove: function(e) {
        var mousePosition = this._orientationVertical ? e.clientY : e.clientX;
        this._rendered = this._getBoundedSeparatorPosition(this._orientationTopLeft ?
                this._dragInitPosition + mousePosition - this._dragInitMouseOffset :
                this._dragInitPosition - mousePosition + this._dragInitMouseOffset);
        this._redraw(this._rendered);
    },
    
    /** Processes a mouse up event on a SplitPane separator that was being dragged. */
    _processSeparatorMouseUp: function(e) {
        Core.Web.DOM.preventEventDefault(e);
        
        this._overlayRemove();
        Core.Web.dragInProgress = false;
    
        this._removeSeparatorListeners();
        this.component.set("separatorPosition", this._rendered);
        
        // Inform renderer that separator position is currently drawn as this._rendered.
        this._requested = this._rendered;
    
        if (this._paneDivs[0]) {
            Core.Web.VirtualPosition.redraw(this._paneDivs[0]);
        }
        if (this._paneDivs[1]) {
            Core.Web.VirtualPosition.redraw(this._paneDivs[1]);
        }
    
        Echo.Render.notifyResize(this.component);
    },
    
    /** Processes a mouse rollover enter event on the SplitPane separator. */
    _processSeparatorRolloverEnter: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
        
        if (this._separatorRolloverImage) {
            Echo.Sync.FillImage.render(this._separatorRolloverImage, this._separatorDiv, 0);
        } else {
            Echo.Sync.Color.render(this._separatorRolloverColor, this._separatorDiv, "backgroundColor");
        }
    },
    
    /** Processes a mouse rollover exit event on the SplitPane separator. */
    _processSeparatorRolloverExit: function(e) {
        if (this._separatorRolloverImage) {
            Echo.Sync.FillImage.renderClear(this._separatorImage, this._separatorDiv, 0);
        } else {
            Echo.Sync.Color.render(this._separatorColor, this._separatorDiv, "backgroundColor");
        }
    },
    
    /**
     * Updates the variable CSS attributes of the SplitPane.
     * 
     * @param {Number} position the pixel position of the separator
     */
    _redraw: function(position) {
        var insetsAdjustment = 0;
        if (this.component.getComponentCount() > 0) {
            var layoutData = this.component.getComponent(0).render("layoutData");
            insetsAdjustment = this._getInsetsSizeAdjustment(position, layoutData);
        }

        var sizeAttr = this._orientationVertical ? "height" : "width";
        var positionAttr = this._orientationVertical ?
                (this._orientationTopLeft ? "top" : "bottom") :
                (this._orientationTopLeft ? "left" : "right");
        if (this._paneDivs[0]) {
            this._paneDivs[0].style[sizeAttr] = (position - insetsAdjustment) + "px";
        }
        if (this._paneDivs[1]) {
            this._paneDivs[1].style[positionAttr] =  (position + this._separatorSize) + "px";
        }
        if (this._separatorDiv) {