root / trunk / web / dojo / dojox / layout / ExpandoPane.js @ 13
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 | } |