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