color.js

Telerik是很大的第三方软件制造商

/* ------------------------------- Popup Class -------------------------------- */
/*	Provides functionality required for building popups.						*/
/* ---------------------------------------------------------------------------- */
function Popup(element, onhide)
{
	this.popupObject	= null;
	this.popupName		= "";
	this.scrollInterval	= null;
	this.mouseMove		= null;
	this.mouseDown		= null;
	this._document		= null;
	this.onhide			= onhide;
	this.isOpen			= false;
	
	if (document.all)
	{
		var popup = this;
		this.popupObject = window.createPopup();
		this._document = this.popupObject.document;
		this._document.body.style.border = "0px";
		this._document.body.style.backgroundColor = "#FFFFFF";
		this._document.body.onunload = function() { popup.unload(); };
		this._document.body.innerHTML = element.outerHTML;
	}
	else
	{
		this.element = element;
		this._document = document;
	}
}

Popup.prototype.showFunc = function(e, width, height, control)
{
	if (document.all)
	{
		this.popupObject.show(0, control.offsetHeight, width, height, control);
	}
	else
	{
		if (control.id != this.popupName)
		{
			var popup = this;
			this.popupObject = document.createElement("DIV");
			var coords;
			if (control != null)
			{
				window.setTimeout(function() { popup.popupName = control.id; }, 200);
				coords = getCoords(control);
			}
			this.popupObject.style.backgroundColor = "#FFFFFF";
			this.popupObject.style.position = "absolute";
			this.popupObject.style.left = coords[0];
			this.popupObject.style.top = coords[1] + control.offsetHeight;
			this.popupObject.style.width = (width + 2) + "px";
			this.popupObject.style.height = (height + 2) + "px";
			this.popupObject.style.zIndex = 51200;
			this.popupObject.style.overflow = "hidden";
			this.popupObject.appendChild(this.element);
			var container = this.popupObject.childNodes[0];
			if (container.childNodes.length > 2)
			{
				var innerDiv = document.createElement("DIV");
				innerDiv.style.position = "relative";
				innerDiv.style.top = "0px";
				container.appendChild(innerDiv);
				innerDiv.appendChild(container.childNodes[(container.childNodes[1].nodeName == "TABLE") ? 1 : 2]);

				this.mouseMove = function(e) { popup.scroll(e, innerDiv, coords[1] + control.offsetHeight + 1, height + 2); };
				this.mouseDown = function(e) { popup.check(e); };
				this.popupObject.addEventListener("mousemove", this.mouseMove, true);
			}

			document.body.appendChild(this.popupObject);
			window.addEventListener("mousedown", this.mouseDown, true);
		}
		else
		{
			this.onhide();
		}
	}
	this.isOpen=true;
};

Popup.prototype.check = function(e)
{
	if ((e.clientX < parseInt(this.popupObject.style.left)) || (e.clientX > parseInt(this.popupObject.style.left) + parseInt(this.popupObject.style.width)) ||
		(e.clientY < parseInt(this.popupObject.style.top)) || (e.clientY > parseInt(this.popupObject.style.top) + parseInt(this.popupObject.style.height)))
	{
		this.hideFunc();
	}
};

Popup.prototype.hideFunc = function()
{
	if (document.all)
	{
		this.popupObject.hide();
	}
	else if (this.popupObject != null)
	{
		var popup = this;
		var container = this.popupObject.childNodes[0];
		if (container.childNodes.length > 1)
		{
			container.appendChild(container.childNodes[2].childNodes[0]);
			container.removeChild(container.childNodes[2]);
		}
		document.body.removeChild(this.popupObject);
		window.removeEventListener("mousedown", this.mouseDown, true);
		window.setTimeout(function() { popup.popupName = ""; }, 200);
		this.popupObject = null;
		this.onhide();
	}
};

Popup.prototype.scroll = function(e, innerDiv, topPosition, height)
{
	var popup = this;
	if ((e.clientY == topPosition + height - 1) ||
		(e.clientY == topPosition))
	{
		this.stopScroll();
	}
	else if (e.clientY > topPosition + height - 20)
	{
		if (this.scrollInterval == null)
		{
			this.scrollInterval = window.setInterval(function() { popup.scrollAction(innerDiv, -4); }, 10);
		}
	}
	else if (e.clientY < topPosition + 20)
	{
		if (this.scrollInterval == null)
		{
			this.scrollInterval = window.setInterval(function() { popup.scrollAction(innerDiv, 4); }, 10);
		}
	}
	else
	{
		this.stopScroll();
	}
};

