204 lines
		
	
	
		
			5.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			204 lines
		
	
	
		
			5.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| /*
 | |
|  *	Gchats color picker by Majid Khosravi
 | |
|  *	Copyright (c) 2006 - 2008 Gchat Design Studio
 | |
|  *	URL: http://www.gchats.com
 | |
|  *	Date: April 24 2008
 | |
|  *  Gchats color picker is freely distributable under the terms of GPL license.
 | |
|  *  Please visit: http://www.gchats.com for updates
 | |
|  *  @Version 1.1
 | |
|  *--------------------------------------------------------------------------*/
 | |
| // JavaScript Document
 | |
| var layerWidth = 218;
 | |
| var layerHeight = 144;
 | |
| var currentId = "";
 | |
| var orgColor ="";
 | |
| 
 | |
| 
 | |
| function openPicker(id){
 | |
| 	currentId = id;
 | |
| 	removeLayer("picker");
 | |
| 	Obj = document.getElementById(id);
 | |
| 	orgColor = Obj.value;
 | |
| 	createLayer("picker",findPosX(Obj)+Obj.offsetWidth+20,findPosY(Obj));
 | |
| }
 | |
| 
 | |
| function createLayer(id,left,top){
 | |
| 	var width = layerWidth;
 | |
| 	var height = layerHeight;
 | |
| 	var zindex = 1000;
 | |
| 	var bgcolor = "#d4d0c8";
 | |
| 	var txtcolor = "#000000";
 | |
| 	var msg = getPickerContent();
 | |
| 	if (document.layers) {
 | |
| 		if (document.layers[id]) {
 | |
| 		   return;
 | |
| 		}
 | |
| 		var layer=document.layers[id]=new Layer(width);
 | |
| 		layer.className = "picker_layer"; 
 | |
| 		layer.name = id;
 | |
| 		layer.left=left;
 | |
| 		layer.top=top;
 | |
| 		layer.clip.height=height;
 | |
| 		layer.visibility = 'show';
 | |
| 		layer.zIndex=zindex;
 | |
| 		layer.bgColor=bgcolor;
 | |
| 		layer.innerHTML = msg;
 | |
| 	}else if (document.all) {
 | |
| 		if (document.all[id]) {
 | |
| 			return
 | |
| 		}
 | |
|   		var layer= '\n<DIV class="picker_layer" id='+id+' style="position:absolute'
 | |
| 		+'; left:'+left+"px"
 | |
| 		+'; top:'+top+"px"
 | |
| 		+'; width:'+width
 | |
| 		+'; height:'+height		
 | |
| 		+'; visibility:visible'
 | |
| 		+'; z-index:'+zindex
 | |
| 		+';text-align:left">'
 | |
| 		+ msg
 | |
| 		+'</DIV>';
 | |
| 		document.body.insertAdjacentHTML("BeforeEnd",layer);
 | |
| 	}else if(document.getElementById){
 | |
| 		var layer = document.createElement ('div');
 | |
| 		layer.setAttribute ('id', id);
 | |
| 		document.body.appendChild (layer); 
 | |
| 		var ly = document.getElementById(id);
 | |
| 		ly.className = "picker_layer"; 
 | |
| 		ly.style.position= "absolute";
 | |
| 		ly.style.left= left+"px";
 | |
| 		ly.style.top= top+ "px";		
 | |
| 		ly.style.width= width+ "px";		
 | |
| 		ly.style.height= height+ "px";		
 | |
| 		ly.style.textAlign= "left";
 | |
| 		ly.innerHTML = msg;	
 | |
| 	}
 | |
| }
 | |
| function showClr(color){
 | |
| 	Obj = document.getElementById(currentId);
 | |
| 	Obj.value = color;
 | |
| 	Obj.style.backgroundColor=color;	
 | |
| 	Obj = document.getElementById("gcpicker_colorSample");
 | |
| 	Obj.style.backgroundColor=color;
 | |
| 	Obj = document.getElementById("gcpicker_colorCode");
 | |
| 	Obj.innerHTML = color;
 | |
| }
 | |
| function setClr(color){
 | |
| 	
 | |
| 	Obj = document.getElementById(currentId);
 | |
| 	Obj.value = color;
 | |
| 	Obj.style.backgroundColor=color;	
 | |
| 	currentId = "";
 | |
| 	removeLayer("picker");
 | |
| 	
 | |
| }
 | |
| function cancel(){
 | |
| 
 | |
| 	Obj = document.getElementById(currentId);
 | |
| 	Obj.value = '';
 | |
| 	Obj.style.backgroundColor='';	
 | |
| 	removeLayer("picker");
 | |
| }
 | |
| function removeLayer(id){
 | |
| 	if(document.getElementById(id) ==null){
 | |
| 		return;	
 | |
| 	}
 | |
| 	if (document.layers && document.layers[id]) {
 | |
|   		document.layers[id].visibility='hide'
 | |
| 		delete document.layers[id]
 | |
| 	}
 | |
| 	if (document.all && document.all[id]) {
 | |
| 		document.all[id].innerHTML=''
 | |
| 		document.all[id].outerHTML=''
 | |
| 	}else if(document.getElementById){
 | |
| 		 var b = document.body;
 | |
|  		 var layer = document.getElementById(id);
 | |
| 	 	 b.removeChild(layer);
 | |
| 	}
 | |
| }
 | |
