root / trunk / web / dojo / dojox / layout / ExpandoPane.js @ 9
History | View | Annotate | Download (5.16 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["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 | } |