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, 271 insertions, 0 deletions

diff --git a/includes/js/dojox/layout/ResizeHandle.js b/includes/js/dojox/layout/ResizeHandle.js
new file mode 100644
index 0000000..0441c98
--- /dev/null
+++ b/includes/js/dojox/layout/ResizeHandle.js
@@ -0,0 +1,271 @@
+if(!dojo._hasResource["dojox.layout.ResizeHandle"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.layout.ResizeHandle"] = true;
+dojo.provide("dojox.layout.ResizeHandle");
+dojo.experimental("dojox.layout.ResizeHandle"); 
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated"); 
+dojo.require("dojo.fx"); 
+
+dojo.declare("dojox.layout.ResizeHandle",
+	[dijit._Widget, dijit._Templated],
+	{
+	// summary: A dragable handle used to resize an attached node.
+	// description:
+	//	The handle on the bottom-right corner of FloatingPane or other widgets that allows
+	//	the widget to be resized.
+	//	Typically not used directly.
+	//
+	// targetId: String
+	//	id of the Widget OR DomNode that I will size
+	targetId: '',
+
+	// targetContainer: DomNode
+	//	over-ride targetId and attch this handle directly to a reference of a DomNode
+	targetContainer: null, 
+
+	// resizeAxis: String
+	//	one of: x|y|xy limit resizing to a single axis, default to xy ... 
+	resizeAxis: "xy",
+
+	// activeResize: Boolean
+	// 	if true, node will size realtime with mouse movement, 
+	//	if false, node will create virtual node, and only resize target on mouseUp
+	activeResize: false,
+	
+	// activeResizeClass: String
+	//	css class applied to virtual resize node. 
+	activeResizeClass: 'dojoxResizeHandleClone',
+
+	// animateSizing: Boolean
+	//	only applicable if activeResize = false. onMouseup, animate the node to the
+	//	new size
+	animateSizing: true,
+	
+	// animateMethod: String
+	// 	one of "chain" or "combine" ... visual effect only. combine will "scale" 
+	// 	node to size, "chain" will alter width, then height
+	animateMethod: 'chain',
+
+	// animateDuration: Integer
+	//	time in MS to run sizing animation. if animateMethod="chain", total animation 
+	//	playtime is 2*animateDuration
+	animateDuration: 225,
+
+	// minHeight: Integer
+	//	smallest height in px resized node can be
+	minHeight: 100,
+
+	// minWidth: Integer
+	//	smallest width in px resize node can be
+	minWidth: 100,
+
+	templateString: '<div dojoAttachPoint="resizeHandle" class="dojoxResizeHandle"><div></div></div>',
+
+	postCreate: function(){
+		// summary: setup our one major listener upon creation
+		this.connect(this.resizeHandle, "onmousedown", "_beginSizing");
+		if(!this.activeResize){ 
+			// there shall be only a single resize rubberbox that at the top
+			// level so that we can overlay it on anything whenever the user
+			// resizes something. Since there is only one mouse pointer he
+			// can't at once resize multiple things interactively.
+			this._resizeHelper = dijit.byId('dojoxGlobalResizeHelper');
+
+			if (!this._resizeHelper){
+				var tmpNode = document.createElement('div');
+				tmpNode.style.display = "none";
+				dojo.body().appendChild(tmpNode);
+				dojo.addClass(tmpNode,this.activeResizeClass);
+				this._resizeHelper = new dojox.layout._ResizeHelper({ 
+						id: 'dojoxGlobalResizeHelper'},tmpNode);
+				this._resizeHelper.startup();
+			}
+		}else{ this.animateSizing = false; } 	
+
+		if (!this.minSize) { 
+			this.minSize = { w: this.minWidth, h: this.minHeight };
+		}
+		// should we modify the css for the cursor hover to n-resize nw-resize and w-resize?
+		this._resizeX = this._resizeY = false; 
+		switch (this.resizeAxis.toLowerCase()) {
+		case "xy" : 
+			this._resizeX = this._resizeY = true; 
+			// FIXME: need logic to determine NW or NE class to see
+			// based on which [todo] corner is clicked
+			dojo.addClass(this.resizeHandle,"dojoxResizeNW"); 
+			break; 
+		case "x" : 
+			this._resizeX = true; 
+			dojo.addClass(this.resizeHandle,"dojoxResizeW");
+			break;
+		case "y" : 
+			this._resizeY = true; 
+			dojo.addClass(this.resizeHandle,"dojoxResizeN");
+			break;
+		}
+	},
+
+	_beginSizing: function(/*Event*/ e){
+		// summary: setup movement listeners and calculate initial size
+		
+		if (this._isSizing){ return false; }
+
+		this.targetWidget = dijit.byId(this.targetId);
+
+		this.targetDomNode = this.targetWidget ? this.targetWidget.domNode : dojo.byId(this.targetId);
+		if (this.targetContainer) { this.targetDomNode = this.targetContainer; } 
+		if (!this.targetDomNode){ return false; }
+
+		if (!this.activeResize) {
+			var c = dojo.coords(this.targetDomNode, true);
+			this._resizeHelper.resize({l: c.x, t: c.y, w: c.w, h: c.h});
+			this._resizeHelper.show();
+		}
+
+		this._isSizing = true;
+		this.startPoint  = {'x':e.clientX, 'y':e.clientY};
+
+		// FIXME: this is funky: marginBox adds height, contentBox ignores padding (expected, but foo!)
+		var mb = (this.targetWidget) ? dojo.marginBox(this.targetDomNode) : dojo.contentBox(this.targetDomNode);  
+		this.startSize  = { 'w':mb.w, 'h':mb.h };
+
+		this._pconnects = []; 
+		this._pconnects.push(dojo.connect(document,"onmousemove",this,"_updateSizing")); 
+		this._pconnects.push(dojo.connect(document,"onmouseup", this, "_endSizing"));
+
+		e.preventDefault();
+	},
+
+	_updateSizing: function(/*Event*/ e){
+		// summary: called when moving the ResizeHandle ... determines 
+		//	new size based on settings/position and sets styles.
+
+		if(this.activeResize){
+			this._changeSizing(e);
+		}else{
+			var tmp = this._getNewCoords(e);	
+			if(tmp === false){ return; }
+			this._resizeHelper.resize(tmp);
+		}
+		e.preventDefault();
+	},
+
+	_getNewCoords: function(/* Event */ e){
+		
+		// On IE, if you move the mouse above/to the left of the object being resized,
+		// sometimes clientX/Y aren't set, apparently.  Just ignore the event.
+		try{
+			if(!e.clientX  || !e.clientY){ return false; }
+		}catch(e){
+			// sometimes you get an exception accessing above fields...
+			return false;
+		}
+		this._activeResizeLastEvent = e; 
+
+		var dx = this.startPoint.x - e.clientX;
+		var dy = this.startPoint.y - e.clientY;
+		
+		var newW = (this._resizeX) ? this.startSize.w - dx : this.startSize.w;
+		var newH = (this._resizeY) ? this.startSize.h - dy : this.startSize.h;
+
+		// minimum size check
+		if(this.minSize){
+			//var mb = dojo.marginBox(this.targetDomNode);
+			if(newW < this.minSize.w){
+				newW = this.minSize.w;
+			}
+			if(newH < this.minSize.h){
+				newH = this.minSize.h;
+			}
+		}
+		return {w:newW, h:newH};  // Object
+	},
+	
+	_changeSizing: function(/*Event*/ e){
+		// summary: apply sizing information based on information in (e) to attached node
+		var tmp = this._getNewCoords(e);
+		if(tmp===false){ return; }
+
+		if(this.targetWidget && typeof this.targetWidget.resize == "function"){ 
+			this.targetWidget.resize(tmp);
+		}else{
+			if(this.animateSizing){
+				var anim = dojo.fx[this.animateMethod]([
+					dojo.animateProperty({
+						node: this.targetDomNode,
+						properties: { 
+							width: { start: this.startSize.w, end: tmp.w, unit:'px' } 
+						},	
+						duration: this.animateDuration
+					}),
+					dojo.animateProperty({
+						node: this.targetDomNode,
+						properties: { 
+							height: { start: this.startSize.h, end: tmp.h, unit:'px' }
+						},
+						duration: this.animateDuration
+					})
+				]);
+				anim.play();
+			}else{
+				dojo.style(this.targetDomNode,"width",tmp.w+"px"); 
+				dojo.style(this.targetDomNode,"height",tmp.h+"px");
+			}
+		}	
+	},
+
+	_endSizing: function(/*Event*/ e){
+		// summary: disconnect listenrs and cleanup sizing
+		dojo.forEach(this._pconnects,dojo.disconnect);
+		if(!this.activeResize){
+			this._resizeHelper.hide();
+			this._changeSizing(e);
+		}
+		this._isSizing = false;
+		this.onResize(e);
+	},
+	
+	onResize: function(e){
+		// summary: Stub fired when sizing is done, for things like Grid
+	}
+	
+});
+
+dojo.declare("dojox.layout._ResizeHelper",
+	dijit._Widget,
+	{
+	// summary: A global private resize helper shared between any resizeHandle with activeSizing='false;
+	
+	startup: function(){
+		if(this._started){ return; }	
+		this.inherited(arguments);
+	},
+
+	show: function(){
+		// summary: show helper to start resizing
+		dojo.fadeIn({ node: this.domNode, duration:120, 
+			beforeBegin: dojo.hitch(this,function(){
+				this.domNode.style.display=''; 
+			})
+		}).play();
+	},
+
+	hide: function(){
+		// summary: hide helper after resizing is complete
+		dojo.fadeOut({ node:this.domNode, duration:250,
+			onEnd: dojo.hitch(this,function(){
+				this.domNode.style.display="none";
+			})
+		}).play();
+	},
+	
+	resize: function(/* Object */dim){
+		// summary: size the widget and place accordingly
+		
+		// FIXME: this is off when padding present
+		dojo.marginBox(this.domNode, dim);
+	}
+});
+
+}