root / trunk / web / dojo / dijit / layout / SplitContainer.js @ 13
History | View | Annotate | Download (8.7 KB)
1 | 9 | andrej.cim | /*
|
---|---|---|---|
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.SplitContainer"]){ |
||
9 | dojo._hasResource["dijit.layout.SplitContainer"]=true; |
||
10 | dojo.provide("dijit.layout.SplitContainer");
|
||
11 | dojo.require("dojo.cookie");
|
||
12 | dojo.require("dijit.layout._LayoutWidget");
|
||
13 | dojo.declare("dijit.layout.SplitContainer",dijit.layout._LayoutWidget,{constructor:function(){ |
||
14 | dojo.deprecated("dijit.layout.SplitContainer is deprecated","use BorderContainer with splitter instead",2); |
||
15 | },activeSizing:false,sizerWidth:7,orientation:"horizontal",persist:true,baseClass:"dijitSplitContainer",postMixInProperties:function(){ |
||
16 | this.inherited("postMixInProperties",arguments); |
||
17 | this.isHorizontal=(this.orientation=="horizontal"); |
||
18 | },postCreate:function(){ |
||
19 | this.inherited(arguments); |
||
20 | this.sizers=[];
|
||
21 | if(dojo.isMozilla){
|
||
22 | this.domNode.style.overflow="-moz-scrollbars-none"; |
||
23 | } |
||
24 | if(typeof this.sizerWidth=="object"){ |
||
25 | try{
|
||
26 | this.sizerWidth=parseInt(this.sizerWidth.toString()); |
||
27 | } |
||
28 | catch(e){
|
||
29 | this.sizerWidth=7; |
||
30 | } |
||
31 | } |
||
32 | var _1=dojo.doc.createElement("div"); |
||
33 | this.virtualSizer=_1;
|
||
34 | _1.style.position="relative";
|
||
35 | _1.style.zIndex=10;
|
||
36 | _1.className=this.isHorizontal?"dijitSplitContainerVirtualSizerH":"dijitSplitContainerVirtualSizerV"; |
||
37 | this.domNode.appendChild(_1);
|
||
38 | dojo.setSelectable(_1,false);
|
||
39 | },destroy:function(){ |
||
40 | delete this.virtualSizer; |
||
41 | dojo.forEach(this._ownconnects,dojo.disconnect);
|
||
42 | this.inherited(arguments); |
||
43 | },startup:function(){ |
||
44 | if(this._started){ |
||
45 | return;
|
||
46 | } |
||
47 | dojo.forEach(this.getChildren(),function(_2,i,_3){ |
||
48 | this._setupChild(_2);
|
||
49 | if(i<_3.length-1){ |
||
50 | this._addSizer();
|
||
51 | } |
||
52 | },this);
|
||
53 | if(this.persist){ |
||
54 | this._restoreState();
|
||
55 | } |
||
56 | this.inherited(arguments); |
||
57 | },_setupChild:function(_4){ |
||
58 | this.inherited(arguments); |
||
59 | _4.domNode.style.position="absolute";
|
||
60 | dojo.addClass(_4.domNode,"dijitSplitPane");
|
||
61 | },_onSizerMouseDown:function(e){ |
||
62 | if(e.target.id){
|
||
63 | for(var i=0;i<this.sizers.length;i++){ |
||
64 | if(this.sizers[i].id==e.target.id){ |
||
65 | break;
|
||
66 | } |
||
67 | } |
||
68 | if(i<this.sizers.length){ |
||
69 | this.beginSizing(e,i);
|
||
70 | } |
||
71 | } |
||
72 | },_addSizer:function(_5){ |
||
73 | _5=_5===undefined?this.sizers.length:_5; |
||
74 | var _6=dojo.doc.createElement("div"); |
||
75 | _6.id=dijit.getUniqueId("dijit_layout_SplitterContainer_Splitter");
|
||
76 | this.sizers.splice(_5,0,_6); |
||
77 | this.domNode.appendChild(_6);
|
||
78 | _6.className=this.isHorizontal?"dijitSplitContainerSizerH":"dijitSplitContainerSizerV"; |
||
79 | var _7=dojo.doc.createElement("div"); |
||
80 | _7.className="thumb";
|
||
81 | _6.appendChild(_7); |
||
82 | this.connect(_6,"onmousedown","_onSizerMouseDown"); |
||
83 | dojo.setSelectable(_6,false);
|
||
84 | },removeChild:function(_8){ |
||
85 | if(this.sizers.length){ |
||
86 | var i=dojo.indexOf(this.getChildren(),_8); |
||
87 | if(i!=-1){ |
||
88 | if(i==this.sizers.length){ |
||
89 | i--; |
||
90 | } |
||
91 | dojo.destroy(this.sizers[i]);
|
||
92 | this.sizers.splice(i,1); |
||
93 | } |
||
94 | } |
||
95 | this.inherited(arguments); |
||
96 | if(this._started){ |
||
97 | this.layout();
|
||
98 | } |
||
99 | },addChild:function(_9,_a){ |
||
100 | this.inherited(arguments); |
||
101 | if(this._started){ |
||
102 | var _b=this.getChildren(); |
||
103 | if(_b.length>1){ |
||
104 | this._addSizer(_a);
|
||
105 | } |
||
106 | this.layout();
|
||
107 | } |
||
108 | },layout:function(){ |
||
109 | this.paneWidth=this._contentBox.w; |
||
110 | this.paneHeight=this._contentBox.h; |
||
111 | var _c=this.getChildren(); |
||
112 | if(!_c.length){
|
||
113 | return;
|
||
114 | } |
||
115 | var _d=this.isHorizontal?this.paneWidth:this.paneHeight; |
||
116 | if(_c.length>1){ |
||
117 | _d-=this.sizerWidth*(_c.length-1); |
||
118 | } |
||
119 | var _e=0; |
||
120 | dojo.forEach(_c,function(_f){
|
||
121 | _e+=_f.sizeShare; |
||
122 | }); |
||
123 | var _10=_d/_e;
|
||
124 | var _11=0; |
||
125 | dojo.forEach(_c.slice(0,_c.length-1),function(_12){ |
||
126 | var _13=Math.round(_10*_12.sizeShare);
|
||
127 | _12.sizeActual=_13; |
||
128 | _11+=_13; |
||
129 | }); |
||
130 | _c[_c.length-1].sizeActual=_d-_11;
|
||
131 | this._checkSizes();
|
||
132 | var pos=0; |
||
133 | var _14=_c[0].sizeActual; |
||
134 | this._movePanel(_c[0],pos,_14); |
||
135 | _c[0].position=pos;
|
||
136 | pos+=_14; |
||
137 | if(!this.sizers){ |
||
138 | return;
|
||
139 | } |
||
140 | dojo.some(_c.slice(1),function(_15,i){ |
||
141 | if(!this.sizers[i]){ |
||
142 | return true; |
||
143 | } |
||
144 | this._moveSlider(this.sizers[i],pos,this.sizerWidth); |
||
145 | this.sizers[i].position=pos;
|
||
146 | pos+=this.sizerWidth;
|
||
147 | _14=_15.sizeActual; |
||
148 | this._movePanel(_15,pos,_14);
|
||
149 | _15.position=pos; |
||
150 | pos+=_14; |
||
151 | },this);
|
||
152 | },_movePanel:function(_16,pos,_17){ |
||
153 | if(this.isHorizontal){ |
||
154 | _16.domNode.style.left=pos+"px";
|
||
155 | _16.domNode.style.top=0;
|
||
156 | var box={w:_17,h:this.paneHeight}; |
||
157 | if(_16.resize){
|
||
158 | _16.resize(box); |
||
159 | }else{
|
||
160 | dojo.marginBox(_16.domNode,box); |
||
161 | } |
||
162 | }else{
|
||
163 | _16.domNode.style.left=0;
|
||
164 | _16.domNode.style.top=pos+"px";
|
||
165 | var box={w:this.paneWidth,h:_17}; |
||
166 | if(_16.resize){
|
||
167 | _16.resize(box); |
||
168 | }else{
|
||
169 | dojo.marginBox(_16.domNode,box); |
||
170 | } |
||
171 | } |
||
172 | },_moveSlider:function(_18,pos,_19){ |
||
173 | if(this.isHorizontal){ |
||
174 | _18.style.left=pos+"px";
|
||
175 | _18.style.top=0;
|
||
176 | dojo.marginBox(_18,{w:_19,h:this.paneHeight}); |
||
177 | }else{
|
||
178 | _18.style.left=0;
|
||
179 | _18.style.top=pos+"px";
|
||
180 | dojo.marginBox(_18,{w:this.paneWidth,h:_19}); |
||
181 | } |
||
182 | },_growPane:function(_1a,_1b){ |
||
183 | if(_1a>0){ |
||
184 | if(_1b.sizeActual>_1b.sizeMin){
|
||
185 | if((_1b.sizeActual-_1b.sizeMin)>_1a){
|
||
186 | _1b.sizeActual=_1b.sizeActual-_1a; |
||
187 | _1a=0;
|
||
188 | }else{
|
||
189 | _1a-=_1b.sizeActual-_1b.sizeMin; |
||
190 | _1b.sizeActual=_1b.sizeMin; |
||
191 | } |
||
192 | } |
||
193 | } |
||
194 | return _1a;
|
||
195 | },_checkSizes:function(){ |
||
196 | var _1c=0; |
||
197 | var _1d=0; |
||
198 | var _1e=this.getChildren(); |
||
199 | dojo.forEach(_1e,function(_1f){
|
||
200 | _1d+=_1f.sizeActual; |
||
201 | _1c+=_1f.sizeMin; |
||
202 | }); |
||
203 | if(_1c<=_1d){
|
||
204 | var _20=0; |
||
205 | dojo.forEach(_1e,function(_21){
|
||
206 | if(_21.sizeActual<_21.sizeMin){
|
||
207 | _20+=_21.sizeMin-_21.sizeActual; |
||
208 | _21.sizeActual=_21.sizeMin; |
||
209 | } |
||
210 | }); |
||
211 | if(_20>0){ |
||
212 | var _22=this.isDraggingLeft?_1e.reverse():_1e; |
||
213 | dojo.forEach(_22,function(_23){
|
||
214 | _20=this._growPane(_20,_23);
|
||
215 | },this);
|
||
216 | } |
||
217 | }else{
|
||
218 | dojo.forEach(_1e,function(_24){
|
||
219 | _24.sizeActual=Math.round(_1d*(_24.sizeMin/_1c)); |
||
220 | }); |
||
221 | } |
||
222 | },beginSizing:function(e,i){ |
||
223 | var _25=this.getChildren(); |
||
224 | this.paneBefore=_25[i];
|
||
225 | this.paneAfter=_25[i+1]; |
||
226 | this.isSizing=true; |
||
227 | this.sizingSplitter=this.sizers[i]; |
||
228 | if(!this.cover){ |
||
229 | this.cover=dojo.create("div",{style:{position:"absolute",zIndex:5,top:0,left:0,width:"100%",height:"100%"}},this.domNode); |
||
230 | }else{
|
||
231 | this.cover.style.zIndex=5; |
||
232 | } |
||
233 | this.sizingSplitter.style.zIndex=6; |
||
234 | this.originPos=dojo.position(_25[0].domNode,true); |
||
235 | if(this.isHorizontal){ |
||
236 | var _26=e.layerX||e.offsetX||0; |
||
237 | var _27=e.pageX;
|
||
238 | this.originPos=this.originPos.x; |
||
239 | }else{
|
||
240 | var _26=e.layerY||e.offsetY||0; |
||
241 | var _27=e.pageY;
|
||
242 | this.originPos=this.originPos.y; |
||
243 | } |
||
244 | this.startPoint=this.lastPoint=_27; |
||
245 | this.screenToClientOffset=_27-_26;
|
||
246 | this.dragOffset=this.lastPoint-this.paneBefore.sizeActual-this.originPos-this.paneBefore.position; |
||
247 | if(!this.activeSizing){ |
||
248 | this._showSizingLine();
|
||
249 | } |
||
250 | this._ownconnects=[];
|
||
251 | this._ownconnects.push(dojo.connect(dojo.doc.documentElement,"onmousemove",this,"changeSizing")); |
||
252 | this._ownconnects.push(dojo.connect(dojo.doc.documentElement,"onmouseup",this,"endSizing")); |
||
253 | dojo.stopEvent(e); |
||
254 | },changeSizing:function(e){ |
||
255 | if(!this.isSizing){ |
||
256 | return;
|
||
257 | } |
||
258 | this.lastPoint=this.isHorizontal?e.pageX:e.pageY; |
||
259 | this.movePoint();
|
||
260 | if(this.activeSizing){ |
||
261 | this._updateSize();
|
||
262 | }else{
|
||
263 | this._moveSizingLine();
|
||
264 | } |
||
265 | dojo.stopEvent(e); |
||
266 | },endSizing:function(e){ |
||
267 | if(!this.isSizing){ |
||
268 | return;
|
||
269 | } |
||
270 | if(this.cover){ |
||
271 | this.cover.style.zIndex=-1; |
||
272 | } |
||
273 | if(!this.activeSizing){ |
||
274 | this._hideSizingLine();
|
||
275 | } |
||
276 | this._updateSize();
|
||
277 | this.isSizing=false; |
||
278 | if(this.persist){ |
||
279 | this._saveState(this); |
||
280 | } |
||
281 | dojo.forEach(this._ownconnects,dojo.disconnect);
|
||
282 | },movePoint:function(){ |
||
283 | var p=this.lastPoint-this.screenToClientOffset; |
||
284 | var a=p-this.dragOffset; |
||
285 | a=this.legaliseSplitPoint(a);
|
||
286 | p=a+this.dragOffset;
|
||
287 | this.lastPoint=p+this.screenToClientOffset; |
||
288 | },legaliseSplitPoint:function(a){ |
||
289 | a+=this.sizingSplitter.position;
|
||
290 | this.isDraggingLeft=!!(a>0); |
||
291 | if(!this.activeSizing){ |
||
292 | var min=this.paneBefore.position+this.paneBefore.sizeMin; |
||
293 | if(a<min){
|
||
294 | a=min; |
||
295 | } |
||
296 | var max=this.paneAfter.position+(this.paneAfter.sizeActual-(this.sizerWidth+this.paneAfter.sizeMin)); |
||
297 | if(a>max){
|
||
298 | a=max; |
||
299 | } |
||
300 | } |
||
301 | a-=this.sizingSplitter.position;
|
||
302 | this._checkSizes();
|
||
303 | return a;
|
||
304 | },_updateSize:function(){ |
||
305 | var pos=this.lastPoint-this.dragOffset-this.originPos; |
||
306 | var _28=this.paneBefore.position; |
||
307 | var _29=this.paneAfter.position+this.paneAfter.sizeActual; |
||
308 | this.paneBefore.sizeActual=pos-_28;
|
||
309 | this.paneAfter.position=pos+this.sizerWidth; |
||
310 | this.paneAfter.sizeActual=_29-this.paneAfter.position; |
||
311 | dojo.forEach(this.getChildren(),function(_2a){ |
||
312 | _2a.sizeShare=_2a.sizeActual; |
||
313 | }); |
||
314 | if(this._started){ |
||
315 | this.layout();
|
||
316 | } |
||
317 | },_showSizingLine:function(){ |
||
318 | this._moveSizingLine();
|
||
319 | dojo.marginBox(this.virtualSizer,this.isHorizontal?{w:this.sizerWidth,h:this.paneHeight}:{w:this.paneWidth,h:this.sizerWidth}); |
||
320 | this.virtualSizer.style.display="block"; |
||
321 | },_hideSizingLine:function(){ |
||
322 | this.virtualSizer.style.display="none"; |
||
323 | },_moveSizingLine:function(){ |
||
324 | var pos=(this.lastPoint-this.startPoint)+this.sizingSplitter.position; |
||
325 | dojo.style(this.virtualSizer,(this.isHorizontal?"left":"top"),pos+"px"); |
||
326 | },_getCookieName:function(i){ |
||
327 | return this.id+"_"+i; |
||
328 | },_restoreState:function(){ |
||
329 | dojo.forEach(this.getChildren(),function(_2b,i){ |
||
330 | var _2c=this._getCookieName(i); |
||
331 | var _2d=dojo.cookie(_2c);
|
||
332 | if(_2d){
|
||
333 | var pos=parseInt(_2d);
|
||
334 | if(typeof pos=="number"){ |
||
335 | _2b.sizeShare=pos; |
||
336 | } |
||
337 | } |
||
338 | },this);
|
||
339 | },_saveState:function(){ |
||
340 | if(!this.persist){ |
||
341 | return;
|
||
342 | } |
||
343 | dojo.forEach(this.getChildren(),function(_2e,i){ |
||
344 | dojo.cookie(this._getCookieName(i),_2e.sizeShare,{expires:365}); |
||
345 | },this);
|
||
346 | }}); |
||
347 | dojo.extend(dijit._Widget,{sizeMin:10,sizeShare:10}); |
||
348 | } |