Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dijit.layout.SplitContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.layout.SplitContainer"] = true;
dojo.provide("dijit.layout.SplitContainer");

//
// FIXME: make it prettier
// FIXME: active dragging upwards doesn't always shift other bars (direction calculation is wrong in this case)
//

dojo.require("dojo.cookie");
dojo.require("dijit.layout._LayoutWidget");

dojo.declare("dijit.layout.SplitContainer",
        dijit.layout._LayoutWidget,
        {
        // summary: 
        //      A Container widget with sizing handles in-between each child
        // description:
        //              Contains multiple children widgets, all of which are displayed side by side
        //              (either horizontally or vertically); there's a bar between each of the children,
        //              and you can adjust the relative size of each child by dragging the bars.
        //
        //              You must specify a size (width and height) for the SplitContainer.
        //
        // activeSizing: Boolean
        //              If true, the children's size changes as you drag the bar;
        //              otherwise, the sizes don't change until you drop the bar (by mouse-up)
        activeSizing: false,

        // sizerWidth: Integer
        //              Size in pixels of the bar between each child
        sizerWidth: 7, // FIXME: this should be a CSS attribute (at 7 because css wants it to be 7 until we fix to css)

        // orientation: String
        //              either 'horizontal' or vertical; indicates whether the children are
        //              arranged side-by-side or up/down.
        orientation: 'horizontal',

        // persist: Boolean
        //              Save splitter positions in a cookie
        persist: true,

        postMixInProperties: function(){
                this.inherited("postMixInProperties",arguments);
                this.isHorizontal = (this.orientation == 'horizontal');
        },

        postCreate: function(){
                this.inherited("postCreate",arguments);
                this.sizers = [];
                dojo.addClass(this.domNode, "dijitSplitContainer");
                // overflow has to be explicitly hidden for splitContainers using gekko (trac #1435)
                // to keep other combined css classes from inadvertantly making the overflow visible
                if(dojo.isMozilla){
                        this.domNode.style.overflow = '-moz-scrollbars-none'; // hidden doesn't work
                }

                // create the fake dragger
                if(typeof this.sizerWidth == "object"){
                        try{ //FIXME: do this without a try/catch
                                this.sizerWidth = parseInt(this.sizerWidth.toString());
                        }catch(e){ this.sizerWidth = 7; }
                }
                var sizer = this.virtualSizer = document.createElement('div');
                sizer.style.position = 'relative';

                // #1681: work around the dreaded 'quirky percentages in IE' layout bug
                // If the splitcontainer's dimensions are specified in percentages, it
                // will be resized when the virtualsizer is displayed in _showSizingLine
                // (typically expanding its bounds unnecessarily). This happens because
                // we use position: relative for .dijitSplitContainer.
                // The workaround: instead of changing the display style attribute,
                // switch to changing the zIndex (bring to front/move to back)

                sizer.style.zIndex = 10;
                sizer.className = this.isHorizontal ? 'dijitSplitContainerVirtualSizerH' : 'dijitSplitContainerVirtualSizerV';
                this.domNode.appendChild(sizer);
                dojo.setSelectable(sizer, false);
        },

        startup: function(){
                if(this._started){ return; }
                dojo.forEach(this.getChildren(), function(child, i, children){
                        // attach the children and create the draggers
                        this._injectChild(child);

                        if(i < children.length-1){
                                this._addSizer();
                        }
                }, this);

                if(this.persist){
                        this._restoreState();
                }
                this.inherited("startup",arguments); 
                this._started = true;
        },

        _injectChild: function(child){
                child.domNode.style.position = "absolute";
                dojo.addClass(child.domNode, "dijitSplitPane");
        },

        _addSizer: function(){
                var i = this.sizers.length;

                // TODO: use a template for this!!!
                var sizer = this.sizers[i] = document.createElement('div');
                sizer.className = this.isHorizontal ? 'dijitSplitContainerSizerH' : 'dijitSplitContainerSizerV';

                // add the thumb div
                var thumb = document.createElement('div');
                thumb.className = 'thumb';
                sizer.appendChild(thumb);

                // FIXME: are you serious? why aren't we using mover start/stop combo?
                var self = this;
                var handler = (function(){ var sizer_i = i; return function(e){ self.beginSizing(e, sizer_i); } })();
                dojo.connect(sizer, "onmousedown", handler);

                this.domNode.appendChild(sizer);
                dojo.setSelectable(sizer, false);
        },

        removeChild: function(widget){
                // summary: Remove sizer, but only if widget is really our child and
                // we have at least one sizer to throw away
                if(this.sizers.length && dojo.indexOf(this.getChildren(), widget) != -1){
                        var i = this.sizers.length - 1;
                        dojo._destroyElement(this.sizers[i]);
                        this.sizers.length--;
                }

                // Remove widget and repaint
                this.inherited("removeChild",arguments); 
                if(this._started){
                        this.layout();
                }
        },

        addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){
                // summary: Add a child widget to the container
                // child: a widget to add
                // insertIndex: postion in the "stack" to add the child widget
                
                this.inherited("addChild",arguments); 

                if(this._started){
                        // Do the stuff that startup() does for each widget
                        this._injectChild(child);
                        var children = this.getChildren();
                        if(children.length > 1){
                                this._addSizer();
                        }

                        // and then reposition (ie, shrink) every pane to make room for the new guy
                        this.layout();
                }
        },

        layout: function(){
                // summary:
                //              Do layout of panels

                // base class defines this._contentBox on initial creation and also
                // on resize
                this.paneWidth = this._contentBox.w;
                this.paneHeight = this._contentBox.h;

                var children = this.getChildren();
                if(!children.length){ return; }

                //
                // calculate space
                //

                var space = this.isHorizontal ? this.paneWidth : this.paneHeight;
                if(children.length > 1){
                        space -= this.sizerWidth * (children.length - 1);
                }

                //
                // calculate total of SizeShare values
                //
                var outOf = 0;
                dojo.forEach(children, function(child){
                        outOf += child.sizeShare;
                });

                //
                // work out actual pixels per sizeshare unit
                //
                var pixPerUnit = space / outOf;

                //
                // set the SizeActual member of each pane
                //
                var totalSize = 0;
                dojo.forEach(children.slice(0, children.length - 1), function(child){
                        var size = Math.round(pixPerUnit * child.sizeShare);
                        child.sizeActual = size;
                        totalSize += size;
                });

                children[children.length-1].sizeActual = space - totalSize;

                //
                // make sure the sizes are ok
                //
                this._checkSizes();

                //
                // now loop, positioning each pane and letting children resize themselves
                //

                var pos = 0;
                var size = children[0].sizeActual;
                this._movePanel(children[0], pos, size);
                children[0].position = pos;
                pos += size;

                // if we don't have any sizers, our layout method hasn't been called yet
                // so bail until we are called..TODO: REVISIT: need to change the startup
                // algorithm to guaranteed the ordering of calls to layout method
                if(!this.sizers){
                        return;
                }

                dojo.some(children.slice(1), function(child, i){
                        // error-checking
                        if(!this.sizers[i]){
                                return true;
                        }
                        // first we position the sizing handle before this pane
                        this._moveSlider(this.sizers[i], pos, this.sizerWidth);
                        this.sizers[i].position = pos;
                        pos += this.sizerWidth;

                        size = child.sizeActual;
                        this._movePanel(child, pos, size);
                        child.position = pos;
                        pos += size;
                }, this);
        },

        _movePanel: function(panel, pos, size){
                if(this.isHorizontal){
                        panel.domNode.style.left = pos + 'px';  // TODO: resize() takes l and t parameters too, don't need to set manually
                        panel.domNode.style.top = 0;
                        var box = {w: size, h: this.paneHeight};
                        if(panel.resize){
                                panel.resize(box);
                        }else{
                                dojo.marginBox(panel.domNode, box);
                        }
                }else{
                        panel.domNode.style.left = 0;   // TODO: resize() takes l and t parameters too, don't need to set manually
                        panel.domNode.style.top = pos + 'px';
                        var box = {w: this.paneWidth, h: size};
                        if(panel.resize){
                                panel.resize(box);
                        }else{
                                dojo.marginBox(panel.domNode, box);
                        }
                }
        },

        _moveSlider: function(slider, pos, size){
                if(this.isHorizontal){
                        slider.style.left = pos + 'px';
                        slider.style.top = 0;
                        dojo.marginBox(slider, { w: size, h: this.paneHeight });
                }else{
                        slider.style.left = 0;
                        slider.style.top = pos + 'px';
                        dojo.marginBox(slider, { w: this.paneWidth, h: size });
                }
        },

        _growPane: function(growth, pane){
                if(growth > 0){
                        if(pane.sizeActual > pane.sizeMin){
                                if((pane.sizeActual - pane.sizeMin) > growth){

                                        // stick all the growth in this pane
                                        pane.sizeActual = pane.sizeActual - growth;
                                        growth = 0;
                                }else{
                                        // put as much growth in here as we can
                                        growth -= pane.sizeActual - pane.sizeMin;
                                        pane.sizeActual = pane.sizeMin;
                                }
                        }
                }
                return growth;
        },

        _checkSizes: function(){

                var totalMinSize = 0;
                var totalSize = 0;
                var children = this.getChildren();

                dojo.forEach(children, function(child){
                        totalSize += child.sizeActual;
                        totalMinSize += child.sizeMin;
                });

                // only make adjustments if we have enough space for all the minimums

                if(totalMinSize <= totalSize){

                        var growth = 0;

                        dojo.forEach(children, function(child){
                                if(child.sizeActual < child.sizeMin){
                                        growth += child.sizeMin - child.sizeActual;
                                        child.sizeActual = child.sizeMin;
                                }
                        });

                        if(growth > 0){
                                var list = this.isDraggingLeft ? children.reverse() : children;
                                dojo.forEach(list, function(child){
                                        growth = this._growPane(growth, child);
                                }, this);
                        }
                }else{
                        dojo.forEach(children, function(child){
                                child.sizeActual = Math.round(totalSize * (child.sizeMin / totalMinSize));
                        });
                }
        },

        beginSizing: function(e, i){
                var children = this.getChildren();
                this.paneBefore = children[i];
                this.paneAfter = children[i+1];

                this.isSizing = true;
                this.sizingSplitter = this.sizers[i];

                if(!this.cover){
                        this.cover = dojo.doc.createElement('div');
                        this.domNode.appendChild(this.cover);
                        var s = this.cover.style;
                        s.position = 'absolute';
                        s.zIndex = 1;
                        s.top = 0;
                        s.left = 0;
                        s.width = "100%";
                        s.height = "100%";
                }else{
                        this.cover.style.zIndex = 1;
                }
                this.sizingSplitter.style.zIndex = 2;

                // TODO: REVISIT - we want MARGIN_BOX and core hasn't exposed that yet (but can't we use it anyway if we pay attention? we do elsewhere.)
                this.originPos = dojo.coords(children[0].domNode, true);
                if(this.isHorizontal){
                        var client = (e.layerX ? e.layerX : e.offsetX);
                        var screen = e.pageX;
                        this.originPos = this.originPos.x;
                }else{
                        var client = (e.layerY ? e.layerY : e.offsetY);
                        var screen = e.pageY;
                        this.originPos = this.originPos.y;
                }
                this.startPoint = this.lastPoint = screen;
                this.screenToClientOffset = screen - client;
                this.dragOffset = this.lastPoint - this.paneBefore.sizeActual - this.originPos - this.paneBefore.position;

                if(!this.activeSizing){
                        this._showSizingLine();
                }

                //                                      
                // attach mouse events
                //
                this._connects = [];
                this._connects.push(dojo.connect(document.documentElement, "onmousemove", this, "changeSizing"));
                this._connects.push(dojo.connect(document.documentElement, "onmouseup", this, "endSizing"));

                dojo.stopEvent(e);
        },

        changeSizing: function(e){
                if(!this.isSizing){ return; }
                this.lastPoint = this.isHorizontal ? e.pageX : e.pageY;
                this.movePoint();
                if(this.activeSizing){
                        this._updateSize();
                }else{
                        this._moveSizingLine();
                }
                dojo.stopEvent(e);
        },

        endSizing: function(e){
                if(!this.isSizing){ return; }
                if(this.cover){
                        this.cover.style.zIndex = -1;
                }
                if(!this.activeSizing){
                        this._hideSizingLine();
                }

                this._updateSize();

                this.isSizing = false;

                if(this.persist){
                        this._saveState(this);
                }

                dojo.forEach(this._connects,dojo.disconnect); 
        },

        movePoint: function(){

                // make sure lastPoint is a legal point to drag to
                var p = this.lastPoint - this.screenToClientOffset;

                var a = p - this.dragOffset;
                a = this.legaliseSplitPoint(a);
                p = a + this.dragOffset;

                this.lastPoint = p + this.screenToClientOffset;
        },

        legaliseSplitPoint: function(a){

                a += this.sizingSplitter.position;

                this.isDraggingLeft = !!(a > 0);

                if(!this.activeSizing){
                        var min = this.paneBefore.position + this.paneBefore.sizeMin;
                        if(a < min){
                                a = min;
                        }

                        var max = this.paneAfter.position + (this.paneAfter.sizeActual - (this.sizerWidth + this.paneAfter.sizeMin));
                        if(a > max){
                                a = max;
                        }
                }

                a -= this.sizingSplitter.position;

                this._checkSizes();

                return a;
        },

        _updateSize: function(){
        //FIXME: sometimes this.lastPoint is NaN
                var pos = this.lastPoint - this.dragOffset - this.originPos;

                var start_region = this.paneBefore.position;
                var end_region   = this.paneAfter.position + this.paneAfter.sizeActual;

                this.paneBefore.sizeActual = pos - start_region;
                this.paneAfter.position = pos + this.sizerWidth;
                this.paneAfter.sizeActual  = end_region - this.paneAfter.position;

                dojo.forEach(this.getChildren(), function(child){
                        child.sizeShare = child.sizeActual;
                });

                if(this._started){
                        this.layout();
                }
        },

        _showSizingLine: function(){

                this._moveSizingLine();

                dojo.marginBox(this.virtualSizer,
                        this.isHorizontal ? { w: this.sizerWidth, h: this.paneHeight } : { w: this.paneWidth, h: this.sizerWidth });

                this.virtualSizer.style.display = 'block';
        },

        _hideSizingLine: function(){
                this.virtualSizer.style.display = 'none';
        },

        _moveSizingLine: function(){
                var pos = (this.lastPoint - this.startPoint) + this.sizingSplitter.position;
                dojo.style(this.virtualSizer,(this.isHorizontal ? "left" : "top"),pos+"px");
                // this.virtualSizer.style[ this.isHorizontal ? "left" : "top" ] = pos + 'px'; // FIXME: remove this line if the previous is better
        },

        _getCookieName: function(i){
                return this.id + "_" + i;
        },

        _restoreState: function(){
                dojo.forEach(this.getChildren(), function(child, i){
                        var cookieName = this._getCookieName(i);
                        var cookieValue = dojo.cookie(cookieName);
                        if(cookieValue){
                                var pos = parseInt(cookieValue);
                                if(typeof pos == "number"){
                                        child.sizeShare = pos;
                                }
                        }
                }, this);
        },

        _saveState: function(){
                dojo.forEach(this.getChildren(), function(child, i){
                        dojo.cookie(this._getCookieName(i), child.sizeShare);
                }, this);
        }
});

// These arguments can be specified for the children of a SplitContainer.
// Since any widget can be specified as a SplitContainer child, mix them
// into the base widget class.  (This is a hack, but it's effective.)
dojo.extend(dijit._Widget, {
        // sizeMin: Integer
        //      Minimum size (width or height) of a child of a SplitContainer.
        //      The value is relative to other children's sizeShare properties.
        sizeMin: 10,

        // sizeShare: Integer
        //      Size (width or height) of a child of a SplitContainer.
        //      The value is relative to other children's sizeShare properties.
        //      For example, if there are two children and each has sizeShare=10, then
        //      each takes up 50% of the available space.
        sizeShare: 10
});

}