root / trunk / web / dojo / dijit / layout / BorderContainer.js @ 11
History | View | Annotate | Download (10.8 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.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 | } |