Project

General

Profile

Statistics
| Revision:

root / trunk / web / dojo / dijit / layout / BorderContainer.js @ 11

History | View | Annotate | Download (10.8 KB)

1
/*
2
        Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
3
        Available via Academic Free License >= 2.1 OR the modified BSD license.
4
        see: http://dojotoolkit.org/license for details
5
*/
6

    
7

    
8
if(!dojo._hasResource["dijit.layout.BorderContainer"]){
9
dojo._hasResource["dijit.layout.BorderContainer"]=true;
10
dojo.provide("dijit.layout.BorderContainer");
11
dojo.require("dijit.layout._LayoutWidget");
12
dojo.require("dojo.cookie");
13
dojo.declare("dijit.layout.BorderContainer",dijit.layout._LayoutWidget,{design:"headline",gutters:true,liveSplitters:true,persist:false,baseClass:"dijitBorderContainer",_splitterClass:"dijit.layout._Splitter",postMixInProperties:function(){
14
if(!this.gutters){
15
this.baseClass+="NoGutter";
16
}
17
this.inherited(arguments);
18
},postCreate:function(){
19
this.inherited(arguments);
20
this._splitters={};
21
this._splitterThickness={};
22
},startup:function(){
23
if(this._started){
24
return;
25
}
26
dojo.forEach(this.getChildren(),this._setupChild,this);
27
this.inherited(arguments);
28
},_setupChild:function(_1){
29
var _2=_1.region;
30
if(_2){
31
this.inherited(arguments);
32
dojo.addClass(_1.domNode,this.baseClass+"Pane");
33
var _3=this.isLeftToRight();
34
if(_2=="leading"){
35
_2=_3?"left":"right";
36
}
37
if(_2=="trailing"){
38
_2=_3?"right":"left";
39
}
40
this["_"+_2]=_1.domNode;
41
this["_"+_2+"Widget"]=_1;
42
if((_1.splitter||this.gutters)&&!this._splitters[_2]){
43
var _4=dojo.getObject(_1.splitter?this._splitterClass:"dijit.layout._Gutter");
44
var _5=new _4({id:_1.id+"_splitter",container:this,child:_1,region:_2,live:this.liveSplitters});
45
_5.isSplitter=true;
46
this._splitters[_2]=_5.domNode;
47
dojo.place(this._splitters[_2],_1.domNode,"after");
48
_5.startup();
49
}
50
_1.region=_2;
51
}
52
},_computeSplitterThickness:function(_6){
53
this._splitterThickness[_6]=this._splitterThickness[_6]||dojo.marginBox(this._splitters[_6])[(/top|bottom/.test(_6)?"h":"w")];
54
},layout:function(){
55
for(var _7 in this._splitters){
56
this._computeSplitterThickness(_7);
57
}
58
this._layoutChildren();
59
},addChild:function(_8,_9){
60
this.inherited(arguments);
61
if(this._started){
62
this.layout();
63
}
64
},removeChild:function(_a){
65
var _b=_a.region;
66
var _c=this._splitters[_b];
67
if(_c){
68
dijit.byNode(_c).destroy();
69
delete this._splitters[_b];
70
delete this._splitterThickness[_b];
71
}
72
this.inherited(arguments);
73
delete this["_"+_b];
74
delete this["_"+_b+"Widget"];
75
if(this._started){
76
this._layoutChildren();
77
}
78
dojo.removeClass(_a.domNode,this.baseClass+"Pane");
79
},getChildren:function(){
80
return dojo.filter(this.inherited(arguments),function(_d){
81
return !_d.isSplitter;
82
});
83
},getSplitter:function(_e){
84
var _f=this._splitters[_e];
85
return _f?dijit.byNode(_f):null;
86
},resize:function(_10,_11){
87
if(!this.cs||!this.pe){
88
var _12=this.domNode;
89
this.cs=dojo.getComputedStyle(_12);
90
this.pe=dojo._getPadExtents(_12,this.cs);
91
this.pe.r=dojo._toPixelValue(_12,this.cs.paddingRight);
92
this.pe.b=dojo._toPixelValue(_12,this.cs.paddingBottom);
93
dojo.style(_12,"padding","0px");
94
}
95
this.inherited(arguments);
96
},_layoutChildren:function(_13,_14){
97
if(!this._borderBox||!this._borderBox.h){
98
return;
99
}
100
var _15=(this.design=="sidebar");
101
var _16=0,_17=0,_18=0,_19=0;
102
var _1a={},_1b={},_1c={},_1d={},_1e=(this._center&&this._center.style)||{};
103
var _1f=/left|right/.test(_13);
104
var _20=!_13||(!_1f&&!_15);
105
var _21=!_13||(_1f&&_15);
106
if(this._top){
107
_1a=(_13=="top"||_21)&&this._top.style;
108
_16=_13=="top"?_14:dojo.marginBox(this._top).h;
109
}
110
if(this._left){
111
_1b=(_13=="left"||_20)&&this._left.style;
112
_18=_13=="left"?_14:dojo.marginBox(this._left).w;
113
}
114
if(this._right){
115
_1c=(_13=="right"||_20)&&this._right.style;
116
_19=_13=="right"?_14:dojo.marginBox(this._right).w;
117
}
118
if(this._bottom){
119
_1d=(_13=="bottom"||_21)&&this._bottom.style;
120
_17=_13=="bottom"?_14:dojo.marginBox(this._bottom).h;
121
}
122
var _22=this._splitters;
123
var _23=_22.top,_24=_22.bottom,_25=_22.left,_26=_22.right;
124
var _27=this._splitterThickness;
125
var _28=_27.top||0,_29=_27.left||0,_2a=_27.right||0,_2b=_27.bottom||0;
126
if(_29>50||_2a>50){
127
setTimeout(dojo.hitch(this,function(){
128
this._splitterThickness={};
129
for(var _2c in this._splitters){
130
this._computeSplitterThickness(_2c);
131
}
132
this._layoutChildren();
133
}),50);
134
return false;
135
}
136
var pe=this.pe;
137
var _2d={left:(_15?_18+_29:0)+pe.l+"px",right:(_15?_19+_2a:0)+pe.r+"px"};
138
if(_23){
139
dojo.mixin(_23.style,_2d);
140
_23.style.top=_16+pe.t+"px";
141
}
142
if(_24){
143
dojo.mixin(_24.style,_2d);
144
_24.style.bottom=_17+pe.b+"px";
145
}
146
_2d={top:(_15?0:_16+_28)+pe.t+"px",bottom:(_15?0:_17+_2b)+pe.b+"px"};
147
if(_25){
148
dojo.mixin(_25.style,_2d);
149
_25.style.left=_18+pe.l+"px";
150
}
151
if(_26){
152
dojo.mixin(_26.style,_2d);
153
_26.style.right=_19+pe.r+"px";
154
}
155
dojo.mixin(_1e,{top:pe.t+_16+_28+"px",left:pe.l+_18+_29+"px",right:pe.r+_19+_2a+"px",bottom:pe.b+_17+_2b+"px"});
156
var _2e={top:_15?pe.t+"px":_1e.top,bottom:_15?pe.b+"px":_1e.bottom};
157
dojo.mixin(_1b,_2e);
158
dojo.mixin(_1c,_2e);
159
_1b.left=pe.l+"px";
160
_1c.right=pe.r+"px";
161
_1a.top=pe.t+"px";
162
_1d.bottom=pe.b+"px";
163
if(_15){
164
_1a.left=_1d.left=_18+_29+pe.l+"px";
165
_1a.right=_1d.right=_19+_2a+pe.r+"px";
166
}else{
167
_1a.left=_1d.left=pe.l+"px";
168
_1a.right=_1d.right=pe.r+"px";
169
}
170
var _2f=this._borderBox.h-pe.t-pe.b,_30=_2f-(_16+_28+_17+_2b),_31=_15?_2f:_30;
171
var _32=this._borderBox.w-pe.l-pe.r,_33=_32-(_18+_29+_19+_2a),_34=_15?_33:_32;
172
var dim={top:{w:_34,h:_16},bottom:{w:_34,h:_17},left:{w:_18,h:_31},right:{w:_19,h:_31},center:{h:_30,w:_33}};
173
if(_13){
174
var _35=this["_"+_13+"Widget"],mb={};
175
mb[/top|bottom/.test(_13)?"h":"w"]=_14;
176
_35.resize?_35.resize(mb,dim[_35.region]):dojo.marginBox(_35.domNode,mb);
177
}
178
var _36=dojo.isIE<8||(dojo.isIE&&dojo.isQuirks)||dojo.some(this.getChildren(),function(_37){
179
return _37.domNode.tagName=="TEXTAREA"||_37.domNode.tagName=="INPUT";
180
});
181
if(_36){
182
var _38=function(_39,_3a,_3b){
183
if(_39){
184
(_39.resize?_39.resize(_3a,_3b):dojo.marginBox(_39.domNode,_3a));
185
}
186
};
187
if(_25){
188
_25.style.height=_31;
189
}
190
if(_26){
191
_26.style.height=_31;
192
}
193
_38(this._leftWidget,{h:_31},dim.left);
194
_38(this._rightWidget,{h:_31},dim.right);
195
if(_23){
196
_23.style.width=_34;
197
}
198
if(_24){
199
_24.style.width=_34;
200
}
201
_38(this._topWidget,{w:_34},dim.top);
202
_38(this._bottomWidget,{w:_34},dim.bottom);
203
_38(this._centerWidget,dim.center);
204
}else{
205
var _3c=!_13||(/top|bottom/.test(_13)&&this.design!="sidebar"),_3d=!_13||(/left|right/.test(_13)&&this.design=="sidebar"),_3e={center:true,left:_3c,right:_3c,top:_3d,bottom:_3d};
206
dojo.forEach(this.getChildren(),function(_3f){
207
if(_3f.resize&&_3e[_3f.region]){
208
_3f.resize(null,dim[_3f.region]);
209
}
210
},this);
211
}
212
},destroy:function(){
213
for(var _40 in this._splitters){
214
var _41=this._splitters[_40];
215
dijit.byNode(_41).destroy();
216
dojo.destroy(_41);
217
}
218
delete this._splitters;
219
delete this._splitterThickness;
220
this.inherited(arguments);
221
}});
222
dojo.extend(dijit._Widget,{region:"",splitter:false,minSize:0,maxSize:Infinity});
223
dojo.require("dijit._Templated");
224
dojo.declare("dijit.layout._Splitter",[dijit._Widget,dijit._Templated],{live:true,templateString:"<div class=\"dijitSplitter\" dojoAttachEvent=\"onkeypress:_onKeyPress,onmousedown:_startDrag,onmouseenter:_onMouse,onmouseleave:_onMouse\" tabIndex=\"0\" waiRole=\"separator\"><div class=\"dijitSplitterThumb\"></div></div>",postCreate:function(){
225
this.inherited(arguments);
226
this.horizontal=/top|bottom/.test(this.region);
227
dojo.addClass(this.domNode,"dijitSplitter"+(this.horizontal?"H":"V"));
228
this._factor=/top|left/.test(this.region)?1:-1;
229
this._cookieName=this.container.id+"_"+this.region;
230
if(this.container.persist){
231
var _42=dojo.cookie(this._cookieName);
232
if(_42){
233
this.child.domNode.style[this.horizontal?"height":"width"]=_42;
234
}
235
}
236
},_computeMaxSize:function(){
237
var dim=this.horizontal?"h":"w",_43=this.container._splitterThickness[this.region];
238
var _44={left:"right",right:"left",top:"bottom",bottom:"top",leading:"trailing",trailing:"leading"},_45=this.container["_"+_44[this.region]];
239
var _46=dojo.contentBox(this.container.domNode)[dim]-(_45?dojo.marginBox(_45)[dim]:0)-20-_43*2;
240
return Math.min(this.child.maxSize,_46);
241
},_startDrag:function(e){
242
if(!this.cover){
243
this.cover=dojo.doc.createElement("div");
244
dojo.addClass(this.cover,"dijitSplitterCover");
245
dojo.place(this.cover,this.child.domNode,"after");
246
}
247
dojo.addClass(this.cover,"dijitSplitterCoverActive");
248
if(this.fake){
249
dojo.destroy(this.fake);
250
}
251
if(!(this._resize=this.live)){
252
(this.fake=this.domNode.cloneNode(true)).removeAttribute("id");
253
dojo.addClass(this.domNode,"dijitSplitterShadow");
254
dojo.place(this.fake,this.domNode,"after");
255
}
256
dojo.addClass(this.domNode,"dijitSplitterActive");
257
dojo.addClass(this.domNode,"dijitSplitter"+(this.horizontal?"H":"V")+"Active");
258
if(this.fake){
259
dojo.removeClass(this.fake,"dijitSplitterHover");
260
dojo.removeClass(this.fake,"dijitSplitter"+(this.horizontal?"H":"V")+"Hover");
261
}
262
var _47=this._factor,max=this._computeMaxSize(),min=this.child.minSize||20,_48=this.horizontal,_49=_48?"pageY":"pageX",_4a=e[_49],_4b=this.domNode.style,dim=_48?"h":"w",_4c=dojo.marginBox(this.child.domNode)[dim],_4d=this.region,_4e=parseInt(this.domNode.style[_4d],10),_4f=this._resize,_50=this.child.domNode,_51=dojo.hitch(this.container,this.container._layoutChildren),de=dojo.doc;
263
this._handlers=(this._handlers||[]).concat([dojo.connect(de,"onmousemove",this._drag=function(e,_52){
264
var _53=e[_49]-_4a,_54=_47*_53+_4c,_55=Math.max(Math.min(_54,max),min);
265
if(_4f||_52){
266
_51(_4d,_55);
267
}
268
_4b[_4d]=_47*_53+_4e+(_55-_54)+"px";
269
}),dojo.connect(de,"ondragstart",dojo.stopEvent),dojo.connect(dojo.body(),"onselectstart",dojo.stopEvent),dojo.connect(de,"onmouseup",this,"_stopDrag")]);
270
dojo.stopEvent(e);
271
},_onMouse:function(e){
272
var o=(e.type=="mouseover"||e.type=="mouseenter");
273
dojo.toggleClass(this.domNode,"dijitSplitterHover",o);
274
dojo.toggleClass(this.domNode,"dijitSplitter"+(this.horizontal?"H":"V")+"Hover",o);
275
},_stopDrag:function(e){
276
try{
277
if(this.cover){
278
dojo.removeClass(this.cover,"dijitSplitterCoverActive");
279
}
280
if(this.fake){
281
dojo.destroy(this.fake);
282
}
283
dojo.removeClass(this.domNode,"dijitSplitterActive");
284
dojo.removeClass(this.domNode,"dijitSplitter"+(this.horizontal?"H":"V")+"Active");
285
dojo.removeClass(this.domNode,"dijitSplitterShadow");
286
this._drag(e);
287
this._drag(e,true);
288
}
289
finally{
290
this._cleanupHandlers();
291
delete this._drag;
292
}
293
if(this.container.persist){
294
dojo.cookie(this._cookieName,this.child.domNode.style[this.horizontal?"height":"width"],{expires:365});
295
}
296
},_cleanupHandlers:function(){
297
dojo.forEach(this._handlers,dojo.disconnect);
298
delete this._handlers;
299
},_onKeyPress:function(e){
300
this._resize=true;
301
var _56=this.horizontal;
302
var _57=1;
303
var dk=dojo.keys;
304
switch(e.charOrCode){
305
case _56?dk.UP_ARROW:dk.LEFT_ARROW:
306
_57*=-1;
307
case _56?dk.DOWN_ARROW:dk.RIGHT_ARROW:
308
break;
309
default:
310
return;
311
}
312
var _58=dojo.marginBox(this.child.domNode)[_56?"h":"w"]+this._factor*_57;
313
this.container._layoutChildren(this.region,Math.max(Math.min(_58,this._computeMaxSize()),this.child.minSize));
314
dojo.stopEvent(e);
315
},destroy:function(){
316
this._cleanupHandlers();
317
delete this.child;
318
delete this.container;
319
delete this.cover;
320
delete this.fake;
321
this.inherited(arguments);
322
}});
323
dojo.declare("dijit.layout._Gutter",[dijit._Widget,dijit._Templated],{templateString:"<div class=\"dijitGutter\" waiRole=\"presentation\"></div>",postCreate:function(){
324
this.horizontal=/top|bottom/.test(this.region);
325
dojo.addClass(this.domNode,"dijitGutter"+(this.horizontal?"H":"V"));
326
}});
327
}