root / trunk / web / dojo / dojox / layout / ExpandoPane.js @ 11
History | View | Annotate | Download (5.16 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["dojox.layout.ExpandoPane"]){ |
9 |
dojo._hasResource["dojox.layout.ExpandoPane"]=true; |
10 |
dojo.provide("dojox.layout.ExpandoPane");
|
11 |
dojo.experimental("dojox.layout.ExpandoPane");
|
12 |
dojo.require("dijit.layout.ContentPane");
|
13 |
dojo.require("dijit._Templated");
|
14 |
dojo.require("dijit._Contained");
|
15 |
dojo.declare("dojox.layout.ExpandoPane",[dijit.layout.ContentPane,dijit._Templated,dijit._Contained,dijit._Container],{templateString:dojo.cache("dojox.layout","resources/ExpandoPane.html","<div class=\"dojoxExpandoPane\">\n\t<div dojoAttachPoint=\"titleWrapper\" class=\"dojoxExpandoTitle\">\n\t\t<div class=\"dojoxExpandoIcon\" dojoAttachPoint=\"iconNode\" dojoAttachEvent=\"onclick:toggle\"><span class=\"a11yNode\">X</span></div>\t\t\t\n\t\t<span class=\"dojoxExpandoTitleNode\" dojoAttachPoint=\"titleNode\">${title}</span>\n\t</div>\n\t<div class=\"dojoxExpandoWrapper\" dojoAttachPoint=\"cwrapper\" dojoAttachEvent=\"ondblclick:_trap\">\n\t\t<div class=\"dojoxExpandoContent\" dojoAttachPoint=\"containerNode\"></div>\n\t</div>\n</div>\n"),easeOut:"dojo._DefaultEasing",easeIn:"dojo._DefaultEasing",duration:420,startExpanded:true,previewOpacity:0.75,previewOnDblClick:false,baseClass:"dijitExpandoPane",postCreate:function(){ |
16 |
this.inherited(arguments); |
17 |
this._animConnects=[];
|
18 |
this._isHorizontal=true; |
19 |
if(dojo.isString(this.easeOut)){ |
20 |
this.easeOut=dojo.getObject(this.easeOut); |
21 |
} |
22 |
if(dojo.isString(this.easeIn)){ |
23 |
this.easeIn=dojo.getObject(this.easeIn); |
24 |
} |
25 |
var _1="",_2=!this.isLeftToRight(); |
26 |
if(this.region){ |
27 |
switch(this.region){ |
28 |
case "trailing": |
29 |
case "right": |
30 |
_1=_2?"Left":"Right"; |
31 |
break;
|
32 |
case "leading": |
33 |
case "left": |
34 |
_1=_2?"Right":"Left"; |
35 |
break;
|
36 |
case "top": |
37 |
_1="Top";
|
38 |
break;
|
39 |
case "bottom": |
40 |
_1="Bottom";
|
41 |
break;
|
42 |
} |
43 |
dojo.addClass(this.domNode,"dojoxExpando"+_1); |
44 |
dojo.addClass(this.iconNode,"dojoxExpandoIcon"+_1); |
45 |
this._isHorizontal=/top|bottom/.test(this.region); |
46 |
} |
47 |
dojo.style(this.domNode,{overflow:"hidden",padding:0}); |
48 |
this.connect(this.domNode,"ondblclick",this.previewOnDblClick?"preview":"toggle"); |
49 |
if(this.previewOnDblClick){ |
50 |
this.connect(this.getParent(),"_layoutChildren",dojo.hitch(this,function(){ |
51 |
this._isonlypreview=false; |
52 |
})); |
53 |
} |
54 |
},_startupSizes:function(){ |
55 |
this._container=this.getParent(); |
56 |
this._closedSize=this._titleHeight=dojo.marginBox(this.titleWrapper).h; |
57 |
if(this.splitter){ |
58 |
var _3=this.id; |
59 |
dijit.registry.filter(function(w){
|
60 |
return w&&w.child&&w.child.id==_3;
|
61 |
}).forEach(dojo.hitch(this,function(w){ |
62 |
this.connect(w,"_stopDrag","_afterResize"); |
63 |
})); |
64 |
} |
65 |
this._currentSize=dojo.contentBox(this.domNode); |
66 |
this._showSize=this._currentSize[(this._isHorizontal?"h":"w")]; |
67 |
this._setupAnims();
|
68 |
if(this.startExpanded){ |
69 |
this._showing=true; |
70 |
}else{
|
71 |
this._showing=false; |
72 |
this._hideWrapper();
|
73 |
this._hideAnim.gotoPercent(99,true); |
74 |
} |
75 |
this._hasSizes=true; |
76 |
},_afterResize:function(e){ |
77 |
var _4=this._currentSize; |
78 |
this._currentSize=dojo.marginBox(this.domNode); |
79 |
var n=this._currentSize[(this._isHorizontal?"h":"w")]; |
80 |
if(n>this._titleHeight){ |
81 |
if(!this._showing){ |
82 |
this._showing=!this._showing; |
83 |
this._showEnd();
|
84 |
} |
85 |
this._showSize=n;
|
86 |
this._setupAnims();
|
87 |
}else{
|
88 |
this._showSize=_4[(this._isHorizontal?"h":"w")]; |
89 |
this._showing=false; |
90 |
this._hideWrapper();
|
91 |
this._hideAnim.gotoPercent(89,true); |
92 |
} |
93 |
},_setupAnims:function(){ |
94 |
dojo.forEach(this._animConnects,dojo.disconnect);
|
95 |
var _5={node:this.domNode,duration:this.duration},_6=this._isHorizontal,_7={},_8={},_9=_6?"height":"width"; |
96 |
_7[_9]={end:this._showSize}; |
97 |
_8[_9]={end:this._closedSize}; |
98 |
this._showAnim=dojo.animateProperty(dojo.mixin(_5,{easing:this.easeIn,properties:_7})); |
99 |
this._hideAnim=dojo.animateProperty(dojo.mixin(_5,{easing:this.easeOut,properties:_8})); |
100 |
this._animConnects=[dojo.connect(this._showAnim,"onEnd",this,"_showEnd"),dojo.connect(this._hideAnim,"onEnd",this,"_hideEnd")]; |
101 |
},preview:function(){ |
102 |
if(!this._showing){ |
103 |
this._isonlypreview=!this._isonlypreview; |
104 |
} |
105 |
this.toggle();
|
106 |
},toggle:function(){ |
107 |
if(this._showing){ |
108 |
this._hideWrapper();
|
109 |
this._showAnim&&this._showAnim.stop(); |
110 |
this._hideAnim.play();
|
111 |
}else{
|
112 |
this._hideAnim&&this._hideAnim.stop(); |
113 |
this._showAnim.play();
|
114 |
} |
115 |
this._showing=!this._showing; |
116 |
},_hideWrapper:function(){ |
117 |
dojo.addClass(this.domNode,"dojoxExpandoClosed"); |
118 |
dojo.style(this.cwrapper,{visibility:"hidden",opacity:"0",overflow:"hidden"}); |
119 |
},_showEnd:function(){ |
120 |
dojo.style(this.cwrapper,{opacity:0,visibility:"visible"}); |
121 |
dojo.anim(this.cwrapper,{opacity:this._isonlypreview?this.previewOpacity:1},227); |
122 |
dojo.removeClass(this.domNode,"dojoxExpandoClosed"); |
123 |
if(!this._isonlypreview){ |
124 |
setTimeout(dojo.hitch(this._container,"layout"),15); |
125 |
}else{
|
126 |
this._previewShowing=true; |
127 |
this.resize();
|
128 |
} |
129 |
},_hideEnd:function(){ |
130 |
if(!this._isonlypreview){ |
131 |
setTimeout(dojo.hitch(this._container,"layout"),25); |
132 |
}else{
|
133 |
this._previewShowing=false; |
134 |
} |
135 |
this._isonlypreview=false; |
136 |
},resize:function(_a,_b){ |
137 |
if(!this._hasSizes){ |
138 |
this._startupSizes(_a);
|
139 |
} |
140 |
this._contentBox={w:_a&&"w" in _a?_a.w:_b.w,h:(_a&&"h" in _a?_a.h:_b.h)-this._titleHeight}; |
141 |
dojo.style(this.containerNode,"height",this._contentBox.h+"px"); |
142 |
if(_a){
|
143 |
dojo.marginBox(this.domNode,_a);
|
144 |
} |
145 |
this._layoutChildren();
|
146 |
},_trap:function(e){ |
147 |
dojo.stopEvent(e); |
148 |
}}); |
149 |
} |