rounded.js

初学者

/*
	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.rounded");
dojo.require("dojo.lang.common");
dojo.require("dojo.html.common");
dojo.require("dojo.html.style");
dojo.require("dojo.html.display");
dojo.require("dojo.html.layout");
dojo.lfx.rounded = function (settings) {
	var options = {validTags:settings.validTags || ["div"], autoPad:settings.autoPad != null ? settings.autoPad : true, antiAlias:settings.antiAlias != null ? settings.antiAlias : true, radii:{tl:(settings.tl && settings.tl.radius != null) ? settings.tl.radius : 5, tr:(settings.tr && settings.tr.radius != null) ? settings.tr.radius : 5, bl:(settings.bl && settings.bl.radius != null) ? settings.bl.radius : 5, br:(settings.br && settings.br.radius != null) ? settings.br.radius : 5}};
	var nodes;
	if (typeof (arguments[1]) == "string") {
		nodes = dojo.html.getElementsByClass(arguments[1]);
	} else {
		if (dojo.lang.isArrayLike(arguments[1])) {
			nodes = arguments[1];
			for (var i = 0; i < nodes.length; i++) {
				nodes[i] = dojo.byId(nodes[i]);
			}
		}
	}
	if (nodes.length == 0) {
		return;
	}
	for (var i = 0; i < nodes.length; i++) {
		dojo.lfx.rounded.applyCorners(options, nodes[i]);
	}
};
dojo.lfx.rounded.applyCorners = function (options, node) {
	var top = null;
	var bottom = null;
	var contentNode = null;
	var fns = dojo.lfx.rounded._fns;
	var width = node.offsetWidth;
	var height = node.offsetHeight;
	var borderWidth = parseInt(dojo.html.getComputedStyle(node, "border-top-width"));
	var borderColor = dojo.html.getComputedStyle(node, "border-top-color");
	var color = dojo.html.getComputedStyle(node, "background-color");
	var bgImage = dojo.html.getComputedStyle(node, "background-image");
	var position = dojo.html.getComputedStyle(node, "position");
	var padding = parseInt(dojo.html.getComputedStyle(node, "padding-top"));
	var format = {height:height, width:width, borderWidth:borderWidth, color:fns.getRGB(color), padding:padding, borderColor:fns.getRGB(borderColor), borderString:borderWidth + "px" + " solid " + fns.getRGB(borderColor), bgImage:((bgImage != "none") ? bgImage : ""), content:node.innerHTML};
	if (!dojo.html.isPositionAbsolute(node)) {
		node.style.position = "relative";
	}
	node.style.padding = "0px";
	if (dojo.render.html.ie && width == "auto" && height == "auto") {
		node.style.width = "100%";
	}
	if (options.autoPad && format.padding > 0) {
		node.innerHTML = "";
	}
	var topHeight = Math.max(options.radii.tl, options.radii.tr);
	var bottomHeight = Math.max(options.radii.bl, options.radii.br);
	if (options.radii.tl || options.radii.tr) {
		top = document.createElement("div");
		top.style.width = "100%";
		top.style.fontSize = "1px";
		top.style.overflow = "hidden";
		top.style.position = "absolute";
		top.style.paddingLeft = format.borderWidth + "px";
		top.style.paddingRight = format.borderWidth + "px";
		top.style.height = topHeight + "px";
		top.style.top = (0 - topHeight) + "px";
		top.style.left = (0 - format.borderWidth) + "px";
		node.appendChild(top);
	}
	if (options.radii.bl || options.radii.br) {
		bottom = document.createElement("div");
		bottom.style.width = "100%";
		bottom.style.fontSize = "1px";
		bottom.style.overflow = "hidden";
		bottom.style.position = "absolute";
		bottom.style.paddingLeft = format.borderWidth + "px";
		bottom.style.paddingRight = format.borderWidth + "px";
		bottom.style.height = bottomHeight + "px";
		bottom.style.bottom = (0 - bottomHeight) + "px";
		bottom.style.left = (0 - format.borderWidth) + "px";
		node.appendChild(bottom);
	}
	if (top) {
		node.style.borderTopWidth = "0px";
	}
	if (bottom) {
		node.style.borderBottomWidth = "0px";
	}
	var corners = ["tr", "tl", "br", "bl"];
	for (var i = 0; i < corners.length; i++) {
		var cc = corners[i];
		if (options.radii[cc] == 0) {
			if ((cc.charAt(0) == "t" && top) || (cc.charAt(0) == "b" && bottom)) {
				var corner = document.createElement("div");
				corner.style.position = "relative";
				corner.style.fontSize = "1px;";
				corner.style.overflow = "hidden";
				if (format.bgImage == "") {
					corner.style.backgroundColor = format.color;
				} else {
					corner.style.backgroundImage = format.bgImage;
				}
				switch (cc) {
				  case "tl":
					corner.style.height = topHeight - format.borderWidth + "px";
					corner.style.marginRight = options.radii[cc] - (format.borderWidth * 2) + "px";
					corner.style.borderLeft = format.borderString;
					corner.style.borderTop = format.borderString;
					corner.style.left = -format.borderWidth + "px";
					break;
				  case "tr":
					corner.style.height = topHeight - format.borderWidth + "px";
					corner.style.marginLeft = options.radii[cc] - (format.borderWidth * 2) + "px";
					corner.style.borderRight = format.borderString;
					corner.style.borderTop = format.borderString;
					corner.style.backgroundPosition = "-" + (topHeight - format.borderWidth) + "px 0px";
					corner.style.left = format.borderWidth + "px";
					break;
				  case "bl":
					corner.style.height = bottomHeight - format.borderWidth + "px";
					corner.style.marginRight = options.radii[cc] - (format.borderWidth * 2) + "px";
					corner.style.borderLeft = format.borderString;
					corner.style.borderBottom = format.borderString;
					corner.style.left = format.borderWidth + "px";
					corner.style.backgroundPosition = "-" + format.borderWidth + "px -" + (format.height + (bottomHeight + format.borderWidth)) + "px";
					break;
				  case "br":
					corner.style.height = bottomHeight - format.borderWidth + "px";
					corner.style.marginLeft = options.radii[cc] - (format.borderWidth * 2) + "px";
					corner.style.borderRight = format.borderString;
					corner.style.borderBottom = format.borderString;
					corner.style.left = format.borderWidth + "px";
					corner.style.backgroundPosition = "-" + (bottomHeight + format.borderWidth) + "px -" + (format.height + (bottomHeight + format.borderWidth)) + "px";
					break;
				}
			}
		} else {
			var corner = document.createElement("div");
			corner.style.height = options.radii[cc] + "px";
			corner.style.width = options.radii[cc] + "px";
			corner.style.position = "absolute";
			corner.style.fontSize = "1px";
			corner.style.overflow = "hidden";
			var borderRadius = Math.floor(options.radii[cc] - format.borderWidth);
			for (var x = 0, j = options.radii[cc]; x < j; x++) {
				var y1 = Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((x + 1), 2))) - 1;
				if ((x + 1) >= borderRadius) {
					var y1 = -1;
				}
				var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow(x, 2)));
				if (x >= borderRadius) {
					y2 = -1;
				}
				var y3 = Math.floor(Math.sqrt(Math.pow(j, 2) - Math.pow((x + 1), 2))) - 1;
				if ((x + 1) >= j) {
					y3 = -1;
				}
				var y4 = Math.ceil(Math.sqrt(Math.pow(j, 2) - Math.pow(x, 2)));
				if (x >= j) {
					y4 = -1;
				}
				if (y1 > -1) {
					fns.draw(x, 0, format.color, 100, (y1 + 1), corner, -1, j, topHeight, format);
				}
				for (var y = (y1 + 1); y < y2; y++) {
					if (options.antiAlias) {
						if (format.bgImage != "") {
							var fract = fns.fraction(x, y, borderRadius) * 100;
							if (fract < 30) {
								fns.draw(x, y, format.borderColor, 100, 1, corner, 0, options.radii[cc], topHeight, format);
							} else {
								fns.draw(x, y, format.borderColor, 100, 1, corner, -1, options.radii[cc], topHeight, format);
							}
						} else {
							var clr = fns.blend(format.color, format.borderColor, fns.fraction(x, y, borderRadius));
							fns.draw(x, y, clr, 100, 1, corner, 0, options.radii[cc], topHeight, format);
						}
					}
				}
				if (options.antiAlias) {
					if (y3 >= y2) {
						if (y2 == -1) {
							y2 = 0;
						}
						fns.draw(x, y2, format.borderColor, 100, (y3 - y2 + 1), corner, 0, 0, topHeight, format);
					} else {
						if (y3 >= y1) {
							fns.draw(x, (y1 + 1), format.borderColor, 100, (y3 - y1), corner, 0, 0, topHeight, format);
						}
					}
					for (var y = (y3 + 1); y < y4; y++) {
						fns.draw(x, y, format.borderColor, (fns.fraction(x, y, j) * 100), 1, corner, (format.borderWidth > 0 ? 0 : -1), options.radii[cc], topHeight, format);
					}
				} else {
					y3 = y1;
				}
			}
			if (cc != "br") {
				for (var t = 0, k = corner.childNodes.length; t < k; t++) {
					var bar = corner.childNodes[t];
					var barTop = parseInt(dojo.html.getComputedStyle(bar, "top"));
					var barLeft = parseInt(dojo.html.getComputedStyle(bar, "left"));
					var barHeight = parseInt(dojo.html.getComputedStyle(bar, "height"));
					if (cc.charAt(1) == "l") {
						bar.style.left = (options.radii[cc] - barLeft - 1) + "px";
					}
					if (cc == "tr") {
						bar.style.top = (options.radii[cc] - barHeight - barTop) + "px";
						bar.style.backgroundPosition = "-" + Math.abs((format.width - options.radii[cc] + format.borderWidth) + barLeft) + "px -" + Math.abs(options.radii[cc] - barHeight - barTop - format.borderWidth) + "px";
					} else {
						if (cc == "tl") {
							bar.style.top = (options.radii[cc] - barHeight - barTop) + "px";
							bar.style.backgroundPosition = "-" + Math.abs((options.radii[cc] - barLeft - 1) - format.borderWidth) + "px -" + Math.abs(options.radii[cc] - barHeight - barTop - format.borderWidth) + "px";
						} else {
							bar.style.backgroundPosition = "-" + Math.abs((options.radii[cc] + barLeft) + format.borderWidth) + "px -" + Math.abs((format.height + options.radii[cc] + barTop) - format.borderWidth) + "px";