1 | define([ |
---|
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 | }); |
---|