render.splitpane.js

一个ajax富客户端的ajax类库

/**
 * Component rendering peer: SplitPane
 * 
 * @class
 * @base EchoRender.ComponentSync
 */
EchoAppRender.SplitPaneSync = Core.extend(EchoRender.ComponentSync, {

    $static: {
    
        /**    
         * @class Describes the configuration of a child pane of the SplitPane,
         *        including the child component and scroll bar positions.
         */
        ChildPane: Core.extend({
        
            minimumSize: 100,
            maximumSize: null,
            component: null,
            layoutData: null,
            scrollLeft: 0,
            scrolltop: 0,
        
            /**
             * Creates a new PaneConfiguration instance
             * 
             * @param {EchoAppRender.SplitPaneSync} splitPanePeer the relevant componentPeer
             * @param {EchoApp.Component} component the child component
             * @constructor
             */
            $construct: function(splitPanePeer, component) {
                this.component = component;
                this.layoutData = component.render("layoutData");
                if (this.layoutData) {
                    if (this.layoutData.minimumSize) {
                        this.minimumSize = EchoAppRender.Extent.toPixels(this.layoutData.minimumSize, 
                                !splitPanePeer._orientationVertical);
                    }
                    if (this.layoutData.maximumSize) {
                        this.maximumSize = EchoAppRender.Extent.toPixels(this.layoutData.maximumSize, 
                                !splitPanePeer._orientationVertical);
                    }
                }
            },
            
            loadScrollPositions: function(paneDivElement) {
                paneDivElement.scrollLeft = this.scrollLeft;
                paneDivElement.scrollTop = this.scrollTop;
            },
            
            storeScrollPositions: function(paneDivElement) {
                this.scrollLeft = paneDivElement.scrollLeft;
                this.scrollTop = paneDivElement.scrollTop;
            }
        })
    },

    $load: function() {
        EchoRender.registerPeer("SplitPane", this);
    },

    /**
     * Array containing two PaneConfiguration instances, representing the state of each child pane.
     * @type Array
     */
    _childPanes: null,

    _processSeparatorMouseMoveRef: null,
    
    _processSeparatorMouseUpRef: null,

    $construct: function() {
        this._childPanes = new Array(2);
        
        this._processSeparatorMouseMoveRef = Core.method(this, this._processSeparatorMouseMove);
        this._processSeparatorMouseUpRef = Core.method(this, this._processSeparatorMouseUp);
    },

    renderDispose: function(update) {
        if (this._firstPaneDivElement) {
            if (this._childPanes[0]) {
                this._childPanes[0].storeScrollPositions(this._firstPaneDivElement);
            }
            this._firstPaneDivElement = null;
        }
        if (this._secondPaneDivElement) {
            if (this._childPanes[1]) {
                this._childPanes[1].storeScrollPositions(this._secondPaneDivElement);
            }
            this._secondPaneDivElement = null;
        }
        
        if (this._separatorDivElement) {
            WebCore.EventProcessor.removeAll(this._separatorDivElement);
            this._separatorDivElement = null;
        }

        WebCore.EventProcessor.removeAll(this._splitPaneDivElement);
    
        this._splitPaneDivElement = null;
    },
    
    loadRenderData: function() {
        var orientation = this.component.render("orientation", 
                EchoApp.SplitPane.ORIENTATION_HORIZONTAL_LEADING_TRAILING);
        // FIXME: RTL is hardcoded to false.
        var rtl = false;
     
        switch (orientation) {
        case EchoApp.SplitPane.ORIENTATION_HORIZONTAL_LEADING_TRAILING:
            this._orientationTopLeft = !rtl;
            this._orientationVertical = false;
            break;
        case EchoApp.SplitPane.ORIENTATION_HORIZONTAL_TRAILING_LEADING:
            this._orientationTopLeft = rtl;
            this._orientationVertical = false;
            break;
        case EchoApp.SplitPane.ORIENTATION_HORIZONTAL_LEFT_RIGHT:
            this._orientationTopLeft = true;
            this._orientationVertical = false;
            break;
        case EchoApp.SplitPane.ORIENTATION_HORIZONTAL_RIGHT_LEFT:
            this._orientationTopLeft = false;
            this._orientationVertical = false;
            break;
        case EchoApp.SplitPane.ORIENTATION_VERTICAL_TOP_BOTTOM:
            this._orientationTopLeft = true;
            this._orientationVertical = true;
            break;
        case EchoApp.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");
        
        /**
         * The user's desired position of the separator.  This is the last
         * position to which the user dragged the separator or the last position
         * that the separator was explicitly set to.  This value may not be the
         * actual separator position, in cases where other constraints have
         * temporarily adjusted it.
         * @type Integer
         */
        this._userSeparatorPosition = this._separatorPosition = EchoAppRender.Extent.toPixels(
                this.component.render("separatorPosition",
                EchoApp.SplitPane.DEFAULT_SEPARATOR_POSITION), this._orientationVertical);
        
        this._separatorSize = EchoAppRender.Extent.toPixels(this.component.render(
                this._orientationVertical ? "separatorHeight" : "separatorWidth",
                this._resizable ? EchoApp.SplitPane.DEFAULT_SEPARATOR_SIZE_RESIZABLE 
                : EchoApp.SplitPane.DEFAULT_SEPARATOR_SIZE_FIXED), this._orientationVertical);
    },
    
    _processKeyPress: function(e) {
        switch (e.keyCode) {
        case 37:
        case 39:
            if (!this._orientationVertical) {
                var focusPrevious = (e.keyCode == 37) ^ (!this._orientationTopLeft);
                var focusedComponent = this.component.application.getFocusedComponent();
                if (focusedComponent && focusedComponent.peer && focusedComponent.peer.getFocusFlags) {
                    var focusFlags = focusedComponent.peer.getFocusFlags();
                    if ((focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_LEFT)
                            || (!focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_RIGHT)) {
                        var focusChild = this.component.application.focusManager.findInParent(this.component, focusPrevious);
                        if (focusChild) {
                            this.component.application.setFocusedComponent(focusChild);
                            WebCore.DOM.preventEventDefault(e);
                            return false;
                        }
                    }
                }
            }
            break;
        case 38:
        case 40:
            if (this._orientationVertical) {
                var focusPrevious = (e.keyCode == 38) ^ (!this._orientationTopLeft);
                var focusedComponent = this.component.application.getFocusedComponent();
                if (focusedComponent && focusedComponent.peer && focusedComponent.peer.getFocusFlags) {
                    var focusFlags = focusedComponent.peer.getFocusFlags();
                    if ((focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_UP)
                            || (!focusPrevious && focusFlags & EchoRender.ComponentSync.FOCUS_PERMIT_ARROW_DOWN)) {
                        var focusChild = this.component.application.focusManager.findInParent(this.component, focusPrevious);
                        if (focusChild) {
                            this.component.application.setFocusedComponent(focusChild);
                            WebCore.DOM.preventEventDefault(e);
                            return false;
                        }
                    }
                }
            }
            break;
        }
        return true;
    }, 
    
    _processSeparatorMouseDown: function(e) {
        if (!this.client.verifyInput(this.component)) {
            return;
        }
    
        WebCore.DOM.preventEventDefault(e);
        
        WebCore.dragInProgress = true;
    
        this._dragInitPosition = this._separatorPosition;
        if (this._orientationVertical) {
            this._dragInitMouseOffset = e.clientY;
        } else {
            this._dragInitMouseOffset = e.clientX;
        }
        
        var bodyElement = document.getElementsByTagName("body")[0];
        WebCore.EventProcessor.add(bodyElement, "mousemove", this._processSeparatorMouseMoveRef, true);
        WebCore.EventProcessor.add(bodyElement, "mouseup", this._processSeparatorMouseUpRef, true);
    },
    
    _processSeparatorMouseMove: function(e) {
    //FIXME. Refactor for size.
        var position;
        if (this._orientationVertical) {
            if (this._orientationTopLeft) {
                position = this._dragInitPosition + e.clientY - this._dragInitMouseOffset;
            } else {
                position = this._dragInitPosition - e.clientY + this._dragInitMouseOffset;
            }
        } else {
            if (this._orientationTopLeft) {
                position = this._dragInitPosition + e.clientX - this._dragInitMouseOffset;
            } else {
                position = this._dragInitPosition - e.clientX + this._dragInitMouseOffset;
            }
        }
        this._setSeparatorPosition(position);
    },
    
    _processSeparatorMouseUp: function(e) {
        WebCore.DOM.preventEventDefault(e);
        
        WebCore.dragInProgress = false;
    
        this._removeSeparatorListeners();
        this.component.set("separatorPosition", this._separatorPosition);
        
        // inform renderer that separatorposition is currently drawn as this._separatorPosition
        
        this._userSeparatorPosition = this._separatorPosition;
    
        if (this._firstPaneDivElement) {
            WebCore.VirtualPosition.redraw(this._firstPaneDivElement);
        }
        if (this._secondPaneDivElement) {
            WebCore.VirtualPosition.redraw(this._secondPaneDivElement);
        }
    
        EchoRender.notifyResize(this.component);
    },
    
    _getInsetsSizeAdjustment: function(layoutData) {
        if (!layoutData || layoutData.insets == null || layoutDataInsets == 0) {
            return 0;
        }
        var layoutDataInsets = EchoAppRender.Insets.toPixels(layoutData.insets);
        var adjustment;
        if (this._orientationVertical) {
            adjustment = layoutDataInsets.top + layoutDataInsets.bottom;
        } else {
            adjustment = layoutDataInsets.left + layoutDataInsets.right;
        }
        if (adjustment > this._separatorPosition) {
            adjustment = this._separatorPosition;
        }
        return adjustment;
    },
    
    _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);
    },
    
    _redraw: function() {
        var insetsAdjustment = 0;
        if (this.component.getComponentCount() > 0) {
            var layoutData = this.component.getComponent(0).render("layoutData");
            insetsAdjustment = this._getInsetsSizeAdjustment(layoutData);
        }
    
        if (this._orientationVertical) {
            if (this._orientationTopLeft) {