New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f

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);
+	}
+
+});
+
+}