diff options
Diffstat (limited to 'includes/js/dojox/layout/ExpandoPane.js')
| -rw-r--r-- | includes/js/dojox/layout/ExpandoPane.js | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/includes/js/dojox/layout/ExpandoPane.js b/includes/js/dojox/layout/ExpandoPane.js new file mode 100644 index 0000000..efa4b68 --- /dev/null +++ b/includes/js/dojox/layout/ExpandoPane.js @@ -0,0 +1,208 @@ +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:"<div class=\"dojoxExpandoPane\" dojoAttachEvent=\"ondblclick:toggle\" >\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", + + _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); + } + +}); + +} |