Initial commit of intern.ccwn.org contentsHEADmaster

4 files changed, 637 insertions, 0 deletions

diff --git a/js/dojo-1.7.2/dojox/css3/README b/js/dojo-1.7.2/dojox/css3/README
new file mode 100644
index 0000000..fe72cd3
--- /dev/null
+++ b/js/dojo-1.7.2/dojox/css3/README
@@ -0,0 +1,37 @@
+-------------------------------------------------------------------------------
+dojox.css3
+-------------------------------------------------------------------------------
+Version: 0.1
+Release date: 03/06/2010
+-------------------------------------------------------------------------------
+Project state: beta
+-------------------------------------------------------------------------------
+Project author
+	Nicola Rizzo
+-------------------------------------------------------------------------------
+Project description
+Common animations (flip, bounce, puff, rotate, expand, shrink)
+using the CSS3 Transform property
+
+-------------------------------------------------------------------------------
+Dependencies:
+
+Dojo core (package loader, connect, dom-style, fx, html)
+dojox/html/ext-dojo/style to handle transform and transform origin
+dojox/fx/ext-dojo/complex to handle animations with multiple values
+
+-------------------------------------------------------------------------------
+Documentation:
+
+See the Dojo API tool (http://dojotoolkit.org/api)
+
+-------------------------------------------------------------------------------
+Installation instructions
+
+Grab the following from the Dojo SVN Repository:
+http://svn.dojotoolkit.org/src/dojo/dojox/trunk/css3/fx.js
+
+Install into the following directory structure:
+/dojox/css3/
+
+...which should be at the same level as your Dojo checkout.
\ No newline at end of file
diff --git a/js/dojo-1.7.2/dojox/css3/fx.js b/js/dojo-1.7.2/dojox/css3/fx.js
new file mode 100644
index 0000000..6fd96e3
--- /dev/null
+++ b/js/dojo-1.7.2/dojox/css3/fx.js
@@ -0,0 +1,192 @@
+//>>built
+define("dojox/css3/fx", [
+	"dojo/_base/kernel",
+	"dojo/_base/connect",	// dojo.connect
+	"dojo/dom-style",	// dojo.style
+	"dojo/_base/fx",
+	"dojo/fx",
+	"dojo/_base/html",
+	"dojox/html/ext-dojo/style",
+	"dojox/fx/ext-dojo/complex"],
+function(lang,connectUtil,domStyle,baseFx,coreFx,htmlUtil,htmlStyleExt,complexFx){
+	var css3fx = lang.getObject("dojox.css3.fx", true);
+	/*===== css3fx = dojox.css3.fx =====*/
+	
+	return lang.mixin(css3fx, {
+		puff: function(args){
+			// summary:
+			//		Returns an animation that will do a "puff" effect on the given node
+			//
+			// description:
+			//		Fades out an element and scales it to args.endScale
+			//
+			return coreFx.combine([baseFx.fadeOut(args),
+				this.expand({
+					node: args.node,
+					endScale: args.endScale || 2
+				})
+			]);
+		},
+
+		expand: function(args){
+			// summary:
+			//		Returns an animation that expands args.node
+			//
+			// description:
+			//		Scales an element to args.endScale
+			//
+			return baseFx.animateProperty({
+				node: args.node,
+				properties: {
+					transform: { start: "scale(1)", end: "scale(" + [args.endScale || 3] + ")" }
+				}
+			});
+		},
+
+		shrink: function(args){
+			// summary:
+			//		Returns an animation that shrinks args.node
+			//
+			// description:
+			//		Shrinks an element, same as expand({ node: node, endScale: .01 });
+			//
+			return this.expand({
+				node: args.node,
+				endScale: .01
+			});
+		},
+
+		rotate: function(args){
+			// summary:
+			//		Returns an animation that rotates an element
+			//
+			// description:
+			//		Rotates an element from args.startAngle to args.endAngle
+			//
+			return baseFx.animateProperty({
+				node: args.node,
+				duration: args.duration || 1000,
+				properties: {
+					transform: { start: "rotate(" + (args.startAngle || "0deg") + ")", end: "rotate(" + (args.endAngle || "360deg") + ")" }
+				}
+			});
+		},
+
+		flip: function(args){
+			// summary:
+			//		Returns an animation that flips an element around his y axis
+			//
+			// description:
+			//		Flips an element around his y axis. The default is a 360deg flip
+			//		but it's possible to run a partial flip using args.whichAnims
+			//
+			// example:
+			//	|	// half flip
+			//	|	dojox.css3.fx.flip({
+			//	|		node: domNode,
+			//	|		whichAnim: [0, 1]
+			//	|	}).play();
+			//
+			var anims = [],
+				whichAnims = args.whichAnims || [0, 1, 2, 3],
+					direction = args.direction || 1,
+				transforms = [
+					{ start: "scale(1, 1) skew(0deg,0deg)", end: "scale(0, 1) skew(0," + (direction * 30) + "deg)" },
+					{ start: "scale(0, 1) skew(0deg," + (direction * 30) + "deg)", end: "scale(-1, 1) skew(0deg,0deg)" },
+					{ start: "scale(-1, 1) skew(0deg,0deg)", end: "scale(0, 1) skew(0deg," + (-direction * 30) + "deg)" },
+					{ start: "scale(0, 1) skew(0deg," + (-direction * 30) + "deg)", end: "scale(1, 1) skew(0deg,0deg)" }
+			];
+			for(var i = 0; i < whichAnims.length; i++){
+				anims.push(baseFx.animateProperty(
+					lang.mixin({
+					node: args.node,
+					duration: args.duration || 600,
+					properties: {
+						transform: transforms[whichAnims[i]]
+					}}, args)
+				));
+			}
+			return coreFx.chain(anims);
+		},
+
+		bounce: function(args){
+			// summary:
+			//		Returns an animation that do a "bounce" effect on args.node
+			//
+			// description:
+			//		Vertical bounce animation, the scaleX, scaleY deformation and the
+			//		jump height (args.jumpHeight) can be specified
+			//
+			var anims = [],
+				n = args.node,
+				duration = args.duration || 1000,
+				scaleX = args.scaleX || 1.2,
+				scaleY = args.scaleY || .6,
+				ds = htmlUtil.style,
+				oldPos = ds(n, "position"),
+				newPos = "absolute",
+				oldTop = ds(n, "top"),
+				combinedAnims = [],
+				bTime = 0,
+				round = Math.round,
+				jumpHeight = args.jumpHeight || 70
+			;
+			if(oldPos !== "absolute"){
+				newPos = "relative";
+			}
+			var a1 = baseFx.animateProperty({
+				node: n,
+				duration: duration / 6,
+				properties: {
+					transform: { start: "scale(1, 1)", end: "scale(" + scaleX + ", " + scaleY + ")" }
+				}
+			});
+			connectUtil.connect(a1, "onBegin", function(){
+				ds(n, {
+					transformOrigin: "50% 100%",
+					position: newPos
+				});
+			});
+			anims.push(a1);
+			var a2 = baseFx.animateProperty({
+				node: n,
+				duration: duration / 6,
+				properties: {
+					transform: { end: "scale(1, 1)", start: "scale(" + scaleX + ", " + scaleY + ")" }
+				}
+			});
+			combinedAnims.push(a2);
+			combinedAnims.push(new baseFx.Animation(lang.mixin({
+				curve: [],
+				duration: duration / 3,
+				delay: duration / 12,
+				onBegin: function(){
+					bTime = (new Date).getTime();
+				},
+				onAnimate: function(){
+					var cTime = (new Date).getTime();
+					ds(n, {
+						top: parseInt(ds(n, "top")) - round(jumpHeight*((cTime-bTime)/this.duration)) + "px"
+					});
+					bTime = cTime;
+				}
+			}, args)));
+			anims.push(coreFx.combine(combinedAnims));
+			anims.push(baseFx.animateProperty(lang.mixin({
+				duration: duration / 3,
+				onEnd: function(){
+					ds(n, {
+						position: oldPos
+					});
+				},
+				properties:{
+					top: oldTop
+				}
+			}, args)));
+			anims.push(a1);
+			anims.push(a2);
+
+			return coreFx.chain(anims);
+		}
+	});
+});
diff --git a/js/dojo-1.7.2/dojox/css3/transit.js b/js/dojo-1.7.2/dojox/css3/transit.js
new file mode 100644
index 0000000..5ac4762
--- /dev/null
+++ b/js/dojo-1.7.2/dojox/css3/transit.js
@@ -0,0 +1,63 @@
+//>>built
+define("dojox/css3/transit", ["dojo/_base/kernel", "dojo/_base/array","dojo/dom-style","dojo/DeferredList","./transition"],
+	function(dojo, darray, domStyle, DeferredList,transition){
+	var transit =  function(from, to, options){
+		var rev = (options && options.reverse) ? -1 : 1;
+		if(!options || !options.transition || !transition[options.transition]){
+			domStyle.set(from,"display","none");
+			domStyle.set(to, "display", "");
+			if(options.transitionDefs){
+				if(options.transitionDefs[from.id]){
+					options.transitionDefs[from.id].resolve(from);
+				}
+				if(options.transitionDefs[to.id]){
+								options.transitionDefs[to.id].resolve(to);
+							}
+			}
+		}else{
+			var defs=[];
+			var transit=[];
+			var duration = 250;
+			if(options.transition === "fade"){
+				duration = 600;
+			}else if (options.transition === "flip"){
+				duration = 200;
+			}
+			domStyle.set(from, "display", ""); 
+			domStyle.set(to, "display", "");
+			if (from){
+				//create transition to transit "from" out
+				var fromTransit = transition[options.transition](from, {
+					"in": false,
+					direction: rev,
+					duration: duration,
+					deferred: (options.transitionDefs && options.transitionDefs[from.id]) ? options.transitionDefs[from.id] : null
+				});
+				defs.push(fromTransit.deferred);//every transition object should have a deferred.
+				transit.push(fromTransit);
+			}
+			
+			//create transition to transit "to" in					
+			var toTransit = transition[options.transition](to, {
+							direction: rev,
+							duration: duration,
+							deferred: (options.transitionDefs && options.transitionDefs[to.id]) ? options.transitionDefs[to.id] : null
+						});
+			defs.push(toTransit.deferred);//every transition object should have a deferred.
+			transit.push(toTransit);
+			
+			//TODO If it is flip use the chainedPlay
+			//play fromTransit and toTransit together
+			if(options.transition === "flip"){
+				transition.chainedPlay(transit);
+			}else{
+				transition.groupedPlay(transit);
+			}
+
+			return new DeferredList(defs);
+			
+		}
+	};
+	
+	return transit;
+});
diff --git a/js/dojo-1.7.2/dojox/css3/transition.js b/js/dojo-1.7.2/dojox/css3/transition.js
new file mode 100644
index 0000000..0a2f4b3
--- /dev/null
+++ b/js/dojo-1.7.2/dojox/css3/transition.js
@@ -0,0 +1,345 @@
+//>>built
+define("dojox/css3/transition", ["dojo/_base/kernel", 
+		"dojo/_base/lang",
+		"dojo/_base/declare",
+		"dojo/_base/array",
+		"dojo/_base/Deferred",
+		"dojo/DeferredList",
+		"dojo/on",
+		"dojo/_base/sniff"], 
+		function(dojo, lang, declare, array, deferred, deferredList, on, has){
+	//TODO create cross platform animation/transition effects
+	var transitionEndEventName = "transitionend";
+	var transitionPrefix = "t"; //by default use "t" prefix and "ransition" to make word "transition"
+	var translateMethodStart = "translate3d(";//Android 2.x does not support translateX in CSS Transition, we need to use translate3d in webkit browsers
+	var translateMethodEnd = ",0,0)";
+	if(has("webkit")){
+		transitionPrefix = "WebkitT";
+		transitionEndEventName = "webkitTransitionEnd";
+	}else if(has("mozilla")){
+		transitionPrefix = "MozT";
+		translateMethodStart = "translateX(";
+		translateMethodEnd = ")";
+	}
+	
+	//TODO find a way to lock the animation and prevent animation conflict
+	declare("dojox.css3.transition", null, {
+		
+
+		constructor: function(args){
+			//default config should be in animation object itself instead of its prototype
+			//otherwise, it might be easy for making mistake of modifying prototype
+			var defaultConfig = {
+				startState: {},
+				endState: {},
+				node: null,
+				duration: 250,
+				"in": true,
+				direction: 1,
+				autoClear: true
+			};
+			
+			lang.mixin(this, defaultConfig);
+			lang.mixin(this, args);
+			
+			//create the deferred object which will resolve after the animation is finished.
+			//We can rely on "onAfterEnd" function to notify the end of a single animation,
+			//but using a deferred object is easier to wait for multiple animations end.
+			if(!this.deferred){
+				this.deferred = new deferred();
+			}
+		},
+		
+		play: function(){
+			//play the animation using CSS3 Transition
+			dojox.css3.transition.groupedPlay([this]);
+		},
+		
+		//method to apply the state of the transition
+		_applyState: function(state){
+			var style = this.node.style;
+			for(var property in state){
+				if(state.hasOwnProperty(property)){
+					style[property] = state[property];
+				}
+			}
+		},
+		
+		//method to initialize state for transition
+		initState: function(){
+			
+			//apply the immediate style change for initial state.
+			this.node.style[transitionPrefix + "ransitionProperty"] = "none";
+			this.node.style[transitionPrefix + "ransitionDuration"] = "0ms";
+			this._applyState(this.startState);
+			
+		},
+		
+		_beforeStart: function(){
+			if (this.node.style.display === "none"){
+				this.node.style.display = "";
+			}
+			this.beforeStart();
+		},
+		
+		_beforeClear: function(){
+			this.node.style[transitionPrefix + "ransitionProperty"] = null;
+			this.node.style[transitionPrefix + "ransitionDuration"] = null;
+			if(this["in"] !== true){
+				this.node.style.display = "none";
+			}			 
+			this.beforeClear();
+		},
+		
+		_onAfterEnd: function(){
+			this.deferred.resolve(this.node);
+			if(this.node.id && dojox.css3.transition.playing[this.node.id]===this.deferred){
+				delete dojox.css3.transition.playing[this.node.id];
+			}
+			this.onAfterEnd();
+		},
+		
+		beforeStart: function(){
+			
+		},
+		
+		beforeClear: function(){
+			
+		},
+		
+		onAfterEnd: function(){
+			
+		},
+		
+		//method to start the transition
+		start: function(){
+			this._beforeStart();
+			
+			var self = this;
+			//change the transition duration
+			self.node.style[transitionPrefix + "ransitionProperty"] = "all";
+			self.node.style[transitionPrefix + "ransitionDuration"] = self.duration + "ms";
+			
+			//connect to clear the transition state after the transition end.
+			//Since the transition is conducted asynchronously, we need to 
+			//connect to transition end event to clear the state
+			on.once(self.node, transitionEndEventName, function(){
+				self.clear();
+			});
+			
+			this._applyState(this.endState);
+		},
+		
+		//method to clear state after transition
+		clear: function(){
+			this._beforeClear();
+			this._removeState(this.endState);
+			console.log(this.node.id + " clear.");
+			this._onAfterEnd();
+		},
+		
+		//create removeState method
+		_removeState: function(state){
+			var style = this.node.style;
+			for(var property in state){
+				if(state.hasOwnProperty(property)){
+					style[property] = null;
+				}
+			}
+		}
+		
+	});
+	
+	//TODO add the lock mechanism for all of the transition effects
+	//	   consider using only one object for one type of transition.
+	//TODO create the first animation, slide.
+	dojox.css3.transition.slide = function(node, config){
+
+		//TODO create the return and set the startState, endState of the return
+		var ret = new dojox.css3.transition(config);
+		ret.node = node;
+		
+		var startX = "0";
+		var endX = "0";
+		
+		if(ret["in"]){
+			if(ret.direction === 1){
+				startX = "100%";
+			}else{
+				startX = "-100%";
+			}
+		}else{
+			if(ret.direction === 1){
+				endX = "-100%";
+			}else{
+				endX = "100%";
+			}
+		}
+		
+		
+		ret.startState[transitionPrefix + "ransform"]=translateMethodStart+startX+translateMethodEnd;
+		
+		ret.endState[transitionPrefix + "ransform"]=translateMethodStart+endX+translateMethodEnd;
+		
+		return ret;
+	};
+		
+	
+	//fade in/out animation effects
+	dojox.css3.transition.fade = function(node, config){
+		
+		var ret = new dojox.css3.transition(config);
+		ret.node = node;
+		
+		var startOpacity = "0";
+		var endOpacity = "0";
+		
+		if(ret["in"]){
+			endOpacity = "1";
+		}else{
+			startOpacity = "1";
+		}
+		
+		lang.mixin(ret, {
+			startState:{
+				"opacity": startOpacity
+			},
+			endState:{
+				"opacity": endOpacity
+			}
+		});
+		
+		return ret;
+	};
+	
+  //fade in/out animation effects
+	dojox.css3.transition.flip = function(node, config){
+		
+		var ret = new dojox.css3.transition(config);
+		ret.node = node;
+	   
+		if(ret["in"]){
+			//Need to set opacity here because Android 2.2 has bug that
+			//scale(...) in transform does not persist status
+			lang.mixin(ret,{
+				startState:{
+					"opacity": "0"
+				},
+				endState:{
+					"opacity": "1"
+				}
+			});
+			ret.startState[transitionPrefix + "ransform"]="scale(0,0.8) skew(0,-30deg)";
+			ret.endState[transitionPrefix + "ransform"]="scale(1,1) skew(0,0)";
+		}else{
+			lang.mixin(ret,{
+				startState:{
+					"opacity": "1"
+				},
+				endState:{
+					"opacity": "0"
+				}
+			});			
+			ret.startState[transitionPrefix + "ransform"]="scale(1,1) skew(0,0)";
+			ret.endState[transitionPrefix + "ransform"]="scale(0,0.8) skew(0,30deg)";
+		}
+		
+		return ret;
+	};
+	
+	var getWaitingList = function(/*Array*/ nodes){
+		var defs = [];
+		array.forEach(nodes, function(node){
+			//check whether the node is under other animation
+			if(node.id && dojox.css3.transition.playing[node.id]){
+				//TODO hook on deferred object in dojox.css3.transition.playing
+				defs.push(dojox.css3.transition.playing[node.id]);
+			}
+			
+		});
+		return new deferredList(defs);
+	};
+	
+	dojox.css3.transition.getWaitingList = getWaitingList;
+	
+	//TODO groupedPlay should ensure the UI update happens when
+	//all animations end.
+	//the group player to start multiple animations together
+	dojox.css3.transition.groupedPlay = function(/*Array*/args){
+		//args should be array of dojox.css3.transition
+		
+		var animNodes = array.filter(args, function(item){
+			return item.node;
+		});
+		
+		var waitingList = getWaitingList(animNodes);
+
+		//update registry with deferred objects in animations of args.
+		array.forEach(args, function(item){
+			if(item.node.id){
+				dojox.css3.transition.playing[item.node.id] = item.deferred;
+			}
+		});
+		
+		//TODO wait for all deferred object in deferred list to resolve
+		dojo.when(waitingList, function(){
+			array.forEach(args, function(item){
+				//set the start state
+				item.initState();
+			});
+			
+			//Assume the fps of the animation should be higher than 30 fps and
+			//allow the browser to use one frame's time to redraw so that
+			//the transition can be started
+			setTimeout(function(){
+				array.forEach(args, function(item){
+					item.start();
+				});			   
+			}, 33);
+		});		   
+	};
+	
+	//the chain player to start multiple animations one by one
+	dojox.css3.transition.chainedPlay = function(/*Array*/args){
+		//args should be array of dojox.css3.transition
+		
+		var animNodes = array.filter(args, function(item){
+			return item.node;
+		});
+		
+		var waitingList = getWaitingList(animNodes);
+
+		//update registry with deferred objects in animations of args.
+		array.forEach(args, function(item){
+			if(item.node.id){
+				dojox.css3.transition.playing[item.node.id] = item.deferred;
+			}
+		});
+		
+		dojo.when(waitingList, function(){
+			array.forEach(args, function(item){
+				//set the start state
+				item.initState();
+			});
+			
+			//chain animations together
+			for (var i=1, len=args.length; i < len; i++){
+				args[i-1].deferred.then(lang.hitch(args[i], function(){
+					this.start();
+				}));
+			}
+			
+			//Assume the fps of the animation should be higher than 30 fps and
+			//allow the browser to use one frame's time to redraw so that
+			//the transition can be started
+			setTimeout(function(){
+				args[0].start();
+			}, 33);
+		});		   
+	};
+	
+	//TODO complete the registry mechanism for animation handling and prevent animation conflicts
+	dojox.css3.transition.playing = {};
+	
+	return dojox.css3.transition;
+});