| function getPickerContent(){
 | |
| 	var content = 	'<table width="222" border="0" cellpadding="0" cellspacing="1"><tr><td>';
 | |
| 	content += '<table width="100%" border="0" cellpadding="0" cellspacing="1" class="color_table"><tr><td bgcolor="#CCCCCC" id="gcpicker_colorSample" width="40px" class="choosed_color_cell"> </td><td align="center"><div id="gcpicker_colorCode">#CCCCCC</div></td><td width="60px" align="center"><input type="submit" value="" onclick="cancel()" class="default_color_btn" /></td></tr></table>';
 | |
| 	content += '</td></tr><tr><td>';
 | |
| 	content += colorTable()+'</td></tr></table>';
 | |
| 	return content;	
 | |
| }
 | |
| function colorTable(){
 | |
| 	var clrfix = Array("#000000","#333333","#666666","#999999","#cccccc","#ffffff","#ff0000","#00ff00","#0000ff","#ffff00","#00ffff","#ff00ff");
 | |
| 	var table ='<table border="0"  cellpadding="0" cellspacing="0" bgcolor="#000000"><tr>';
 | |
| 	table += '';
 | |
| 	for(var j=0;j<3;j++){
 | |
| 		table += '<td width="11"><table bgcolor="#000000"  border="0"  cellpadding="0" cellspacing="1"  class="color_table">';
 | |
| 		for(var i=0;i<12;i++){
 | |
| 			var clr ='#000000';
 | |
| 			if(j==1){
 | |
| 				clr = clrfix[i];	
 | |
| 			}
 | |
| 			table += '<tr><td bgcolor="'+clr+'" class="cell_color" onmouseover="showClr('+"'"+clr+"'"+')" onclick="setClr('+"'"+clr+"'"+')"></td></tr>';
 | |
| 		}
 | |
| 		table += '</table></td>';		
 | |
| 	}
 | |
| 	table +='<td><table border="0" cellpadding="0" cellspacing="0">';	
 | |
| 	for (var c = 0; c<6; c++) {
 | |
| 		if(c==0 || c==3){
 | |
| 			table +="<tr>";	
 | |
| 		}
 | |
| 		table += "<td>"	
 | |
| 		
 | |
| 		table = table+'<table border="0" cellpadding="0" cellspacing="1" class="color_table"> ';
 | |
| 		for (var j = 0; j<6; j++) {
 | |
| 			table +="<tr>";
 | |
| 			for (var i = 0; i<6; i++) {
 | |
| 				var clrhex = rgb2hex(j*255/5,i*255/5,c*255/5);
 | |
| 				table += '<td bgcolor="'+clrhex+'" class="cell_color" onmouseover="showClr('+"'"+clrhex+"'"+')" onclick="setClr('+"'"+clrhex+"'"+')"></td>';
 | |
| 			}
 | |
| 			table +="</tr>";
 | |
| 		}
 | |
| 		table +="</table>";
 | |
| 		table += "</td>"	
 | |
| 		if(c==2 || c==5){
 | |
| 			table +="</tr>";	
 | |
| 		}	
 | |
| 	}
 | |
| 	table +='</table></td></tr></table>';	
 | |
| 	return table;
 | |
| }
 | |
| 
 | |
| function findPosX(obj){
 | |
| 	var curleft = 0;
 | |
| 	if(obj.offsetParent)
 | |
|         while(1){
 | |
| 			curleft += obj.offsetLeft;
 | |
| 			if(!obj.offsetParent)
 | |
| 			break;
 | |
| 			obj = obj.offsetParent;
 | |
| 		}
 | |
| 	else if(obj.x)
 | |
| 	curleft += obj.x;
 | |
| 	return curleft;
 | |
| }
 | |
| function findPosY(obj){
 | |
| 	var curtop = 0;
 | |
| 	if(obj.offsetParent){
 | |
| 		while(1){
 | |
| 			curtop += obj.offsetTop;
 | |
| 			if(!obj.offsetParent){
 | |
| 				break;
 | |
| 			}
 | |
| 			obj = obj.offsetParent;
 | |
| 		}
 | |
|     }else if(obj.y){
 | |
| 		curtop += obj.y;
 | |
| 	}
 | |
| 	return curtop;
 | |
| }
 | |
| 
 | |
| function rgb2hex(red, green, blue)
 | |
| {
 | |
|     var decColor = red + 256 * green + 65536 * blue;
 | |
|     var clr = decColor.toString(16);
 | |
| 	for(var i =clr.length;i<6;i++){
 | |
| 		clr = "0"+clr;	
 | |
| 	}
 | |
| 	return "#"+clr;
 | |
| }
 |