sync.windowpane.js

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

/**
 * Component rendering peer: WindowPane
 */
Echo.Sync.WindowPane = Core.extend(Echo.Render.ComponentSync, {

    $static: {
    
        /** 
         * Array mapping CSS cursor types to indices of the _borderDivs property.
         * @type Array 
         */
        CURSORS: ["nw-resize", "n-resize", "ne-resize", "w-resize", "e-resize", "sw-resize", "s-resize", "se-resize"],
        
        /** 
         * Array mapping fill image border properties to indices of the _borderDivs property.
         * @type Array 
         */
        FIB_POSITIONS: ["topLeft", "top", "topRight", "left", "right", "bottomLeft", "bottom", "bottomRight"],
        
        /** Map containing properties whose update can be rendered without replacing component. */
        PARTIAL_PROPERTIES: {background: true, backgroundImage: true, border: true, closable: true, closeIcon: true, 
                closeIconInsets: true, controlsInsets: true, font: true, foreground: true, height: true, icon: true, 
                iconInsets: true, insets: true, maximizeEnabled: true, maximizeIcon: true, maximumHeight: true, 
                maximumWidth: true, minimizeEnabled: true, minimizeIcon: true, minimumHeight: true, 
                minimumWidth: true, movable: true, positionX: true, positionY: true, resizable: true, title: true, 
                titleBackground: true, titleBackgroundImage: true, titleFont: true, 
                titleForeground: true, titleHeight: true, titleInsets: true, width: true },
                
        /** Map containing properties whose update should not result in any rendering. */
        NON_RENDERED_PROPERTIES: { zIndex: true },
                
        /** 
         * Map containing position/size-related properties whose update can be rendered by moving/resizing the window.
         */
        PARTIAL_PROPERTIES_POSITION_SIZE: { positionX: true, positionY: true, width: true, height: true }
    },
    
    $load: function() {
        Echo.Render.registerPeer("WindowPane", this);
    },

    /**
     * The user-requested bounds of the window.  Contains properties x, y, width, and height.  
     * Property values are extents.  Percentage values are valid.
     */
    _requested: null,
    
    /**
     * Rendered bounds of the window.  Contains properties x, y, width, and height.
     * Property values are integers.  Will differ from user-requested bounds in scenarios where space is not available
     * or user-requested values are otherwise out of range.
     */
    _rendered: null,
    
    /**
     * The rendered bounds of the window immediately prior to the active drag operation.
     */
    _dragInit: null,
    
    /**
     * The X/Y coordinates of the mouse when the active drag operation originated.
     */
    _dragOrigin: null,
    
    /**
     * X/Y directions in which to increment (decrement) size of window when moving mouse.
     * Used in resize operations.
     */ 
    _resizeIncrement: null,
    
    /**
     * The size of the region containing the window.
     * @type Core.Web.Measure.Bounds
     */
    _containerSize: null,

    /**
     * Method reference to <code>_processBorderMouseMove()</code>.
     * @type Function
     */
    _processBorderMouseMoveRef: null,

    /**
     * Method reference to <code>_processBorderMouseUp()</code>.
     * @type Function
     */
    _processBorderMouseUpRef: null,

    /**
     * Method reference to <code>_processTitleBarMouseMove()</code>.
     * @type Function
     */
    _processTitleBarMouseMoveRef: null,

    /**
     * Method reference to <code>_processTitleBarMouseUp()</code>.
     * @type Function
     */
    _processTitleBarMouseUpRef: null,

    /**
     * Array of control icon DOM elements.
     * @type Array
     */
    _controlIcons: null,
    
    /**
     * Overlay DIV which covers other elements (such as IFRAMEs) when dragging which may otherwise suppress events.
     * @type Element
     */
    _overlay: null,

    /**
     * Creates a <code>Echo.Sync.WindowPane<code>.
     */
    $construct: function() {
        this._processBorderMouseMoveRef = Core.method(this, this._processBorderMouseMove);
        this._processBorderMouseUpRef = Core.method(this, this._processBorderMouseUp);
        this._processTitleBarMouseMoveRef = Core.method(this, this._processTitleBarMouseMove);
        this._processTitleBarMouseUpRef = Core.method(this, this._processTitleBarMouseUp);
    },

    /**
     * Converts the x/y/width/height coordinates of a window pane to pixel values.
     * The _containerSize instance property is used to calculate percent-based values.
     * Percentage values are converted based on size of container.   
     * 
     * @param bounds object containing bounds to convert, an object containing extent values in x, y, width (or contentWidth), 
     *        and height (or contentHeight) properties
     * @return a bounds object containing those bounds converted to pixels, with integer x, y, width, and height properties
     */
    _coordinatesToPixels: function(bounds) {
        var pxBounds = {};
        if (bounds.width != null) {
            // Calculate width based on outside width.
            pxBounds.width = Math.round(Echo.Sync.Extent.isPercent(bounds.width) ?
                    (parseInt(bounds.width, 10) * this._containerSize.width / 100) :
                    Echo.Sync.Extent.toPixels(bounds.width, true));
        } else if (bounds.contentWidth != null) {
            // Calculate width based on inside (content) width.
            pxBounds.contentWidth = Math.round(Echo.Sync.Extent.isPercent(bounds.contentWidth) ?
                    (parseInt(bounds.contentWidth, 10) * this._containerSize.width / 100) :
                    Echo.Sync.Extent.toPixels(bounds.contentWidth, true));
            pxBounds.width = this._contentInsets.left + this._contentInsets.right + pxBounds.contentWidth;
        }
        if (bounds.height != null) {
            // Calculate height based on outside height.
            pxBounds.height = Math.round(Echo.Sync.Extent.isPercent(bounds.height) ?
                    (parseInt(bounds.height, 10) * this._containerSize.height / 100) :
                    Echo.Sync.Extent.toPixels(bounds.height, false));
        } else if (bounds.contentHeight != null) {
            // Calculate height based on inside (content) height.
            pxBounds.contentHeight = Math.round(Echo.Sync.Extent.isPercent(bounds.contentHeight) ?
                    (parseInt(bounds.contentHeight, 10) * this._containerSize.height / 100) :
                    Echo.Sync.Extent.toPixels(bounds.contentHeight, false));
            pxBounds.height = this._contentInsets.top + this._contentInsets.bottom + this._titleBarHeight + pxBounds.contentHeight;
        }
        if (bounds.x != null) {
            pxBounds.x = Math.round(Echo.Sync.Extent.isPercent(bounds.x) ?
                    ((this._containerSize.width - pxBounds.width) * (parseInt(bounds.x, 10) / 100)) :
                    Echo.Sync.Extent.toPixels(bounds.x, true));
        }
        if (bounds.y != null) {
            pxBounds.y = Math.round(Echo.Sync.Extent.isPercent(bounds.y) ?
                    ((this._containerSize.height - pxBounds.height) * (parseInt(bounds.y, 10) / 100)) :
                    Echo.Sync.Extent.toPixels(bounds.y, false));
        }
        return pxBounds;
    },
    
    /**
     * Updates the _requested object based on values from the component object.
     */
    _loadPositionAndSize: function() {
        this._requested = {
            x: this.component.render("positionX", "50%"),
            y: this.component.render("positionY", "50%"),
            contentWidth: this.component.render("contentWidth"),
            contentHeight: this.component.render("contentHeight")
        };
        
        this._requested.width = this.component.render("width", 
                this._requested.contentWidth ? null : Echo.WindowPane.DEFAULT_WIDTH);
        this._requested.height = this.component.render("height", 
                this._requested.contentHeight ? null : Echo.WindowPane.DEFAULT_HEIGHT);
    },

    /**
     * Determines size of container and stores in this._containerSize property.
     */
    _loadContainerSize: function() {
        this._containerSize = this.component.parent.peer.getSize();
    },
    
    /**
     * Adds an overlay DIV at maximum z-index to cover any objects that will not provide mouseup feedback (e.g., IFRAMEs).
     */
    _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.
     */
    _overlayRemove: function() {
        if (!this._overlay) {
            return;
        }
        document.body.removeChild(this._overlay);
        this._overlay = null;
    },
    
    /**
     * Processes a mouse-down event on the window border (resize drag).
     */
    _processBorderMouseDown: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }

        // Prevent selections.
        Core.Web.dragInProgress = true;
        Core.Web.DOM.preventEventDefault(e);
        this._overlayAdd();
    
        this._loadContainerSize();
        this._dragInit = {
            x: this._rendered.x,
            y: this._rendered.y,
            width: this._rendered.width,
            height: this._rendered.height
        };
        
        this._dragOrigin = { x: e.clientX, y: e.clientY };
        
        switch (e.target) {
        case this._borderDivs[0]: this._resizeIncrement = { x: -1, y: -1 }; break;
        case this._borderDivs[1]: this._resizeIncrement = { x:  0, y: -1 }; break; 
        case this._borderDivs[2]: this._resizeIncrement = { x:  1, y: -1 }; break; 
        case this._borderDivs[3]: this._resizeIncrement = { x: -1, y:  0 }; break; 
        case this._borderDivs[4]: this._resizeIncrement = { x:  1, y:  0 }; break; 
        case this._borderDivs[5]: this._resizeIncrement = { x: -1, y:  1 }; break; 
        case this._borderDivs[6]: this._resizeIncrement = { x:  0, y:  1 }; break; 
        case this._borderDivs[7]: this._resizeIncrement = { x:  1, y:  1 }; break; 
        }
            
        Core.Web.Event.add(document.body, "mousemove", this._processBorderMouseMoveRef, true);
        Core.Web.Event.add(document.body, "mouseup", this._processBorderMouseUpRef, true);
    },
    
    /**
     * Processes a mouse-move event on the window border (resize drag).
     */
    _processBorderMouseMove: function(e) {
        this._setBounds({
            x: this._resizeIncrement.x == -1 ? this._dragInit.x + e.clientX - this._dragOrigin.x : null,
            y: this._resizeIncrement.y == -1 ? this._dragInit.y + e.clientY - this._dragOrigin.y : null,
            width: this._dragInit.width + (this._resizeIncrement.x * (e.clientX - this._dragOrigin.x)),
            height: this._dragInit.height + (this._resizeIncrement.y * (e.clientY - this._dragOrigin.y))
        }, true);
    },

    /**
     * Processes a mouse-up event on the window border (resize drag).
     */
    _processBorderMouseUp: function(e) {
        Core.Web.DOM.preventEventDefault(e);
        
        Core.Web.dragInProgress = false;
        this._overlayRemove();
    
        this._removeBorderListeners();
        
        this.component.set("positionX", this._rendered.x);
        this.component.set("positionY", this._rendered.y);
        this.component.set("width", this._rendered.width);
        this.component.set("height", this._rendered.height);
        
        this._requested = {
            x: this._rendered.x,
            y: this._rendered.y,
            width: this._rendered.width,
            height: this._rendered.height
        };
        
        Core.Web.VirtualPosition.redraw(this._contentDiv);
        Core.Web.VirtualPosition.redraw(this._maskDiv);
        Echo.Render.notifyResize(this.component);
    },
    
    /**
     * Processes a click event on the window controls (i.e. close/maximize/minimize). 
     */
    _processControlClick: function(e) {
        if (!this.client || !this.client.verifyInput(this.component)) {
            return true;
        }
        switch (e.registeredTarget._controlData.name) {
        case "close":
            this.component.userClose();
            break;
        case "maximize":
            this.component.userMaximize();
            Echo.Render.processUpdates(this.client);
            break;
        case "minimize":
            this.component.userMinimize();
            break;
        }
    },
    
    /**
     * Processes a mouse rollover enter event on a specific window control button.