lib/dijit/layout/utils.js.uncompressed.js

   1 define("dijit/layout/utils", [
   2         "dojo/_base/array", // array.filter array.forEach
   3         "dojo/dom-class", // domClass.add domClass.remove
   4         "dojo/dom-geometry", // domGeometry.marginBox
   5         "dojo/dom-style", // domStyle.getComputedStyle
   6         "dojo/_base/lang", // lang.mixin
   7         ".."    // for exporting symbols to dijit, remove in 2.0
   8 ], function(array, domClass, domGeometry, domStyle, lang, dijit){
   9
  10         // module:
  11         //              dijit/layout/utils
  12         // summary:
  13         //              marginBox2contentBox() and layoutChildren()
  14
  15         var layout = lang.getObject("layout", true, dijit);
  16         /*===== layout = dijit.layout =====*/
  17
  18         layout.marginBox2contentBox = function(/*DomNode*/ node, /*Object*/ mb){
  19                 // summary:
  20                 //              Given the margin-box size of a node, return its content box size.
  21                 //              Functions like domGeometry.contentBox() but is more reliable since it doesn't have
  22                 //              to wait for the browser to compute sizes.
  23                 var cs = domStyle.getComputedStyle(node);
  24                 var me = domGeometry.getMarginExtents(node, cs);
  25                 var pb = domGeometry.getPadBorderExtents(node, cs);
  26                 return {
  27                         l: domStyle.toPixelValue(node, cs.paddingLeft),
  28                         t: domStyle.toPixelValue(node, cs.paddingTop),
  29                         w: mb.w - (me.w + pb.w),
  30                         h: mb.h - (me.h + pb.h)
  31                 };
  32         };
  33
  34         function capitalize(word){
  35                 return word.substring(0,1).toUpperCase() + word.substring(1);
  36         }
  37
  38         function size(widget, dim){
  39                 // size the child
  40                 var newSize = widget.resize ? widget.resize(dim) : domGeometry.setMarginBox(widget.domNode, dim);
  41
  42                 // record child's size
  43                 if(newSize){
  44                         // if the child returned it's new size then use that
  45                         lang.mixin(widget, newSize);
  46                 }else{
  47                         // otherwise, call getMarginBox(), but favor our own numbers when we have them.
  48                         // the browser lies sometimes
  49                         lang.mixin(widget, domGeometry.getMarginBox(widget.domNode));
  50                         lang.mixin(widget, dim);
  51                 }
  52         }
  53
  54         layout.layoutChildren = function(/*DomNode*/ container, /*Object*/ dim, /*Widget[]*/ children,
  55                         /*String?*/ changedRegionId, /*Number?*/ changedRegionSize){
  56                 // summary:
  57                 //              Layout a bunch of child dom nodes within a parent dom node
  58                 // container:
  59                 //              parent node
  60                 // dim:
  61                 //              {l, t, w, h} object specifying dimensions of container into which to place children
  62                 // children:
  63                 //              an array of Widgets or at least objects containing:
  64                 //                      * domNode: pointer to DOM node to position
  65                 //                      * region or layoutAlign: position to place DOM node
  66                 //                      * resize(): (optional) method to set size of node
  67                 //                      * id: (optional) Id of widgets, referenced from resize object, below.
  68                 // changedRegionId:
  69                 //              If specified, the slider for the region with the specified id has been dragged, and thus
  70                 //              the region's height or width should be adjusted according to changedRegionSize
  71                 // changedRegionSize:
  72                 //              See changedRegionId.
  73
  74                 // copy dim because we are going to modify it
  75                 dim = lang.mixin({}, dim);
  76
  77                 domClass.add(container, "dijitLayoutContainer");
  78
  79                 // Move "client" elements to the end of the array for layout.  a11y dictates that the author
  80                 // needs to be able to put them in the document in tab-order, but this algorithm requires that
  81                 // client be last.    TODO: move these lines to LayoutContainer?   Unneeded other places I think.
  82                 children = array.filter(children, function(item){ return item.region != "center" && item.layoutAlign != "client"; })
  83                         .concat(array.filter(children, function(item){ return item.region == "center" || item.layoutAlign == "client"; }));
  84
  85                 // set positions/sizes
  86                 array.forEach(children, function(child){
  87                         var elm = child.domNode,
  88                                 pos = (child.region || child.layoutAlign);
  89                         if(!pos){
  90                                 throw new Error("No region setting for " + child.id)
  91                         }
  92
  93                         // set elem to upper left corner of unused space; may move it later
  94                         var elmStyle = elm.style;
  95                         elmStyle.left = dim.l+"px";
  96                         elmStyle.top = dim.t+"px";
  97                         elmStyle.position = "absolute";
  98
  99                         domClass.add(elm, "dijitAlign" + capitalize(pos));
 100
 101                         // Size adjustments to make to this child widget
 102                         var sizeSetting = {};
 103
 104                         // Check for optional size adjustment due to splitter drag (height adjustment for top/bottom align
 105                         // panes and width adjustment for left/right align panes.
 106                         if(changedRegionId && changedRegionId == child.id){
 107                                 sizeSetting[child.region == "top" || child.region == "bottom" ? "h" : "w"] = changedRegionSize;
 108                         }
 109
 110                         // set size && adjust record of remaining space.
 111                         // note that setting the width of a <div> may affect its height.
 112                         if(pos == "top" || pos == "bottom"){
 113                                 sizeSetting.w = dim.w;
 114                                 size(child, sizeSetting);
 115                                 dim.h -= child.h;
 116                                 if(pos == "top"){
 117                                         dim.t += child.h;
 118                                 }else{
 119                                         elmStyle.top = dim.t + dim.h + "px";
 120                                 }
 121                         }else if(pos == "left" || pos == "right"){
 122                                 sizeSetting.h = dim.h;
 123                                 size(child, sizeSetting);
 124                                 dim.w -= child.w;
 125                                 if(pos == "left"){
 126                                         dim.l += child.w;
 127                                 }else{
 128                                         elmStyle.left = dim.l + dim.w + "px";
 129                                 }
 130                         }else if(pos == "client" || pos == "center"){
 131                                 size(child, dim);
 132                         }
 133                 });
 134         };
 135
 136
 137         return {
 138                 marginBox2contentBox: layout.marginBox2contentBox,
 139                 layoutChildren: layout.layoutChildren
 140         };
 141 });