Popup.prototype.scrollAction = function(innerDiv, step)
{
	var topPosition = parseInt(innerDiv.style.top);
	if (((step > 0) && (topPosition == 0)) ||
		((step < 0) && (innerDiv.childNodes[0].offsetHeight < parseInt(this.popupObject.style.height) - topPosition)))
	{
		this.stopScroll();
	}
	else
	{
		innerDiv.style.top = (topPosition + step) + "px";
	}
};

Popup.prototype.stopScroll = function()
{
	window.clearInterval(this.scrollInterval);
	this.scrollInterval = null;	
};

Popup.prototype.unload = function()
{
	var popup = this;
	window.setTimeout(function() { popup.onhide(); }, 200);
};

function getScrollCoords(node, coords)
{
	while (node.parentNode)
	{
		if (typeof(node.parentNode.scrollLeft) == "number")
		{
			coords[0] -= node.parentNode.scrollLeft;
		}
		if (typeof(node.parentNode.scrollTop) == "number")
		{
			coords[1] -= node.parentNode.scrollTop;
		}
		node = node.parentNode;
	}
	return coords;
}

function getCoords(node)
{
	var coords = new Array(0, 0);
	var newNode = node;
	if (newNode.offsetParent)
	{
		while (newNode.offsetParent)
		{
			coords[0] += newNode.offsetLeft;
			coords[1] += newNode.offsetTop;
			newNode = newNode.offsetParent;
		}
	}
	else if (newNode.x && newNode.y)
	{
		coords[0] += newNode.x;
		coords[1] += newNode.y;
	}
	return getScrollCoords(node, coords);
}

/* ---------------------------- DropDown Functions ---------------------------- */
/*	Provides basic functionality required for building extended DropDowns.		*/
/* ---------------------------------------------------------------------------- */
function DropDown(holderId, dropDownWidth, dropDownHeight, popupObject, onselect)
{
	this.dropDownWidth	= dropDownWidth;
	this.dropDownHeight	= dropDownHeight;
	this.holder			= document.getElementById(holderId);
	this.isOpen			= false;
	this.onselect		= onselect;
	this.popup			= null;
	this.popupObject	= popupObject;
	this.isEnabled		= false;
}

DropDown.prototype.attachListeners = function()
{
	var dropDown = this;
	this.holder.onmouseover = function()
	{
		dropDown.mouseOver();
	};
	this.holder.onmouseout = function()
	{
		dropDown.mouseOut();
	};
	this.holder.onclick = function()
	{
		dropDown.showFunc();
	};
};

DropDown.prototype.detachListeners = function()
{
	this.holder.onmouseover = null;
	this.holder.onmouseout = null;
	this.holder.onclick = null;
};

DropDown.prototype.enable = function()
{
	if (!this.isEnabled)
	{
		if (this.popup == null)
		{
			var dropDown = this;
			this.popup = new Popup(this.popupObject, function() { dropDown.isOpen = false; });
		}
		this.isEnabled = true;
		this.holder.style.backgroundImage = this.holder.style.backgroundImage.replace(/Disabled\.gif\)$/ig, ".gif)");
		this.attachListeners();
	}
};

DropDown.prototype.disable = function()
{
	if (this.isEnabled)
	{
		this.isEnabled = false;
		this.holder.style.backgroundImage = this.holder.style.backgroundImage.replace(/\.gif\)$/ig, "eCard/ColorPicker/Disabled.gif)");
		this.detachListeners();
	}
};

DropDown.prototype.mouseOver = function()
{
	this.holder.style.backgroundImage = this.holder.style.backgroundImage.replace(/\.gif\)$/ig, "Over.gif)");
};

DropDown.prototype.mouseOut = function()
{
	this.holder.style.backgroundImage = this.holder.style.backgroundImage.replace(/Over\.gif\)$/ig, ".gif)");
};

DropDown.prototype.showFunc = function(e)
{
	if (!this.isOpen)
	{
		this.isOpen = true;
		this.popup.showFunc(null, this.dropDownWidth, this.dropDownHeight, this.holder);
	}
};

DropDown.prototype.hideFunc = function()
{
	this.popup.hideFunc();
};

