self-contained color picker based on the idea of jscolor
بۇ قوليازمىنى بىۋاسىتە قاچىلاشقا بولمايدۇ. بۇ باشقا قوليازمىلارنىڭ ئىشلىتىشى ئۈچۈن تەمىنلەنگەن ئامبار بولۇپ، ئىشلىتىش ئۈچۈن مېتا كۆرسەتمىسىگە قىستۇرىدىغان كود: // @require https://update.greatest.deepsurf.us/scripts/25223/160404/jscolorXS.js
// ==UserScript==
// @name jscolorXS
// @namespace edzep.scripts
// @description self-contained color picker based on the idea of jscolor
// @author Peter Dematte, http://dematte.at
// @version 0.9x
// @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
// ==/UserScript==
// used with permission of the author, via email exchange in 2011
// minor tweaks to the code have been made, also with permission
/*
* @version 0.9x
* @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
* @author Peter Dematte, http://dematte.at
* @created 2010-08-03
* @updated 2010-08-13
* @status not finished (~265 lines)
* @link http://dematte.at/jscolorXS/
* based on the idea of jscolor.com
* inspired by jondyer.name, quirksmode.com
*/
var jscolor = {
pickerMode : 'HSV',
pickerBorderColor : '#efefef #a0a0a0 #a0a0a0 #efefef',
pickerInsetColor : '#a0a0a0 #fff #fff #a0a0a0',
pickerFaceColor : '#DDDDDD',
pickerBorder : 2,
pickerInset : 2,
pickerFace : 10,
hash : '#',
caps : true,
// ..... etc.
init : function() {
var objs = document.getElementsByTagName('input'), cName;
for (var n=0; n<objs.length; n++) if (objs[n].className.indexOf('color') != -1) {
// cName = objs[n].className.replace(/(color)( )?/,''); objs[n].color = cName; // do something with it...
jscolor.addEvent(objs[n], 'click', jscolor.togglePicker);
objs[n].style.backgroundColor = objs[n].value != '' ? (objs[n].value.indexOf('#') != -1 ? '' : '#') + objs[n].value : '#FFFFFF';
if (objs[n].value == '') objs[n].value = '#FFFFFF';
objs[n].style.color = jscolor.getBrightness(jscolor.HEX2RGB(objs[n].value)) > 128 ? '#000' : '#FFF';
}
if (!objs[0]) return;
objs[0].parentNode.appendChild(jscolor.build());
jscolor.addEvents();
},
build : function() {
var newCSS = document.createElement('style'), div = document.createElement('div'), divColl,
ver = navigator.userAgent.toLowerCase(), IE = document.all,
IE = IE ? ver.indexOf("msie 5") !=-1 || ver.indexOf("msie 6") !=-1 : false,
cpMS = (jscolor.pickerMode == 'HVS'),
// twf = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'tw.png\', sizingMethod=\'scale\')',
// tbf = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'tb.png\', sizingMethod=\'scale\')',
db1 = 'iVBORw0KGgoAAAANSUhEUgAAA',
db2 = 'AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAA',
db3 = db1+'AEAAABlCAYAAACMcInF'+db2+'N',
db4 = 'R0lGODlhDwAPAPEAAAAAAP///',
hsv = db1+'LUAAAABCAIAAAAXanid'+db2+'EtJREFUKFNj/M/AwMDDwMAGRhAGMomfi1UjTMtfToZfDCD0BYNEEyRDDQ5HU+BciLexOppy54KDgGLH4YwiZobvSGFMRnBCogiLPwFPaF0BRtROKwAAAABJRU5ErkJggg==',
tb = db3+'dJREFUKFMVxE1EA2AAANCvHyVJMpPJyEhEIpGImB0SHbJDOmSH2SEiOkyHDumQDukQERExosN0SIdEOiQmEpFIJBlFibKUUu/wXgghVP0L1apRrepUrwY1qknNalFEUbUqpjbF1a6EOtSpLnWrR73qU78GNKghJZXSsEY0qjGlNa4JTSqjrHKa0rRmNKu85jSvBS1qScta0arWtK4NbWpL2ypoR7sqak/7OtChjnSsE53qTCWd60KXutK1bnSrO93rQY8q60nPetGr3vSuD1X0qS9960e/f/WiMhwclNgJAAAAAElFTkSuQmCC',
tw = db3+'hJREFUKFMVxEFEQwEAANC10iRJMpnEjEQkEokRs8OMHabDdEiH6RARHdKhQzqkQzpERESM2CEd0iGRDolEIhKJJFGUKGVpv947vFAQBDWh/8KqVZ3qFVGDGtWkZrWoVVG1KaZ2dSiuhDrVpW71qFd96teABpXUkFJKK6OscsprWAWNaFRjKmpcE5rUlKY1o1nNaV4LWtSSlrWiVa1pXRva1JZK2lZZO9rVnvZ1oEMd6VgnOtWZznWhS13pWje61Z3u9aBHPelZL3rVm971oU996VsV/ehX1T9OtF/8xZgdKAAAAABJRU5ErkJggg==',
cross = db4+'////////yH5BAEAAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=',
arrow = db4+'6g8eKg8eCH5BAEAAAIALAAAAAAHAAsAAAITTIQYcLnsgGxvijrxqdQq6DRJAQA7',
jsW = 211+jscolor.pickerInset*4+jscolor.pickerFace*2,
jsH = 101+jscolor.pickerInset*2+jscolor.pickerFace*2,
addQ = jscolor.pickerInset*2,
jsF = jscolor.pickerFace, jsI = jscolor.pickerInset, jsB = jscolor.pickerBorder, jsIC = jscolor.pickerInsetColor,
CSS =
'.jscolor{position:relative;width:'+jsW+'px !important;width:'+(jsW+jsB*2)+'px;height:'+jsH+'px !important;height:'+(jsH+jsB*2)+'px;border:'+jsB+'px solid #fff;border-color:'+jscolor.pickerBorderColor+';background-color:'+jscolor.pickerFaceColor+'}'+
'.jscolor .left{position:absolute;left:'+jsF+'px;top:'+jsF+'px;width:181px !important;width:'+(181+addQ)+'px;height:100px !important;height:'+(100+addQ)+'px;border:'+jsI+'px solid #fff;border-color:'+jsIC+';background-image:url('+(IE?'hsv.png':'data:image/png;base64,'+hsv+'')+')}'+
'.jscolor .left .layer, .jscolor .left .mousepad{position:absolute;width:181px;height:100px}'+
'.jscolor .left .mousepad{cursor:crosshair}'+
'.jscolor .left .cursor{position:absolute;top:-7px;left:-7px;width:15px;height:15px}'+
'.jscolor .right{position:absolute;right:'+jsF+'px;top:'+jsF+'px;width:16px !important;width:'+(16+addQ)+'px;height:100px !important;height:'+(100+addQ)+'px;border:'+jsI+'px solid #fff;border-color:'+jsIC+';background-color:#f00}'+
'.jscolor .right .mousepad{position:absolute;right:0px;width:26px;height:100px;cursor:hand;cursor:pointer}'+
'.jscolor .right .cursor{position:absolute;right:'+(jsI+17)+'px;top:-5px;width:7px;height:11px}'+
'.cross{background-image:url('+(IE?'cross.gif':'data:image/gif;base64,'+cross+'')+')}'+
'.arrow{background-image:url('+(IE?'arrow.gif':'data:image/gif;base64,'+arrow+'')+')}'+
'.tw{background-image:url('+(IE?'tw.png':'data:image/png;base64,'+tw+'')+')}'+
'.tb{background-image:url('+(IE?'tb.png':'data:image/png;base64,'+tb+'')+')}';
newCSS.setAttribute('type','text/css');
if (newCSS.styleSheet) newCSS.styleSheet.cssText = '<!--\n'+CSS+'\n-->';
else newCSS.appendChild(document.createTextNode('<!--\n'+CSS+'\n-->'));
document.getElementsByTagName('head')[0].appendChild(newCSS);
div.className = 'jscolor';
div.innerHTML = '<div class="left"><div class="layer t'+(cpMS?'b':'w')+'"></div><div class="cursor cross"></div><div class="mousepad"></div></div>'+
'<div class="right t'+(cpMS?'w':'b')+'"><div class="cursor arrow"></div><div class="mousepad"></div></div>';
divColl = div.getElementsByTagName('div');
for (var n=0; n<divColl.length; n++) jscolor[['jcL','layL','curL','padL','jcR','curR','padR'][n]]=divColl[n];
div.style.position = 'absolute'; div.style.display = 'none';
jscolor.jscolor = div;
return div;
},
addEvents : function() {
jscolor.padL.onmousedown = jscolor.padR.onmousedown = function(e){
var e = e ? e : window.event, obj = e.target || e.srcElement;
obj.xyNow = jscolor.getOrigin(obj);
jscolor.doDrag(e);
jscolor.addEvent(document.body, 'mousemove', jscolor.doDrag);
return false;
}
jscolor.addEvent(document.body, 'mouseup', function(){
jscolor.removeEvent(document.body, 'mousemove');
jscolor.padL.xyNow = jscolor.padR.xyNow = false;
return false;
});
},
doDrag : function(e,mouseNow,init) {
if (jscolor.curObj) jscolor.obj = jscolor.curObj;
var e = e ? e : window.event,
mouseNow = mouseNow ? mouseNow : jscolor.getMousePos(e,jscolor.padL.xyNow || jscolor.padR.xyNow),
curL = jscolor.curL.style, curR = jscolor.curR.style,
cpMS = (jscolor.pickerMode == 'HVS'),
val = '';
mouseNow[1] = mouseNow[1] < 0 ? 0 : mouseNow[1] > 100 ? 100 : mouseNow[1];
mouseNow[0] = mouseNow[0] < 0 ? 0 : mouseNow[0] > 180 ? 180 : mouseNow[0];
var Hc = mouseNow[0]/180*255, Sc = Vc = 255-(mouseNow[1]/100*255), // c = coordinate whise
Sr = jscolor.color.S/100*255, Vr = jscolor.color.V/100*255; // r = real
if (jscolor.padL.xyNow || init == jscolor.padL) { // left picker
curL.left = mouseNow[0]-7+'px';
curL.top = mouseNow[1]-7+'px';
jscolor.color.putHSV([mouseNow[0]*2, cpMS?100-mouseNow[1]:jscolor.color.S, cpMS?jscolor.color.V:100-mouseNow[1]]);
jscolor.jcR.style.backgroundColor = 'rgb('+jscolor.HSV2RGB(Hc, cpMS?Sc:255, cpMS?255:Vc)+')';
} else { // right picker
curR.top = mouseNow[1]-5+'px';
jscolor.color.putHSV([jscolor.color.H, cpMS?jscolor.color.S:100-mouseNow[1], cpMS?100-mouseNow[1]:jscolor.color.V]);
}
if (init) return false;
jscolor.obj.style.backgroundColor = 'rgb('+[jscolor.color.R,jscolor.color.G,jscolor.color.B]+')';
jscolor.obj.style.color = jscolor.getBrightness([jscolor.color.R,jscolor.color.G,jscolor.color.B]) > 128 ? '#000' : '#FFF';
val = jscolor.RGB2HEX([jscolor.color.R,jscolor.color.G,jscolor.color.B]);
jscolor.obj.value = (jscolor.hash ? '#':'') + (jscolor.caps ? val : val.toLowerCase());
return false;
},
color : {
H:0,S:100,V:100,R:0,G:0,B:0,
putRGB : function (rgb) {this.R=rgb[0]; this.G=rgb[1]; this.B=rgb[2]},
putHSV : function (hsv) {
this.H=hsv[0]; this.S=hsv[1]; this.V=hsv[2];
var rgb = jscolor.HSV2RGB(this.H/360*255,this.S/100*255,this.V/100*255);
this.R=rgb[0]; this.G=rgb[1]; this.B=rgb[2]
}
},
togglePicker : function(e) {
var e = e ? e : window.event, obj = e.target || e.srcElement,
jcs = jscolor.jscolor.style,
HSVxy = jscolor.RGB2HSV(jscolor.HEX2RGB(obj.value)),
cpMS = (jscolor.pickerMode == 'HVS');
if (jcs.display != 'none' && jscolor.curObj == obj) jcs.display = 'none';
else {
jcs.display = 'block';
jcs.left = obj.offsetLeft+obj.scrollLeft+'px';
jcs.top = obj.offsetTop+obj.offsetHeight+obj.scrollTop+'px';
jscolor.doDrag(null,[null,100-HSVxy[(cpMS?1:2)]],jscolor.padR);
jscolor.doDrag(null,[HSVxy[0]/2,100-HSVxy[(cpMS?2:1)]],jscolor.padL);
}
jscolor.curObj = obj;
},
getBrightness : function(rgb) {return Math.sqrt(rgb[0]*rgb[0]*.241+rgb[1]*rgb[1]*.691+rgb[2]*rgb[2]*.068)},
RGB2HEX : function (rgb) {
return((rgb[0]<16?'0':'')+rgb[0].toString(16)+
(rgb[1]<16?'0':'')+rgb[1].toString(16)+
(rgb[2]<16?'0':'')+rgb[2].toString(16)).toUpperCase();
},
HEX2RGB : function (hex) {
hex = hex.replace('#','');
return [parseInt(hex.substr(0,2),16), parseInt(hex.substr(2,2),16), parseInt(hex.substr(4,2),16)];
},
HSV2RGB : function(x,y,z) {
var r=g=b=c=0,d=(100-z/255*100)/100,i=y/255,j=y*(255-z)/255;cPHue=z;
if (x<42.5){r=y;g=x*6*i;g+=(y-g)*d;b=j;}
else if (x>=42.5&&x< 85){c=42.5;r=(255-(x-c)*6)*i;r+=(y-r)*d;g=y;b=j;}
else if (x>=85&&x<127.5){c=85;r=j;g=y;b=(x-c)*6*i;b+=(y-b)*d;}
else if (x>=127.5&&x<170){c=127.5;r=j;g=(255-(x-c)*6)*i;g+=(y-g)*d;b=y;}
else if (x>=170&&x<212.5){c=170;r=(x-c)*6*i;r+=(y-r)*d;g=j;b=y;}
else if (x>=212.5){c=212.5;r=y;g=j;b=(255-(x-c)*6)*i;b+=(y-b)*d;}
return [Math.round(r),Math.round(g),Math.round(b)];
},
RGB2HSV : function(r, g, b) {
if (typeof r == 'object') {var b=r[2],g=r[1];r=r[0]}
var n = Math.min(Math.min(r,g),b), v = Math.max(Math.max(r,g),b), m = v - n;
if(m === 0) return [0, 0, v/255*100];
var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
return [h===6?0:h*60, m/v*100, v/255*100];
},
getStyle : function (prop,obj) {
if (obj.currentStyle) return obj.currentStyle[prop];
else if (window.getComputedStyle) return document.defaultView.getComputedStyle(obj,null).getPropertyValue(prop);
},
getOrigin : function(obj) {
var parent=box=null, pos=[];
if (obj.parentNode === null || jscolor.getStyle('display', obj) == 'none') return false;
if (obj.getBoundingClientRect) { // IE
box = obj.getBoundingClientRect();
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return [Math.round(box.left) + scrollLeft, Math.round(box.top) + scrollTop];
} else if (document.getBoxObjectFor) { // gecko
box = document.getBoxObjectFor(obj);
pos = [box.x, box.y];
} else { // safari/opera
pos = [obj.offsetLeft, obj.offsetTop];
parent = obj.offsetParent;
if (parent != obj) {
while (parent) {
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent = parent.offsetParent;
}
}
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && jscolor.getStyle('position', obj) == 'absolute')) {
pos[1] -= document.body.offsetTop;
}
}
if (obj.parentNode) parent = obj.parentNode;
else parent = null;
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') {
pos[0] -= parent.scrollLeft;
pos[1] -= parent.scrollTop;
if (parent.parentNode) parent = parent.parentNode;
else parent = null;
}
return pos;
},
getMousePos : function(e,relC) {
var e = e ? e : window.event;
if(typeof e.pageX === 'number') return [e.pageX - relC[0], e.pageY - relC[1]];
else return [e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - relC[0],
e.clientY + document.body.scrollTop + document.documentElement.scrollTop - relC[1]];
},
addEvent : function(obj, type, func) {
if (!obj || !type || !func) return false;
if (obj == window && type == 'load') {jscolor.addWinEvent(obj, type, func); return false;}
if (!obj.funcCache) obj.funcCache = [];
obj.funcCache[type] = func;
if (obj.addEventListener) obj.addEventListener(type, func, false);
else obj.attachEvent("on" + type, func);
},
addWinEvent : function(obj, type, func) {
if(typeof window.addEventListener != 'undefined') window.addEventListener(type, func, false);
else if(typeof document.addEventListener != 'undefined') document.addEventListener(type, func, false); //.. opera
else if(typeof window.attachEvent != 'undefined') window.attachEvent('on' + type, func);
else {
if(typeof window.onload == 'function') {
var existing = onload;
window.onload = function() {
existing();
func();
};
} else window.onload = func;
}
},
removeEvent : function(obj, type, func) {
if (!obj || !type) return false;
if (!func && !obj.funcCache[type]) return false;
if (obj.removeEventListener) obj.removeEventListener(type, func||obj.funcCache[type], false);
else obj.detachEvent("on" + type, func||obj.funcCache[type]);
}
}
jscolor.addEvent(window, 'load', jscolor.init);