/*
Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
Available via Academic Free License >= 2.1 OR the modified BSD license.
see: http://dojotoolkit.org/license for details
*/
if(!dojo._hasResource["dojox.fx.text"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.fx.text"] = true;
dojo.provide("dojox.fx.text");
// dojo.require("dojox.fx._split");
dojo.require("dojo.fx");
dojo.require("dojo.fx.easing");
dojox.fx.text._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;
// 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 = dojo.byId(args.node),
s = node.style,
cs = dojo.getComputedStyle(node),
nodeCoords = dojo.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 = [];
dojo.style(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 = dojo.coords(piece, true);
number++;
dojo.style(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(dojo.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 = dojo.fx.combine(animations);
dojo.connect(anim, "onEnd", anim, function(){
node.innerHTML = originalHTML;
dojo.style(node, {
height: originalHeight,
width: originalWidth
});
});
if(args.onPlay){
dojo.connect(anim, "onPlay", anim, args.onPlay);
}
if(args.onEnd){
dojo.connect(anim, "onEnd", anim, args.onEnd);
}
return anim; // dojo.Animation
};
dojox.fx.text.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 = dojo.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 = dojo.animateProperty({
node: piece,
duration: duration,
delay: delay,
easing: (args.easing || (args.unhide ? dojo.fx.easing.sinOut : dojo.fx.easing.circOut)),
beforeBegin: (args.unhide ? function(){
if(args.fade){
//piece.style.opacity = 0;
dojo.style(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 = dojo.animateProperty({
node: piece,
duration: duration,
delay: delay,
easing: (args.fadeEasing || dojo.fx.easing.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 = dojox.fx.text._split(args);
return anim; // dojo.Animation
};
dojox.fx.text.converge = function(/*Object*/ args){
args.unhide = true;
return dojox.fx.text.explode(args);
};
dojox.fx.text.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 = dojo.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 = dojo.animateProperty({
node: piece,
duration: duration,
delay: delay,
easing: (args.easing || (args.unhide ? dojo.fx.easing.sinIn : dojo.fx.easing.circIn)),
properties: properties,
beforeBegin: (args.unhide ? function(){
if(args.fade){
// piece.style.opacity = 0;
dojo.style(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 = dojox.fx.text._split(args);
return anim; // dojo.Animation
};
dojox.fx.text.build = function(/*Object*/ args){
args.unhide = true;
return dojox.fx.text.disintegrate(args);
};
dojox.fx.text.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 = dojo.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 = dojo.animateProperty({
node: piece,
duration: duration,
delay: delay,
easing: (args.easing || dojo.fx.easing.sinInOut),
properties: {
opacity: (args.unhide ? {start: 0, end: 1} : {end:0})
},
beforeBegin: (args.unhide ? function(){ dojo.style(piece,"opacity",0); } : undefined)
});
return pieceAnimation;
};
var anim = dojox.fx.text._split(args);
return anim; // dojo.Animation
};
dojox.fx.text.blockFadeIn = function(/*Object*/ args){
args.unhide = true;
return dojox.fx.text.blockFadeOut(args);
};
dojox.fx.text.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 = dojo.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(){ dojo.style(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 = dojo.animateProperty({
node: piece,
duration: 1,
delay: delay,
easing: (args.easing || dojo.fx.easing.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 = dojox.fx.text._split(args);
return anim; // dojo.Animation
};
dojox.fx.text.type = function(/*Object*/ args){
args.unhide = true;
return dojox.fx.text.backspace(args);
};
}