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
|
define("dijit/layout/_LayoutWidget", [
"dojo/_base/lang", // lang.mixin
"../_Widget",
"../_Container",
"../_Contained",
"../Viewport",
"dojo/_base/declare", // declare
"dojo/dom-class", // domClass.add domClass.remove
"dojo/dom-geometry", // domGeometry.marginBox
"dojo/dom-style" // domStyle.getComputedStyle
], function(lang, _Widget, _Container, _Contained, Viewport,
declare, domClass, domGeometry, domStyle){
// module:
// dijit/layout/_LayoutWidget
return declare("dijit.layout._LayoutWidget", [_Widget, _Container, _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);
domClass.add(this.domNode, "dijitContainer");
},
startup: function(){
// summary:
// Called after all the widgets have been instantiated and their
// dom nodes have been inserted somewhere under win.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 viewport size changes so that I can re-layout.
this.own(Viewport.on("resize", lang.hitch(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 re-layout 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 re-layout 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){
domGeometry.setMarginBox(node, changeSize);
}
// 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 || {};
lang.mixin(mb, changeSize || {}); // changeSize overrides resultSize
if( !("h" in mb) || !("w" in mb) ){
mb = lang.mixin(domGeometry.getMarginBox(node), mb); // just use domGeometry.marginBox() to fill in missing values
}
// Compute and save the size of my border box and content box
// (w/out calling domGeometry.getContentBox() since that may fail if size was recently set)
var cs = domStyle.getComputedStyle(node);
var me = domGeometry.getMarginExtents(node, cs);
var be = domGeometry.getBorderExtents(node, cs);
var bb = (this._borderBox = {
w: mb.w - (me.w + be.w),
h: mb.h - (me.h + be.h)
});
var pe = domGeometry.getPadExtents(node, cs);
this._contentBox = {
l: domStyle.toPixelValue(node, cs.paddingLeft),
t: domStyle.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/_WidgetBase*/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 : "");
domClass.add(child.domNode, cls);
},
addChild: function(/*dijit/_WidgetBase*/ child, /*Integer?*/ insertIndex){
// Overrides _Container.addChild() to call _setupChild()
this.inherited(arguments);
if(this._started){
this._setupChild(child);
}
},
removeChild: function(/*dijit/_WidgetBase*/ child){
// Overrides _Container.removeChild() to remove class added by _setupChild()
var cls = this.baseClass + "-child"
+ (child.baseClass ?
" " + this.baseClass + "-" + child.baseClass : "");
domClass.remove(child.domNode, cls);
this.inherited(arguments);
}
});
});
|
