1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
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.declare("dijit.layout._LayoutWidget",
[dijit._Widget, dijit._Container, dijit._Contained],
{
// summary
// Mixin for widgets that contain a list of children like SplitContainer.
// Widgets which mixin this code must define layout() to lay out the children
isLayoutContainer: true,
postCreate: function(){
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; }
dojo.forEach(this.getChildren(), function(child){ child.startup(); });
// If I am a top level widget
if(!this.getParent || !this.getParent()){
// 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 is width=height=100% (or something similar),
// then I need to watch when the window resizes, and size myself accordingly
// (passing in no argument to resize means that it has to glean the size itself)
this.connect(window, 'onresize', function(){this.resize();});
}
this.inherited(arguments);
},
resize: function(args){
// summary:
// Explicitly set this widget's size (in pixels),
// and then call layout() to resize contents (and maybe adjust child widgets)
//
// args: Object?
// {w: int, h: int, l: int, t: int}
var node = this.domNode;
// set margin box size, unless it wasn't specified, in which case use current size
if(args){
dojo.marginBox(node, args);
// set offset of the node
if(args.t){ node.style.top = args.t + "px"; }
if(args.l){ node.style.left = args.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 = dojo.mixin(dojo.marginBox(node), args||{});
// console.log(this, ": setting size to ", mb);
// Save the size of my content box.
this._contentBox = dijit.layout.marginBox2contentBox(node, mb);
// Callback for widget to adjust size of it's children
this.layout();
},
layout: function(){
// summary
// Widgets override this method to size & 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.
}
}
);
dijit.layout.marginBox2contentBox = function(/*DomNode*/ node, /*Object*/ mb){
// summary:
// Given the margin-box size of a node, return it's 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
widget.resize ? widget.resize(dim) : dojo.marginBox(widget.domNode, dim);
// record child's size, 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, /*Object[]*/ children){
/**
* 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 like [ {domNode: foo, layoutAlign: "bottom" }, {domNode: bar, layoutAlign: "client"} ]
*/
// 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.
children = dojo.filter(children, function(item){ return item.layoutAlign != "client"; })
.concat(dojo.filter(children, function(item){ return item.layoutAlign == "client"; }));
// set positions/sizes
dojo.forEach(children, function(child){
var elm = child.domNode,
pos = 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.bottom = elmStyle.right = "auto";
dojo.addClass(elm, "dijitAlign" + capitalize(pos));
// set size && adjust record of remaining space.
// note that setting the width of a <div> may affect it's height.
if(pos=="top" || pos=="bottom"){
size(child, { w: dim.w });
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"){
size(child, { h: dim.h });
dim.w -= child.w;
if(pos=="left"){
dim.l += child.w;
}else{
elmStyle.left = dim.l + dim.w + "px";
}
}else if(pos=="client"){
size(child, dim);
}
});
};
})();
}
|
