kindeditor的颜色插件重写

从网上找了个颜色插件，改写到kindeditor中，本人js太烂，代码还需整理，不过可以用了
KE.colorpicker = function(arg) {
var wrapper;
var x = arg.x || 0;
var y = arg.y || 0;
var z = arg.z || 0;
var colors = arg.colors || KE.setting.colorTable;
var doc = arg.doc || document;
var onclick = arg.onclick;
var selectedColor = (arg.selectedColor || '').toLowerCase();
var target;
var valueElement;
var styleElement;
var dir = KE.scriptPath + 'plugins/jscolor/';
var offSetTarget;
var images = {
pad : [ 181, 101 ],
sld : [ 16, 101 ],
cross : [ 15, 15 ],
arrow : [ 7, 11 ]
};
this.picker = {
box : KE.$$('div'),
boxB : KE.$$('div'),
pad : KE.$$('div'),
padB : KE.$$('div'),
padM : KE.$$('div'),
sld : KE.$$('div'),
sldB : KE.$$('div'),
sldM : KE.$$('div')
};
function init() {
wrapper = KE.$$('div');
wrapper.className = 'ke-colorpicker';
wrapper.style.top = y + 'px';
wrapper.style.left = x + 'px';
wrapper.style.zIndex = z;
}
init.call(this);
this.remove = function() {
doc.body.removeChild(wrapper);
};
this.getElement = function() {
function addAttr(cell, color, cls) {
if (selectedColor === color.toLowerCase()) cls += ' ke-colorpicker-cell-selected';
cell.className = cls;
cell.title = color || "更多颜色";
cell.onmouseover = function() { this.className = cls + ' ke-colorpicker-cell-on'; };
cell.onmouseout = function() { this.className = cls; };
if (color) {
var div = KE.$$('div');
div.className = 'ke-colorpicker-cell-color';
div.style.backgroundColor = color;
cell.appendChild(div);
cell.onclick = function() { onclick(color); };
} else {
cell.innerHTML = "<input id='jscolor' type='text' value='更多颜色' class='jscolor' size='10' /> <input type='button' value='确定' />";
cell.onclick = function() {
drawPicker();
};
}
}
var table = KE.$$('table');
table.className = 'ke-colorpicker-table';
table.cellPadding = 0;
table.cellSpacing = 0;
table.border = 0;
var row = table.insertRow(0),
cell = row.insertCell(0);
cell.colSpan = colors[0].length;
addAttr(cell, '', 'ke-colorpicker-cell-top');
for (var i = 0; i < colors.length; i++) {
var rowI = table.insertRow(i + 1);
for (var j = 0; j < colors[i].length; j++) {
var color = colors[i][j],
cellI = rowI.insertCell(j);
addAttr(cellI, color, 'ke-colorpicker-cell');
}
}
var div = KE.$$('div');
var comPic = KE.$$('div');
offSetTarget = comPic;
var morePic = KE.$$('div');
var clearDiv = KE.$$('div');
comPic.appendChild(table);
morePic.appendChild(this.picker.boxB);
comPic.className = "float-left";
morePic.className = "float-left";
clearDiv.className = "clear-float";
div.appendChild(comPic);
div.appendChild(morePic);
div.appendChild(clearDiv);
return div;
}
this.required = true;
this.adjust = true;
this.hash = false;
this.caps = true;
this.hsv = [0, 0, 1];
this.rgb = [1, 1, 1];
this.pickerOnfocus = true;
this.pickerMode = 'HSV';
this.pickerFace = 6;
this.pickerFaceColor = 'ThreeDFace';
this.pickerBorder = 0;
this.pickerBorderColor = '';
this.pickerInset = 0;
this.pickerInsetColor = '';
this.importColor = function() {
if(!valueElement) {
this.exportColor();
} else {
if(!this.adjust) {
if(!this.fromString(valueElement.value, leaveValue)) {
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
styleElement.style.color = styleElement.jscStyle.color;
this.exportColor(leaveValue | leaveStyle);
}
} else if(!this.required && /^\s*$/.test(valueElement.value)) {
valueElement.value = '';
styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
styleElement.style.color = styleElement.jscStyle.color;
this.exportColor(leaveValue | leaveStyle);
} else if(this.fromString(valueElement.value)) {

} else {
this.exportColor();
}
}
};
this.exportColor = function(flags) {
if(!(flags & leaveValue) && valueElement) {
var value = this.toString();
if(this.caps) { value = value.toUpperCase(); }
if(this.hash) { value = '#'+value; }
valueElement.value = value;
}
if(!(flags & leaveStyle) && styleElement) {
styleElement.style.backgroundColor =
'#'+this.toString();
styleElement.style.color =
0.213 * this.rgb[0] +
0.715 * this.rgb[1] +
0.072 * this.rgb[2]
< 0.5 ? '#FFF' : '#000';
}
if(!(flags & leavePad)) {
redrawPad();
}
if(!(flags & leaveSld)) {
redrawSld();
}
};
this.fromHSV = function(h, s, v, flags) {
h<0 && (h=0) || h>6 && (h=6);
s<0 && (s=0) || s>1 && (s=1);
v<0 && (v=0) || v>1 && (v=1);
this.rgb = HSV_RGB(
h===null ? this.hsv[0] : (this.hsv[0]=h),
s===null ? this.hsv[1] : (this.hsv[1]=s),
v===null ? this.hsv[2] : (this.hsv[2]=v)
);
this.exportColor(flags);
};
this.fromRGB = function(r, g, b, flags) {
r<0 && (r=0) || r>1 && (r=1);
g<0 && (g=0) || g>1 && (g=1);
b<0 && (b=0) || b>1 && (b=1);
var hsv = RGB_HSV(
r===null ? this.rgb[0] : (this.rgb[0]=r),
g===null ? this.rgb[1] : (this.rgb[1]=g),
b===null ? this.rgb[2] : (this.rgb[2]=b)
);
if(hsv[0] !== null) {
this.hsv[0] = hsv[0];
}
if(hsv[2] !== 0) {
this.hsv[1] = hsv[1];
}
this.hsv[2] = hsv[2];
this.exportColor(flags);
};
this.fromString = function(hex, flags) {
var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
if(!m) {
return false;
} else {
if(m[1].length === 6) {
this.fromRGB(
parseInt(m[1].substr(0,2),16) / 255,
parseInt(m[1].substr(2,2),16) / 255,
parseInt(m[1].substr(4,2),16) / 255,
flags
);
} else {
this.fromRGB(
parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
flags
);
}
return true;
}
};
this.toString = function() {
return (
(0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
(0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
(0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
);
};
function getMousePos(e) {
if(!e) { e = window.event; }
if(typeof e.pageX === 'number') {
return [e.pageX, e.pageY];
} else if(typeof e.clientX === 'number') {
return [
e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
e.clientY + document.body.scrollTop + document.documentElement.scrollTop
];
}
}
function getElementPos(e) {
var e1=e, e2=e;
var x=0, y=0;
if(e1.offsetParent) {
do {
x += e1.offsetLeft;
y += e1.offsetTop;
} while(e1 = e1.offsetParent);
}
while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
x -= e2.scrollLeft;
y -= e2.scrollTop;
}
return [x, y];
}
function RGB_HSV(r, g, b) {
var n = Math.min(Math.min(r,g),b);
var v = Math.max(Math.max(r,g),b);
var m = v - n;
if(m === 0) { return [ null, 0, v ]; }
var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
return [ h===6?0:h, m/v, v ];
}
function HSV_RGB(h, s, v) {
if(h === null) { return [ v, v, v ]; }
var i = Math.floor(h);
var f = i%2 ? h-i : 1-(h-i);
var m = v * (1 - s);
var n = v * (1 - s*f);
switch(i) {
case 6:
case 0: return [v,n,m];
case 1: return [n,v,m];
case 2: return [m,v,n];
case 3: return [m,n,v];
case 4: return [n,m,v];
case 5: return [v,m,n];
}
}
function redrawPad() {
switch(modeID) {
case 0: var yComponent = 1; break;
case 1: var yComponent = 2; break;
}
var x = Math.round((THIS.hsv[0]/6) * (images.pad[0]-1));
var y = Math.round((1-THIS.hsv[yComponent]) * (images.pad[1]-1));
THIS.picker.padM.style.backgroundPosition =
(THIS.pickerFace+THIS.pickerInset+x - Math.floor(images.cross[0]/2)) + 'px ' +
(THIS.pickerFace+THIS.pickerInset+y - Math.floor(images.cross[1]/2)) + 'px';
var seg = THIS.picker.sld.childNodes;
switch(modeID) {
case 0:
var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
for(var i=0; i<seg.length; i+=1) {
seg[i].style.backgroundColor = 'rgb('+
(rgb[0]*(1-i/seg.length)*100)+'%,'+
(rgb[1]*(1-i/seg.length)*100)+'%,'+
(rgb[2]*(1-i/seg.length)*100)+'%)';
}
break;
case 1:
var rgb, s, c = [ THIS.hsv[2], 0, 0 ];
var i = Math.floor(THIS.hsv[0]);
var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i);
switch(i) {
case 6:
case 0: rgb=[0,1,2]; break;
case 1: rgb=[1,0,2]; break;
case 2: rgb=[2,0,1]; break;
case 3: rgb=[2,1,0]; break;
case 4: rgb=[1,2,0]; break;
case 5: rgb=[0,2,1]; break;
}
for(var i=0; i<seg.length; i+=1) {
s = 1 - 1/(seg.length-1)*i;
c[1] = c[0] * (1 - s*f);
c[2] = c[0] * (1 - s);
seg[i].style.backgroundColor = 'rgb('+
(c[rgb[0]]*100)+'%,'+
(c[rgb[1]]*100)+'%,'+
(c[rgb[2]]*100)+'%)';
}
break;
}
}
function redrawSld() {
switch(modeID) {
case 0: var yComponent = 2; break;
case 1: var yComponent = 1; break;
}
var y = Math.round((1-THIS.hsv[yComponent]) * (images.sld[1]-1));
THIS.picker.sldM.style.backgroundPosition =
'0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(images.arrow[1]/2)) + 'px';
}
function blurTarget() {
if(valueElement === target) {
THIS.importColor();
}
}
function blurValue() {
if(valueElement !== target) {
THIS.importColor();
}
}
function setPad(e) {
var posM = getMousePos(e);
var x = posM[0]-posPad[0];
var y = posM[1]-posPad[1];
switch(modeID) {
case 0: THIS.fromHSV(x*(6/(images.pad[0]-1)), 1 - y/(images.pad[1]-1), null, leaveSld); break;
case 1: THIS.fromHSV(x*(6/(images.pad[0]-1)), null, 1 - y/(images.pad[1]-1), leaveSld); break;
}
}
function setSld(e) {
var posM = getMousePos(e);
var y = posM[1]-posPad[1];
switch(modeID) {
case 0: THIS.fromHSV(null, null, 1 - y/(images.sld[1]-1), leavePad); break;
case 1: THIS.fromHSV(null, 1 - y/(images.sld[1]-1), null, leavePad); break;
}
}
function fireEvent(el, evnt) {
if(!el) {
return;
}
if(document.createEventObject) {
var ev = document.createEventObject();
el.fireEvent('on'+evnt, ev);
} else if(document.createEvent) {
var ev = document.createEvent('HTMLEvents');
ev.initEvent(evnt, true, true);
el.dispatchEvent(ev);
} else if(el['on'+evnt]) {
el['on'+evnt]();
}
}
function drawPicker() {
target = KE.$("jscolor");
valueElement = target;
styleElement = target;
if(styleElement) {
styleElement.jscStyle = {
backgroundColor : styleElement.style.backgroundColor,
color : styleElement.style.color
};
}
for(var i=0,segSize=4; i<images.sld[1]; i+=segSize) {
var seg = KE.$$('div');
seg.style.height = segSize+'px';
seg.style.width = '100%';
seg.className = 'float-left';
seg.style.fontSize = '0';
seg.style.lineHeight = '0';
THIS.picker.sld.appendChild(seg);
}
THIS.picker.sldB.appendChild(THIS.picker.sld);
THIS.picker.box.appendChild(THIS.picker.sldB);
THIS.picker.box.appendChild(THIS.picker.sldM);
THIS.picker.padB.appendChild(THIS.picker.pad);
THIS.picker.box.appendChild(THIS.picker.padB);
THIS.picker.box.appendChild(THIS.picker.padM);
THIS.picker.boxB.appendChild(THIS.picker.box);
ps = getElementPos(offSetTarget);
posPad = [
ps[0]+offSetTarget.offsetWidth+THIS.pickerBorder+2*THIS.pickerFace+THIS.pickerInset-1,
ps[1]+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset-1 ];
posSld = [
null,
ps[1]+THIS.pickerBoposPadrder+THIS.pickerFace+THIS.pickerInset ];
THIS.picker.box.onmouseup =
THIS.picker.box.onmouseout = function() { target.focus(); };
THIS.picker.box.onmousedown = function() { abortBlur=true; };
THIS.picker.box.onmousemove = function(e) {holdPad && setPad(e); holdSld && setSld(e); };
THIS.picker.padM.onmouseup =
THIS.picker.padM.onmouseout = function() { if(holdPad) { holdPad=false; fireEvent(valueElement,'change'); } };
THIS.picker.padM.onmousedown = function(e) { holdPad=true; setPad(e); };
THIS.picker.sldM.onmouseup =
THIS.picker.sldM.onmouseout = function() { if(holdSld) { holdSld=false; fireEvent(valueElement,'change'); } };
THIS.picker.sldM.onmousedown = function(e) { holdSld=true; setSld(e); };
THIS.picker.box.style.width = 4*THIS.pickerInset + 2*THIS.pickerFace + images.pad[0] + 2*images.arrow[0] + images.sld[0] + 'px';
THIS.picker.box.style.height = 2*THIS.pickerInset + 2*THIS.pickerFace + images.pad[1] + 'px';
THIS.picker.boxB.style.clear = 'both';
THIS.picker.boxB.style.left = x+offSetTarget.offsetWidth+'px';
THIS.picker.boxB.style.top = y+'px';
THIS.picker.boxB.style.background = THIS.pickerFaceColor;
THIS.picker.pad.style.width = images.pad[0]+'px';
THIS.picker.pad.style.height = images.pad[1]+'px';
THIS.picker.padB.style.position = 'absolute';
THIS.picker.padB.style.left = 2*THIS.pickerFace + offSetTarget.offsetWidth +'px';
THIS.picker.padB.style.top = THIS.pickerFace+'px';
THIS.picker.padB.style.border = THIS.pickerInset+'px solid';
THIS.picker.padB.style.borderColor = THIS.pickerInsetColor;
THIS.picker.padM.style.position = 'absolute';
THIS.picker.padM.style.left = THIS.pickerFace + THIS.pickerInset+ offSetTarget.offsetWidth +'px';
THIS.picker.padM.style.top = '0';
THIS.picker.padM.style.width = 2*THIS.pickerInset + images.pad[0] +images.arrow[0]+ 'px';
THIS.picker.padM.style.height = THIS.picker.box.style.height;
THIS.picker.padM.style.cursor = 'crosshair';
THIS.picker.sld.style.overflow = 'hidden';
THIS.picker.sld.style.width = images.sld[0]+'px';
THIS.picker.sld.style.height = images.sld[1]+'px';
THIS.picker.sldB.style.position = 'absolute';
THIS.picker.sldB.style.left = 4*THIS.pickerFace +2*THIS.pickerInset+ offSetTarget.offsetWidth + images.pad[0] +'px';
THIS.picker.sldB.style.top = THIS.pickerFace+'px';
THIS.picker.sldB.style.border = THIS.pickerInset+'px solid';
THIS.picker.sldB.style.borderColor = THIS.pickerInsetColor;
THIS.picker.sldM.style.position = 'absolute';
THIS.picker.sldM.style.left = 3*THIS.pickerFace +2*THIS.pickerInset+ offSetTarget.offsetWidth + images.pad[0] +'px';
THIS.picker.sldM.style.top = '0';
THIS.picker.sldM.style.width = images.sld[0] + images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px';
THIS.picker.sldM.style.height = THIS.picker.box.style.height;
THIS.picker.sldM.style.cursor = 'pointer';
switch(modeID) {
case 0: var padImg = 'hs.png'; break;
case 1: var padImg = 'hv.png'; break;
}
THIS.picker.padM.style.background = "url('"+dir+"cross.gif') no-repeat";
THIS.picker.sldM.style.background = "url('"+dir+"arrow.gif') no-repeat";
THIS.picker.pad.style.background = "url('"+dir+padImg+"') 0 0 no-repeat";
redrawPad();
redrawSld();
KE.event.add(target, 'blur', function() {
if(!abortBlur) {
window.setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false; }, 0);
} else {
abortBlur = false;
}
});
if(valueElement) {
var updateField = function() {
THIS.fromString(valueElement.value, leaveValue);
};
KE.event.bind(valueElement, 'keyup', updateField);
KE.event.bind(valueElement, 'input', updateField);
KE.event.bind(valueElement, 'blur', blurValue);
valueElement.setAttribute('autocomplete', 'off');
}
}
var THIS = this;
var modeID = this.pickerMode.toLowerCase()==='hvs' ? 1 : 0;
var abortBlur = false;
var
holdPad = false,
holdSld = false;
var
posPad,
posSld;
var
leaveValue = 1<<0,
leaveStyle = 1<<1,
leavePad = 1<<2,
leaveSld = 1<<3;
};