if(!dojo._hasResource["dojox.layout.ExpandoPane"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. dojo._hasResource["dojox.layout.ExpandoPane"] = true; dojo.provide("dojox.layout.ExpandoPane"); dojo.experimental("dojox.layout.ExpandoPane"); // just to show it can be done? dojo.require("dijit.layout.ContentPane"); dojo.require("dijit._Templated"); dojo.require("dijit._Container"); dojo.declare("dojox.layout.ExpandoPane", [dijit.layout.ContentPane, dijit._Templated, dijit._Contained], { // summary: An experimental expando-pane for dijit.layout.BorderContainer // // description: // Works just like a ContentPane inside of a borderContainer. Will expand/collapse on // command, and supports having Layout Children as direct descendants // via a custom "attachParent" attribute on the child. maxHeight:"", maxWidth:"", splitter:"", tamplateString:null, templateString:"
\n\t
\n\t\t
X
\t\t\t\n\t\t${title}\n\t
\n\t
\n\t\t
\n\t
\n
\n", _showing:true, _titleHeight: 28, // FIXME: calculate // easeOut: String|Function // easing function used to hide pane easeOut:"dojo._DefaultEasing", // easeIn: String|Function // easing function use to show pane easeIn:"dojo._DefaultEasing", // duration: Integer // duration to run show/hide animations duration:420, postCreate:function(){ this.inherited(arguments); this._animConnects = []; this._isHorizontal = true; this._container = this.getParent(); this._closedSize = this._titleHeight = dojo.marginBox/*_getBorderBox*/(this.titleWrapper).h; if(typeof this.easeOut == "string"){ this.easeOut = dojo.getObject(this.easeOut); } if(typeof this.easeIn == "string"){ this.easeIn = dojo.getObject(this.easeIn); } var thisClass = ""; if(this.region){ // FIXME: add suport for alternate region types? switch(this.region){ case "right" : thisClass = "Right"; break; case "left" : thisClass = "Left"; break; case "top" : thisClass = "Top"; break; case "bottom" : thisClass = "Bottom"; break; } dojo.addClass(this.domNode,"dojoxExpando"+thisClass); this._isHorizontal = /top|bottom/.test(this.region); } dojo.style(this.domNode,"overflow","hidden"); }, startup: function(){ this.inherited(arguments); if(this.splitter){ // find our splitter and tie into it's drag logic var myid = this.id; dijit.registry.filter(function(w){ return w && w.child && w.child.id == myid; }).forEach(dojo.hitch(this,function(w){ this.connect(w,"_stopDrag","_afterResize"); })); } this._currentSize = dojo.marginBox(this.domNode); this._showSize = this._currentSize[(this._isHorizontal ? "h" : "w")]; this._setupAnims(); }, _afterResize: function(e){ var tmp = this._currentSize; this._currentSize = dojo.marginBox(this.domNode); var n = this._currentSize[(this._isHorizontal ? "h" : "w")] if(n> this._titleHeight){ if(!this._showing){ console.log('done being dragged:',e); this._showing = !this._showing; this._showEnd(); } this._showSize = n; this._setupAnims(); }else{ this._showSize = tmp[(this._isHorizontal ? "h" : "w")]; this._showing = false; this._hideWrapper(); this._hideAnim.gotoPercent(89,true); } }, _setupAnims:function(){ // summary: create the show and hide animations dojo.forEach(this._animConnects,dojo.disconnect); var _common = { node:this.domNode, duration:this.duration }; var isHorizontal = this._isHorizontal; var showProps = {}; var hideProps = {}; var dimension = isHorizontal ? "height" : "width"; showProps[dimension] = { end: this._showSize, unit:"px" }; hideProps[dimension] = { end: this._closedSize, unit:"px" }; this._showAnim = dojo.animateProperty(dojo.mixin(_common,{ easing:this.easeIn, properties: showProps })); this._hideAnim = dojo.animateProperty(dojo.mixin(_common,{ easing:this.easeOut, properties: hideProps })); this._animConnects = [ dojo.connect(this._showAnim,"onEnd",this,"_showEnd"), dojo.connect(this._hideAnim,"onEnd",this,"_hideEnd") ]; }, toggle:function(e){ // summary: toggle this pane's visibility if(this._showing){ this._hideWrapper(); if(this._showAnim && this._showAnim.stop()){} this._hideAnim.play(); }else{ if(this._hideAnim && this._hideAnim.stop()){} this._showAnim.play(); } this._showing = !this._showing; }, _hideWrapper:function(){ dojo.style(this.cwrapper,{ "visibility":"hidden", "opacity":"0", "overflow":"hidden" }); }, _showEnd: function(){ // summary: common animation onEnd code dojo.style(this.cwrapper,{ "opacity":"0", "visibility":"visible" }); dojo.fadeIn({ node:this.cwrapper, duration:227 }).play(1); dojo.removeClass(this.domNode,"dojoxExpandoClosed"); setTimeout(dojo.hitch(this._container, "layout"), 15); }, _hideEnd: function(){ dojo.addClass(this.domNode,"dojoxExpandoClosed"); setTimeout(dojo.hitch(this._container, "layout"), 15); }, resize: function(){ // summary: we aren't a layout widget, but need to act like one: var size = dojo.marginBox(this.domNode); // FIXME: do i even need to do this query/forEach? why not just set the containerHeight always dojo.query("[attachParent]",this.domNode).forEach(function(n){ if(dijit.byNode(n)){ var h = size.h - this._titleHeight; dojo.style(this.containerNode,"height", h +"px"); } },this); this.inherited(arguments); }, _trap: function(e){ dojo.stopEvent(e); } }); }