From 708df13d4de156ca1301821a6ea6fb0a9a6c7d3d Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Sun, 9 Apr 2017 02:56:45 +0800 Subject: [PATCH 1/8] Add touch support with PointerEvent API (if any) --- colorpicker.js | 44 +++++++++++++++++++++++++++++++++----------- colorpicker.min.js | 2 +- themes.css | 1 + 3 files changed, 35 insertions(+), 12 deletions(-) diff --git a/colorpicker.js b/colorpicker.js index e13892c..4c30a0d 100644 --- a/colorpicker.js +++ b/colorpicker.js @@ -187,6 +187,8 @@ return function(evt) { evt = evt || window.event; var mouse = mousePosition(evt); + mouse.y = mouse.y > slideElement.clientHeight ? slideElement.clientHeight : mouse.y; + mouse.y = mouse.y < 0 ? 0 : mouse.y; ctx.h = mouse.y / slideElement.offsetHeight * 360 + hueOffset; var pickerColor = hsv2rgb({ h: ctx.h, s: 1, v: 1 }); var c = hsv2rgb({ h: ctx.h, s: ctx.s, v: ctx.v }); @@ -206,6 +208,11 @@ width = pickerElement.offsetWidth, height = pickerElement.offsetHeight; + mouse.x = mouse.x > pickerElement.clientWidth ? pickerElement.clientWidth : mouse.x; + mouse.x = mouse.x < 0 ? 0 : mouse.x; + mouse.y = mouse.y > pickerElement.clientHeight ? pickerElement.clientHeight : mouse.y; + mouse.y = mouse.y < 0 ? 0 : mouse.y; + ctx.s = mouse.x / width; ctx.v = (height - mouse.y) / height; var c = hsv2rgb(ctx); @@ -291,8 +298,13 @@ this.pickerElement.innerHTML = picker; } - addEventListener(this.slideElement, 'click', slideListener(this, this.slideElement, this.pickerElement)); - addEventListener(this.pickerElement, 'click', pickerListener(this, this.pickerElement)); + if (window.PointerEvent) { + addEventListener(this.slideElement, 'pointerup', slideListener(this, this.slideElement, this.pickerElement)); + addEventListener(this.pickerElement, 'pointerup', pickerListener(this, this.pickerElement)); + } else { + addEventListener(this.slideElement, 'click', slideListener(this, this.slideElement, this.pickerElement)); + addEventListener(this.pickerElement, 'click', pickerListener(this, this.pickerElement)); + } enableDragging(this, this.slideElement, slideListener(this, this.slideElement, this.pickerElement)); enableDragging(this, this.pickerElement, pickerListener(this, this.pickerElement)); @@ -320,16 +332,26 @@ var mousedown = false; - addEventListener(element, 'mousedown', function(evt) { mousedown = true; }); - addEventListener(element, 'mouseup', function(evt) { mousedown = false; }); - addEventListener(element, 'mouseout', function(evt) { mousedown = false; }); - addEventListener(element, 'mousemove', function(evt) { + if (window.PointerEvent) { + addEventListener(element, 'pointerdown', function(evt) { mousedown = true; }); + addEventListener(element, 'pointerup', function(evt) { mousedown = false; }); + addEventListener(element, 'pointerout', function(evt) { mousedown = false; }); + addEventListener(element, 'pointermove', function(evt) { + if (mousedown) { + listener(evt); + } + }); - if (mousedown) { - - listener(evt); - } - }); + } else { + addEventListener(element, 'mousedown', function(evt) { mousedown = true; }); + addEventListener(element, 'mouseup', function(evt) { mousedown = false; }); + addEventListener(element, 'mouseout', function(evt) { mousedown = false; }); + addEventListener(element, 'mousemove', function(evt) { + if (mousedown) { + listener(evt); + } + }); + } } diff --git a/colorpicker.min.js b/colorpicker.min.js index cce312e..64b9aaf 100644 --- a/colorpicker.min.js +++ b/colorpicker.min.js @@ -1 +1 @@ -(function(s,t,u){var v=(s.SVGAngle||t.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML"),picker,slide,hueOffset=15,svgNS='http://www.w3.org/2000/svg';var w=['
','
','
','
','
','
','
','
'].join('');function mousePosition(a){if(s.event&&s.event.contentOverflow!==u){return{x:s.event.offsetX,y:s.event.offsetY}}if(a.offsetX!==u&&a.offsetY!==u){return{x:a.offsetX,y:a.offsetY}}var b=a.target.parentNode.parentNode;return{x:a.layerX-b.offsetLeft,y:a.layerY-b.offsetTop}}function $(a,b,c){a=t.createElementNS(svgNS,a);for(var d in b)a.setAttribute(d,b[d]);if(Object.prototype.toString.call(c)!='[object Array]')c=[c];var i=0,len=(c[0]&&c.length)||0;for(;i','','','',''].join('');picker=['
','','','','','','','
'].join('');if(!t.namespaces['v'])t.namespaces.add('v','urn:schemas-microsoft-com:vml','#default#VML')}function hsv2rgb(a){var R,G,B,X,C;var h=(a.h%360)/60;C=a.v*a.s;X=C*(1-Math.abs(h%2-1));R=G=B=a.v-C;h=~~h;R+=[C,X,0,0,X,C][h];G+=[X,C,C,X,0,0][h];B+=[0,0,X,C,C,X][h];var r=Math.floor(R*255);var g=Math.floor(G*255);var b=Math.floor(B*255);return{r:r,g:g,b:b,hex:"#"+(16777216|b|(g<<8)|(r<<16)).toString(16).slice(1)}}function rgb2hsv(a){var r=a.r;var g=a.g;var b=a.b;if(a.r>1||a.g>1||a.b>1){r/=255;g/=255;b/=255}var H,S,V,C;V=Math.max(r,g,b);C=V-Math.min(r,g,b);H=(C==0?null:V==r?(g-b)/C+(g','
','
',"",'
','
','
',"
"].join("");function mousePosition(evt){if(window.event&&window.event.contentOverflow!==undefined){return{x:window.event.offsetX,y:window.event.offsetY}}if(evt.offsetX!==undefined&&evt.offsetY!==undefined){return{x:evt.offsetX,y:evt.offsetY}}var wrapper=evt.target.parentNode.parentNode;return{x:evt.layerX-wrapper.offsetLeft,y:evt.layerY-wrapper.offsetTop}}function $(el,attrs,children){el=document.createElementNS(svgNS,el);for(var key in attrs)el.setAttribute(key,attrs[key]);if(Object.prototype.toString.call(children)!="[object Array]")children=[children];var i=0,len=children[0]&&children.length||0;for(;i','','',"",""].join("");picker=['
','','',"",'','',"","
"].join("");if(!document.namespaces["v"])document.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML")}function hsv2rgb(hsv){var R,G,B,X,C;var h=hsv.h%360/60;C=hsv.v*hsv.s;X=C*(1-Math.abs(h%2-1));R=G=B=hsv.v-C;h=~~h;R+=[C,X,0,0,X,C][h];G+=[X,C,C,X,0,0][h];B+=[0,0,X,C,C,X][h];var r=Math.floor(R*255);var g=Math.floor(G*255);var b=Math.floor(B*255);return{r:r,g:g,b:b,hex:"#"+(16777216|b|g<<8|r<<16).toString(16).slice(1)}}function rgb2hsv(rgb){var r=rgb.r;var g=rgb.g;var b=rgb.b;if(rgb.r>1||rgb.g>1||rgb.b>1){r/=255;g/=255;b/=255}var H,S,V,C;V=Math.max(r,g,b);C=V-Math.min(r,g,b);H=C==0?null:V==r?(g-b)/C+(gslideElement.clientHeight?slideElement.clientHeight:mouse.y;mouse.y=mouse.y<0?0:mouse.y;ctx.h=mouse.y/slideElement.offsetHeight*360+hueOffset;var pickerColor=hsv2rgb({h:ctx.h,s:1,v:1});var c=hsv2rgb({h:ctx.h,s:ctx.s,v:ctx.v});pickerElement.style.backgroundColor=pickerColor.hex;ctx.callback&&ctx.callback(c.hex,{h:ctx.h-hueOffset,s:ctx.s,v:ctx.v},{r:c.r,g:c.g,b:c.b},undefined,mouse)}}function pickerListener(ctx,pickerElement){return function(evt){evt=evt||window.event;var mouse=mousePosition(evt),width=pickerElement.offsetWidth,height=pickerElement.offsetHeight;mouse.x=mouse.x>pickerElement.clientWidth?pickerElement.clientWidth:mouse.x;mouse.x=mouse.x<0?0:mouse.x;mouse.y=mouse.y>pickerElement.clientHeight?pickerElement.clientHeight:mouse.y;mouse.y=mouse.y<0?0:mouse.y;ctx.s=mouse.x/width;ctx.v=(height-mouse.y)/height;var c=hsv2rgb(ctx);ctx.callback&&ctx.callback(c.hex,{h:ctx.h-hueOffset,s:ctx.s,v:ctx.v},{r:c.r,g:c.g,b:c.b},mouse)}}var uniqID=0;function ColorPicker(slideElement,pickerElement,callback){if(!(this instanceof ColorPicker))return new ColorPicker(slideElement,pickerElement,callback);this.h=0;this.s=1;this.v=1;if(!callback){var element=slideElement;element.innerHTML=colorpickerHTMLSnippet;this.slideElement=element.getElementsByClassName("slide")[0];this.pickerElement=element.getElementsByClassName("picker")[0];var slideIndicator=element.getElementsByClassName("slide-indicator")[0];var pickerIndicator=element.getElementsByClassName("picker-indicator")[0];ColorPicker.fixIndicators(slideIndicator,pickerIndicator);this.callback=function(hex,hsv,rgb,pickerCoordinate,slideCoordinate){ColorPicker.positionIndicators(slideIndicator,pickerIndicator,slideCoordinate,pickerCoordinate);pickerElement(hex,hsv,rgb)}}else{this.callback=callback;this.pickerElement=pickerElement;this.slideElement=slideElement}if(type=="SVG"){var slideClone=slide.cloneNode(true);var pickerClone=picker.cloneNode(true);var hsvGradient=slideClone.getElementsByTagName("linearGradient")[0];var hsvRect=slideClone.getElementsByTagName("rect")[0];hsvGradient.id="gradient-hsv-"+uniqID;hsvRect.setAttribute("fill","url(#"+hsvGradient.id+")");var blackAndWhiteGradients=[pickerClone.getElementsByTagName("linearGradient")[0],pickerClone.getElementsByTagName("linearGradient")[1]];var whiteAndBlackRects=pickerClone.getElementsByTagName("rect");blackAndWhiteGradients[0].id="gradient-black-"+uniqID;blackAndWhiteGradients[1].id="gradient-white-"+uniqID;whiteAndBlackRects[0].setAttribute("fill","url(#"+blackAndWhiteGradients[1].id+")");whiteAndBlackRects[1].setAttribute("fill","url(#"+blackAndWhiteGradients[0].id+")");this.slideElement.appendChild(slideClone);this.pickerElement.appendChild(pickerClone);uniqID++}else{this.slideElement.innerHTML=slide;this.pickerElement.innerHTML=picker}if(window.PointerEvent){addEventListener(this.slideElement,"pointerup",slideListener(this,this.slideElement,this.pickerElement));addEventListener(this.pickerElement,"pointerup",pickerListener(this,this.pickerElement))}else{addEventListener(this.slideElement,"click",slideListener(this,this.slideElement,this.pickerElement));addEventListener(this.pickerElement,"click",pickerListener(this,this.pickerElement))}enableDragging(this,this.slideElement,slideListener(this,this.slideElement,this.pickerElement));enableDragging(this,this.pickerElement,pickerListener(this,this.pickerElement))}function addEventListener(element,event,listener){if(element.attachEvent){element.attachEvent("on"+event,listener)}else if(element.addEventListener){element.addEventListener(event,listener,false)}}function enableDragging(ctx,element,listener){var mousedown=false;if(window.PointerEvent){addEventListener(element,"pointerdown",function(evt){mousedown=true});addEventListener(element,"pointerup",function(evt){mousedown=false});addEventListener(element,"pointerout",function(evt){mousedown=false});addEventListener(element,"pointermove",function(evt){if(mousedown){listener(evt)}})}else{addEventListener(element,"mousedown",function(evt){mousedown=true});addEventListener(element,"mouseup",function(evt){mousedown=false});addEventListener(element,"mouseout",function(evt){mousedown=false});addEventListener(element,"mousemove",function(evt){if(mousedown){listener(evt)}})}}ColorPicker.hsv2rgb=function(hsv){var rgbHex=hsv2rgb(hsv);delete rgbHex.hex;return rgbHex};ColorPicker.hsv2hex=function(hsv){return hsv2rgb(hsv).hex};ColorPicker.rgb2hsv=rgb2hsv;ColorPicker.rgb2hex=function(rgb){return hsv2rgb(rgb2hsv(rgb)).hex};ColorPicker.hex2hsv=function(hex){return rgb2hsv(ColorPicker.hex2rgb(hex))};ColorPicker.hex2rgb=function(hex){return{r:parseInt(hex.substr(1,2),16),g:parseInt(hex.substr(3,2),16),b:parseInt(hex.substr(5,2),16)}};function setColor(ctx,hsv,rgb,hex){ctx.h=hsv.h%360;ctx.s=hsv.s;ctx.v=hsv.v;var c=hsv2rgb(ctx);var mouseSlide={y:ctx.h*ctx.slideElement.offsetHeight/360,x:0};var pickerHeight=ctx.pickerElement.offsetHeight;var mousePicker={x:ctx.s*ctx.pickerElement.offsetWidth,y:pickerHeight-ctx.v*pickerHeight};ctx.pickerElement.style.backgroundColor=hsv2rgb({h:ctx.h,s:1,v:1}).hex;ctx.callback&&ctx.callback(hex||c.hex,{h:ctx.h,s:ctx.s,v:ctx.v},rgb||{r:c.r,g:c.g,b:c.b},mousePicker,mouseSlide);return ctx}ColorPicker.prototype.setHsv=function(hsv){return setColor(this,hsv)};ColorPicker.prototype.setRgb=function(rgb){return setColor(this,rgb2hsv(rgb),rgb)};ColorPicker.prototype.setHex=function(hex){return setColor(this,ColorPicker.hex2hsv(hex),undefined,hex)};ColorPicker.positionIndicators=function(slideIndicator,pickerIndicator,mouseSlide,mousePicker){if(mouseSlide){slideIndicator.style.top=mouseSlide.y-slideIndicator.offsetHeight/2+"px"}if(mousePicker){pickerIndicator.style.top=mousePicker.y-pickerIndicator.offsetHeight/2+"px";pickerIndicator.style.left=mousePicker.x-pickerIndicator.offsetWidth/2+"px"}};ColorPicker.fixIndicators=function(slideIndicator,pickerIndicator){pickerIndicator.style.pointerEvents="none";slideIndicator.style.pointerEvents="none"};window.ColorPicker=ColorPicker})(window,window.document); \ No newline at end of file diff --git a/themes.css b/themes.css index 7a49d13..c61ccfa 100644 --- a/themes.css +++ b/themes.css @@ -13,6 +13,7 @@ } .picker, .slide { + touch-action: none; cursor: crosshair; float: left; } From 82fae57dfafe7cd18fe94aed907a03a53693c01e Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Sun, 9 Apr 2017 03:53:33 +0800 Subject: [PATCH 2/8] remove unnecessary event --- colorpicker.js | 9 ++------- colorpicker.min.js | 2 +- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/colorpicker.js b/colorpicker.js index 4c30a0d..8052414 100644 --- a/colorpicker.js +++ b/colorpicker.js @@ -298,13 +298,8 @@ this.pickerElement.innerHTML = picker; } - if (window.PointerEvent) { - addEventListener(this.slideElement, 'pointerup', slideListener(this, this.slideElement, this.pickerElement)); - addEventListener(this.pickerElement, 'pointerup', pickerListener(this, this.pickerElement)); - } else { - addEventListener(this.slideElement, 'click', slideListener(this, this.slideElement, this.pickerElement)); - addEventListener(this.pickerElement, 'click', pickerListener(this, this.pickerElement)); - } + addEventListener(this.slideElement, 'click', slideListener(this, this.slideElement, this.pickerElement)); + addEventListener(this.pickerElement, 'click', pickerListener(this, this.pickerElement)); enableDragging(this, this.slideElement, slideListener(this, this.slideElement, this.pickerElement)); enableDragging(this, this.pickerElement, pickerListener(this, this.pickerElement)); diff --git a/colorpicker.min.js b/colorpicker.min.js index 64b9aaf..b2c32c7 100644 --- a/colorpicker.min.js +++ b/colorpicker.min.js @@ -1 +1 @@ -(function(window,document,undefined){var type=window.SVGAngle||document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",picker,slide,hueOffset=15,svgNS="http://www.w3.org/2000/svg";var colorpickerHTMLSnippet=['
','
','
',"
",'
','
','
',"
"].join("");function mousePosition(evt){if(window.event&&window.event.contentOverflow!==undefined){return{x:window.event.offsetX,y:window.event.offsetY}}if(evt.offsetX!==undefined&&evt.offsetY!==undefined){return{x:evt.offsetX,y:evt.offsetY}}var wrapper=evt.target.parentNode.parentNode;return{x:evt.layerX-wrapper.offsetLeft,y:evt.layerY-wrapper.offsetTop}}function $(el,attrs,children){el=document.createElementNS(svgNS,el);for(var key in attrs)el.setAttribute(key,attrs[key]);if(Object.prototype.toString.call(children)!="[object Array]")children=[children];var i=0,len=children[0]&&children.length||0;for(;i','','',"",""].join("");picker=['
','','',"",'','',"","
"].join("");if(!document.namespaces["v"])document.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML")}function hsv2rgb(hsv){var R,G,B,X,C;var h=hsv.h%360/60;C=hsv.v*hsv.s;X=C*(1-Math.abs(h%2-1));R=G=B=hsv.v-C;h=~~h;R+=[C,X,0,0,X,C][h];G+=[X,C,C,X,0,0][h];B+=[0,0,X,C,C,X][h];var r=Math.floor(R*255);var g=Math.floor(G*255);var b=Math.floor(B*255);return{r:r,g:g,b:b,hex:"#"+(16777216|b|g<<8|r<<16).toString(16).slice(1)}}function rgb2hsv(rgb){var r=rgb.r;var g=rgb.g;var b=rgb.b;if(rgb.r>1||rgb.g>1||rgb.b>1){r/=255;g/=255;b/=255}var H,S,V,C;V=Math.max(r,g,b);C=V-Math.min(r,g,b);H=C==0?null:V==r?(g-b)/C+(gslideElement.clientHeight?slideElement.clientHeight:mouse.y;mouse.y=mouse.y<0?0:mouse.y;ctx.h=mouse.y/slideElement.offsetHeight*360+hueOffset;var pickerColor=hsv2rgb({h:ctx.h,s:1,v:1});var c=hsv2rgb({h:ctx.h,s:ctx.s,v:ctx.v});pickerElement.style.backgroundColor=pickerColor.hex;ctx.callback&&ctx.callback(c.hex,{h:ctx.h-hueOffset,s:ctx.s,v:ctx.v},{r:c.r,g:c.g,b:c.b},undefined,mouse)}}function pickerListener(ctx,pickerElement){return function(evt){evt=evt||window.event;var mouse=mousePosition(evt),width=pickerElement.offsetWidth,height=pickerElement.offsetHeight;mouse.x=mouse.x>pickerElement.clientWidth?pickerElement.clientWidth:mouse.x;mouse.x=mouse.x<0?0:mouse.x;mouse.y=mouse.y>pickerElement.clientHeight?pickerElement.clientHeight:mouse.y;mouse.y=mouse.y<0?0:mouse.y;ctx.s=mouse.x/width;ctx.v=(height-mouse.y)/height;var c=hsv2rgb(ctx);ctx.callback&&ctx.callback(c.hex,{h:ctx.h-hueOffset,s:ctx.s,v:ctx.v},{r:c.r,g:c.g,b:c.b},mouse)}}var uniqID=0;function ColorPicker(slideElement,pickerElement,callback){if(!(this instanceof ColorPicker))return new ColorPicker(slideElement,pickerElement,callback);this.h=0;this.s=1;this.v=1;if(!callback){var element=slideElement;element.innerHTML=colorpickerHTMLSnippet;this.slideElement=element.getElementsByClassName("slide")[0];this.pickerElement=element.getElementsByClassName("picker")[0];var slideIndicator=element.getElementsByClassName("slide-indicator")[0];var pickerIndicator=element.getElementsByClassName("picker-indicator")[0];ColorPicker.fixIndicators(slideIndicator,pickerIndicator);this.callback=function(hex,hsv,rgb,pickerCoordinate,slideCoordinate){ColorPicker.positionIndicators(slideIndicator,pickerIndicator,slideCoordinate,pickerCoordinate);pickerElement(hex,hsv,rgb)}}else{this.callback=callback;this.pickerElement=pickerElement;this.slideElement=slideElement}if(type=="SVG"){var slideClone=slide.cloneNode(true);var pickerClone=picker.cloneNode(true);var hsvGradient=slideClone.getElementsByTagName("linearGradient")[0];var hsvRect=slideClone.getElementsByTagName("rect")[0];hsvGradient.id="gradient-hsv-"+uniqID;hsvRect.setAttribute("fill","url(#"+hsvGradient.id+")");var blackAndWhiteGradients=[pickerClone.getElementsByTagName("linearGradient")[0],pickerClone.getElementsByTagName("linearGradient")[1]];var whiteAndBlackRects=pickerClone.getElementsByTagName("rect");blackAndWhiteGradients[0].id="gradient-black-"+uniqID;blackAndWhiteGradients[1].id="gradient-white-"+uniqID;whiteAndBlackRects[0].setAttribute("fill","url(#"+blackAndWhiteGradients[1].id+")");whiteAndBlackRects[1].setAttribute("fill","url(#"+blackAndWhiteGradients[0].id+")");this.slideElement.appendChild(slideClone);this.pickerElement.appendChild(pickerClone);uniqID++}else{this.slideElement.innerHTML=slide;this.pickerElement.innerHTML=picker}if(window.PointerEvent){addEventListener(this.slideElement,"pointerup",slideListener(this,this.slideElement,this.pickerElement));addEventListener(this.pickerElement,"pointerup",pickerListener(this,this.pickerElement))}else{addEventListener(this.slideElement,"click",slideListener(this,this.slideElement,this.pickerElement));addEventListener(this.pickerElement,"click",pickerListener(this,this.pickerElement))}enableDragging(this,this.slideElement,slideListener(this,this.slideElement,this.pickerElement));enableDragging(this,this.pickerElement,pickerListener(this,this.pickerElement))}function addEventListener(element,event,listener){if(element.attachEvent){element.attachEvent("on"+event,listener)}else if(element.addEventListener){element.addEventListener(event,listener,false)}}function enableDragging(ctx,element,listener){var mousedown=false;if(window.PointerEvent){addEventListener(element,"pointerdown",function(evt){mousedown=true});addEventListener(element,"pointerup",function(evt){mousedown=false});addEventListener(element,"pointerout",function(evt){mousedown=false});addEventListener(element,"pointermove",function(evt){if(mousedown){listener(evt)}})}else{addEventListener(element,"mousedown",function(evt){mousedown=true});addEventListener(element,"mouseup",function(evt){mousedown=false});addEventListener(element,"mouseout",function(evt){mousedown=false});addEventListener(element,"mousemove",function(evt){if(mousedown){listener(evt)}})}}ColorPicker.hsv2rgb=function(hsv){var rgbHex=hsv2rgb(hsv);delete rgbHex.hex;return rgbHex};ColorPicker.hsv2hex=function(hsv){return hsv2rgb(hsv).hex};ColorPicker.rgb2hsv=rgb2hsv;ColorPicker.rgb2hex=function(rgb){return hsv2rgb(rgb2hsv(rgb)).hex};ColorPicker.hex2hsv=function(hex){return rgb2hsv(ColorPicker.hex2rgb(hex))};ColorPicker.hex2rgb=function(hex){return{r:parseInt(hex.substr(1,2),16),g:parseInt(hex.substr(3,2),16),b:parseInt(hex.substr(5,2),16)}};function setColor(ctx,hsv,rgb,hex){ctx.h=hsv.h%360;ctx.s=hsv.s;ctx.v=hsv.v;var c=hsv2rgb(ctx);var mouseSlide={y:ctx.h*ctx.slideElement.offsetHeight/360,x:0};var pickerHeight=ctx.pickerElement.offsetHeight;var mousePicker={x:ctx.s*ctx.pickerElement.offsetWidth,y:pickerHeight-ctx.v*pickerHeight};ctx.pickerElement.style.backgroundColor=hsv2rgb({h:ctx.h,s:1,v:1}).hex;ctx.callback&&ctx.callback(hex||c.hex,{h:ctx.h,s:ctx.s,v:ctx.v},rgb||{r:c.r,g:c.g,b:c.b},mousePicker,mouseSlide);return ctx}ColorPicker.prototype.setHsv=function(hsv){return setColor(this,hsv)};ColorPicker.prototype.setRgb=function(rgb){return setColor(this,rgb2hsv(rgb),rgb)};ColorPicker.prototype.setHex=function(hex){return setColor(this,ColorPicker.hex2hsv(hex),undefined,hex)};ColorPicker.positionIndicators=function(slideIndicator,pickerIndicator,mouseSlide,mousePicker){if(mouseSlide){slideIndicator.style.top=mouseSlide.y-slideIndicator.offsetHeight/2+"px"}if(mousePicker){pickerIndicator.style.top=mousePicker.y-pickerIndicator.offsetHeight/2+"px";pickerIndicator.style.left=mousePicker.x-pickerIndicator.offsetWidth/2+"px"}};ColorPicker.fixIndicators=function(slideIndicator,pickerIndicator){pickerIndicator.style.pointerEvents="none";slideIndicator.style.pointerEvents="none"};window.ColorPicker=ColorPicker})(window,window.document); \ No newline at end of file +!function(t,e,i){function o(e){if(t.event&&t.event.contentOverflow!==i)return{x:t.event.offsetX,y:t.event.offsetY};if(e.offsetX!==i&&e.offsetY!==i)return{x:e.offsetX,y:e.offsetY};var o=e.target.parentNode.parentNode;return{x:e.layerX-o.offsetLeft,y:e.layerY-o.offsetTop}}function s(t,i,o){t=e.createElementNS(y,t);for(var s in i)t.setAttribute(s,i[s]);"[object Array]"!=Object.prototype.toString.call(o)&&(o=[o]);for(var n=0,r=o[0]&&o.length||0;n1||t.g>1||t.b>1)&&(e/=255,i/=255,o/=255);var s,n,r,l;return r=Math.max(e,i,o),l=r-Math.min(e,i,o),s=0==l?null:r==e?(i-o)/l+(is.clientHeight?s.clientHeight:a.y,a.y=a.y<0?0:a.y,e.h=a.y/s.offsetHeight*360+g;var c=n({h:e.h,s:1,v:1}),f=n({h:e.h,s:e.s,v:e.v});r.style.backgroundColor=c.hex,e.callback&&e.callback(f.hex,{h:e.h-g,s:e.s,v:e.v},{r:f.r,g:f.g,b:f.b},i,a)}}function a(e,i){return function(s){s=s||t.event;var r=o(s),l=i.offsetWidth,a=i.offsetHeight;r.x=r.x>i.clientWidth?i.clientWidth:r.x,r.x=r.x<0?0:r.x,r.y=r.y>i.clientHeight?i.clientHeight:r.y,r.y=r.y<0?0:r.y,e.s=r.x/l,e.v=(a-r.y)/a;var c=n(e);e.callback&&e.callback(c.hex,{h:e.h-g,s:e.s,v:e.v},{r:c.r,g:c.g,b:c.b},r)}}function c(t,e,i){if(!(this instanceof c))return new c(t,e,i);if(this.h=0,this.s=1,this.v=1,i)this.callback=i,this.pickerElement=e,this.slideElement=t;else{var o=t;o.innerHTML=m,this.slideElement=o.getElementsByClassName("slide")[0],this.pickerElement=o.getElementsByClassName("picker")[0];var s=o.getElementsByClassName("slide-indicator")[0],n=o.getElementsByClassName("picker-indicator")[0];c.fixIndicators(s,n),this.callback=function(t,i,o,r,l){c.positionIndicators(s,n,l,r),e(t,i,o)}}if("SVG"==u){var r=v.cloneNode(!0),p=d.cloneNode(!0),g=r.getElementsByTagName("linearGradient")[0],y=r.getElementsByTagName("rect")[0];g.id="gradient-hsv-"+x,y.setAttribute("fill","url(#"+g.id+")");var b=[p.getElementsByTagName("linearGradient")[0],p.getElementsByTagName("linearGradient")[1]],w=p.getElementsByTagName("rect");b[0].id="gradient-black-"+x,b[1].id="gradient-white-"+x,w[0].setAttribute("fill","url(#"+b[1].id+")"),w[1].setAttribute("fill","url(#"+b[0].id+")"),this.slideElement.appendChild(r),this.pickerElement.appendChild(p),x++}else this.slideElement.innerHTML=v,this.pickerElement.innerHTML=d;f(this.slideElement,"click",l(this,this.slideElement,this.pickerElement)),f(this.pickerElement,"click",a(this,this.pickerElement)),h(this,this.slideElement,l(this,this.slideElement,this.pickerElement)),h(this,this.pickerElement,a(this,this.pickerElement))}function f(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener&&t.addEventListener(e,i,!1)}function h(e,i,o){var s=!1;t.PointerEvent?(f(i,"pointerdown",function(t){s=!0}),f(i,"pointerup",function(t){s=!1}),f(i,"pointerout",function(t){s=!1}),f(i,"pointermove",function(t){s&&o(t)})):(f(i,"mousedown",function(t){s=!0}),f(i,"mouseup",function(t){s=!1}),f(i,"mouseout",function(t){s=!1}),f(i,"mousemove",function(t){s&&o(t)}))}function p(t,e,i,o){t.h=e.h%360,t.s=e.s,t.v=e.v;var s=n(t),r={y:t.h*t.slideElement.offsetHeight/360,x:0},l=t.pickerElement.offsetHeight,a={x:t.s*t.pickerElement.offsetWidth,y:l-t.v*l};return t.pickerElement.style.backgroundColor=n({h:t.h,s:1,v:1}).hex,t.callback&&t.callback(o||s.hex,{h:t.h,s:t.s,v:t.v},i||{r:s.r,g:s.g,b:s.b},a,r),t}var d,v,u=t.SVGAngle||e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",g=15,y="http://www.w3.org/2000/svg",m=['
','
','
',"
",'
','
','
',"
"].join("");"SVG"==u?(v=s("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[s("defs",{},s("linearGradient",{id:"gradient-hsv",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[s("stop",{offset:"0%","stop-color":"#FF0000","stop-opacity":"1"}),s("stop",{offset:"13%","stop-color":"#FF00FF","stop-opacity":"1"}),s("stop",{offset:"25%","stop-color":"#8000FF","stop-opacity":"1"}),s("stop",{offset:"38%","stop-color":"#0040FF","stop-opacity":"1"}),s("stop",{offset:"50%","stop-color":"#00FFFF","stop-opacity":"1"}),s("stop",{offset:"63%","stop-color":"#00FF40","stop-opacity":"1"}),s("stop",{offset:"75%","stop-color":"#0BED00","stop-opacity":"1"}),s("stop",{offset:"88%","stop-color":"#FFFF00","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#FF0000","stop-opacity":"1"})])),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-hsv)"})]),d=s("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[s("defs",{},[s("linearGradient",{id:"gradient-black",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[s("stop",{offset:"0%","stop-color":"#000000","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})]),s("linearGradient",{id:"gradient-white",x1:"0%",y1:"100%",x2:"100%",y2:"100%"},[s("stop",{offset:"0%","stop-color":"#FFFFFF","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})])]),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-white)"}),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-black)"})])):"VML"==u&&(v=['
','','',"","
"].join(""),d=['
','','',"",'','',"","
"].join(""),e.namespaces.v||e.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML"));var x=0;c.hsv2rgb=function(t){var e=n(t);return delete e.hex,e},c.hsv2hex=function(t){return n(t).hex},c.rgb2hsv=r,c.rgb2hex=function(t){return n(r(t)).hex},c.hex2hsv=function(t){return r(c.hex2rgb(t))},c.hex2rgb=function(t){return{r:parseInt(t.substr(1,2),16),g:parseInt(t.substr(3,2),16),b:parseInt(t.substr(5,2),16)}},c.prototype.setHsv=function(t){return p(this,t)},c.prototype.setRgb=function(t){return p(this,r(t),t)},c.prototype.setHex=function(t){return p(this,c.hex2hsv(t),i,t)},c.positionIndicators=function(t,e,i,o){i&&(t.style.top=i.y-t.offsetHeight/2+"px"),o&&(e.style.top=o.y-e.offsetHeight/2+"px",e.style.left=o.x-e.offsetWidth/2+"px")},c.fixIndicators=function(t,e){e.style.pointerEvents="none",t.style.pointerEvents="none"},t.ColorPicker=c}(window,window.document); \ No newline at end of file From 70c7336c6b978cdb9e6c604088cecc430ab61ca2 Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Wed, 12 Apr 2017 14:23:09 +0800 Subject: [PATCH 3/8] add PEP support. --- colorpicker.js | 9 +++++++-- colorpicker.min.js | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/colorpicker.js b/colorpicker.js index 8052414..58bb4d3 100644 --- a/colorpicker.js +++ b/colorpicker.js @@ -13,11 +13,11 @@ var colorpickerHTMLSnippet = [ '
', - '
', + '
', '
', '
', '
', - '
', + '
', '
', '
' @@ -37,6 +37,11 @@ } // Firefox: var wrapper = evt.target.parentNode.parentNode; + // Firefox PE fix + if (!evt.layerX) { + wrapper = wrapper.getBoundingClientRect(); + return { x: evt.screenX - wrapper.x, y: evt.screenY - wrapper.y}; + } return { x: evt.layerX - wrapper.offsetLeft, y: evt.layerY - wrapper.offsetTop }; } diff --git a/colorpicker.min.js b/colorpicker.min.js index b2c32c7..ae2cb55 100644 --- a/colorpicker.min.js +++ b/colorpicker.min.js @@ -1 +1 @@ -!function(t,e,i){function o(e){if(t.event&&t.event.contentOverflow!==i)return{x:t.event.offsetX,y:t.event.offsetY};if(e.offsetX!==i&&e.offsetY!==i)return{x:e.offsetX,y:e.offsetY};var o=e.target.parentNode.parentNode;return{x:e.layerX-o.offsetLeft,y:e.layerY-o.offsetTop}}function s(t,i,o){t=e.createElementNS(y,t);for(var s in i)t.setAttribute(s,i[s]);"[object Array]"!=Object.prototype.toString.call(o)&&(o=[o]);for(var n=0,r=o[0]&&o.length||0;n1||t.g>1||t.b>1)&&(e/=255,i/=255,o/=255);var s,n,r,l;return r=Math.max(e,i,o),l=r-Math.min(e,i,o),s=0==l?null:r==e?(i-o)/l+(is.clientHeight?s.clientHeight:a.y,a.y=a.y<0?0:a.y,e.h=a.y/s.offsetHeight*360+g;var c=n({h:e.h,s:1,v:1}),f=n({h:e.h,s:e.s,v:e.v});r.style.backgroundColor=c.hex,e.callback&&e.callback(f.hex,{h:e.h-g,s:e.s,v:e.v},{r:f.r,g:f.g,b:f.b},i,a)}}function a(e,i){return function(s){s=s||t.event;var r=o(s),l=i.offsetWidth,a=i.offsetHeight;r.x=r.x>i.clientWidth?i.clientWidth:r.x,r.x=r.x<0?0:r.x,r.y=r.y>i.clientHeight?i.clientHeight:r.y,r.y=r.y<0?0:r.y,e.s=r.x/l,e.v=(a-r.y)/a;var c=n(e);e.callback&&e.callback(c.hex,{h:e.h-g,s:e.s,v:e.v},{r:c.r,g:c.g,b:c.b},r)}}function c(t,e,i){if(!(this instanceof c))return new c(t,e,i);if(this.h=0,this.s=1,this.v=1,i)this.callback=i,this.pickerElement=e,this.slideElement=t;else{var o=t;o.innerHTML=m,this.slideElement=o.getElementsByClassName("slide")[0],this.pickerElement=o.getElementsByClassName("picker")[0];var s=o.getElementsByClassName("slide-indicator")[0],n=o.getElementsByClassName("picker-indicator")[0];c.fixIndicators(s,n),this.callback=function(t,i,o,r,l){c.positionIndicators(s,n,l,r),e(t,i,o)}}if("SVG"==u){var r=v.cloneNode(!0),p=d.cloneNode(!0),g=r.getElementsByTagName("linearGradient")[0],y=r.getElementsByTagName("rect")[0];g.id="gradient-hsv-"+x,y.setAttribute("fill","url(#"+g.id+")");var b=[p.getElementsByTagName("linearGradient")[0],p.getElementsByTagName("linearGradient")[1]],w=p.getElementsByTagName("rect");b[0].id="gradient-black-"+x,b[1].id="gradient-white-"+x,w[0].setAttribute("fill","url(#"+b[1].id+")"),w[1].setAttribute("fill","url(#"+b[0].id+")"),this.slideElement.appendChild(r),this.pickerElement.appendChild(p),x++}else this.slideElement.innerHTML=v,this.pickerElement.innerHTML=d;f(this.slideElement,"click",l(this,this.slideElement,this.pickerElement)),f(this.pickerElement,"click",a(this,this.pickerElement)),h(this,this.slideElement,l(this,this.slideElement,this.pickerElement)),h(this,this.pickerElement,a(this,this.pickerElement))}function f(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener&&t.addEventListener(e,i,!1)}function h(e,i,o){var s=!1;t.PointerEvent?(f(i,"pointerdown",function(t){s=!0}),f(i,"pointerup",function(t){s=!1}),f(i,"pointerout",function(t){s=!1}),f(i,"pointermove",function(t){s&&o(t)})):(f(i,"mousedown",function(t){s=!0}),f(i,"mouseup",function(t){s=!1}),f(i,"mouseout",function(t){s=!1}),f(i,"mousemove",function(t){s&&o(t)}))}function p(t,e,i,o){t.h=e.h%360,t.s=e.s,t.v=e.v;var s=n(t),r={y:t.h*t.slideElement.offsetHeight/360,x:0},l=t.pickerElement.offsetHeight,a={x:t.s*t.pickerElement.offsetWidth,y:l-t.v*l};return t.pickerElement.style.backgroundColor=n({h:t.h,s:1,v:1}).hex,t.callback&&t.callback(o||s.hex,{h:t.h,s:t.s,v:t.v},i||{r:s.r,g:s.g,b:s.b},a,r),t}var d,v,u=t.SVGAngle||e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",g=15,y="http://www.w3.org/2000/svg",m=['
','
','
',"
",'
','
','
',"
"].join("");"SVG"==u?(v=s("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[s("defs",{},s("linearGradient",{id:"gradient-hsv",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[s("stop",{offset:"0%","stop-color":"#FF0000","stop-opacity":"1"}),s("stop",{offset:"13%","stop-color":"#FF00FF","stop-opacity":"1"}),s("stop",{offset:"25%","stop-color":"#8000FF","stop-opacity":"1"}),s("stop",{offset:"38%","stop-color":"#0040FF","stop-opacity":"1"}),s("stop",{offset:"50%","stop-color":"#00FFFF","stop-opacity":"1"}),s("stop",{offset:"63%","stop-color":"#00FF40","stop-opacity":"1"}),s("stop",{offset:"75%","stop-color":"#0BED00","stop-opacity":"1"}),s("stop",{offset:"88%","stop-color":"#FFFF00","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#FF0000","stop-opacity":"1"})])),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-hsv)"})]),d=s("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[s("defs",{},[s("linearGradient",{id:"gradient-black",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[s("stop",{offset:"0%","stop-color":"#000000","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})]),s("linearGradient",{id:"gradient-white",x1:"0%",y1:"100%",x2:"100%",y2:"100%"},[s("stop",{offset:"0%","stop-color":"#FFFFFF","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})])]),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-white)"}),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-black)"})])):"VML"==u&&(v=['
','','',"","
"].join(""),d=['
','','',"",'','',"","
"].join(""),e.namespaces.v||e.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML"));var x=0;c.hsv2rgb=function(t){var e=n(t);return delete e.hex,e},c.hsv2hex=function(t){return n(t).hex},c.rgb2hsv=r,c.rgb2hex=function(t){return n(r(t)).hex},c.hex2hsv=function(t){return r(c.hex2rgb(t))},c.hex2rgb=function(t){return{r:parseInt(t.substr(1,2),16),g:parseInt(t.substr(3,2),16),b:parseInt(t.substr(5,2),16)}},c.prototype.setHsv=function(t){return p(this,t)},c.prototype.setRgb=function(t){return p(this,r(t),t)},c.prototype.setHex=function(t){return p(this,c.hex2hsv(t),i,t)},c.positionIndicators=function(t,e,i,o){i&&(t.style.top=i.y-t.offsetHeight/2+"px"),o&&(e.style.top=o.y-e.offsetHeight/2+"px",e.style.left=o.x-e.offsetWidth/2+"px")},c.fixIndicators=function(t,e){e.style.pointerEvents="none",t.style.pointerEvents="none"},t.ColorPicker=c}(window,window.document); \ No newline at end of file +!function(t,e,i){function o(e){if(t.event&&t.event.contentOverflow!==i)return{x:t.event.offsetX,y:t.event.offsetY};if(e.offsetX!==i&&e.offsetY!==i)return{x:e.offsetX,y:e.offsetY};var o=e.target.parentNode.parentNode;return e.layerX?{x:e.layerX-o.offsetLeft,y:e.layerY-o.offsetTop}:(o=o.getBoundingClientRect(),{x:e.screenX-o.x,y:e.screenY-o.y})}function n(t,i,o){t=e.createElementNS(y,t);for(var n in i)t.setAttribute(n,i[n]);"[object Array]"!=Object.prototype.toString.call(o)&&(o=[o]);for(var s=0,r=o[0]&&o.length||0;s1||t.g>1||t.b>1)&&(e/=255,i/=255,o/=255);var n,s,r,l;return r=Math.max(e,i,o),l=r-Math.min(e,i,o),n=0==l?null:r==e?(i-o)/l+(in.clientHeight?n.clientHeight:c.y,c.y=c.y<0?0:c.y,e.h=c.y/n.offsetHeight*360+g;var a=s({h:e.h,s:1,v:1}),h=s({h:e.h,s:e.s,v:e.v});r.style.backgroundColor=a.hex,e.callback&&e.callback(h.hex,{h:e.h-g,s:e.s,v:e.v},{r:h.r,g:h.g,b:h.b},i,c)}}function c(e,i){return function(n){n=n||t.event;var r=o(n),l=i.offsetWidth,c=i.offsetHeight;r.x=r.x>i.clientWidth?i.clientWidth:r.x,r.x=r.x<0?0:r.x,r.y=r.y>i.clientHeight?i.clientHeight:r.y,r.y=r.y<0?0:r.y,e.s=r.x/l,e.v=(c-r.y)/c;var a=s(e);e.callback&&e.callback(a.hex,{h:e.h-g,s:e.s,v:e.v},{r:a.r,g:a.g,b:a.b},r)}}function a(t,e,i){if(!(this instanceof a))return new a(t,e,i);if(this.h=0,this.s=1,this.v=1,i)this.callback=i,this.pickerElement=e,this.slideElement=t;else{var o=t;o.innerHTML=m,this.slideElement=o.getElementsByClassName("slide")[0],this.pickerElement=o.getElementsByClassName("picker")[0];var n=o.getElementsByClassName("slide-indicator")[0],s=o.getElementsByClassName("picker-indicator")[0];a.fixIndicators(n,s),this.callback=function(t,i,o,r,l){a.positionIndicators(n,s,l,r),e(t,i,o)}}if("SVG"==u){var r=v.cloneNode(!0),p=d.cloneNode(!0),g=r.getElementsByTagName("linearGradient")[0],y=r.getElementsByTagName("rect")[0];g.id="gradient-hsv-"+x,y.setAttribute("fill","url(#"+g.id+")");var b=[p.getElementsByTagName("linearGradient")[0],p.getElementsByTagName("linearGradient")[1]],w=p.getElementsByTagName("rect");b[0].id="gradient-black-"+x,b[1].id="gradient-white-"+x,w[0].setAttribute("fill","url(#"+b[1].id+")"),w[1].setAttribute("fill","url(#"+b[0].id+")"),this.slideElement.appendChild(r),this.pickerElement.appendChild(p),x++}else this.slideElement.innerHTML=v,this.pickerElement.innerHTML=d;h(this.slideElement,"click",l(this,this.slideElement,this.pickerElement)),h(this.pickerElement,"click",c(this,this.pickerElement)),f(this,this.slideElement,l(this,this.slideElement,this.pickerElement)),f(this,this.pickerElement,c(this,this.pickerElement))}function h(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener&&t.addEventListener(e,i,!1)}function f(e,i,o){var n=!1;t.PointerEvent?(h(i,"pointerdown",function(t){n=!0}),h(i,"pointerup",function(t){n=!1}),h(i,"pointerout",function(t){n=!1}),h(i,"pointermove",function(t){n&&o(t)})):(h(i,"mousedown",function(t){n=!0}),h(i,"mouseup",function(t){n=!1}),h(i,"mouseout",function(t){n=!1}),h(i,"mousemove",function(t){n&&o(t)}))}function p(t,e,i,o){t.h=e.h%360,t.s=e.s,t.v=e.v;var n=s(t),r={y:t.h*t.slideElement.offsetHeight/360,x:0},l=t.pickerElement.offsetHeight,c={x:t.s*t.pickerElement.offsetWidth,y:l-t.v*l};return t.pickerElement.style.backgroundColor=s({h:t.h,s:1,v:1}).hex,t.callback&&t.callback(o||n.hex,{h:t.h,s:t.s,v:t.v},i||{r:n.r,g:n.g,b:n.b},c,r),t}var d,v,u=t.SVGAngle||e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",g=15,y="http://www.w3.org/2000/svg",m=['
','
','
',"
",'
','
','
',"
"].join("");"SVG"==u?(v=n("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[n("defs",{},n("linearGradient",{id:"gradient-hsv",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[n("stop",{offset:"0%","stop-color":"#FF0000","stop-opacity":"1"}),n("stop",{offset:"13%","stop-color":"#FF00FF","stop-opacity":"1"}),n("stop",{offset:"25%","stop-color":"#8000FF","stop-opacity":"1"}),n("stop",{offset:"38%","stop-color":"#0040FF","stop-opacity":"1"}),n("stop",{offset:"50%","stop-color":"#00FFFF","stop-opacity":"1"}),n("stop",{offset:"63%","stop-color":"#00FF40","stop-opacity":"1"}),n("stop",{offset:"75%","stop-color":"#0BED00","stop-opacity":"1"}),n("stop",{offset:"88%","stop-color":"#FFFF00","stop-opacity":"1"}),n("stop",{offset:"100%","stop-color":"#FF0000","stop-opacity":"1"})])),n("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-hsv)"})]),d=n("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[n("defs",{},[n("linearGradient",{id:"gradient-black",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[n("stop",{offset:"0%","stop-color":"#000000","stop-opacity":"1"}),n("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})]),n("linearGradient",{id:"gradient-white",x1:"0%",y1:"100%",x2:"100%",y2:"100%"},[n("stop",{offset:"0%","stop-color":"#FFFFFF","stop-opacity":"1"}),n("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})])]),n("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-white)"}),n("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-black)"})])):"VML"==u&&(v=['
','','',"","
"].join(""),d=['
','','',"",'','',"","
"].join(""),e.namespaces.v||e.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML"));var x=0;a.hsv2rgb=function(t){var e=s(t);return delete e.hex,e},a.hsv2hex=function(t){return s(t).hex},a.rgb2hsv=r,a.rgb2hex=function(t){return s(r(t)).hex},a.hex2hsv=function(t){return r(a.hex2rgb(t))},a.hex2rgb=function(t){return{r:parseInt(t.substr(1,2),16),g:parseInt(t.substr(3,2),16),b:parseInt(t.substr(5,2),16)}},a.prototype.setHsv=function(t){return p(this,t)},a.prototype.setRgb=function(t){return p(this,r(t),t)},a.prototype.setHex=function(t){return p(this,a.hex2hsv(t),i,t)},a.positionIndicators=function(t,e,i,o){i&&(t.style.top=i.y-t.offsetHeight/2+"px"),o&&(e.style.top=o.y-e.offsetHeight/2+"px",e.style.left=o.x-e.offsetWidth/2+"px")},a.fixIndicators=function(t,e){e.style.pointerEvents="none",t.style.pointerEvents="none"},t.ColorPicker=a}(window,window.document); \ No newline at end of file From db372e089ce641995efd9e0be9d97973c26cb98c Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Wed, 12 Apr 2017 15:01:07 +0800 Subject: [PATCH 4/8] add pointer event section to README --- README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/README.md b/README.md index c5979e8..ae6f041 100644 --- a/README.md +++ b/README.md @@ -272,6 +272,44 @@ The ColorPicker function has recognized only two arguments which means that it b and also fixes and positions indicators automatically. +Pointer Events +======== +If you require more widely support with mobile or touch device, you may need include [Pointer Events Polyfill](https://github.com/jquery/PEP) for un-supported browser. + +if you doesn't use [**No hassle**](#no-hassle) method, please add `touch-action` attribute to Element like: +```html + +
+
+ + +
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+``` + + + License ======== From 707a9daa258ceb65a9744e3739a3c400517c6869 Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Wed, 12 Apr 2017 15:06:15 +0800 Subject: [PATCH 5/8] fix typo in README --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index ae6f041..4908f72 100644 --- a/README.md +++ b/README.md @@ -276,7 +276,7 @@ Pointer Events ======== If you require more widely support with mobile or touch device, you may need include [Pointer Events Polyfill](https://github.com/jquery/PEP) for un-supported browser. -if you doesn't use [**No hassle**](#no-hassle) method, please add `touch-action` attribute to Element like: +if you don't want to use [**No hassle**](#no-hassle) method, please add `touch-action="none"` attribute to Element like: ```html
@@ -291,11 +291,9 @@ if you doesn't use [**No hassle**](#no-hassle) method, please add `touch-action`
- - +``` +Recommend to place in a big wrapper and set touch-action="none", to prevent to fire default event like page scroll. +```html
From b2ade969f1ebfd6eed57023dec1ae659ea63218b Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Wed, 12 Apr 2017 15:20:11 +0800 Subject: [PATCH 6/8] split polyfill info --- README.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4908f72..a2da0ff 100644 --- a/README.md +++ b/README.md @@ -274,9 +274,28 @@ and also fixes and positions indicators automatically. Pointer Events ======== -If you require more widely support with mobile or touch device, you may need include [Pointer Events Polyfill](https://github.com/jquery/PEP) for un-supported browser. +If you require more widely support with mobile or touch device, you should add `touch-action="none"` to css like: +```css + + #picker { width: 200px; height: 200px; touch-action: none; } + #slider { width: 30px; height: 200px; touch-action: none; } + + + #picker-wrapper { + width: 200px; + height: 200px; + position: relative; + touch-action: none; + } + #slider-wrapper { + width: 30px; + height: 200px; + position: relative; + touch-action: none; + } +``` -if you don't want to use [**No hassle**](#no-hassle) method, please add `touch-action="none"` attribute to Element like: +if you require [Pointer Events Polyfill](https://github.com/jquery/PEP) and don't want to use [**No hassle**](#no-hassle) method, according to [Polyfill limitations](https://github.com/jquery/PEP#polyfill-limitations), please add `touch-action="none"` attribute to element like: ```html
From 46351ebe2ed16c4cdbb77f6fc73b3bb46969cc39 Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Wed, 12 Apr 2017 15:22:10 +0800 Subject: [PATCH 7/8] typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a2da0ff..ae4203f 100644 --- a/README.md +++ b/README.md @@ -311,7 +311,7 @@ if you require [Pointer Events Polyfill](https://github.com/jquery/PEP) and don'
``` -Recommend to place in a big wrapper and set touch-action="none", to prevent to fire default event like page scroll. +Recommend to place in a big wrapper and set `touch-action="none"`, to prevent to fire default event like page scroll. ```html
From e97a4893fdf9623576be6b9e769eca4c7fdf9d56 Mon Sep 17 00:00:00 2001 From: Miau Lightouch Date: Wed, 12 Apr 2017 16:42:11 +0800 Subject: [PATCH 8/8] fix pointer position in desktop with PEP --- colorpicker.js | 8 ++++---- colorpicker.min.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/colorpicker.js b/colorpicker.js index 58bb4d3..ff67ef8 100644 --- a/colorpicker.js +++ b/colorpicker.js @@ -35,13 +35,13 @@ if (evt.offsetX !== undefined && evt.offsetY !== undefined) { return { x: evt.offsetX, y: evt.offsetY }; } - // Firefox: var wrapper = evt.target.parentNode.parentNode; - // Firefox PE fix - if (!evt.layerX) { + // PEP fix + if (typeof evt.offsetX === 'undefined') { wrapper = wrapper.getBoundingClientRect(); - return { x: evt.screenX - wrapper.x, y: evt.screenY - wrapper.y}; + return { x: evt.pageX - wrapper.x, y: evt.pageY - wrapper.y}; } + // Firefox: return { x: evt.layerX - wrapper.offsetLeft, y: evt.layerY - wrapper.offsetTop }; } diff --git a/colorpicker.min.js b/colorpicker.min.js index ae2cb55..ae7e3a5 100644 --- a/colorpicker.min.js +++ b/colorpicker.min.js @@ -1 +1 @@ -!function(t,e,i){function o(e){if(t.event&&t.event.contentOverflow!==i)return{x:t.event.offsetX,y:t.event.offsetY};if(e.offsetX!==i&&e.offsetY!==i)return{x:e.offsetX,y:e.offsetY};var o=e.target.parentNode.parentNode;return e.layerX?{x:e.layerX-o.offsetLeft,y:e.layerY-o.offsetTop}:(o=o.getBoundingClientRect(),{x:e.screenX-o.x,y:e.screenY-o.y})}function n(t,i,o){t=e.createElementNS(y,t);for(var n in i)t.setAttribute(n,i[n]);"[object Array]"!=Object.prototype.toString.call(o)&&(o=[o]);for(var s=0,r=o[0]&&o.length||0;s1||t.g>1||t.b>1)&&(e/=255,i/=255,o/=255);var n,s,r,l;return r=Math.max(e,i,o),l=r-Math.min(e,i,o),n=0==l?null:r==e?(i-o)/l+(in.clientHeight?n.clientHeight:c.y,c.y=c.y<0?0:c.y,e.h=c.y/n.offsetHeight*360+g;var a=s({h:e.h,s:1,v:1}),h=s({h:e.h,s:e.s,v:e.v});r.style.backgroundColor=a.hex,e.callback&&e.callback(h.hex,{h:e.h-g,s:e.s,v:e.v},{r:h.r,g:h.g,b:h.b},i,c)}}function c(e,i){return function(n){n=n||t.event;var r=o(n),l=i.offsetWidth,c=i.offsetHeight;r.x=r.x>i.clientWidth?i.clientWidth:r.x,r.x=r.x<0?0:r.x,r.y=r.y>i.clientHeight?i.clientHeight:r.y,r.y=r.y<0?0:r.y,e.s=r.x/l,e.v=(c-r.y)/c;var a=s(e);e.callback&&e.callback(a.hex,{h:e.h-g,s:e.s,v:e.v},{r:a.r,g:a.g,b:a.b},r)}}function a(t,e,i){if(!(this instanceof a))return new a(t,e,i);if(this.h=0,this.s=1,this.v=1,i)this.callback=i,this.pickerElement=e,this.slideElement=t;else{var o=t;o.innerHTML=m,this.slideElement=o.getElementsByClassName("slide")[0],this.pickerElement=o.getElementsByClassName("picker")[0];var n=o.getElementsByClassName("slide-indicator")[0],s=o.getElementsByClassName("picker-indicator")[0];a.fixIndicators(n,s),this.callback=function(t,i,o,r,l){a.positionIndicators(n,s,l,r),e(t,i,o)}}if("SVG"==u){var r=v.cloneNode(!0),p=d.cloneNode(!0),g=r.getElementsByTagName("linearGradient")[0],y=r.getElementsByTagName("rect")[0];g.id="gradient-hsv-"+x,y.setAttribute("fill","url(#"+g.id+")");var b=[p.getElementsByTagName("linearGradient")[0],p.getElementsByTagName("linearGradient")[1]],w=p.getElementsByTagName("rect");b[0].id="gradient-black-"+x,b[1].id="gradient-white-"+x,w[0].setAttribute("fill","url(#"+b[1].id+")"),w[1].setAttribute("fill","url(#"+b[0].id+")"),this.slideElement.appendChild(r),this.pickerElement.appendChild(p),x++}else this.slideElement.innerHTML=v,this.pickerElement.innerHTML=d;h(this.slideElement,"click",l(this,this.slideElement,this.pickerElement)),h(this.pickerElement,"click",c(this,this.pickerElement)),f(this,this.slideElement,l(this,this.slideElement,this.pickerElement)),f(this,this.pickerElement,c(this,this.pickerElement))}function h(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener&&t.addEventListener(e,i,!1)}function f(e,i,o){var n=!1;t.PointerEvent?(h(i,"pointerdown",function(t){n=!0}),h(i,"pointerup",function(t){n=!1}),h(i,"pointerout",function(t){n=!1}),h(i,"pointermove",function(t){n&&o(t)})):(h(i,"mousedown",function(t){n=!0}),h(i,"mouseup",function(t){n=!1}),h(i,"mouseout",function(t){n=!1}),h(i,"mousemove",function(t){n&&o(t)}))}function p(t,e,i,o){t.h=e.h%360,t.s=e.s,t.v=e.v;var n=s(t),r={y:t.h*t.slideElement.offsetHeight/360,x:0},l=t.pickerElement.offsetHeight,c={x:t.s*t.pickerElement.offsetWidth,y:l-t.v*l};return t.pickerElement.style.backgroundColor=s({h:t.h,s:1,v:1}).hex,t.callback&&t.callback(o||n.hex,{h:t.h,s:t.s,v:t.v},i||{r:n.r,g:n.g,b:n.b},c,r),t}var d,v,u=t.SVGAngle||e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",g=15,y="http://www.w3.org/2000/svg",m=['
','
','
',"
",'
','
','
',"
"].join("");"SVG"==u?(v=n("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[n("defs",{},n("linearGradient",{id:"gradient-hsv",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[n("stop",{offset:"0%","stop-color":"#FF0000","stop-opacity":"1"}),n("stop",{offset:"13%","stop-color":"#FF00FF","stop-opacity":"1"}),n("stop",{offset:"25%","stop-color":"#8000FF","stop-opacity":"1"}),n("stop",{offset:"38%","stop-color":"#0040FF","stop-opacity":"1"}),n("stop",{offset:"50%","stop-color":"#00FFFF","stop-opacity":"1"}),n("stop",{offset:"63%","stop-color":"#00FF40","stop-opacity":"1"}),n("stop",{offset:"75%","stop-color":"#0BED00","stop-opacity":"1"}),n("stop",{offset:"88%","stop-color":"#FFFF00","stop-opacity":"1"}),n("stop",{offset:"100%","stop-color":"#FF0000","stop-opacity":"1"})])),n("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-hsv)"})]),d=n("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[n("defs",{},[n("linearGradient",{id:"gradient-black",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[n("stop",{offset:"0%","stop-color":"#000000","stop-opacity":"1"}),n("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})]),n("linearGradient",{id:"gradient-white",x1:"0%",y1:"100%",x2:"100%",y2:"100%"},[n("stop",{offset:"0%","stop-color":"#FFFFFF","stop-opacity":"1"}),n("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})])]),n("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-white)"}),n("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-black)"})])):"VML"==u&&(v=['
','','',"","
"].join(""),d=['
','','',"",'','',"","
"].join(""),e.namespaces.v||e.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML"));var x=0;a.hsv2rgb=function(t){var e=s(t);return delete e.hex,e},a.hsv2hex=function(t){return s(t).hex},a.rgb2hsv=r,a.rgb2hex=function(t){return s(r(t)).hex},a.hex2hsv=function(t){return r(a.hex2rgb(t))},a.hex2rgb=function(t){return{r:parseInt(t.substr(1,2),16),g:parseInt(t.substr(3,2),16),b:parseInt(t.substr(5,2),16)}},a.prototype.setHsv=function(t){return p(this,t)},a.prototype.setRgb=function(t){return p(this,r(t),t)},a.prototype.setHex=function(t){return p(this,a.hex2hsv(t),i,t)},a.positionIndicators=function(t,e,i,o){i&&(t.style.top=i.y-t.offsetHeight/2+"px"),o&&(e.style.top=o.y-e.offsetHeight/2+"px",e.style.left=o.x-e.offsetWidth/2+"px")},a.fixIndicators=function(t,e){e.style.pointerEvents="none",t.style.pointerEvents="none"},t.ColorPicker=a}(window,window.document); \ No newline at end of file +!function(t,e,i){function o(e){if(t.event&&t.event.contentOverflow!==i)return{x:t.event.offsetX,y:t.event.offsetY};if(e.offsetX!==i&&e.offsetY!==i)return{x:e.offsetX,y:e.offsetY};var o=e.target.parentNode.parentNode;return void 0===e.offsetX?(o=o.getBoundingClientRect(),{x:e.pageX-o.x,y:e.pageY-o.y}):{x:e.layerX-o.offsetLeft,y:e.layerY-o.offsetTop}}function s(t,i,o){t=e.createElementNS(y,t);for(var s in i)t.setAttribute(s,i[s]);"[object Array]"!=Object.prototype.toString.call(o)&&(o=[o]);for(var n=0,r=o[0]&&o.length||0;n1||t.g>1||t.b>1)&&(e/=255,i/=255,o/=255);var s,n,r,l;return r=Math.max(e,i,o),l=r-Math.min(e,i,o),s=0==l?null:r==e?(i-o)/l+(is.clientHeight?s.clientHeight:a.y,a.y=a.y<0?0:a.y,e.h=a.y/s.offsetHeight*360+g;var c=n({h:e.h,s:1,v:1}),f=n({h:e.h,s:e.s,v:e.v});r.style.backgroundColor=c.hex,e.callback&&e.callback(f.hex,{h:e.h-g,s:e.s,v:e.v},{r:f.r,g:f.g,b:f.b},i,a)}}function a(e,i){return function(s){s=s||t.event;var r=o(s),l=i.offsetWidth,a=i.offsetHeight;r.x=r.x>i.clientWidth?i.clientWidth:r.x,r.x=r.x<0?0:r.x,r.y=r.y>i.clientHeight?i.clientHeight:r.y,r.y=r.y<0?0:r.y,e.s=r.x/l,e.v=(a-r.y)/a;var c=n(e);e.callback&&e.callback(c.hex,{h:e.h-g,s:e.s,v:e.v},{r:c.r,g:c.g,b:c.b},r)}}function c(t,e,i){if(!(this instanceof c))return new c(t,e,i);if(this.h=0,this.s=1,this.v=1,i)this.callback=i,this.pickerElement=e,this.slideElement=t;else{var o=t;o.innerHTML=m,this.slideElement=o.getElementsByClassName("slide")[0],this.pickerElement=o.getElementsByClassName("picker")[0];var s=o.getElementsByClassName("slide-indicator")[0],n=o.getElementsByClassName("picker-indicator")[0];c.fixIndicators(s,n),this.callback=function(t,i,o,r,l){c.positionIndicators(s,n,l,r),e(t,i,o)}}if("SVG"==u){var r=v.cloneNode(!0),p=d.cloneNode(!0),g=r.getElementsByTagName("linearGradient")[0],y=r.getElementsByTagName("rect")[0];g.id="gradient-hsv-"+x,y.setAttribute("fill","url(#"+g.id+")");var b=[p.getElementsByTagName("linearGradient")[0],p.getElementsByTagName("linearGradient")[1]],w=p.getElementsByTagName("rect");b[0].id="gradient-black-"+x,b[1].id="gradient-white-"+x,w[0].setAttribute("fill","url(#"+b[1].id+")"),w[1].setAttribute("fill","url(#"+b[0].id+")"),this.slideElement.appendChild(r),this.pickerElement.appendChild(p),x++}else this.slideElement.innerHTML=v,this.pickerElement.innerHTML=d;f(this.slideElement,"click",l(this,this.slideElement,this.pickerElement)),f(this.pickerElement,"click",a(this,this.pickerElement)),h(this,this.slideElement,l(this,this.slideElement,this.pickerElement)),h(this,this.pickerElement,a(this,this.pickerElement))}function f(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener&&t.addEventListener(e,i,!1)}function h(e,i,o){var s=!1;t.PointerEvent?(f(i,"pointerdown",function(t){s=!0}),f(i,"pointerup",function(t){s=!1}),f(i,"pointerout",function(t){s=!1}),f(i,"pointermove",function(t){s&&o(t)})):(f(i,"mousedown",function(t){s=!0}),f(i,"mouseup",function(t){s=!1}),f(i,"mouseout",function(t){s=!1}),f(i,"mousemove",function(t){s&&o(t)}))}function p(t,e,i,o){t.h=e.h%360,t.s=e.s,t.v=e.v;var s=n(t),r={y:t.h*t.slideElement.offsetHeight/360,x:0},l=t.pickerElement.offsetHeight,a={x:t.s*t.pickerElement.offsetWidth,y:l-t.v*l};return t.pickerElement.style.backgroundColor=n({h:t.h,s:1,v:1}).hex,t.callback&&t.callback(o||s.hex,{h:t.h,s:t.s,v:t.v},i||{r:s.r,g:s.g,b:s.b},a,r),t}var d,v,u=t.SVGAngle||e.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure","1.1")?"SVG":"VML",g=15,y="http://www.w3.org/2000/svg",m=['
','
','
',"
",'
','
','
',"
"].join("");"SVG"==u?(v=s("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[s("defs",{},s("linearGradient",{id:"gradient-hsv",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[s("stop",{offset:"0%","stop-color":"#FF0000","stop-opacity":"1"}),s("stop",{offset:"13%","stop-color":"#FF00FF","stop-opacity":"1"}),s("stop",{offset:"25%","stop-color":"#8000FF","stop-opacity":"1"}),s("stop",{offset:"38%","stop-color":"#0040FF","stop-opacity":"1"}),s("stop",{offset:"50%","stop-color":"#00FFFF","stop-opacity":"1"}),s("stop",{offset:"63%","stop-color":"#00FF40","stop-opacity":"1"}),s("stop",{offset:"75%","stop-color":"#0BED00","stop-opacity":"1"}),s("stop",{offset:"88%","stop-color":"#FFFF00","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#FF0000","stop-opacity":"1"})])),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-hsv)"})]),d=s("svg",{xmlns:"http://www.w3.org/2000/svg",version:"1.1",width:"100%",height:"100%"},[s("defs",{},[s("linearGradient",{id:"gradient-black",x1:"0%",y1:"100%",x2:"0%",y2:"0%"},[s("stop",{offset:"0%","stop-color":"#000000","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})]),s("linearGradient",{id:"gradient-white",x1:"0%",y1:"100%",x2:"100%",y2:"100%"},[s("stop",{offset:"0%","stop-color":"#FFFFFF","stop-opacity":"1"}),s("stop",{offset:"100%","stop-color":"#CC9A81","stop-opacity":"0"})])]),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-white)"}),s("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"url(#gradient-black)"})])):"VML"==u&&(v=['
','','',"","
"].join(""),d=['
','','',"",'','',"","
"].join(""),e.namespaces.v||e.namespaces.add("v","urn:schemas-microsoft-com:vml","#default#VML"));var x=0;c.hsv2rgb=function(t){var e=n(t);return delete e.hex,e},c.hsv2hex=function(t){return n(t).hex},c.rgb2hsv=r,c.rgb2hex=function(t){return n(r(t)).hex},c.hex2hsv=function(t){return r(c.hex2rgb(t))},c.hex2rgb=function(t){return{r:parseInt(t.substr(1,2),16),g:parseInt(t.substr(3,2),16),b:parseInt(t.substr(5,2),16)}},c.prototype.setHsv=function(t){return p(this,t)},c.prototype.setRgb=function(t){return p(this,r(t),t)},c.prototype.setHex=function(t){return p(this,c.hex2hsv(t),i,t)},c.positionIndicators=function(t,e,i,o){i&&(t.style.top=i.y-t.offsetHeight/2+"px"),o&&(e.style.top=o.y-e.offsetHeight/2+"px",e.style.left=o.x-e.offsetWidth/2+"px")},c.fixIndicators=function(t,e){e.style.pointerEvents="none",t.style.pointerEvents="none"},t.ColorPicker=c}(window,window.document); \ No newline at end of file