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' />&nbsp;<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;
};