upgrade Dojo to 1.6.1

[tt-rss.git] / lib / dijit / layout / _LayoutWidget.js

/*
        Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
        Available via Academic Free License >= 2.1 OR the modified BSD license.
        see: http://dojotoolkit.org/license for details
*/


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


dojo.declare("dijit.layout._LayoutWidget",
        [dijit._Widget, dijit._Container, dijit._Contained],
        {
                // summary:
                //              Base class for a _Container widget which is responsible for laying out its children.
                //              Widgets which mixin this code must define layout() to manage placement and sizing of the children.

                // baseClass: [protected extension] String
                //              This class name is applied to the widget's domNode
                //              and also may be used to generate names for sub nodes,
                //              for example dijitTabContainer-content.
                baseClass: "dijitLayoutContainer",

                // isLayoutContainer: [protected] Boolean
                //              Indicates that this widget is going to call resize() on its
                //              children widgets, setting their size, when they become visible.
                isLayoutContainer: true,

                buildRendering: function(){
                        this.inherited(arguments);
                        dojo.addClass(this.domNode, "dijitContainer");
                },

                startup: function(){
                        // summary:
                        //              Called after all the widgets have been instantiated and their
                        //              dom nodes have been inserted somewhere under dojo.doc.body.
                        //
                        //              Widgets should override this method to do any initialization
                        //              dependent on other widgets existing, and then call
                        //              this superclass method to finish things off.
                        //
                        //              startup() in subclasses shouldn't do anything
                        //              size related because the size of the widget hasn't been set yet.

                        if(this._started){ return; }

                        // Need to call inherited first - so that child widgets get started
                        // up correctly
                        this.inherited(arguments);

                        // If I am a not being controlled by a parent layout widget...
                        var parent = this.getParent && this.getParent()
                        if(!(parent && parent.isLayoutContainer)){
                                // Do recursive sizing and layout of all my descendants
                                // (passing in no argument to resize means that it has to glean the size itself)
                                this.resize();

                                // Since my parent isn't a layout container, and my style *may be* width=height=100%
                                // or something similar (either set directly or via a CSS class),
                                // monitor when my size changes so that I can re-layout.
                                // For browsers where I can't directly monitor when my size changes,
                                // monitor when the viewport changes size, which *may* indicate a size change for me.
                                this.connect(dojo.isIE ? this.domNode : dojo.global, 'onresize', function(){
                                        // Using function(){} closure to ensure no arguments to resize.
                                        this.resize();
                                });
                        }
                },

                resize: function(changeSize, resultSize){
                        // summary:
                        //              Call this to resize a widget, or after its size has changed.
                        // description:
                        //              Change size mode:
                        //                      When changeSize is specified, changes the marginBox of this widget
                        //                      and forces it to relayout its contents accordingly.
                        //                      changeSize may specify height, width, or both.
                        //
                        //                      If resultSize is specified it indicates the size the widget will
                        //                      become after changeSize has been applied.
                        //
                        //              Notification mode:
                        //                      When changeSize is null, indicates that the caller has already changed
                        //                      the size of the widget, or perhaps it changed because the browser
                        //                      window was resized.  Tells widget to relayout its contents accordingly.
                        //
                        //                      If resultSize is also specified it indicates the size the widget has
                        //                      become.
                        //
                        //              In either mode, this method also:
                        //                      1. Sets this._borderBox and this._contentBox to the new size of
                        //                              the widget.  Queries the current domNode size if necessary.
                        //                      2. Calls layout() to resize contents (and maybe adjust child widgets).
                        //
                        // changeSize: Object?
                        //              Sets the widget to this margin-box size and position.
                        //              May include any/all of the following properties:
                        //      |       {w: int, h: int, l: int, t: int}
                        //
                        // resultSize: Object?
                        //              The margin-box size of this widget after applying changeSize (if
                        //              changeSize is specified).  If caller knows this size and
                        //              passes it in, we don't need to query the browser to get the size.
                        //      |       {w: int, h: int}

                        var node = this.domNode;

                        // set margin box size, unless it wasn't specified, in which case use current size
                        if(changeSize){
                                dojo.marginBox(node, changeSize);

                                // set offset of the node
                                if(changeSize.t){ node.style.top = changeSize.t + "px"; }
                                if(changeSize.l){ node.style.left = changeSize.l + "px"; }
                        }

                        // If either height or width wasn't specified by the user, then query node for it.
                        // But note that setting the margin box and then immediately querying dimensions may return
                        // inaccurate results, so try not to depend on it.
                        var mb = resultSize || {};
                        dojo.mixin(mb, changeSize || {});       // changeSize overrides resultSize
                        if( !("h" in mb) || !("w" in mb) ){
                                mb = dojo.mixin(dojo.marginBox(node), mb);      // just use dojo.marginBox() to fill in missing values
                        }

                        // Compute and save the size of my border box and content box
                        // (w/out calling dojo.contentBox() since that may fail if size was recently set)
                        var cs = dojo.getComputedStyle(node);
                        var me = dojo._getMarginExtents(node, cs);
                        var be = dojo._getBorderExtents(node, cs);
                        var bb = (this._borderBox = {
                                w: mb.w - (me.w + be.w),
                                h: mb.h - (me.h + be.h)
                        });
                        var pe = dojo._getPadExtents(node, cs);
                        this._contentBox = {
                                l: dojo._toPixelValue(node, cs.paddingLeft),
                                t: dojo._toPixelValue(node, cs.paddingTop),
                                w: bb.w - pe.w,
                                h: bb.h - pe.h
                        };

                        // Callback for widget to adjust size of its children
                        this.layout();
                },

                layout: function(){
                        // summary:
                        //              Widgets override this method to size and position their contents/children.
                        //              When this is called this._contentBox is guaranteed to be set (see resize()).
                        //
                        //              This is called after startup(), and also when the widget's size has been
                        //              changed.
                        // tags:
                        //              protected extension
                },

                _setupChild: function(/*dijit._Widget*/child){
                        // summary:
                        //              Common setup for initial children and children which are added after startup
                        // tags:
                        //              protected extension

                        var cls = this.baseClass + "-child "
                                + (child.baseClass ? this.baseClass + "-" + child.baseClass : "");
                        dojo.addClass(child.domNode, cls);
                },

                addChild: function(/*dijit._Widget*/ child, /*Integer?*/ insertIndex){
                        // Overrides _Container.addChild() to call _setupChild()
                        this.inherited(arguments);
                        if(this._started){
                                this._setupChild(child);
                        }
                },

                removeChild: function(/*dijit._Widget*/ child){
                        // Overrides _Container.removeChild() to remove class added by _setupChild()
                        var cls = this.baseClass + "-child"
                                        + (child.baseClass ?
                                                " " + this.baseClass + "-" + child.baseClass : "");
                        dojo.removeClass(child.domNode, cls);
                        
                        this.inherited(arguments);
                }
        }
);

