dojo_app/js/library/dojox/fx/text.js

define(["dojo/_base/lang", "./_base", "dojo/_base/fx", "dojo/fx","dojo/fx/easing", "dojo/dom", "dojo/dom-style", "dojo/_base/html", "dojo/_base/connect"],
function(lang, dojoxFx, baseFx, coreFx, easingLib, dom, domStyle, htmlLib, connectUtil ){
var textFx = lang.getObject("dojox.fx.text", true);
textFx._split = function(/*Object*/ args){
	// summary:
	//		Split a block of text into words or letters
	// description:
	//		Returns an animation that will split the node into a grid
	//		of pieces that move independently.
	//
	//		NOTE:
	//		In some rendering engines, the text will appear to "jump" from its initial position
	//		when the animation begins.	To work around this bug, enclose the node's text in a `<p>` or `<div>`.
	// args:
	//		- args.crop: Boolean - If true, pieces will be positioned relatively rather than absolutely
	//		- args.text: String - Text to place inside the node (otherwise node.innerHTML is used)
	//		- args.words: Boolean - If true, the text will be split into words rather than characters
	//		- args.pieceAnimation: Function(piece, pieceCoords, nodeCoords, number, numPieces)
	//			Returns either the dojo.Animation or an array of dojo.Animation objects for the piece.
	//			The arguments:
	//			- pieceCoords is the result of dojo.coords(piece, true);
	//			- nodeCoords is the result of dojo.coords(args.node, true);
	//			- number is the piece's position in the array of pieces, and numPieces is the array.length

	var node = args.node = dom.byId(args.node),
		s = node.style,
		cs = domStyle.getComputedStyle(node),
		nodeCoords = htmlLib.coords(node, true);
		
	args.duration = args.duration || 1000;
	args.words = args.words || false;
	
	var originalHTML = (args.text && typeof(args.text) == "string") ? args.text : node.innerHTML,
		originalHeight = s.height,
		originalWidth = s.width,
		animations = [];

	domStyle.set(node, {
		height: cs.height,
		width: cs.width
	});

	// The following regular expression courtesy of Phil Haack
	// http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx
	var tagReg = /(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)/g;

	// Translation: /(HTML tag plus spaces)|(word/letter without '<' plus spaces)/g
	var reg = (args.words ?
		/(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]+\s*)/g :
		/(<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>)\s*|([^\s<]\s*)/g
	);

	// Split the text into pieces
	var pieces = (typeof args.text == "string") ? args.text.match(reg) : node.innerHTML.match(reg);
	var html = "";
	var numPieces = 0;
	var number = 0;
	for(var i = 0; i < pieces.length; i++){
		var piece = pieces[i];
		if(!piece.match(tagReg)){
			html += "<span>" + piece + "</span>";
			numPieces++;
		}else{
			html += piece;
		}
	}
	node.innerHTML = html;

	// Find the newly-created spans and create their animations
	function animatePieces(piece){
		var next = piece.nextSibling;
		if(piece.tagName == "SPAN" && piece.childNodes.length == 1 && piece.firstChild.nodeType == 3){
			var pieceCoords = htmlLib.coords(piece, true);
			number++;
			domStyle.set(piece, {
				padding: 0,
				margin: 0,
				top: (args.crop ? "0px" : pieceCoords.t + "px"),
				left: (args.crop ? "0px" : pieceCoords.l + "px"),
				display: "inline"
			});
			var pieceAnimation = args.pieceAnimation(piece, pieceCoords, nodeCoords, number, numPieces);
			if(lang.isArray(pieceAnimation)){
				// if pieceAnimation is an array, append its elements
				animations = animations.concat(pieceAnimation);
			}else{
				// otherwise, append it
				animations[animations.length] = pieceAnimation;
			}
		}else if(piece.firstChild){
			animatePieces(piece.firstChild);
		}

		if(next){
			animatePieces(next);
		}
	}

	animatePieces(node.firstChild);
	var anim = coreFx.combine(animations);
	connectUtil.connect(anim, "onEnd", anim, function(){
		node.innerHTML = originalHTML;
		domStyle.set(node, {
			height: originalHeight,
			width: originalWidth
		});
	});
	if(args.onPlay){
		connectUtil.connect(anim, "onPlay", anim, args.onPlay);
	}
	if(args.onEnd){
		connectUtil.connect(anim, "onEnd", anim, args.onEnd);
	}
	return anim; // dojo.Animation
};

textFx.explode = function(/*Object*/ args){
	// summary:
	//		Explode a block of text into words or letters
	// description:
	//		Returns an animation that will split the text into a spans
	//		of words or characters that fly away from the center.
	// args:
	//		- args.crop: Boolean - If true, pieces will be positioned relatively rather than absolutely
	//		- args.words: Boolean - If true, text will be split into words rather than characters
	//		- args.random: Float - If set, pieces fly to random distances, for random durations,
	//							   and in slightly random directions. The value defines how much
	//							   randomness is introduced.
	//		- args.distance: Float - Multiplier for the distance the pieces fly (even when random)
	//		- args.fade: Boolean - If true, pieces fade out while in motion (default is true)
	//		- args.fadeEasing: Function - If args.fade is true, the fade animations use this easing function
	//		- args.unhide: Boolean - If true, the animation is reversed
	//		- args.sync: Boolean - If args.unhide is true, all the pieces converge at the same time
	//							   (default is true)

	var node = args.node = dom.byId(args.node);
	var s = node.style;

	args.distance = args.distance || 1;
	args.duration = args.duration || 1000;
	args.random = args.random || 0;
	if(typeof(args.fade) == "undefined"){
		args.fade = true;
	}
	if(typeof(args.sync) == "undefined"){
		args.sync = true;
	}
	args.random = Math.abs(args.random);

	// Returns the animation object for each piece
	args.pieceAnimation = function(piece, pieceCoords, coords, number, numPieces){
		var pieceHeight = pieceCoords.h;
		var pieceWidth = pieceCoords.w;
		var distance = args.distance * 2;
		var duration = args.duration;
		var startTop = parseFloat(piece.style.top);
		var startLeft = parseFloat(piece.style.left);
		var delay = 0;
		var randomX = 0;
		var randomY = 0;
		if(args.random){
			var seed = (Math.random() * args.random) + Math.max(1 - args.random, 0);
			distance *= seed;
			duration *= seed;
			// To syncronize, give each piece an appropriate delay so they end together
			delay = ((args.unhide && args.sync) || (!args.unhide && !args.sync)) ? (args.duration - duration) : 0;

			// Slightly randomize the direction of each piece
			randomX = Math.random() - 0.5;
			randomY = Math.random() - 0.5;
		}
		var distanceY = ((coords.h - pieceHeight) / 2 - (pieceCoords.y - coords.y));
		var distanceX = ((coords.w - pieceWidth) / 2 - (pieceCoords.x - coords.x));
		var distanceXY = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));
		var endTop = startTop - distanceY * distance + distanceXY * randomY;
		var endLeft = startLeft - distanceX * distance + distanceXY * randomX;

		// Create the animation objects for the piece
		// These are separate anim objects so they can have different curves
		var pieceSlide = baseFx.animateProperty({
			node: piece,
			duration: duration,
			delay: delay,
			easing: (args.easing || (args.unhide ? easingLib.sinOut : easingLib.circOut)),
			beforeBegin: (args.unhide ? function(){
					if(args.fade){
						//piece.style.opacity = 0;
						domStyle.set(piece,"opacity", 0);
					}
					piece.style.position = args.crop ? "relative" : "absolute";
					piece.style.top = endTop + "px";
					piece.style.left = endLeft + "px";
				} : function(){piece.style.position = args.crop ? "relative" : "absolute";}),
			properties: {
				top: (args.unhide ? { start: endTop, end: startTop } : { start: startTop, end: endTop }),
				left: (args.unhide ? { start: endLeft, end: startLeft } : { start: startLeft, end: endLeft })
			}
		});

		if(args.fade){
			var pieceFade = baseFx.animateProperty({
				node: piece,
				duration: duration,
				delay: delay,
				easing: (args.fadeEasing || easingLib.quadOut),
				properties: {
					opacity: (args.unhide ? {start: 0, end: 1} : {end: 0})
				}
			});

			// return both animations as an array
			return (args.unhide ? [pieceFade, pieceSlide] : [pieceSlide, pieceFade]);
		}else{
			// Otherwise return only the slide animation
			return pieceSlide;
		}
	};

	var anim = textFx._split(args);
	return anim; // dojo.Animation
};

