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