New file |
0,0 → 1,507 |
/* |
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.html"); |
dojo.require("dojo.gfx.color"); |
dojo.require("dojo.lfx.Animation"); |
dojo.require("dojo.lang.array"); |
dojo.require("dojo.html.display"); |
dojo.require("dojo.html.color"); |
dojo.require("dojo.html.layout"); |
dojo.lfx.html._byId = function (nodes) { |
if (!nodes) { |
return []; |
} |
if (dojo.lang.isArrayLike(nodes)) { |
if (!nodes.alreadyChecked) { |
var n = []; |
dojo.lang.forEach(nodes, function (node) { |
n.push(dojo.byId(node)); |
}); |
n.alreadyChecked = true; |
return n; |
} else { |
return nodes; |
} |
} else { |
var n = []; |
n.push(dojo.byId(nodes)); |
n.alreadyChecked = true; |
return n; |
} |
}; |
dojo.lfx.html.propertyAnimation = function (nodes, propertyMap, duration, easing, handlers) { |
nodes = dojo.lfx.html._byId(nodes); |
var targs = {"propertyMap":propertyMap, "nodes":nodes, "duration":duration, "easing":easing || dojo.lfx.easeDefault}; |
var setEmUp = function (args) { |
if (args.nodes.length == 1) { |
var pm = args.propertyMap; |
if (!dojo.lang.isArray(args.propertyMap)) { |
var parr = []; |
for (var pname in pm) { |
pm[pname].property = pname; |
parr.push(pm[pname]); |
} |
pm = args.propertyMap = parr; |
} |
dojo.lang.forEach(pm, function (prop) { |
if (dj_undef("start", prop)) { |
if (prop.property != "opacity") { |
prop.start = parseInt(dojo.html.getComputedStyle(args.nodes[0], prop.property)); |
} else { |
prop.start = dojo.html.getOpacity(args.nodes[0]); |
} |
} |
}); |
} |
}; |
var coordsAsInts = function (coords) { |
var cints = []; |
dojo.lang.forEach(coords, function (c) { |
cints.push(Math.round(c)); |
}); |
return cints; |
}; |
var setStyle = function (n, style) { |
n = dojo.byId(n); |
if (!n || !n.style) { |
return; |
} |
for (var s in style) { |
try { |
if (s == "opacity") { |
dojo.html.setOpacity(n, style[s]); |
} else { |
n.style[s] = style[s]; |
} |
} |
catch (e) { |
dojo.debug(e); |
} |
} |
}; |
var propLine = function (properties) { |
this._properties = properties; |
this.diffs = new Array(properties.length); |
dojo.lang.forEach(properties, function (prop, i) { |
if (dojo.lang.isFunction(prop.start)) { |
prop.start = prop.start(prop, i); |
} |
if (dojo.lang.isFunction(prop.end)) { |
prop.end = prop.end(prop, i); |
} |
if (dojo.lang.isArray(prop.start)) { |
this.diffs[i] = null; |
} else { |
if (prop.start instanceof dojo.gfx.color.Color) { |
prop.startRgb = prop.start.toRgb(); |
prop.endRgb = prop.end.toRgb(); |
} else { |
this.diffs[i] = prop.end - prop.start; |
} |
} |
}, this); |
this.getValue = function (n) { |
var ret = {}; |
dojo.lang.forEach(this._properties, function (prop, i) { |
var value = null; |
if (dojo.lang.isArray(prop.start)) { |
} else { |
if (prop.start instanceof dojo.gfx.color.Color) { |
value = (prop.units || "rgb") + "("; |
for (var j = 0; j < prop.startRgb.length; j++) { |
value += Math.round(((prop.endRgb[j] - prop.startRgb[j]) * n) + prop.startRgb[j]) + (j < prop.startRgb.length - 1 ? "," : ""); |
} |
value += ")"; |
} else { |
value = ((this.diffs[i]) * n) + prop.start + (prop.property != "opacity" ? prop.units || "px" : ""); |
} |
} |
ret[dojo.html.toCamelCase(prop.property)] = value; |
}, this); |
return ret; |
}; |
}; |
var anim = new dojo.lfx.Animation({beforeBegin:function () { |
setEmUp(targs); |
anim.curve = new propLine(targs.propertyMap); |
}, onAnimate:function (propValues) { |
dojo.lang.forEach(targs.nodes, function (node) { |
setStyle(node, propValues); |
}); |
}}, targs.duration, null, targs.easing); |
if (handlers) { |
for (var x in handlers) { |
if (dojo.lang.isFunction(handlers[x])) { |
anim.connect(x, anim, handlers[x]); |
} |
} |
} |
return anim; |
}; |
dojo.lfx.html._makeFadeable = function (nodes) { |
var makeFade = function (node) { |
if (dojo.render.html.ie) { |
if ((node.style.zoom.length == 0) && (dojo.html.getStyle(node, "zoom") == "normal")) { |
node.style.zoom = "1"; |
} |
if ((node.style.width.length == 0) && (dojo.html.getStyle(node, "width") == "auto")) { |
node.style.width = "auto"; |
} |
} |
}; |
if (dojo.lang.isArrayLike(nodes)) { |
dojo.lang.forEach(nodes, makeFade); |
} else { |
makeFade(nodes); |
} |
}; |
dojo.lfx.html.fade = function (nodes, values, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
var props = {property:"opacity"}; |
if (!dj_undef("start", values)) { |
props.start = values.start; |
} else { |
props.start = function () { |
return dojo.html.getOpacity(nodes[0]); |
}; |
} |
if (!dj_undef("end", values)) { |
props.end = values.end; |
} else { |
dojo.raise("dojo.lfx.html.fade needs an end value"); |
} |
var anim = dojo.lfx.propertyAnimation(nodes, [props], duration, easing); |
anim.connect("beforeBegin", function () { |
dojo.lfx.html._makeFadeable(nodes); |
}); |
if (callback) { |
anim.connect("onEnd", function () { |
callback(nodes, anim); |
}); |
} |
return anim; |
}; |
dojo.lfx.html.fadeIn = function (nodes, duration, easing, callback) { |
return dojo.lfx.html.fade(nodes, {end:1}, duration, easing, callback); |
}; |
dojo.lfx.html.fadeOut = function (nodes, duration, easing, callback) { |
return dojo.lfx.html.fade(nodes, {end:0}, duration, easing, callback); |
}; |
dojo.lfx.html.fadeShow = function (nodes, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
dojo.lang.forEach(nodes, function (node) { |
dojo.html.setOpacity(node, 0); |
}); |
var anim = dojo.lfx.html.fadeIn(nodes, duration, easing, callback); |
anim.connect("beforeBegin", function () { |
if (dojo.lang.isArrayLike(nodes)) { |
dojo.lang.forEach(nodes, dojo.html.show); |
} else { |
dojo.html.show(nodes); |
} |
}); |
return anim; |
}; |
dojo.lfx.html.fadeHide = function (nodes, duration, easing, callback) { |
var anim = dojo.lfx.html.fadeOut(nodes, duration, easing, function () { |
if (dojo.lang.isArrayLike(nodes)) { |
dojo.lang.forEach(nodes, dojo.html.hide); |
} else { |
dojo.html.hide(nodes); |
} |
if (callback) { |
callback(nodes, anim); |
} |
}); |
return anim; |
}; |
dojo.lfx.html.wipeIn = function (nodes, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
var anims = []; |
dojo.lang.forEach(nodes, function (node) { |
var oprop = {}; |
var origTop, origLeft, origPosition; |
with (node.style) { |
origTop = top; |
origLeft = left; |
origPosition = position; |
top = "-9999px"; |
left = "-9999px"; |
position = "absolute"; |
display = ""; |
} |
var nodeHeight = dojo.html.getBorderBox(node).height; |
with (node.style) { |
top = origTop; |
left = origLeft; |
position = origPosition; |
display = "none"; |
} |
var anim = dojo.lfx.propertyAnimation(node, {"height":{start:1, end:function () { |
return nodeHeight; |
}}}, duration, easing); |
anim.connect("beforeBegin", function () { |
oprop.overflow = node.style.overflow; |
oprop.height = node.style.height; |
with (node.style) { |
overflow = "hidden"; |
height = "1px"; |
} |
dojo.html.show(node); |
}); |
anim.connect("onEnd", function () { |
with (node.style) { |
overflow = oprop.overflow; |
height = oprop.height; |
} |
if (callback) { |
callback(node, anim); |
} |
}); |
anims.push(anim); |
}); |
return dojo.lfx.combine(anims); |
}; |
dojo.lfx.html.wipeOut = function (nodes, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
var anims = []; |
dojo.lang.forEach(nodes, function (node) { |
var oprop = {}; |
var anim = dojo.lfx.propertyAnimation(node, {"height":{start:function () { |
return dojo.html.getContentBox(node).height; |
}, end:1}}, duration, easing, {"beforeBegin":function () { |
oprop.overflow = node.style.overflow; |
oprop.height = node.style.height; |
with (node.style) { |
overflow = "hidden"; |
} |
dojo.html.show(node); |
}, "onEnd":function () { |
dojo.html.hide(node); |
with (node.style) { |
overflow = oprop.overflow; |
height = oprop.height; |
} |
if (callback) { |
callback(node, anim); |
} |
}}); |
anims.push(anim); |
}); |
return dojo.lfx.combine(anims); |
}; |
dojo.lfx.html.slideTo = function (nodes, coords, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
var anims = []; |
var compute = dojo.html.getComputedStyle; |
if (dojo.lang.isArray(coords)) { |
dojo.deprecated("dojo.lfx.html.slideTo(node, array)", "use dojo.lfx.html.slideTo(node, {top: value, left: value});", "0.5"); |
coords = {top:coords[0], left:coords[1]}; |
} |
dojo.lang.forEach(nodes, function (node) { |
var top = null; |
var left = null; |
var init = (function () { |
var innerNode = node; |
return function () { |
var pos = compute(innerNode, "position"); |
top = (pos == "absolute" ? node.offsetTop : parseInt(compute(node, "top")) || 0); |
left = (pos == "absolute" ? node.offsetLeft : parseInt(compute(node, "left")) || 0); |
if (!dojo.lang.inArray(["absolute", "relative"], pos)) { |
var ret = dojo.html.abs(innerNode, true); |
dojo.html.setStyleAttributes(innerNode, "position:absolute;top:" + ret.y + "px;left:" + ret.x + "px;"); |
top = ret.y; |
left = ret.x; |
} |
}; |
})(); |
init(); |
var anim = dojo.lfx.propertyAnimation(node, {"top":{start:top, end:(coords.top || 0)}, "left":{start:left, end:(coords.left || 0)}}, duration, easing, {"beforeBegin":init}); |
if (callback) { |
anim.connect("onEnd", function () { |
callback(nodes, anim); |
}); |
} |
anims.push(anim); |
}); |
return dojo.lfx.combine(anims); |
}; |
dojo.lfx.html.slideBy = function (nodes, coords, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
var anims = []; |
var compute = dojo.html.getComputedStyle; |
if (dojo.lang.isArray(coords)) { |
dojo.deprecated("dojo.lfx.html.slideBy(node, array)", "use dojo.lfx.html.slideBy(node, {top: value, left: value});", "0.5"); |
coords = {top:coords[0], left:coords[1]}; |
} |
dojo.lang.forEach(nodes, function (node) { |
var top = null; |
var left = null; |
var init = (function () { |
var innerNode = node; |
return function () { |
var pos = compute(innerNode, "position"); |
top = (pos == "absolute" ? node.offsetTop : parseInt(compute(node, "top")) || 0); |
left = (pos == "absolute" ? node.offsetLeft : parseInt(compute(node, "left")) || 0); |
if (!dojo.lang.inArray(["absolute", "relative"], pos)) { |
var ret = dojo.html.abs(innerNode, true); |
dojo.html.setStyleAttributes(innerNode, "position:absolute;top:" + ret.y + "px;left:" + ret.x + "px;"); |
top = ret.y; |
left = ret.x; |
} |
}; |
})(); |
init(); |
var anim = dojo.lfx.propertyAnimation(node, {"top":{start:top, end:top + (coords.top || 0)}, "left":{start:left, end:left + (coords.left || 0)}}, duration, easing).connect("beforeBegin", init); |
if (callback) { |
anim.connect("onEnd", function () { |
callback(nodes, anim); |
}); |
} |
anims.push(anim); |
}); |
return dojo.lfx.combine(anims); |
}; |
dojo.lfx.html.explode = function (start, endNode, duration, easing, callback) { |
var h = dojo.html; |
start = dojo.byId(start); |
endNode = dojo.byId(endNode); |
var startCoords = h.toCoordinateObject(start, true); |
var outline = document.createElement("div"); |
h.copyStyle(outline, endNode); |
if (endNode.explodeClassName) { |
outline.className = endNode.explodeClassName; |
} |
with (outline.style) { |
position = "absolute"; |
display = "none"; |
var backgroundStyle = h.getStyle(start, "background-color"); |
backgroundColor = backgroundStyle ? backgroundStyle.toLowerCase() : "transparent"; |
backgroundColor = (backgroundColor == "transparent") ? "rgb(221, 221, 221)" : backgroundColor; |
} |
dojo.body().appendChild(outline); |
with (endNode.style) { |
visibility = "hidden"; |
display = "block"; |
} |
var endCoords = h.toCoordinateObject(endNode, true); |
with (endNode.style) { |
display = "none"; |
visibility = "visible"; |
} |
var props = {opacity:{start:0.5, end:1}}; |
dojo.lang.forEach(["height", "width", "top", "left"], function (type) { |
props[type] = {start:startCoords[type], end:endCoords[type]}; |
}); |
var anim = new dojo.lfx.propertyAnimation(outline, props, duration, easing, {"beforeBegin":function () { |
h.setDisplay(outline, "block"); |
}, "onEnd":function () { |
h.setDisplay(endNode, "block"); |
outline.parentNode.removeChild(outline); |
}}); |
if (callback) { |
anim.connect("onEnd", function () { |
callback(endNode, anim); |
}); |
} |
return anim; |
}; |
dojo.lfx.html.implode = function (startNode, end, duration, easing, callback) { |
var h = dojo.html; |
startNode = dojo.byId(startNode); |
end = dojo.byId(end); |
var startCoords = dojo.html.toCoordinateObject(startNode, true); |
var endCoords = dojo.html.toCoordinateObject(end, true); |
var outline = document.createElement("div"); |
dojo.html.copyStyle(outline, startNode); |
if (startNode.explodeClassName) { |
outline.className = startNode.explodeClassName; |
} |
dojo.html.setOpacity(outline, 0.3); |
with (outline.style) { |
position = "absolute"; |
display = "none"; |
backgroundColor = h.getStyle(startNode, "background-color").toLowerCase(); |
} |
dojo.body().appendChild(outline); |
var props = {opacity:{start:1, end:0.5}}; |
dojo.lang.forEach(["height", "width", "top", "left"], function (type) { |
props[type] = {start:startCoords[type], end:endCoords[type]}; |
}); |
var anim = new dojo.lfx.propertyAnimation(outline, props, duration, easing, {"beforeBegin":function () { |
dojo.html.hide(startNode); |
dojo.html.show(outline); |
}, "onEnd":function () { |
outline.parentNode.removeChild(outline); |
}}); |
if (callback) { |
anim.connect("onEnd", function () { |
callback(startNode, anim); |
}); |
} |
return anim; |
}; |
dojo.lfx.html.highlight = function (nodes, startColor, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
var anims = []; |
dojo.lang.forEach(nodes, function (node) { |
var color = dojo.html.getBackgroundColor(node); |
var bg = dojo.html.getStyle(node, "background-color").toLowerCase(); |
var bgImage = dojo.html.getStyle(node, "background-image"); |
var wasTransparent = (bg == "transparent" || bg == "rgba(0, 0, 0, 0)"); |
while (color.length > 3) { |
color.pop(); |
} |
var rgb = new dojo.gfx.color.Color(startColor); |
var endRgb = new dojo.gfx.color.Color(color); |
var anim = dojo.lfx.propertyAnimation(node, {"background-color":{start:rgb, end:endRgb}}, duration, easing, {"beforeBegin":function () { |
if (bgImage) { |
node.style.backgroundImage = "none"; |
} |
node.style.backgroundColor = "rgb(" + rgb.toRgb().join(",") + ")"; |
}, "onEnd":function () { |
if (bgImage) { |
node.style.backgroundImage = bgImage; |
} |
if (wasTransparent) { |
node.style.backgroundColor = "transparent"; |
} |
if (callback) { |
callback(node, anim); |
} |
}}); |
anims.push(anim); |
}); |
return dojo.lfx.combine(anims); |
}; |
dojo.lfx.html.unhighlight = function (nodes, endColor, duration, easing, callback) { |
nodes = dojo.lfx.html._byId(nodes); |
var anims = []; |
dojo.lang.forEach(nodes, function (node) { |
var color = new dojo.gfx.color.Color(dojo.html.getBackgroundColor(node)); |
var rgb = new dojo.gfx.color.Color(endColor); |
var bgImage = dojo.html.getStyle(node, "background-image"); |
var anim = dojo.lfx.propertyAnimation(node, {"background-color":{start:color, end:rgb}}, duration, easing, {"beforeBegin":function () { |
if (bgImage) { |
node.style.backgroundImage = "none"; |
} |
node.style.backgroundColor = "rgb(" + color.toRgb().join(",") + ")"; |
}, "onEnd":function () { |
if (callback) { |
callback(node, anim); |
} |
}}); |
anims.push(anim); |
}); |
return dojo.lfx.combine(anims); |
}; |
dojo.lang.mixin(dojo.lfx, dojo.lfx.html); |
|