function ColorPopup(holderId, holderName, onselect)
{
	var colors = new Array(	"", "#FFFF00", "#00FF00", "#ADD8E6", "#008000", "#808080",
							"#FFD700", "#FFE4E1", "#00FFFF", "#87CEEB", "#0000FF", "#A9A9A9",
							"#FFA500", "#FFC0CB", "#A52A2A", "#008080", "#000080", "#C0C0C0",
							"#FF0000", "#C71585", "#8B0000", "#4B0082", "#000000", "#FFFFFF",
							"#E3E3E3", "#FFFFFF", "#E3E3E3", "#D6D6D6", "#656565", "#F2F2F2");
	var tableElement = document.createElement("TABLE");
	tableElement.width = "100%";
	tableElement.height = "100%";
	tableElement.style.border = "1px solid #2E74CF";
	tableElement.cellPadding = 0;
	tableElement.cellSpacing = 1;
	var tbody = document.createElement("TBODY");
	tableElement.appendChild(tbody);
	var rowElement = document.createElement("TR");
	tbody.appendChild(rowElement);
	var cellElement = this.createCell(rowElement);
	cellElement.width = 16;
	cellElement.height = 16;
	cellElement.innerHTML = "<IMG SRC='eCard/ColorPicker/Img/nocolor.gif' ONCLICK=\"parent." + holderName + ".selectColor('', this)\">";

	var i;
	for (i=1; i<colors.length; i++)
	{
		cellElement = this.createCell(rowElement);
		cellElement.width = 16;
		cellElement.height = 16;
		cellElement.innerHTML = "<DIV STYLE=\"WIDTH:12px;HEIGHT:12px;FONT-SIZE:5pt;BORDER:1px solid #808080;BACKGROUND-COLOR:" + colors[i] +
								"\" ONCLICK=\"parent." + holderName + ".selectColor('" + colors[i] + "', this)\"></DIV>";
		if ((((i + 1) % 6) == 0) && (i != colors.length))
		{
			rowElement = document.createElement("TR");
			tbody.appendChild(rowElement);
		}
	}

	rowElement = document.createElement("TR");
	tbody.appendChild(rowElement);
	cellElement = this.createCell(rowElement);
	cellElement.colSpan = 6;
	cellElement.style.font = "icon";
	cellElement.style.cursor = "default";
	cellElement.innerHTML = "<DIV ONCLICK=\"parent." + holderName + ".setCustomColor(this)\">" +
							"Set Custom Color" +
							"</DIV>";

	this.base = DropDown;
	this.base(holderId, 105, 110, tableElement, onselect);

	this.selectedColor	= "";
	this.image			= this.holder.getElementsByTagName("IMG")[1];
	this.span			= this.holder.getElementsByTagName("DIV")[0];
}

ColorPopup.prototype = new DropDown;

ColorPopup.prototype.createCell = function(rowElement)
{
	var cellElement = document.createElement("TD");
	cellElement.align = "center";
	cellElement.vAlign = "middle";
	cellElement.style.border = "1px solid #FFFFFF";
	cellElement.onmouseover = "this.style.borderColor = '#666666'";
	cellElement.onmouseout = "this.style.borderColor = '#FFFFFF'";
	rowElement.appendChild(cellElement);
	return cellElement;
};

ColorPopup.prototype.selectColor = function(color, item)
{
	this.selectedColor = color;
	if (this.popup != null)
	{
		this.hideFunc();
	}
	if (item != null)
	{
		item.style.border = "1px solid #FFFFFF";
	}
	if (color == "")
	{
		this.span.style.backgroundColor = "#FFFFFF";
		this.image.style.display = "inline";
	}
	else
	{
		this.span.style.backgroundColor = color;
		this.image.style.display = "none";
	}
	if (this.onselect != null)
	{
		this.onselect();
	}
};

ColorPopup.prototype.setCustomColor = function(item)
{
	var newColor = "";
	if (document.all)
	{
		var newColor = document.getElementById("dlgHelper").ChooseColorDlg();
		if (newColor != 0)
		{
			newColor = newColor.toString(16);
			if (newColor.length < 6)
			{
				var sTempString = "000000".substring(0, (6 - newColor.length));
				newColor = "#" + sTempString.concat(newColor).toUpperCase();
			}
			else
			{
				newColor = "#" + newColor.toUpperCase();
			}
		}
		else
		{
			item.style.border = "1px solid #FFFFFF";
			this.hideFunc();
			return;
		}
	}
	else
	{
		newColor = prompt("Please, provide the custom color HEX value:", "#");
	}
	this.selectColor(newColor, item);
};