html.js

初学者

			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);