# SplitBar.js

    /*
     * splitbar.js, version .7
     * Copyright(c) 2006, Jack Slocum.
     * Code licensed under the BSD License
     */
    if(YAHOO.util.DragDropMgr){
      YAHOO.util.DragDropMgr.clickTimeThresh = 350;
    }
    /**
     * @class YAHOO.ext.SplitBar
     * @extends YAHOO.ext.util.Observable
     * Creates draggable splitter bar functionality from two elements.
     * <br><br>
     * Usage:
     * <pre><code>
    var split = new YAHOO.ext.SplitBar('elementToDrag', 'elementToSize',
                       YAHOO.ext.SplitBar.HORIZONTAL, YAHOO.ext.SplitBar.LEFT);
    split.setAdapter(new YAHOO.ext.SplitBar.AbsoluteLayoutAdapter("container"));
    split.minSize = 100;
    split.maxSize = 600;
    split.animate = true;
    split.onMoved.subscribe(splitterMoved);
    </code></pre>
     * @requires YAHOO.ext.Element
     * @requires YAHOO.util.Dom
     * @requires YAHOO.util.Event
     * @requires YAHOO.util.CustomEvent
     * @requires YAHOO.util.DDProxy
     * @requires YAHOO.util.Anim (optional) to support animation
     * @requires YAHOO.util.Easing (optional) to support animation
     * @constructor
     * Create a new SplitBar
     * @param {String/HTMLElement/Element} dragElement The element to be dragged and act as the SplitBar.
     * @param {String/HTMLElement/Element} resizingElement The element to be resized based on where the SplitBar element is dragged
     * @param {Number} orientation (optional) Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
     * @param {Number} placement (optional) Either YAHOO.ext.SplitBar.LEFT or YAHOO.ext.SplitBar.RIGHT for horizontal or
                            YAHOO.ext.SplitBar.TOP or YAHOO.ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the intial position
                            position of the SplitBar).
     */
    YAHOO.ext.SplitBar = function(dragElement, resizingElement, orientation, placement){

        /** @private */
        this.el = YAHOO.ext.Element.get(dragElement, true);
        this.el.dom.unselectable = 'on';
        /** @private */
        this.resizingEl = YAHOO.ext.Element.get(resizingElement, true);

        /**
         * @private
         * The orientation of the split. Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
         * Note: If this is changed after creating the SplitBar, the placement property must be manually updated
         * @type Number
         */
        this.orientation = orientation || YAHOO.ext.SplitBar.HORIZONTAL;

        /**
         * The minimum size of the resizing element. (Defaults to 0)
         * @type Number
         */
        this.minSize = 0;

        /**
         * The maximum size of the resizing element. (Defaults to 2000)
         * @type Number
         */
        this.maxSize = 2000;

        this.onMoved = new YAHOO.util.CustomEvent("SplitBarMoved", this);

        /**
         * Whether to animate the transition to the new size
         * @type Boolean
         */
        this.animate = false;

        /**
         * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
         * @type Boolean
         */
        this.useShim = false;

        /** @private */
        this.shim = null;

        /** @private */
        this.proxy = YAHOO.ext.SplitBar.createProxy(this.orientation);

        /** @private */
        this.dd = new YAHOO.util.DDProxy(this.el.dom.id, "SplitBars", {dragElId : this.proxy.id});

        /** @private */
        this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);

        /** @private */
        this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);

        /** @private */
        this.dragSpecs = {};

        /**
         * @private The adapter to use to positon and resize elements
         */
        this.adapter = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
        this.adapter.init(this);

        if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
            /** @private */
            this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? YAHOO.ext.SplitBar.LEFT : YAHOO.ext.SplitBar.RIGHT);
            this.el.setStyle('cursor', 'e-resize');
        }else{
            /** @private */
            this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? YAHOO.ext.SplitBar.TOP : YAHOO.ext.SplitBar.BOTTOM);
            this.el.setStyle('cursor', 'n-resize');
        }

        this.events = {
            /**
             * @event resize
             * Fires when the splitter is moved (alias for moved)
             * @param {YAHOO.ext.SplitBar} this
             * @param {Number} newSize the new width or height
             */
            'resize' : this.onMoved,
            /**
             * @event moved
             * Fires when the splitter is moved
             * @param {YAHOO.ext.SplitBar} this
             * @param {Number} newSize the new width or height
             */
            'moved' : this.onMoved,
            /**
             * @event beforeresize
             * Fires before the splitter is dragged
             * @param {YAHOO.ext.SplitBar} this
             */
            'beforeresize' : new YAHOO.util.CustomEvent('beforeresize')
        }
    }

    YAHOO.extendX(YAHOO.ext.SplitBar, YAHOO.ext.util.Observable, {
        onStartProxyDrag : function(x, y){
            this.fireEvent('beforeresize', this);
            if(this.useShim){
                if(!this.shim){
                    this.shim = YAHOO.ext.SplitBar.createShim();
                }
                this.shim.setVisible(true);
            }
            YAHOO.util.Dom.setStyle(this.proxy, 'display', 'block');
            var size = this.adapter.getElementSize(this);
            this.activeMinSize = this.getMinimumSize();;
            this.activeMaxSize = this.getMaximumSize();;
            var c1 = size - this.activeMinSize;
            var c2 = Math.max(this.activeMaxSize - size, 0);
            if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
                this.dd.resetConstraints();
                this.dd.setXConstraint(
                    this.placement == YAHOO.ext.SplitBar.LEFT ? c1 : c2,
                    this.placement == YAHOO.ext.SplitBar.LEFT ? c2 : c1
                );
                this.dd.setYConstraint(0, 0);
            }else{
                this.dd.resetConstraints();
                this.dd.setXConstraint(0, 0);
                this.dd.setYConstraint(
                    this.placement == YAHOO.ext.SplitBar.TOP ? c1 : c2,
                    this.placement == YAHOO.ext.SplitBar.TOP ? c2 : c1
                );
             }
            this.dragSpecs.startSize = size;
            this.dragSpecs.startPoint = [x, y];

            YAHOO.util.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
        },

        /**
         * @private Called after the drag operation by the DDProxy
         */
        onEndProxyDrag : function(e){
            YAHOO.util.Dom.setStyle(this.proxy, 'display', 'none');
            var endPoint = YAHOO.util.Event.getXY(e);
            if(this.useShim){
                this.shim.setVisible(false);
            }
            var newSize;
            if(this.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
                newSize = this.dragSpecs.startSize +
                    (this.placement == YAHOO.ext.SplitBar.LEFT ?
                        endPoint[0] - this.dragSpecs.startPoint[0] :
                        this.dragSpecs.startPoint[0] - endPoint[0]
                    );
            }else{
                newSize = this.dragSpecs.startSize +
                    (this.placement == YAHOO.ext.SplitBar.TOP ?
                        endPoint[1] - this.dragSpecs.startPoint[1] :
                        this.dragSpecs.startPoint[1] - endPoint[1]
                    );
            }
            newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
            if(newSize != this.dragSpecs.startSize){
                this.adapter.setElementSize(this, newSize);
                this.onMoved.fireDirect(this, newSize);
            }
        },

        /**
         * Get the adapter this SplitBar uses
         * @return The adapter object
         */
        getAdapter : function(){
            return this.adapter;
        },

        /**
         * Set the adapter this SplitBar uses
         * @param {Object} adapter A SplitBar adapter object
         */
        setAdapter : function(adapter){
            this.adapter = adapter;
            this.adapter.init(this);
        },

        /**
         * Gets the minimum size for the resizing element
         * @return {Number} The minimum size
         */
        getMinimumSize : function(){
            return this.minSize;
        },

        /**
         * Sets the minimum size for the resizing element
         * @param {Number} minSize The minimum size
         */
        setMinimumSize : function(minSize){
            this.minSize = minSize;
        },

        /**
         * Gets the maximum size for the resizing element
         * @return {Number} The maximum size
         */
        getMaximumSize : function(){
            return this.maxSize;
        },

        /**
         * Sets the maximum size for the resizing element
         * @param {Number} maxSize The maximum size
         */
        setMaximumSize : function(maxSize){
            this.maxSize = maxSize;
        },

        /**
         * Sets the initialize size for the resizing element
         * @param {Number} size The initial size
         */
        setCurrentSize : function(size){
            var oldAnimate = this.animate;
            this.animate = false;
            this.adapter.setElementSize(this, size);
            this.animate = oldAnimate;
        },

        /**
         * Destroy this splitbar.
         * @param {Boolean} removeEl True to remove the element
         */
        destroy : function(removeEl){
            if(this.shim){
                this.shim.remove();
            }
            this.dd.unreg();
            this.proxy.parentNode.removeChild(this.proxy);
            if(removeEl){
                this.el.remove();
            }
        }
    });

    /**
     * @private static Create the shim to drag over iframes
     */
    YAHOO.ext.SplitBar.createShim = function(){
        var shim = document.createElement('div');
        shim.unselectable = 'on';
        YAHOO.util.Dom.generateId(shim, 'split-shim');
        YAHOO.util.Dom.setStyle(shim, 'width', '100%');
        YAHOO.util.Dom.setStyle(shim, 'height', '100%');
        YAHOO.util.Dom.setStyle(shim, 'position', 'absolute');
        YAHOO.util.Dom.setStyle(shim, 'background', 'white');
        YAHOO.util.Dom.setStyle(shim, 'z-index', 11000);
        window.document.body.appendChild(shim);
        var shimEl = YAHOO.ext.Element.get(shim);
        shimEl.setOpacity(.01);
        shimEl.setXY([0, 0]);
        return shimEl;
    };

    /**
     * @private static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
     */
    YAHOO.ext.SplitBar.createProxy = function(orientation){
        var proxy = document.createElement('div');
        proxy.unselectable = 'on';
        YAHOO.util.Dom.generateId(proxy, 'split-proxy');
        YAHOO.util.Dom.setStyle(proxy, 'position', 'absolute');
        YAHOO.util.Dom.setStyle(proxy, 'visibility', 'hidden');
        YAHOO.util.Dom.setStyle(proxy, 'z-index', 11001);
        YAHOO.util.Dom.setStyle(proxy, 'background-color', "#aaa");
        if(orientation == YAHOO.ext.SplitBar.HORIZONTAL){
            YAHOO.util.Dom.setStyle(proxy, 'cursor', 'e-resize');
        }else{
            YAHOO.util.Dom.setStyle(proxy, 'cursor', 'n-resize');
        }
        // the next 2 fix IE abs position div height problem
        YAHOO.util.Dom.setStyle(proxy, 'line-height', '0px');
        YAHOO.util.Dom.setStyle(proxy, 'font-size', '0px');
        window.document.body.appendChild(proxy);
        return proxy;
    };

    /**
     * @class YAHOO.ext.SplitBar.BasicLayoutAdapter
     * Default Adapter. It assumes the splitter and resizing element are not positioned
     * elements and only gets/sets the width of the element. Generally used for table based layouts.
     */
    YAHOO.ext.SplitBar.BasicLayoutAdapter = function(){
    };

    YAHOO.ext.SplitBar.BasicLayoutAdapter.prototype = {
        // do nothing for now
        init : function(s){

        },
        /**
         * Called before drag operations to get the current size of the resizing element.
         * @param {YAHOO.ext.SplitBar} s The SplitBar using this adapter
         */
         getElementSize : function(s){
            if(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
                return s.resizingEl.getWidth();
            }else{
                return s.resizingEl.getHeight();
            }
        },

        /**
         * Called after drag operations to set the size of the resizing element.
         * @param {YAHOO.ext.SplitBar} s The SplitBar using this adapter
         * @param {Number} newSize The new size to set
         * @param {Function} onComplete A function to be invoke when resizing is complete
         */
        setElementSize : function(s, newSize, onComplete){
            if(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
                if(!YAHOO.util.Anim || !s.animate){
                    s.resizingEl.setWidth(newSize);
                    if(onComplete){
                        onComplete(s, newSize);
                    }
                }else{
                    s.resizingEl.setWidth(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
                }
            }else{

                if(!YAHOO.util.Anim || !s.animate){
                    s.resizingEl.setHeight(newSize);
                    if(onComplete){
                        onComplete(s, newSize);
                    }
                }else{
                    s.resizingEl.setHeight(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
                }
            }
        }
    };

    /**
     *@class YAHOO.ext.SplitBar.AbsoluteLayoutAdapter
     * @extends YAHOO.ext.SplitBar.BasicLayoutAdapter
     * Adapter that  moves the splitter element to align with the resized sizing element.
     * Used with an absolute positioned SplitBar.
     * @param {String/HTMLElement/Element} container The container that wraps around the absolute positioned content. If it's
     * document.body, make sure you assign an id to the body element.
     */
    YAHOO.ext.SplitBar.AbsoluteLayoutAdapter = function(container){
        this.basic = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
        this.container = getEl(container);
    }

    YAHOO.ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
        init : function(s){
            this.basic.init(s);
            //YAHOO.util.Event.on(window, 'resize', this.moveSplitter.createDelegate(this, [s]));
        },

        getElementSize : function(s){
            return this.basic.getElementSize(s);
        },

        setElementSize : function(s, newSize, onComplete){
            this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
        },

        moveSplitter : function(s){
            var yes = YAHOO.ext.SplitBar;
            switch(s.placement){
                case yes.LEFT:
                    s.el.setX(s.resizingEl.getRight());
                    break;
                case yes.RIGHT:
                    s.el.setStyle('right', (this.container.getWidth() - s.resizingEl.getLeft()) + 'px');
                    break;
                case yes.TOP:
                    s.el.setY(s.resizingEl.getBottom());
                    break;
                case yes.BOTTOM:
                    s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
                    break;
            }
        }
    };

    /**
     * Orientation constant - Create a vertical SplitBar
     * @static
     * @type Number
     */
    YAHOO.ext.SplitBar.VERTICAL = 1;

    /**
     * Orientation constant - Create a horizontal SplitBar
     * @static
     * @type Number
     */
    YAHOO.ext.SplitBar.HORIZONTAL = 2;

    /**
     * Placement constant - The resizing element is to the left of the splitter element
     * @static
     * @type Number
     */
    YAHOO.ext.SplitBar.LEFT = 1;

    /**
     * Placement constant - The resizing element is to the right of the splitter element
     * @static
     * @type Number
     */
    YAHOO.ext.SplitBar.RIGHT = 2;

    /**
     * Placement constant - The resizing element is positioned above the splitter element
     * @static
     * @type Number
     */
    YAHOO.ext.SplitBar.TOP = 3;

    /**
     * Placement constant - The resizing element is positioned under splitter element
     * @static
     * @type Number
     */
    YAHOO.ext.SplitBar.BOTTOM = 4;

yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.