root / trunk / web / dojo / dijit / layout / BorderContainer.js @ 9
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 |
} |