dijit.layout.marginBox2contentBox = function(/*DomNode*/ node, /*Object*/ mb){
        // summary:
        //              Given the margin-box size of a node, return its content box size.
        //              Functions like dojo.contentBox() but is more reliable since it doesn't have
        //              to wait for the browser to compute sizes.
        var cs = dojo.getComputedStyle(node);
        var me = dojo._getMarginExtents(node, cs);
        var pb = dojo._getPadBorderExtents(node, cs);
        return {
                l: dojo._toPixelValue(node, cs.paddingLeft),
                t: dojo._toPixelValue(node, cs.paddingTop),
                w: mb.w - (me.w + pb.w),
                h: mb.h - (me.h + pb.h)
        };
};

(function(){
        var capitalize = function(word){
                return word.substring(0,1).toUpperCase() + word.substring(1);
        };

        var size = function(widget, dim){
                // size the child
                var newSize = widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim);

                // record child's size
                if(newSize){
                        // if the child returned it's new size then use that
                        dojo.mixin(widget, newSize);
                }else{
                        // otherwise, call marginBox(), but favor our own numbers when we have them.
                        // the browser lies sometimes
                        dojo.mixin(widget, dojo.marginBox(widget.domNode));
                        dojo.mixin(widget, dim);
                }
        };

        dijit.layout.layoutChildren = function(/*DomNode*/ container, /*Object*/ dim, /*Widget[]*/ children,
                        /*String?*/ changedRegionId, /*Number?*/ changedRegionSize){
                // summary
                //              Layout a bunch of child dom nodes within a parent dom node
                // container:
                //              parent node
                // dim:
                //              {l, t, w, h} object specifying dimensions of container into which to place children
                // children:
                //              an array of Widgets or at least objects containing:
                //                      * domNode: pointer to DOM node to position
                //                      * region or layoutAlign: position to place DOM node
                //                      * resize(): (optional) method to set size of node
                //                      * id: (optional) Id of widgets, referenced from resize object, below.
                // changedRegionId:
                //              If specified, the slider for the region with the specified id has been dragged, and thus
                //              the region's height or width should be adjusted according to changedRegionSize
                // changedRegionSize:
                //              See changedRegionId.

                // copy dim because we are going to modify it
                dim = dojo.mixin({}, dim);

                dojo.addClass(container, "dijitLayoutContainer");

                // Move "client" elements to the end of the array for layout.  a11y dictates that the author
                // needs to be able to put them in the document in tab-order, but this algorithm requires that
                // client be last.    TODO: move these lines to LayoutContainer?   Unneeded other places I think.
                children = dojo.filter(children, function(item){ return item.region != "center" && item.layoutAlign != "client"; })
                        .concat(dojo.filter(children, function(item){ return item.region == "center" || item.layoutAlign == "client"; }));

                // set positions/sizes
                dojo.forEach(children, function(child){
                        var elm = child.domNode,
                                pos = (child.region || child.layoutAlign);

                        // set elem to upper left corner of unused space; may move it later
                        var elmStyle = elm.style;
                        elmStyle.left = dim.l+"px";
                        elmStyle.top = dim.t+"px";
                        elmStyle.position = "absolute";

                        dojo.addClass(elm, "dijitAlign" + capitalize(pos));

                        // Size adjustments to make to this child widget
                        var sizeSetting = {};

                        // Check for optional size adjustment due to splitter drag (height adjustment for top/bottom align
                        // panes and width adjustment for left/right align panes.
                        if(changedRegionId && changedRegionId == child.id){
                                sizeSetting[child.region == "top" || child.region == "bottom" ? "h" : "w"] = changedRegionSize;
                        }

                        // set size && adjust record of remaining space.
                        // note that setting the width of a <div> may affect its height.
                        if(pos == "top" || pos == "bottom"){
                                sizeSetting.w = dim.w;
                                size(child, sizeSetting);
                                dim.h -= child.h;
                                if(pos == "top"){
                                        dim.t += child.h;
                                }else{
                                        elmStyle.top = dim.t + dim.h + "px";
                                }
                        }else if(pos == "left" || pos == "right"){
                                sizeSetting.h = dim.h;
                                size(child, sizeSetting);
                                dim.w -= child.w;
                                if(pos == "left"){
                                        dim.l += child.w;
                                }else{
                                        elmStyle.left = dim.l + dim.w + "px";
                                }
                        }else if(pos == "client" || pos == "center"){
                                size(child, dim);
                        }
                });
        };

})();

}