blob: 1b655c8f81e1c165543ff34364d63e967fe5c18e [file] [log] [blame]
/*
Copyright (c) 2004-2006, The Dojo Foundation
All Rights Reserved.
Licensed under the Academic Free License version 2.1 or above OR the
modified BSD license. For more information on Dojo licensing, see:
http://dojotoolkit.org/community/licensing.shtml
*/
dojo.provide("dojo.lfx.extras");
dojo.require("dojo.lfx.html");
dojo.require("dojo.lfx.Animation");
dojo.lfx.html.fadeWipeIn = function(/*DOMNode[]*/ nodes, /*int?*/ duration, /*Function?*/ easing, /*Function?*/ callback){
// summary: Returns an animation that will fade "nodes" from its current
// opacity to fully opaque while wiping it in.
// nodes: An array of DOMNodes or one DOMNode.
// duration: Duration of the animation in milliseconds.
// easing: An easing function.
// callback: Function to run at the end of the animation.
nodes = dojo.lfx.html._byId(nodes);
var anim = dojo.lfx.combine(
dojo.lfx.fadeIn(nodes, duration, easing),
dojo.lfx.wipeIn(nodes, duration, easing)
);
if(callback){
anim.connect("onEnd", function(){
callback(nodes, anim);
});
}
return anim; // dojo.lfx.Combine
}
dojo.lfx.html.fadeWipeOut = function(/*DOMNode[]*/ nodes, /*int?*/ duration, /*Function?*/ easing, /*Function?*/ callback){
// summary: Returns an animation that will fade "nodes" from its current
// opacity to fully transparent while wiping it out.
// nodes: An array of DOMNodes or one DOMNode.
// duration: Duration of the animation in milliseconds.
// easing: An easing function.
// callback: Function to run at the end of the animation.
nodes = dojo.lfx.html._byId(nodes);
var anim = dojo.lfx.combine(
dojo.lfx.fadeOut(nodes, duration, easing),
dojo.lfx.wipeOut(nodes, duration, easing)
);
if(callback){
/* callback: Function
pId: f */
anim.connect("onEnd", function(){
callback(nodes, anim);
});
}
return anim; // dojo.lfx.Combine
}
dojo.lfx.html.scale = function(/*DOMNode[]*/nodes,
/*int*/ percentage,
/*bool?*/ scaleContent,
/*bool?*/ fromCenter,
/*int?*/ duration,
/*Function?*/ easing,
/*Function?*/ callback){
// summary: Returns an animation that will scale "nodes" by "percentage".
// nodes: An array of DOMNodes or one DOMNode.
// percentage: A whole number representing the percentage to scale "nodes".
// scaleContent: If true, will scale the contents of "nodes".
// fromCenter: If true, will scale "nodes" from its center rather than the
// lower right corner.
// duration: Duration of the animation in milliseconds.
// easing: An easing function.
// callback: Function to run at the end of the animation.
nodes = dojo.lfx.html._byId(nodes);
var anims = [];
dojo.lang.forEach(nodes, function(node){
var outer = dojo.html.getMarginBox(node);
var actualPct = percentage/100.0;
var props = [
{ property: "width",
start: outer.width,
end: outer.width * actualPct
},
{ property: "height",
start: outer.height,
end: outer.height * actualPct
}];
if(scaleContent){
var fontSize = dojo.html.getStyle(node, 'font-size');
var fontSizeType = null;
if(!fontSize){
fontSize = parseFloat('100%');
fontSizeType = '%';
}else{
dojo.lang.some(['em','px','%'], function(item, index, arr){
if(fontSize.indexOf(item)>0){
fontSize = parseFloat(fontSize);
fontSizeType = item;
return true;
}
});
}
props.push({
property: "font-size",
start: fontSize,
end: fontSize * actualPct,
units: fontSizeType });
}
if(fromCenter){
var positioning = dojo.html.getStyle(node, "position");
var originalTop = node.offsetTop;
var originalLeft = node.offsetLeft;
var endTop = ((outer.height * actualPct) - outer.height)/2;
var endLeft = ((outer.width * actualPct) - outer.width)/2;
props.push({
property: "top",
start: originalTop,
end: (positioning == "absolute" ? originalTop - endTop : (-1*endTop))
});
props.push({
property: "left",
start: originalLeft,
end: (positioning == "absolute" ? originalLeft - endLeft : (-1*endLeft))
});
}
var anim = dojo.lfx.propertyAnimation(node, props, duration, easing);
if(callback){
anim.connect("onEnd", function(){
callback(node, anim);
});
}
anims.push(anim);
});
return dojo.lfx.combine(anims); // dojo.lfx.Combine
}
dojo.lang.mixin(dojo.lfx, dojo.lfx.html);