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

diff --git a/includes/js/dojox/fx/_base.js b/includes/js/dojox/fx/_base.js
new file mode 100644
index 0000000..61d23a7
--- /dev/null
+++ b/includes/js/dojox/fx/_base.js
@@ -0,0 +1,240 @@
+if(!dojo._hasResource["dojox.fx._base"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.fx._base"] = true;
+dojo.provide("dojox.fx._base");
+// summary: add-on Animations to dojo.fx
+
+dojo.require("dojo.fx"); 
+
+dojox.fx.sizeTo = function(/* Object */args){
+	// summary: Create an animation that will size a node
+	// description:
+	//	Returns an animation that will size "node" 
+	//	defined in args Object about it's center to
+	//	a width and height defined by (args.width, args.height), 
+	//	supporting an optional method: chain||combine mixin
+	//	(defaults to chain).	
+	//
+	//	- works best on absolutely or relatively positioned elements? 
+	//	
+	// example:
+	// |	// size #myNode to 400px x 200px over 1 second
+	// |	dojo.fx.sizeTo({ node:'myNode',
+	// |		duration: 1000,
+	// |		width: 400,
+	// |		height: 200,
+	// |		method: "chain"
+	// |	}).play();
+	//
+	var node = (args.node = dojo.byId(args.node));
+
+	var method = args.method || "chain"; 
+	if(!args.duration){ args.duration = 500; } // default duration needed
+	if (method=="chain"){ args.duration = Math.floor(args.duration/2); } 
+	
+	var top, newTop, left, newLeft, width, height = null;
+
+	var init = (function(n){
+		return function(){
+			var cs = dojo.getComputedStyle(n);
+			var pos = cs.position;
+			top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0);
+			left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0);
+			width = parseInt(cs.width);
+			height = parseInt(cs.height);
+
+			newLeft = left - Math.floor((args.width - width)/2); 
+			newTop = top - Math.floor((args.height - height)/2); 
+
+			if(pos != 'absolute' && pos != 'relative'){
+				var ret = dojo.coords(n, true);
+				top = ret.y;
+				left = ret.x;
+				n.style.position="absolute";
+				n.style.top=top+"px";
+				n.style.left=left+"px";
+			}
+		}
+	})(node);
+	init(); 
+
+	var anim1 = dojo.animateProperty(dojo.mixin({
+		properties: {
+			height: { start: height, end: args.height || 0, unit:"px" },
+			top: { start: top, end: newTop }
+		}
+	}, args));
+	var anim2 = dojo.animateProperty(dojo.mixin({
+		properties: {
+			width: { start: width, end: args.width || 0, unit:"px" },
+			left: { start: left, end: newLeft }
+		}
+	}, args));
+
+	var anim = dojo.fx[((args.method == "combine") ? "combine" : "chain")]([anim1,anim2]);
+	dojo.connect(anim, "beforeBegin", anim, init);
+	return anim; // dojo._Animation
+};
+
+dojox.fx.slideBy = function(/* Object */args){
+	// summary: Returns an animation to slide a node by a defined offset.
+	//
+	// description:
+	//	Returns an animation that will slide a node (args.node) from it's
+	//	current position to it's current posision plus the numbers defined
+	//	in args.top and args.left. standard dojo.fx mixin's apply. 
+	//	
+	// example:
+	// |	// slide domNode 50px down, and 22px left
+	// |	dojox.fx.slideBy({ 
+	// |		node: domNode, duration:400, 
+	// |		top: 50, left: -22 
+	// |	}).play();
+
+	var node = (args.node = dojo.byId(args.node));	
+	var top = null; var left = null;
+
+	var init = (function(n){
+		return function(){
+			var cs = dojo.getComputedStyle(n);
+			var pos = cs.position;
+			top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0);
+			left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0);
+			if(pos != 'absolute' && pos != 'relative'){
+				var ret = dojo.coords(n, true);
+				top = ret.y;
+				left = ret.x;
+				n.style.position="absolute";
+				n.style.top=top+"px";
+				n.style.left=left+"px";
+			}
+		}
+	})(node);
+	init();
+	var _anim = dojo.animateProperty(dojo.mixin({
+		properties: {
+			// FIXME: is there a way to update the _Line after creation?
+			// null start values allow chaining to work, animateProperty will
+			// determine them for us (except in ie6? -- ugh)
+			top: {  /* start: top, */ end: top+(args.top||0) },
+			left: { /* start: left,*/ end: left+(args.left||0) }
+		}
+	}, args));
+	dojo.connect(_anim,"beforeBegin",_anim,init);
+	return _anim; // dojo._Animation
+};
+
+dojox.fx.crossFade = function(/* Object */args){
+	// summary: Returns an animation cross fading two element simultaneously
+	// 
+	// args:
+	//	args.nodes: Array - two element array of domNodes, or id's
+	//
+	// all other standard animation args mixins apply. args.node ignored.
+	//
+	if(dojo.isArray(args.nodes)){
+		// simple check for which node is visible, maybe too simple?
+		var node1 = args.nodes[0] = dojo.byId(args.nodes[0]);
+		var op1 = dojo.style(node1,"opacity");
+		var node2 = args.nodes[1] = dojo.byId(args.nodes[1]);
+		var op2 = dojo.style(node2, "opacity");
+
+		var _anim = dojo.fx.combine([
+			dojo[((op1==0)?"fadeIn":"fadeOut")](dojo.mixin({
+				node: node1
+			},args)),
+			dojo[((op1==0)?"fadeOut":"fadeIn")](dojo.mixin({
+				node: node2
+			},args))
+		]);
+		return _anim; // dojo._Animation
+	}else{
+		// improper syntax in args, needs Array
+		return false; // Boolean
+	}
+};
+
+dojox.fx.highlight = function(/*Object*/ args){
+	// summary: Highlight a node
+	// description:
+	//	Returns an animation that sets the node background to args.color
+	//	then gradually fades back the original node background color
+	//	
+	// example:
+	//	dojox.fx.highlight({ node:"foo" }).play(); 
+
+	var node = (args.node = dojo.byId(args.node));
+
+	args.duration = args.duration || 400;
+	// Assign default color light yellow
+	var startColor = args.color || '#ffff99';
+	var endColor = dojo.style(node, "backgroundColor");
+	var wasTransparent = (endColor == "transparent" || endColor == "rgba(0, 0, 0, 0)");
+
+	var anim = dojo.animateProperty(dojo.mixin({
+		properties: {
+			backgroundColor: { start: startColor, end: endColor }
+		}
+	}, args));
+
+	dojo.connect(anim, "onEnd", anim, function(){
+		if(wasTransparent){
+			node.style.backgroundColor = "transparent";
+		}
+	});
+
+	return anim; // dojo._Animation
+};
+
+ 
+dojox.fx.wipeTo = function(/*Object*/ args){
+	// summary: Animate a node wiping to a specific width or height
+	//	
+	// description:
+	//		Returns an animation that will expand the
+	//		node defined in 'args' object from it's current to
+	//		the height or width value given by the args object.
+	//
+	//		default to height:, so leave height null and specify width:
+	//		to wipeTo a width. note: this may be deprecated by a 
+	//
+	//      Note that the final value should not include
+	//      units and should be an integer.  Thus a valid args object
+	//      would look something like this:
+	//
+	//      dojox.fx.wipeTo({node: "nodeId", height: 200}).play();
+	//
+	//		Node must have no margin/border/padding, so put another
+	//		node inside your target node for additional styling.
+
+	args.node = dojo.byId(args.node);
+	var node = args.node, s = node.style;
+
+	var dir = (args.width ? "width" : "height");
+	var endVal = args[dir];
+
+	var props = {};
+	props[dir] = {
+		// wrapped in functions so we wait till the last second to query (in case value has changed)
+		start: function(){
+			// start at current [computed] height, but use 1px rather than 0
+			// because 0 causes IE to display the whole panel
+			s.overflow="hidden";
+			if(s.visibility=="hidden"||s.display=="none"){
+				s[dir] = "1px";
+				s.display="";
+				s.visibility="";
+				return 1;
+			}else{
+				var now = dojo.style(node,dir);
+				return Math.max(now, 1);
+			}
+		},
+		end: endVal,
+		unit: "px"
+	};
+
+	var anim = dojo.animateProperty(dojo.mixin({ properties: props },args));
+	return anim; // dojo._Animation
+}
+
+}