textFx.converge = function(/*Object*/ args){
	args.unhide = true;
	return textFx.explode(args);
};

textFx.disintegrate = function(/*Object*/ args){
	// summary:
	//		Split a block of text into words or letters and let them fall
	// description:
	//		Returns an animation that will split the text into spans of words
	//		or characters that drop.
	// args:
	//		- args.crop: Boolean - If true, pieces will be positioned relatively rather than absolutely
	//		- args.words: Boolean - If true, text will be split into words rather than characters
	//		- args.interval: Float - The number of milliseconds between each piece's animation
	//		- args.distance: Float - The number of the node's heights to drop (default is 1.5)
	//		- args.fade: Boolean - If true, pieces fade out while in motion (default is true)
	//		- args.random: Float - If set, pieces fall in random order. The value defines how much
	//							   randomness is introduced
	//		- args.reverseOrder: Boolean - If true, pieces animate in reversed order
	//		- args.unhide: Boolean - If true, the peices fall from above and land in place

	var node = args.node = dom.byId(args.node);
	var s = node.style;

	args.duration = args.duration || 1500;
	args.distance = args.distance || 1.5;
	args.random = args.random || 0;
	if(!args.fade){
		args.fade = true;
	}
	var random = Math.abs(args.random);

	// Returns the animation object for each piece
	args.pieceAnimation = function(piece, pieceCoords, coords, number, numPieces){
		var pieceHeight = pieceCoords.h;
		var pieceWidth = pieceCoords.w;

		var interval = args.interval || (args.duration / (1.5 * numPieces));
		var duration = (args.duration - numPieces * interval);

		var randomDelay = Math.random() * numPieces * interval;
		// If distance is negative, start from the top right instead of bottom left
		var uniformDelay = (args.reverseOrder || args.distance < 0) ?
			(number * interval) : ((numPieces - number) * interval);
		var delay = randomDelay * random + Math.max(1 - random, 0) * uniformDelay;

		// Create the animation object for the piece
		var properties = {};
		if(args.unhide){
			properties.top = {
				start: (parseFloat(piece.style.top) - coords.h * args.distance),
				end: parseFloat(piece.style.top)
			};
			if(args.fade){
				properties.opacity = {start: 0, end: 1};
			}
		}else{
			properties.top = {end: (parseFloat(piece.style.top) + coords.h * args.distance)};
			if(args.fade){
				properties.opacity = {end: 0};
			}
		}
		var pieceAnimation = baseFx.animateProperty({
			node: piece,
			duration: duration,
			delay: delay,
			easing: (args.easing || (args.unhide ? easingLib.sinIn : easingLib.circIn)),
			properties: properties,
			beforeBegin: (args.unhide ? function(){
				if(args.fade){
					// piece.style.opacity = 0;
					domStyle.set(piece, "opacity", 0);
				}
				piece.style.position = args.crop ? "relative" : "absolute";
				piece.style.top = properties.top.start + "px";
			} : function(){ piece.style.position = args.crop ? "relative" : "absolute";})
		});

		return pieceAnimation;
	};

	var anim = textFx._split(args);
	return anim; // dojo.Animation
};

