rounded.js

基于Php和Mysql的项目管理软件

/*
	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");

/*	Port of curvyCorners, by Cameron Cooke and Tim Hutchison.
 *	Original port done by Brian Lucas.
 *	Refactor and function by trt.
 */
dojo.lfx.rounded = function(/* object */settings /* ... */){
	//	summary
	//	Creates a set of rounded corners based on settings.
	var options={
		validTags:settings.validTags || ["div"],					//	tags we can apply this to
		autoPad:settings.autoPad!=null ? settings.autoPad : true,		//	automatically pad
		antiAlias:settings.antiAlias!=null ? settings.antiAlias : true,	//	anti-alias corners
		radii:{ 	//	corner 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 
		}
	};

	//	get the node list to operate on.
	var nodes;
	if(typeof(arguments[1]) == "string"){
		//	a CSS classname was passed, grab a node list.
		nodes=dojo.html.getElementsByClass(arguments[1]);
	} else if(dojo.lang.isArrayLike(arguments[1])){
		//	we assume that the second argument is an array of nodes to apply this to.
		nodes=arguments[1];
		for(var i=0; i<nodes.length; i++){ nodes[i]=dojo.byId(nodes[i]); }
	}
	if(nodes.length == 0) return;	//	don't bother.

	////////////////////////////////////////////////////////////////////
	for(var i=0; i<nodes.length; i++){
		dojo.lfx.rounded.applyCorners(options, nodes[i]);
	}
};

//	can call this directly if one wants.
dojo.lfx.rounded.applyCorners = function(/* object */options, /* HTMLElement */node){
	//	summary
	//	Rounds corners based on options to passed node.
	var top = null;
	var bottom = null;
	var contentNode = null;
	var fns=dojo.lfx.rounded._fns;

	//	node details
	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"));

	//	formatting details
	//	TODO: use Dojo equivilents for these if exists.
	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);

	//	build the containers.
	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
		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);
	}

	//	turn off the borders
	if(top){ node.style.borderTopWidth = "0px"; }
	if(bottom){ node.style.borderBottomWidth = "0px"; }

	//	do the corners
	var corners = ["tr", "tl", "br", "bl"];
	for(var i=0; i<corners.length; i++){
		var cc=corners[i];
		if(options.radii[cc]==0){
			//	fill up the space with a div.
			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 {
			//	NB: this version will not do the caching they built into the
			//		current version of curvyCorners.
			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++){
				//	figure out y coords
				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; }

				//	start drawing
				if(y1 > -1){
					fns.draw(x, 0, format.color, 100, (y1+1), corner, -1, j, topHeight, format);
				}

				// cycle the y-axis
				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);
						}
					}
				}

				//	bar for the border
				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;
				}
			}

			//	reposition pixels if not the bottom right.
			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"));

					//	reposition.
					if(cc.charAt(1)=="l"){ 
						bar.style.left = (options.radii[cc]-barLeft-1)+"px";