2150 |
mathias |
1 |
if(!dojo._hasResource["dijit.layout._LayoutWidget"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
|
|
|
2 |
dojo._hasResource["dijit.layout._LayoutWidget"] = true;
|
|
|
3 |
dojo.provide("dijit.layout._LayoutWidget");
|
|
|
4 |
|
|
|
5 |
dojo.require("dijit._Widget");
|
|
|
6 |
dojo.require("dijit._Container");
|
|
|
7 |
|
|
|
8 |
dojo.declare("dijit.layout._LayoutWidget",
|
|
|
9 |
[dijit._Widget, dijit._Container, dijit._Contained],
|
|
|
10 |
{
|
|
|
11 |
// summary
|
|
|
12 |
// Mixin for widgets that contain a list of children like SplitContainer.
|
|
|
13 |
// Widgets which mixin this code must define layout() to lay out the children
|
|
|
14 |
|
|
|
15 |
isLayoutContainer: true,
|
|
|
16 |
|
|
|
17 |
postCreate: function(){
|
|
|
18 |
dojo.addClass(this.domNode, "dijitContainer");
|
|
|
19 |
},
|
|
|
20 |
|
|
|
21 |
startup: function(){
|
|
|
22 |
// summary:
|
|
|
23 |
// Called after all the widgets have been instantiated and their
|
|
|
24 |
// dom nodes have been inserted somewhere under document.body.
|
|
|
25 |
//
|
|
|
26 |
// Widgets should override this method to do any initialization
|
|
|
27 |
// dependent on other widgets existing, and then call
|
|
|
28 |
// this superclass method to finish things off.
|
|
|
29 |
//
|
|
|
30 |
// startup() in subclasses shouldn't do anything
|
|
|
31 |
// size related because the size of the widget hasn't been set yet.
|
|
|
32 |
|
|
|
33 |
if(this._started){ return; }
|
|
|
34 |
this._started=true;
|
|
|
35 |
|
|
|
36 |
if(this.getChildren){
|
|
|
37 |
dojo.forEach(this.getChildren(), function(child){ child.startup(); });
|
|
|
38 |
}
|
|
|
39 |
|
|
|
40 |
// If I am a top level widget
|
|
|
41 |
if(!this.getParent || !this.getParent()){
|
|
|
42 |
// Do recursive sizing and layout of all my descendants
|
|
|
43 |
// (passing in no argument to resize means that it has to glean the size itself)
|
|
|
44 |
this.resize();
|
|
|
45 |
|
|
|
46 |
// since my parent isn't a layout container, and my style is width=height=100% (or something similar),
|
|
|
47 |
// then I need to watch when the window resizes, and size myself accordingly
|
|
|
48 |
// (passing in no argument to resize means that it has to glean the size itself)
|
|
|
49 |
this.connect(window, 'onresize', function(){this.resize();});
|
|
|
50 |
}
|
|
|
51 |
},
|
|
|
52 |
|
|
|
53 |
resize: function(args){
|
|
|
54 |
// summary:
|
|
|
55 |
// Explicitly set this widget's size (in pixels),
|
|
|
56 |
// and then call layout() to resize contents (and maybe adjust child widgets)
|
|
|
57 |
//
|
|
|
58 |
// args: Object?
|
|
|
59 |
// {w: int, h: int, l: int, t: int}
|
|
|
60 |
|
|
|
61 |
var node = this.domNode;
|
|
|
62 |
|
|
|
63 |
// set margin box size, unless it wasn't specified, in which case use current size
|
|
|
64 |
if(args){
|
|
|
65 |
dojo.marginBox(node, args);
|
|
|
66 |
|
|
|
67 |
// set offset of the node
|
|
|
68 |
if(args.t){ node.style.top = args.t + "px"; }
|
|
|
69 |
if(args.l){ node.style.left = args.l + "px"; }
|
|
|
70 |
}
|
|
|
71 |
// If either height or width wasn't specified by the user, then query node for it.
|
|
|
72 |
// But note that setting the margin box and then immediately querying dimensions may return
|
|
|
73 |
// inaccurate results, so try not to depend on it.
|
|
|
74 |
var mb = dojo.mixin(dojo.marginBox(node), args||{});
|
|
|
75 |
|
|
|
76 |
// Save the size of my content box.
|
|
|
77 |
this._contentBox = dijit.layout.marginBox2contentBox(node, mb);
|
|
|
78 |
|
|
|
79 |
// Callback for widget to adjust size of it's children
|
|
|
80 |
this.layout();
|
|
|
81 |
},
|
|
|
82 |
|
|
|
83 |
layout: function(){
|
|
|
84 |
// summary
|
|
|
85 |
// Widgets override this method to size & position their contents/children.
|
|
|
86 |
// When this is called this._contentBox is guaranteed to be set (see resize()).
|
|
|
87 |
//
|
|
|
88 |
// This is called after startup(), and also when the widget's size has been
|
|
|
89 |
// changed.
|
|
|
90 |
}
|
|
|
91 |
}
|
|
|
92 |
);
|
|
|
93 |
|
|
|
94 |
dijit.layout.marginBox2contentBox = function(/*DomNode*/ node, /*Object*/ mb){
|
|
|
95 |
// summary:
|
|
|
96 |
// Given the margin-box size of a node, return it's content box size.
|
|
|
97 |
// Functions like dojo.contentBox() but is more reliable since it doesn't have
|
|
|
98 |
// to wait for the browser to compute sizes.
|
|
|
99 |
var cs = dojo.getComputedStyle(node);
|
|
|
100 |
var me=dojo._getMarginExtents(node, cs);
|
|
|
101 |
var pb=dojo._getPadBorderExtents(node, cs);
|
|
|
102 |
return {
|
|
|
103 |
l: dojo._toPixelValue(node, cs.paddingLeft),
|
|
|
104 |
t: dojo._toPixelValue(node, cs.paddingTop),
|
|
|
105 |
w: mb.w - (me.w + pb.w),
|
|
|
106 |
h: mb.h - (me.h + pb.h)
|
|
|
107 |
};
|
|
|
108 |
};
|
|
|
109 |
|
|
|
110 |
(function(){
|
|
|
111 |
var capitalize = function(word){
|
|
|
112 |
return word.substring(0,1).toUpperCase() + word.substring(1);
|
|
|
113 |
};
|
|
|
114 |
|
|
|
115 |
var size = function(widget, dim){
|
|
|
116 |
// size the child
|
|
|
117 |
widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim);
|
|
|
118 |
|
|
|
119 |
// record child's size, but favor our own numbers when we have them.
|
|
|
120 |
// the browser lies sometimes
|
|
|
121 |
dojo.mixin(widget, dojo.marginBox(widget.domNode));
|
|
|
122 |
dojo.mixin(widget, dim);
|
|
|
123 |
};
|
|
|
124 |
|
|
|
125 |
dijit.layout.layoutChildren = function(/*DomNode*/ container, /*Object*/ dim, /*Object[]*/ children){
|
|
|
126 |
/**
|
|
|
127 |
* summary
|
|
|
128 |
* Layout a bunch of child dom nodes within a parent dom node
|
|
|
129 |
* container:
|
|
|
130 |
* parent node
|
|
|
131 |
* dim:
|
|
|
132 |
* {l, t, w, h} object specifying dimensions of container into which to place children
|
|
|
133 |
* children:
|
|
|
134 |
* an array like [ {domNode: foo, layoutAlign: "bottom" }, {domNode: bar, layoutAlign: "client"} ]
|
|
|
135 |
*/
|
|
|
136 |
|
|
|
137 |
// copy dim because we are going to modify it
|
|
|
138 |
dim = dojo.mixin({}, dim);
|
|
|
139 |
|
|
|
140 |
dojo.addClass(container, "dijitLayoutContainer");
|
|
|
141 |
|
|
|
142 |
// Move "client" elements to the end of the array for layout. a11y dictates that the author
|
|
|
143 |
// needs to be able to put them in the document in tab-order, but this algorithm requires that
|
|
|
144 |
// client be last.
|
|
|
145 |
children = dojo.filter(children, function(item){ return item.layoutAlign != "client"; })
|
|
|
146 |
.concat(dojo.filter(children, function(item){ return item.layoutAlign == "client"; }));
|
|
|
147 |
|
|
|
148 |
// set positions/sizes
|
|
|
149 |
dojo.forEach(children, function(child){
|
|
|
150 |
var elm = child.domNode,
|
|
|
151 |
pos = child.layoutAlign;
|
|
|
152 |
|
|
|
153 |
// set elem to upper left corner of unused space; may move it later
|
|
|
154 |
var elmStyle = elm.style;
|
|
|
155 |
elmStyle.left = dim.l+"px";
|
|
|
156 |
elmStyle.top = dim.t+"px";
|
|
|
157 |
elmStyle.bottom = elmStyle.right = "auto";
|
|
|
158 |
|
|
|
159 |
dojo.addClass(elm, "dijitAlign" + capitalize(pos));
|
|
|
160 |
|
|
|
161 |
// set size && adjust record of remaining space.
|
|
|
162 |
// note that setting the width of a <div> may affect it's height.
|
|
|
163 |
if(pos=="top" || pos=="bottom"){
|
|
|
164 |
size(child, { w: dim.w });
|
|
|
165 |
dim.h -= child.h;
|
|
|
166 |
if(pos=="top"){
|
|
|
167 |
dim.t += child.h;
|
|
|
168 |
}else{
|
|
|
169 |
elmStyle.top = dim.t + dim.h + "px";
|
|
|
170 |
}
|
|
|
171 |
}else if(pos=="left" || pos=="right"){
|
|
|
172 |
size(child, { h: dim.h });
|
|
|
173 |
dim.w -= child.w;
|
|
|
174 |
if(pos=="left"){
|
|
|
175 |
dim.l += child.w;
|
|
|
176 |
}else{
|
|
|
177 |
elmStyle.left = dim.l + dim.w + "px";
|
|
|
178 |
}
|
|
|
179 |
}else if(pos=="client"){
|
|
|
180 |
size(child, dim);
|
|
|
181 |
}
|
|
|
182 |
});
|
|
|
183 |
};
|
|
|
184 |
|
|
|
185 |
})();
|
|
|
186 |
|
|
|
187 |
}
|