textFx.build = function(/*Object*/ args){
	args.unhide = true;
	return textFx.disintegrate(args);
};

textFx.blockFadeOut = function(/*Object*/ args){
	// summary:
	//		Split a block of text into words or letters and fade them
	// description:
	//		Returns an animation that will split the text into spans of words
	//		or characters that fade in or out.
	// args:
	//		- args.words: Boolean - If true, text will be split into words rather than characters
	//		- args.interval: Float - The number of milliseconds between each piece's animation (default is 0)
	//		- args.random: Float - If true, pieces have a random delay. The value defines how much
	//							   randomness is introduced
	//		- args.reverseOrder: Boolean - If true, pieces animate in reversed order
	//		- args.unhide: Boolean - If true, the animation is reversed

	var node = args.node = dom.byId(args.node);;
	var s = node.style;

	args.duration = args.duration || 1000;
	args.random = args.random || 0;
	var random = Math.abs(args.random);

	// Returns the animation object for each piece
	args.pieceAnimation = function(piece, pieceCoords, coords, number, numPieces){
		var interval = args.interval || (args.duration / (1.5 * numPieces));
		var duration = (args.duration - numPieces * interval);

		var randomDelay = Math.random() * numPieces * interval;
		// If interval or random is negative, start from the bottom instead of top
		var uniformDelay = (args.reverseOrder) ?
			((numPieces - number) * interval) : (number * interval);
		var delay = randomDelay * random + Math.max(1 - random, 0) * uniformDelay;

		// Create the animation object for the piece
		var pieceAnimation = baseFx.animateProperty({
			node: piece,
			duration: duration,
			delay: delay,
			easing: (args.easing || easingLib.sinInOut),
			properties: {
				opacity: (args.unhide ? {start: 0, end: 1} : {end:0})
			},
			beforeBegin: (args.unhide ? function(){ domStyle.set(piece,"opacity",0); } : undefined)
		});

		return pieceAnimation;
	};

	var anim = textFx._split(args);
	return anim; // dojo.Animation
};

textFx.blockFadeIn = function(/*Object*/ args){
	args.unhide = true;
	return textFx.blockFadeOut(args);
};

textFx.backspace = function(/*Object*/ args){
	// summary:
	//		Split a block of text into words or letters and backspace them in sequence
	// description:
	//		Returns an animation that will split the text into spans of words
	//		or characters that appear as if they were being backspaced (or typed) in real-time.
	// args:
	//		- args.interval: Float - The number of milliseconds between each piece's animation
	//		  (default is determined by text length and args.duration);
	//		- args.wordDelay: Integer - The number of milliseconds between each word
	//		  (only effective when args.unhide = true)
	//		- args.fixed: Boolean - If true, only style.opacity changes; otherwise, style.display
	//		  changes between none and inline, adding realism (default = false)
	//		- args.random: Float - If true, pieces have a random delay. The value defines how much
	//		  randomness is introduced (only effective when args.unhide = true)
	//		- args.unhide: Boolean - If true, the animation is reversed

	var node = args.node = dom.byId(args.node);
	var s = node.style;

	args.words = false;
	args.duration = args.duration || 2000;
	args.random = args.random || 0;
	var random = Math.abs(args.random);
	var delay = 10;

	// Returns the animation object for each piece
	args.pieceAnimation = function(piece, pieceCoords, coords, number, numPieces){
		var interval = args.interval || (args.duration / (1.5 * numPieces)),
			text = ("textContent" in piece) ? piece.textContent : piece.innerText,
			whitespace = text.match(/\s/g);

		if(typeof(args.wordDelay) == "undefined"){
			args.wordDelay = interval * 2;
		}

		if(!args.unhide){
			delay = (numPieces - number - 1) * interval;
		}

		var beforeBegin, onEnd;

		if(args.fixed){
			if(args.unhide){
				var beforeBegin = function(){ domStyle.set(piece,"opacity",0); };
			}
		}else{
			if(args.unhide){
				var beforeBegin = function(){piece.style.display = "none";};
				var onEnd = function(){piece.style.display = "inline";};
			}else{
				var onEnd = function(){piece.style.display = "none";};
			}
		}

		// Create the animation object for the piece
		var pieceAnimation = baseFx.animateProperty({
			node: piece,
			duration: 1,
			delay: delay,
			easing: (args.easing || easingLib.sinInOut),
			properties: {
				opacity: (args.unhide ? {start: 0, end: 1} : {end:0})
			},
			beforeBegin: beforeBegin,
			onEnd: onEnd
		});

		if(args.unhide){
			var randomDelay = Math.random() * text.length * interval;
			var wordDelay = randomDelay * random / 2 + Math.max(1 - random / 2, 0) * args.wordDelay;

			delay += randomDelay * random + Math.max(1 - random, 0) * interval * text.length +
				(wordDelay * (whitespace && text.lastIndexOf(whitespace[whitespace.length-1]) == text.length - 1));
		}

		return pieceAnimation;
	};

	var anim = textFx._split(args);
	return anim; // dojo.Animation
};

textFx.type = function(/*Object*/ args){
	args.unhide = true;
	return textFx.backspace(args);
};
return textFx;
});