simple-color-picker - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/ColorPicker.d.ts

@@ -23,2 +23,3 @@ import { Color, RGBAColor, HSVAColor } from './color';
     private _saturationWidth;
+    private _isChoosing;
     private _callbacks;
@@ -88,2 +89,6 @@ width: number;
     /**
+     * Is true when mouse is down and user is currently choosing a color.
+     */
+    get isChoosing(): boolean;
+    /**
      * Main color getter, will return a formatted color string depending on input
@@ -90,0 +95,0 @@ * or a number depending on the last setColor call.

dist/simple-color-picker.js

@@ -1,2 +0,2 @@
-function t(t){return"number"==typeof t&&!isNaN(t)}function e(t,e,i){return Math.min(Math.max(t,e),i)}function i(t){if(0===t.type.indexOf("touch")){var e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function o(t){return 1==t.length?"0"+t:""+t}var s=function(){function e(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}var i,s=e.prototype;return s.fromHex=function(e){e||(e=0),t(e)?(this._hexNumber=e,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=e.toUpperCase(),this._hexNumber=n(this._hexString));var i=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber),o=i.g,s=i.b;this._rgba.r=i.r,this._rgba.g=o,this._rgba.b=s;var h=function(t){var e,i=t.r,o=t.g,s=t.b,n=Math.max(i,o,s),h=Math.min(i,o,s),r=n-h,u=0===n?0:r/n,a=n;if(n==h)e=0;else{switch(n){case i:e=(o-s)/r+(o<s?6:0);break;case o:e=(s-i)/r+2;break;case s:e=(i-o)/r+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),r=h.s,u=h.v;this._hsva.h=h.h,this._hsva.s=r,this._hsva.v=u,this._updateBrightness()},s.fromHsv=function(t){var e=t.s,i=t.v;this._hsva.h=t.h,this._hsva.s=e,this._hsva.v=i;var s=function(t){var e=t.h,i=t.s,o=t.v;e*=6;var s=Math.floor(e),n=e-s,h=o*(1-i),r=o*(1-n*i),u=o*(1-(1-n)*i),a=s%6;return{r:[o,r,h,h,u,o][a],g:[u,o,o,r,h,h][a],b:[h,h,u,o,o,r][a]}}(this._hsva),h=s.g,r=s.b;this._rgba.r=s.r,this._rgba.g=h,this._rgba.b=r,this._hexString=function(t){var e=t.g,i=t.b;return["#",o(Math.round(255*t.r).toString(16)),o(Math.round(255*e).toString(16)),o(Math.round(255*i).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=n(this._hexString),this._updateBrightness()},s._updateBrightness=function(){var t=this._rgba;this._brightness=(299*t.r+587*t.g+114*t.b)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark},(i=[{key:"rgb",get:function(){return this._rgba}},{key:"hsv",get:function(){return this._hsva}},{key:"hex",get:function(){return this._hexNumber}},{key:"hexString",get:function(){return this._hexString}},{key:"brightness",get:function(){return this._brightness}},{key:"isDark",get:function(){return this._isDark}},{key:"isLight",get:function(){return this._isLight}}])&&function(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}(e.prototype,i),e}();function n(t){return parseInt(t.replace("#",""),16)}module.exports=function(){function o(t){var e=this;void 0===t&&(t={}),this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new s(0),this.backgroundColor=new s(0),this.hueColor=new s(0),this._onSaturationMouseDown=function(t){var o=e.$saturation.getBoundingClientRect(),s=i(t);e._moveSelectorTo(s.x-o.left,s.y-o.top),e._updateColorFromPosition(),e._window.addEventListener("mouseup",e._onSaturationMouseUp),e._window.addEventListener("touchend",e._onSaturationMouseUp),e._window.addEventListener("mousemove",e._onSaturationMouseMove),e._window.addEventListener("touchmove",e._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=function(t){var o=e.$saturation.getBoundingClientRect(),s=i(t);e._moveSelectorTo(s.x-o.left,s.y-o.top),e._updateColorFromPosition()},this._onSaturationMouseUp=function(){e._window.removeEventListener("mouseup",e._onSaturationMouseUp),e._window.removeEventListener("touchend",e._onSaturationMouseUp),e._window.removeEventListener("mousemove",e._onSaturationMouseMove),e._window.removeEventListener("touchmove",e._onSaturationMouseMove)},this._onHueMouseDown=function(t){var o=e.$hue.getBoundingClientRect(),s=i(t);e._moveHueTo(s.y-o.top),e._updateHueFromPosition(),e._window.addEventListener("mouseup",e._onHueMouseUp),e._window.addEventListener("touchend",e._onHueMouseUp),e._window.addEventListener("mousemove",e._onHueMouseMove),e._window.addEventListener("touchmove",e._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=function(t){var o=e.$hue.getBoundingClientRect(),s=i(t);e._moveHueTo(s.y-o.top),e._updateHueFromPosition()},this._onHueMouseUp=function(){e._window.removeEventListener("mouseup",e._onHueMouseUp),e._window.removeEventListener("touchend",e._onHueMouseUp),e._window.removeEventListener("mousemove",e._onHueMouseMove),e._window.removeEventListener("touchmove",e._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}var n=o.prototype;return n.appendTo=function(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this},n.remove=function(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)},n.setColor=function(e){this._inputIsNumber=t(e),this.color.fromHex(e);var i=this.color.hsv,o=i.h,s=i.s,n=i.v;return isNaN(o)||(this.hue=o),this._moveSelectorTo(this._saturationWidth*s,(1-n)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this},n.setSize=function(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this},n.setBackgroundColor=function(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this},n.setNoBackground=function(){return this.$el.style.padding="0px",this.$el.style.background="none",this},n.onChange=function(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this},n.getColor=function(){return this._inputIsNumber?this.getHexNumber():this.getHexString()},n.getHexString=function(){return this.color.hexString.toUpperCase()},n.getHexNumber=function(){return this.color.hex},n.getRGB=function(){return this.color.rgb},n.getHSV=function(){return this.color.hsv},n.isDark=function(){return this.color.isDark},n.isLight=function(){return this.color.isLight},n._moveSelectorTo=function(t,i){this.position.x=e(t,0,this._saturationWidth),this.position.y=e(i,0,this._hueHeight),this.$sbSelector.style.transform="translate("+this.position.x+"px, "+this.position.y+"px)"},n._updateColorFromPosition=function(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()},n._moveHueTo=function(t){this._huePosition=e(t,0,this._maxHue),this.$hSelector.style.transform="translateY("+this._huePosition+"px)"},n._updateHueFromPosition=function(){var t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()},n._updateHue=function(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background="linear-gradient(to right, #fff, "+this.hueColor.hexString+")",this._updateColor()},n._updateColor=function(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()},n._triggerChange=function(){var t=this;this._callbacks.forEach(function(e){return e(t.getHexString())})},o}();
+function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}function i(t){return"number"==typeof t&&!isNaN(t)}function o(t,e,i){return Math.min(Math.max(t,e),i)}function s(t){if(0===t.type.indexOf("touch")){var e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function n(t){return 1==t.length?"0"+t:""+t}var h=function(){function t(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}var o=t.prototype;return o.fromHex=function(t){t||(t=0),i(t)?(this._hexNumber=t,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=t.toUpperCase(),this._hexNumber=r(this._hexString));var e=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber),o=e.g,s=e.b;this._rgba.r=e.r,this._rgba.g=o,this._rgba.b=s;var n=function(t){var e,i=t.r,o=t.g,s=t.b,n=Math.max(i,o,s),h=Math.min(i,o,s),r=n-h,u=0===n?0:r/n,a=n;if(n==h)e=0;else{switch(n){case i:e=(o-s)/r+(o<s?6:0);break;case o:e=(s-i)/r+2;break;case s:e=(i-o)/r+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),h=n.s,u=n.v;this._hsva.h=n.h,this._hsva.s=h,this._hsva.v=u,this._updateBrightness()},o.fromHsv=function(t){var e=t.s,i=t.v;this._hsva.h=t.h,this._hsva.s=e,this._hsva.v=i;var o=function(t){var e=t.h,i=t.s,o=t.v;e*=6;var s=Math.floor(e),n=e-s,h=o*(1-i),r=o*(1-n*i),u=o*(1-(1-n)*i),a=s%6;return{r:[o,r,h,h,u,o][a],g:[u,o,o,r,h,h][a],b:[h,h,u,o,o,r][a]}}(this._hsva),s=o.g,h=o.b;this._rgba.r=o.r,this._rgba.g=s,this._rgba.b=h,this._hexString=function(t){var e=t.g,i=t.b;return["#",n(Math.round(255*t.r).toString(16)),n(Math.round(255*e).toString(16)),n(Math.round(255*i).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=r(this._hexString),this._updateBrightness()},o._updateBrightness=function(){var t=this._rgba;this._brightness=(299*t.r+587*t.g+114*t.b)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark},e(t,[{key:"rgb",get:function(){return this._rgba}},{key:"hsv",get:function(){return this._hsva}},{key:"hex",get:function(){return this._hexNumber}},{key:"hexString",get:function(){return this._hexString}},{key:"brightness",get:function(){return this._brightness}},{key:"isDark",get:function(){return this._isDark}},{key:"isLight",get:function(){return this._isLight}}]),t}();function r(t){return parseInt(t.replace("#",""),16)}module.exports=function(){function t(t){var e=this;void 0===t&&(t={}),this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._isChoosing=!1,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new h(0),this.backgroundColor=new h(0),this.hueColor=new h(0),this._onSaturationMouseDown=function(t){var i=e.$saturation.getBoundingClientRect(),o=s(t),n=o.x,h=o.y;e._isChoosing=!0,e._moveSelectorTo(n-i.left,h-i.top),e._updateColorFromPosition(),e._window.addEventListener("mouseup",e._onSaturationMouseUp),e._window.addEventListener("touchend",e._onSaturationMouseUp),e._window.addEventListener("mousemove",e._onSaturationMouseMove),e._window.addEventListener("touchmove",e._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=function(t){var i=e.$saturation.getBoundingClientRect(),o=s(t);e._moveSelectorTo(o.x-i.left,o.y-i.top),e._updateColorFromPosition()},this._onSaturationMouseUp=function(){e._isChoosing=!1,e._window.removeEventListener("mouseup",e._onSaturationMouseUp),e._window.removeEventListener("touchend",e._onSaturationMouseUp),e._window.removeEventListener("mousemove",e._onSaturationMouseMove),e._window.removeEventListener("touchmove",e._onSaturationMouseMove)},this._onHueMouseDown=function(t){var i=e.$hue.getBoundingClientRect(),o=s(t).y;e._isChoosing=!0,e._moveHueTo(o-i.top),e._updateHueFromPosition(),e._window.addEventListener("mouseup",e._onHueMouseUp),e._window.addEventListener("touchend",e._onHueMouseUp),e._window.addEventListener("mousemove",e._onHueMouseMove),e._window.addEventListener("touchmove",e._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=function(t){var i=e.$hue.getBoundingClientRect(),o=s(t);e._moveHueTo(o.y-i.top),e._updateHueFromPosition()},this._onHueMouseUp=function(){e._isChoosing=!1,e._window.removeEventListener("mouseup",e._onHueMouseUp),e._window.removeEventListener("touchend",e._onHueMouseUp),e._window.removeEventListener("mousemove",e._onHueMouseMove),e._window.removeEventListener("touchmove",e._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}var n=t.prototype;return n.appendTo=function(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this},n.remove=function(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)},n.setColor=function(t){this._inputIsNumber=i(t),this.color.fromHex(t);var e=this.color.hsv,o=e.h,s=e.s,n=e.v;return isNaN(o)||(this.hue=o),this._moveSelectorTo(this._saturationWidth*s,(1-n)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this},n.setSize=function(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this},n.setBackgroundColor=function(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this},n.setNoBackground=function(){return this.$el.style.padding="0px",this.$el.style.background="none",this},n.onChange=function(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this},n.getColor=function(){return this._inputIsNumber?this.getHexNumber():this.getHexString()},n.getHexString=function(){return this.color.hexString.toUpperCase()},n.getHexNumber=function(){return this.color.hex},n.getRGB=function(){return this.color.rgb},n.getHSV=function(){return this.color.hsv},n.isDark=function(){return this.color.isDark},n.isLight=function(){return this.color.isLight},n._moveSelectorTo=function(t,e){this.position.x=o(t,0,this._saturationWidth),this.position.y=o(e,0,this._hueHeight),this.$sbSelector.style.transform="translate("+this.position.x+"px, "+this.position.y+"px)"},n._updateColorFromPosition=function(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()},n._moveHueTo=function(t){this._huePosition=o(t,0,this._maxHue),this.$hSelector.style.transform="translateY("+this._huePosition+"px)"},n._updateHueFromPosition=function(){var t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()},n._updateHue=function(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background="linear-gradient(to right, #fff, "+this.hueColor.hexString+")",this._updateColor()},n._updateColor=function(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()},n._triggerChange=function(){var t=this;this._callbacks.forEach(function(e){return e(t.getHexString())})},e(t,[{key:"isChoosing",get:function(){return this._isChoosing}}]),t}();
 //# sourceMappingURL=simple-color-picker.js.map

dist/simple-color-picker.modern.js

@@ -1,2 +0,2 @@
-function t(t){return"number"==typeof t&&!isNaN(t)}function e(t,e,i){return Math.min(Math.max(t,e),i)}function i(t){if(0===t.type.indexOf("touch")){const e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function s(t){return 1==t.length?"0"+t:""+t}class o{constructor(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}fromHex(e){e||(e=0),t(e)?(this._hexNumber=e,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=e.toUpperCase(),this._hexNumber=h(this._hexString));const{r:i,g:s,b:o}=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber);this._rgba.r=i,this._rgba.g=s,this._rgba.b=o;const{h:n,s:r,v:u}=function(t){const{r:e,g:i,b:s}=t,o=Math.max(e,i,s),h=Math.min(e,i,s),n=o-h,r=0===o?0:n/o,u=o;let a;if(o==h)a=0;else{switch(o){case e:a=(i-s)/n+(i<s?6:0);break;case i:a=(s-e)/n+2;break;case s:a=(e-i)/n+4}a/=6}return{h:a,s:r,v:u}}(this._rgba);this._hsva.h=n,this._hsva.s=r,this._hsva.v=u,this._updateBrightness()}fromHsv(t){const{h:e,s:i,v:o}=t;this._hsva.h=e,this._hsva.s=i,this._hsva.v=o;const{r:n,g:r,b:u}=function(t){let{h:e,s:i,v:s}=t;e*=6;const o=Math.floor(e),h=e-o,n=s*(1-i),r=s*(1-h*i),u=s*(1-(1-h)*i),a=o%6;return{r:[s,r,n,n,u,s][a],g:[u,s,s,r,n,n][a],b:[n,n,u,s,s,r][a]}}(this._hsva);this._rgba.r=n,this._rgba.g=r,this._rgba.b=u,this._hexString=function(t){const{r:e,g:i,b:o}=t;return["#",s(Math.round(255*e).toString(16)),s(Math.round(255*i).toString(16)),s(Math.round(255*o).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=h(this._hexString),this._updateBrightness()}_updateBrightness(){const{r:t,g:e,b:i}=this._rgba;this._brightness=(299*t+587*e+114*i)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark}get rgb(){return this._rgba}get hsv(){return this._hsva}get hex(){return this._hexNumber}get hexString(){return this._hexString}get brightness(){return this._brightness}get isDark(){return this._isDark}get isLight(){return this._isLight}}function h(t){return parseInt(t.replace("#",""),16)}export default class{constructor(t={}){this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new o(0),this.backgroundColor=new o(0),this.hueColor=new o(0),this._onSaturationMouseDown=t=>{const e=this.$saturation.getBoundingClientRect(),{x:s,y:o}=i(t);this._moveSelectorTo(s-e.left,o-e.top),this._updateColorFromPosition(),this._window.addEventListener("mouseup",this._onSaturationMouseUp),this._window.addEventListener("touchend",this._onSaturationMouseUp),this._window.addEventListener("mousemove",this._onSaturationMouseMove),this._window.addEventListener("touchmove",this._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=t=>{const e=this.$saturation.getBoundingClientRect(),{x:s,y:o}=i(t);this._moveSelectorTo(s-e.left,o-e.top),this._updateColorFromPosition()},this._onSaturationMouseUp=()=>{this._window.removeEventListener("mouseup",this._onSaturationMouseUp),this._window.removeEventListener("touchend",this._onSaturationMouseUp),this._window.removeEventListener("mousemove",this._onSaturationMouseMove),this._window.removeEventListener("touchmove",this._onSaturationMouseMove)},this._onHueMouseDown=t=>{const e=this.$hue.getBoundingClientRect(),{y:s}=i(t);this._moveHueTo(s-e.top),this._updateHueFromPosition(),this._window.addEventListener("mouseup",this._onHueMouseUp),this._window.addEventListener("touchend",this._onHueMouseUp),this._window.addEventListener("mousemove",this._onHueMouseMove),this._window.addEventListener("touchmove",this._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=t=>{const e=this.$hue.getBoundingClientRect(),{y:s}=i(t);this._moveHueTo(s-e.top),this._updateHueFromPosition()},this._onHueMouseUp=()=>{this._window.removeEventListener("mouseup",this._onHueMouseUp),this._window.removeEventListener("touchend",this._onHueMouseUp),this._window.removeEventListener("mousemove",this._onHueMouseMove),this._window.removeEventListener("touchmove",this._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}appendTo(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this}remove(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}setColor(e){this._inputIsNumber=t(e),this.color.fromHex(e);const{h:i,s,v:o}=this.color.hsv;return isNaN(i)||(this.hue=i),this._moveSelectorTo(this._saturationWidth*s,(1-o)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this}setSize(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this}setBackgroundColor(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this}setNoBackground(){return this.$el.style.padding="0px",this.$el.style.background="none",this}onChange(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this}getColor(){return this._inputIsNumber?this.getHexNumber():this.getHexString()}getHexString(){return this.color.hexString.toUpperCase()}getHexNumber(){return this.color.hex}getRGB(){return this.color.rgb}getHSV(){return this.color.hsv}isDark(){return this.color.isDark}isLight(){return this.color.isLight}_moveSelectorTo(t,i){this.position.x=e(t,0,this._saturationWidth),this.position.y=e(i,0,this._hueHeight),this.$sbSelector.style.transform=`translate(${this.position.x}px, ${this.position.y}px)`}_updateColorFromPosition(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()}_moveHueTo(t){this._huePosition=e(t,0,this._maxHue),this.$hSelector.style.transform=`translateY(${this._huePosition}px)`}_updateHueFromPosition(){const t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()}_updateHue(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background=`linear-gradient(to right, #fff, ${this.hueColor.hexString})`,this._updateColor()}_updateColor(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()}_triggerChange(){this._callbacks.forEach(t=>t(this.getHexString()))}}
+function t(t){return"number"==typeof t&&!isNaN(t)}function e(t,e,i){return Math.min(Math.max(t,e),i)}function i(t){if(0===t.type.indexOf("touch")){const e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function s(t){return 1==t.length?"0"+t:""+t}class o{constructor(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}fromHex(e){e||(e=0),t(e)?(this._hexNumber=e,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=e.toUpperCase(),this._hexNumber=h(this._hexString));const{r:i,g:s,b:o}=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber);this._rgba.r=i,this._rgba.g=s,this._rgba.b=o;const{h:n,s:r,v:u}=function(t){const{r:e,g:i,b:s}=t,o=Math.max(e,i,s),h=Math.min(e,i,s),n=o-h,r=0===o?0:n/o,u=o;let a;if(o==h)a=0;else{switch(o){case e:a=(i-s)/n+(i<s?6:0);break;case i:a=(s-e)/n+2;break;case s:a=(e-i)/n+4}a/=6}return{h:a,s:r,v:u}}(this._rgba);this._hsva.h=n,this._hsva.s=r,this._hsva.v=u,this._updateBrightness()}fromHsv(t){const{h:e,s:i,v:o}=t;this._hsva.h=e,this._hsva.s=i,this._hsva.v=o;const{r:n,g:r,b:u}=function(t){let{h:e,s:i,v:s}=t;e*=6;const o=Math.floor(e),h=e-o,n=s*(1-i),r=s*(1-h*i),u=s*(1-(1-h)*i),a=o%6;return{r:[s,r,n,n,u,s][a],g:[u,s,s,r,n,n][a],b:[n,n,u,s,s,r][a]}}(this._hsva);this._rgba.r=n,this._rgba.g=r,this._rgba.b=u,this._hexString=function(t){const{r:e,g:i,b:o}=t;return["#",s(Math.round(255*e).toString(16)),s(Math.round(255*i).toString(16)),s(Math.round(255*o).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=h(this._hexString),this._updateBrightness()}_updateBrightness(){const{r:t,g:e,b:i}=this._rgba;this._brightness=(299*t+587*e+114*i)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark}get rgb(){return this._rgba}get hsv(){return this._hsva}get hex(){return this._hexNumber}get hexString(){return this._hexString}get brightness(){return this._brightness}get isDark(){return this._isDark}get isLight(){return this._isLight}}function h(t){return parseInt(t.replace("#",""),16)}export default class{constructor(t={}){this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._isChoosing=!1,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new o(0),this.backgroundColor=new o(0),this.hueColor=new o(0),this._onSaturationMouseDown=t=>{const e=this.$saturation.getBoundingClientRect(),{x:s,y:o}=i(t);this._isChoosing=!0,this._moveSelectorTo(s-e.left,o-e.top),this._updateColorFromPosition(),this._window.addEventListener("mouseup",this._onSaturationMouseUp),this._window.addEventListener("touchend",this._onSaturationMouseUp),this._window.addEventListener("mousemove",this._onSaturationMouseMove),this._window.addEventListener("touchmove",this._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=t=>{const e=this.$saturation.getBoundingClientRect(),{x:s,y:o}=i(t);this._moveSelectorTo(s-e.left,o-e.top),this._updateColorFromPosition()},this._onSaturationMouseUp=()=>{this._isChoosing=!1,this._window.removeEventListener("mouseup",this._onSaturationMouseUp),this._window.removeEventListener("touchend",this._onSaturationMouseUp),this._window.removeEventListener("mousemove",this._onSaturationMouseMove),this._window.removeEventListener("touchmove",this._onSaturationMouseMove)},this._onHueMouseDown=t=>{const e=this.$hue.getBoundingClientRect(),{y:s}=i(t);this._isChoosing=!0,this._moveHueTo(s-e.top),this._updateHueFromPosition(),this._window.addEventListener("mouseup",this._onHueMouseUp),this._window.addEventListener("touchend",this._onHueMouseUp),this._window.addEventListener("mousemove",this._onHueMouseMove),this._window.addEventListener("touchmove",this._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=t=>{const e=this.$hue.getBoundingClientRect(),{y:s}=i(t);this._moveHueTo(s-e.top),this._updateHueFromPosition()},this._onHueMouseUp=()=>{this._isChoosing=!1,this._window.removeEventListener("mouseup",this._onHueMouseUp),this._window.removeEventListener("touchend",this._onHueMouseUp),this._window.removeEventListener("mousemove",this._onHueMouseMove),this._window.removeEventListener("touchmove",this._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}appendTo(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this}remove(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)}setColor(e){this._inputIsNumber=t(e),this.color.fromHex(e);const{h:i,s,v:o}=this.color.hsv;return isNaN(i)||(this.hue=i),this._moveSelectorTo(this._saturationWidth*s,(1-o)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this}setSize(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this}setBackgroundColor(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this}setNoBackground(){return this.$el.style.padding="0px",this.$el.style.background="none",this}onChange(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this}get isChoosing(){return this._isChoosing}getColor(){return this._inputIsNumber?this.getHexNumber():this.getHexString()}getHexString(){return this.color.hexString.toUpperCase()}getHexNumber(){return this.color.hex}getRGB(){return this.color.rgb}getHSV(){return this.color.hsv}isDark(){return this.color.isDark}isLight(){return this.color.isLight}_moveSelectorTo(t,i){this.position.x=e(t,0,this._saturationWidth),this.position.y=e(i,0,this._hueHeight),this.$sbSelector.style.transform=`translate(${this.position.x}px, ${this.position.y}px)`}_updateColorFromPosition(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()}_moveHueTo(t){this._huePosition=e(t,0,this._maxHue),this.$hSelector.style.transform=`translateY(${this._huePosition}px)`}_updateHueFromPosition(){const t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()}_updateHue(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background=`linear-gradient(to right, #fff, ${this.hueColor.hexString})`,this._updateColor()}_updateColor(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()}_triggerChange(){this._callbacks.forEach(t=>t(this.getHexString()))}}
 //# sourceMappingURL=simple-color-picker.modern.js.map

dist/simple-color-picker.module.js

@@ -1,2 +0,2 @@
-function t(t){return"number"==typeof t&&!isNaN(t)}function e(t,e,i){return Math.min(Math.max(t,e),i)}function i(t){if(0===t.type.indexOf("touch")){var e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function o(t){return 1==t.length?"0"+t:""+t}var s=function(){function e(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}var i,s=e.prototype;return s.fromHex=function(e){e||(e=0),t(e)?(this._hexNumber=e,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=e.toUpperCase(),this._hexNumber=n(this._hexString));var i=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber),o=i.g,s=i.b;this._rgba.r=i.r,this._rgba.g=o,this._rgba.b=s;var h=function(t){var e,i=t.r,o=t.g,s=t.b,n=Math.max(i,o,s),h=Math.min(i,o,s),r=n-h,u=0===n?0:r/n,a=n;if(n==h)e=0;else{switch(n){case i:e=(o-s)/r+(o<s?6:0);break;case o:e=(s-i)/r+2;break;case s:e=(i-o)/r+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),r=h.s,u=h.v;this._hsva.h=h.h,this._hsva.s=r,this._hsva.v=u,this._updateBrightness()},s.fromHsv=function(t){var e=t.s,i=t.v;this._hsva.h=t.h,this._hsva.s=e,this._hsva.v=i;var s=function(t){var e=t.h,i=t.s,o=t.v;e*=6;var s=Math.floor(e),n=e-s,h=o*(1-i),r=o*(1-n*i),u=o*(1-(1-n)*i),a=s%6;return{r:[o,r,h,h,u,o][a],g:[u,o,o,r,h,h][a],b:[h,h,u,o,o,r][a]}}(this._hsva),h=s.g,r=s.b;this._rgba.r=s.r,this._rgba.g=h,this._rgba.b=r,this._hexString=function(t){var e=t.g,i=t.b;return["#",o(Math.round(255*t.r).toString(16)),o(Math.round(255*e).toString(16)),o(Math.round(255*i).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=n(this._hexString),this._updateBrightness()},s._updateBrightness=function(){var t=this._rgba;this._brightness=(299*t.r+587*t.g+114*t.b)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark},(i=[{key:"rgb",get:function(){return this._rgba}},{key:"hsv",get:function(){return this._hsva}},{key:"hex",get:function(){return this._hexNumber}},{key:"hexString",get:function(){return this._hexString}},{key:"brightness",get:function(){return this._brightness}},{key:"isDark",get:function(){return this._isDark}},{key:"isLight",get:function(){return this._isLight}}])&&function(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}(e.prototype,i),e}();function n(t){return parseInt(t.replace("#",""),16)}var h=function(){function o(t){var e=this;void 0===t&&(t={}),this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new s(0),this.backgroundColor=new s(0),this.hueColor=new s(0),this._onSaturationMouseDown=function(t){var o=e.$saturation.getBoundingClientRect(),s=i(t);e._moveSelectorTo(s.x-o.left,s.y-o.top),e._updateColorFromPosition(),e._window.addEventListener("mouseup",e._onSaturationMouseUp),e._window.addEventListener("touchend",e._onSaturationMouseUp),e._window.addEventListener("mousemove",e._onSaturationMouseMove),e._window.addEventListener("touchmove",e._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=function(t){var o=e.$saturation.getBoundingClientRect(),s=i(t);e._moveSelectorTo(s.x-o.left,s.y-o.top),e._updateColorFromPosition()},this._onSaturationMouseUp=function(){e._window.removeEventListener("mouseup",e._onSaturationMouseUp),e._window.removeEventListener("touchend",e._onSaturationMouseUp),e._window.removeEventListener("mousemove",e._onSaturationMouseMove),e._window.removeEventListener("touchmove",e._onSaturationMouseMove)},this._onHueMouseDown=function(t){var o=e.$hue.getBoundingClientRect(),s=i(t);e._moveHueTo(s.y-o.top),e._updateHueFromPosition(),e._window.addEventListener("mouseup",e._onHueMouseUp),e._window.addEventListener("touchend",e._onHueMouseUp),e._window.addEventListener("mousemove",e._onHueMouseMove),e._window.addEventListener("touchmove",e._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=function(t){var o=e.$hue.getBoundingClientRect(),s=i(t);e._moveHueTo(s.y-o.top),e._updateHueFromPosition()},this._onHueMouseUp=function(){e._window.removeEventListener("mouseup",e._onHueMouseUp),e._window.removeEventListener("touchend",e._onHueMouseUp),e._window.removeEventListener("mousemove",e._onHueMouseMove),e._window.removeEventListener("touchmove",e._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}var n=o.prototype;return n.appendTo=function(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this},n.remove=function(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)},n.setColor=function(e){this._inputIsNumber=t(e),this.color.fromHex(e);var i=this.color.hsv,o=i.h,s=i.s,n=i.v;return isNaN(o)||(this.hue=o),this._moveSelectorTo(this._saturationWidth*s,(1-n)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this},n.setSize=function(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this},n.setBackgroundColor=function(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this},n.setNoBackground=function(){return this.$el.style.padding="0px",this.$el.style.background="none",this},n.onChange=function(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this},n.getColor=function(){return this._inputIsNumber?this.getHexNumber():this.getHexString()},n.getHexString=function(){return this.color.hexString.toUpperCase()},n.getHexNumber=function(){return this.color.hex},n.getRGB=function(){return this.color.rgb},n.getHSV=function(){return this.color.hsv},n.isDark=function(){return this.color.isDark},n.isLight=function(){return this.color.isLight},n._moveSelectorTo=function(t,i){this.position.x=e(t,0,this._saturationWidth),this.position.y=e(i,0,this._hueHeight),this.$sbSelector.style.transform="translate("+this.position.x+"px, "+this.position.y+"px)"},n._updateColorFromPosition=function(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()},n._moveHueTo=function(t){this._huePosition=e(t,0,this._maxHue),this.$hSelector.style.transform="translateY("+this._huePosition+"px)"},n._updateHueFromPosition=function(){var t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()},n._updateHue=function(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background="linear-gradient(to right, #fff, "+this.hueColor.hexString+")",this._updateColor()},n._updateColor=function(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()},n._triggerChange=function(){var t=this;this._callbacks.forEach(function(e){return e(t.getHexString())})},o}();export default h;
+function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}function i(t){return"number"==typeof t&&!isNaN(t)}function o(t,e,i){return Math.min(Math.max(t,e),i)}function s(t){if(0===t.type.indexOf("touch")){var e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function n(t){return 1==t.length?"0"+t:""+t}var h=function(){function t(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}var o=t.prototype;return o.fromHex=function(t){t||(t=0),i(t)?(this._hexNumber=t,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=t.toUpperCase(),this._hexNumber=r(this._hexString));var e=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber),o=e.g,s=e.b;this._rgba.r=e.r,this._rgba.g=o,this._rgba.b=s;var n=function(t){var e,i=t.r,o=t.g,s=t.b,n=Math.max(i,o,s),h=Math.min(i,o,s),r=n-h,u=0===n?0:r/n,a=n;if(n==h)e=0;else{switch(n){case i:e=(o-s)/r+(o<s?6:0);break;case o:e=(s-i)/r+2;break;case s:e=(i-o)/r+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),h=n.s,u=n.v;this._hsva.h=n.h,this._hsva.s=h,this._hsva.v=u,this._updateBrightness()},o.fromHsv=function(t){var e=t.s,i=t.v;this._hsva.h=t.h,this._hsva.s=e,this._hsva.v=i;var o=function(t){var e=t.h,i=t.s,o=t.v;e*=6;var s=Math.floor(e),n=e-s,h=o*(1-i),r=o*(1-n*i),u=o*(1-(1-n)*i),a=s%6;return{r:[o,r,h,h,u,o][a],g:[u,o,o,r,h,h][a],b:[h,h,u,o,o,r][a]}}(this._hsva),s=o.g,h=o.b;this._rgba.r=o.r,this._rgba.g=s,this._rgba.b=h,this._hexString=function(t){var e=t.g,i=t.b;return["#",n(Math.round(255*t.r).toString(16)),n(Math.round(255*e).toString(16)),n(Math.round(255*i).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=r(this._hexString),this._updateBrightness()},o._updateBrightness=function(){var t=this._rgba;this._brightness=(299*t.r+587*t.g+114*t.b)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark},e(t,[{key:"rgb",get:function(){return this._rgba}},{key:"hsv",get:function(){return this._hsva}},{key:"hex",get:function(){return this._hexNumber}},{key:"hexString",get:function(){return this._hexString}},{key:"brightness",get:function(){return this._brightness}},{key:"isDark",get:function(){return this._isDark}},{key:"isLight",get:function(){return this._isLight}}]),t}();function r(t){return parseInt(t.replace("#",""),16)}var u=function(){function t(t){var e=this;void 0===t&&(t={}),this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._isChoosing=!1,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new h(0),this.backgroundColor=new h(0),this.hueColor=new h(0),this._onSaturationMouseDown=function(t){var i=e.$saturation.getBoundingClientRect(),o=s(t),n=o.x,h=o.y;e._isChoosing=!0,e._moveSelectorTo(n-i.left,h-i.top),e._updateColorFromPosition(),e._window.addEventListener("mouseup",e._onSaturationMouseUp),e._window.addEventListener("touchend",e._onSaturationMouseUp),e._window.addEventListener("mousemove",e._onSaturationMouseMove),e._window.addEventListener("touchmove",e._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=function(t){var i=e.$saturation.getBoundingClientRect(),o=s(t);e._moveSelectorTo(o.x-i.left,o.y-i.top),e._updateColorFromPosition()},this._onSaturationMouseUp=function(){e._isChoosing=!1,e._window.removeEventListener("mouseup",e._onSaturationMouseUp),e._window.removeEventListener("touchend",e._onSaturationMouseUp),e._window.removeEventListener("mousemove",e._onSaturationMouseMove),e._window.removeEventListener("touchmove",e._onSaturationMouseMove)},this._onHueMouseDown=function(t){var i=e.$hue.getBoundingClientRect(),o=s(t).y;e._isChoosing=!0,e._moveHueTo(o-i.top),e._updateHueFromPosition(),e._window.addEventListener("mouseup",e._onHueMouseUp),e._window.addEventListener("touchend",e._onHueMouseUp),e._window.addEventListener("mousemove",e._onHueMouseMove),e._window.addEventListener("touchmove",e._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=function(t){var i=e.$hue.getBoundingClientRect(),o=s(t);e._moveHueTo(o.y-i.top),e._updateHueFromPosition()},this._onHueMouseUp=function(){e._isChoosing=!1,e._window.removeEventListener("mouseup",e._onHueMouseUp),e._window.removeEventListener("touchend",e._onHueMouseUp),e._window.removeEventListener("mousemove",e._onHueMouseMove),e._window.removeEventListener("touchmove",e._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}var n=t.prototype;return n.appendTo=function(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this},n.remove=function(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)},n.setColor=function(t){this._inputIsNumber=i(t),this.color.fromHex(t);var e=this.color.hsv,o=e.h,s=e.s,n=e.v;return isNaN(o)||(this.hue=o),this._moveSelectorTo(this._saturationWidth*s,(1-n)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this},n.setSize=function(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this},n.setBackgroundColor=function(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this},n.setNoBackground=function(){return this.$el.style.padding="0px",this.$el.style.background="none",this},n.onChange=function(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this},n.getColor=function(){return this._inputIsNumber?this.getHexNumber():this.getHexString()},n.getHexString=function(){return this.color.hexString.toUpperCase()},n.getHexNumber=function(){return this.color.hex},n.getRGB=function(){return this.color.rgb},n.getHSV=function(){return this.color.hsv},n.isDark=function(){return this.color.isDark},n.isLight=function(){return this.color.isLight},n._moveSelectorTo=function(t,e){this.position.x=o(t,0,this._saturationWidth),this.position.y=o(e,0,this._hueHeight),this.$sbSelector.style.transform="translate("+this.position.x+"px, "+this.position.y+"px)"},n._updateColorFromPosition=function(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()},n._moveHueTo=function(t){this._huePosition=o(t,0,this._maxHue),this.$hSelector.style.transform="translateY("+this._huePosition+"px)"},n._updateHueFromPosition=function(){var t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()},n._updateHue=function(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background="linear-gradient(to right, #fff, "+this.hueColor.hexString+")",this._updateColor()},n._updateColor=function(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()},n._triggerChange=function(){var t=this;this._callbacks.forEach(function(e){return e(t.getHexString())})},e(t,[{key:"isChoosing",get:function(){return this._isChoosing}}]),t}();export default u;
 //# sourceMappingURL=simple-color-picker.module.js.map

dist/simple-color-picker.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).SimpleColorPicker=e()}(this,function(){function t(t){return"number"==typeof t&&!isNaN(t)}function e(t,e,i){return Math.min(Math.max(t,e),i)}function i(t){if(0===t.type.indexOf("touch")){var e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function o(t){return 1==t.length?"0"+t:""+t}var n=function(){function e(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}var i,n=e.prototype;return n.fromHex=function(e){e||(e=0),t(e)?(this._hexNumber=e,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=e.toUpperCase(),this._hexNumber=s(this._hexString));var i=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber),o=i.g,n=i.b;this._rgba.r=i.r,this._rgba.g=o,this._rgba.b=n;var h=function(t){var e,i=t.r,o=t.g,n=t.b,s=Math.max(i,o,n),h=Math.min(i,o,n),r=s-h,u=0===s?0:r/s,a=s;if(s==h)e=0;else{switch(s){case i:e=(o-n)/r+(o<n?6:0);break;case o:e=(n-i)/r+2;break;case n:e=(i-o)/r+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),r=h.s,u=h.v;this._hsva.h=h.h,this._hsva.s=r,this._hsva.v=u,this._updateBrightness()},n.fromHsv=function(t){var e=t.s,i=t.v;this._hsva.h=t.h,this._hsva.s=e,this._hsva.v=i;var n=function(t){var e=t.h,i=t.s,o=t.v;e*=6;var n=Math.floor(e),s=e-n,h=o*(1-i),r=o*(1-s*i),u=o*(1-(1-s)*i),a=n%6;return{r:[o,r,h,h,u,o][a],g:[u,o,o,r,h,h][a],b:[h,h,u,o,o,r][a]}}(this._hsva),h=n.g,r=n.b;this._rgba.r=n.r,this._rgba.g=h,this._rgba.b=r,this._hexString=function(t){var e=t.g,i=t.b;return["#",o(Math.round(255*t.r).toString(16)),o(Math.round(255*e).toString(16)),o(Math.round(255*i).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=s(this._hexString),this._updateBrightness()},n._updateBrightness=function(){var t=this._rgba;this._brightness=(299*t.r+587*t.g+114*t.b)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark},(i=[{key:"rgb",get:function(){return this._rgba}},{key:"hsv",get:function(){return this._hsva}},{key:"hex",get:function(){return this._hexNumber}},{key:"hexString",get:function(){return this._hexString}},{key:"brightness",get:function(){return this._brightness}},{key:"isDark",get:function(){return this._isDark}},{key:"isLight",get:function(){return this._isLight}}])&&function(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}(e.prototype,i),e}();function s(t){return parseInt(t.replace("#",""),16)}return function(){function o(t){var e=this;void 0===t&&(t={}),this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new n(0),this.backgroundColor=new n(0),this.hueColor=new n(0),this._onSaturationMouseDown=function(t){var o=e.$saturation.getBoundingClientRect(),n=i(t);e._moveSelectorTo(n.x-o.left,n.y-o.top),e._updateColorFromPosition(),e._window.addEventListener("mouseup",e._onSaturationMouseUp),e._window.addEventListener("touchend",e._onSaturationMouseUp),e._window.addEventListener("mousemove",e._onSaturationMouseMove),e._window.addEventListener("touchmove",e._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=function(t){var o=e.$saturation.getBoundingClientRect(),n=i(t);e._moveSelectorTo(n.x-o.left,n.y-o.top),e._updateColorFromPosition()},this._onSaturationMouseUp=function(){e._window.removeEventListener("mouseup",e._onSaturationMouseUp),e._window.removeEventListener("touchend",e._onSaturationMouseUp),e._window.removeEventListener("mousemove",e._onSaturationMouseMove),e._window.removeEventListener("touchmove",e._onSaturationMouseMove)},this._onHueMouseDown=function(t){var o=e.$hue.getBoundingClientRect(),n=i(t);e._moveHueTo(n.y-o.top),e._updateHueFromPosition(),e._window.addEventListener("mouseup",e._onHueMouseUp),e._window.addEventListener("touchend",e._onHueMouseUp),e._window.addEventListener("mousemove",e._onHueMouseMove),e._window.addEventListener("touchmove",e._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=function(t){var o=e.$hue.getBoundingClientRect(),n=i(t);e._moveHueTo(n.y-o.top),e._updateHueFromPosition()},this._onHueMouseUp=function(){e._window.removeEventListener("mouseup",e._onHueMouseUp),e._window.removeEventListener("touchend",e._onHueMouseUp),e._window.removeEventListener("mousemove",e._onHueMouseMove),e._window.removeEventListener("touchmove",e._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}var s=o.prototype;return s.appendTo=function(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this},s.remove=function(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)},s.setColor=function(e){this._inputIsNumber=t(e),this.color.fromHex(e);var i=this.color.hsv,o=i.h,n=i.s,s=i.v;return isNaN(o)||(this.hue=o),this._moveSelectorTo(this._saturationWidth*n,(1-s)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this},s.setSize=function(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this},s.setBackgroundColor=function(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this},s.setNoBackground=function(){return this.$el.style.padding="0px",this.$el.style.background="none",this},s.onChange=function(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this},s.getColor=function(){return this._inputIsNumber?this.getHexNumber():this.getHexString()},s.getHexString=function(){return this.color.hexString.toUpperCase()},s.getHexNumber=function(){return this.color.hex},s.getRGB=function(){return this.color.rgb},s.getHSV=function(){return this.color.hsv},s.isDark=function(){return this.color.isDark},s.isLight=function(){return this.color.isLight},s._moveSelectorTo=function(t,i){this.position.x=e(t,0,this._saturationWidth),this.position.y=e(i,0,this._hueHeight),this.$sbSelector.style.transform="translate("+this.position.x+"px, "+this.position.y+"px)"},s._updateColorFromPosition=function(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()},s._moveHueTo=function(t){this._huePosition=e(t,0,this._maxHue),this.$hSelector.style.transform="translateY("+this._huePosition+"px)"},s._updateHueFromPosition=function(){var t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()},s._updateHue=function(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background="linear-gradient(to right, #fff, "+this.hueColor.hexString+")",this._updateColor()},s._updateColor=function(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()},s._triggerChange=function(){var t=this;this._callbacks.forEach(function(e){return e(t.getHexString())})},o}()});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).SimpleColorPicker=e()}(this,function(){function t(t,e){for(var i=0;i<e.length;i++){var o=e[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(e,i,o){return i&&t(e.prototype,i),o&&t(e,o),e}function i(t){return"number"==typeof t&&!isNaN(t)}function o(t,e,i){return Math.min(Math.max(t,e),i)}function n(t){if(0===t.type.indexOf("touch")){var e=t.touches[0];return{x:e.clientX,y:e.clientY}}return{x:t.clientX,y:t.clientY}}function s(t){return 1==t.length?"0"+t:""+t}var h=function(){function t(t){this._rgba={r:0,g:0,b:0,a:1},this._hsva={h:0,s:0,v:0,a:1},this.fromHex(t)}var o=t.prototype;return o.fromHex=function(t){t||(t=0),i(t)?(this._hexNumber=t,this._hexString=function(t){return"#"+("00000"+(0|t).toString(16)).substr(-6).toUpperCase()}(this._hexNumber)):(this._hexString=t.toUpperCase(),this._hexNumber=r(this._hexString));var e=function(t){return{r:(t>>16&255)/255,g:(t>>8&255)/255,b:(255&t)/255}}(this._hexNumber),o=e.g,n=e.b;this._rgba.r=e.r,this._rgba.g=o,this._rgba.b=n;var s=function(t){var e,i=t.r,o=t.g,n=t.b,s=Math.max(i,o,n),h=Math.min(i,o,n),r=s-h,u=0===s?0:r/s,a=s;if(s==h)e=0;else{switch(s){case i:e=(o-n)/r+(o<n?6:0);break;case o:e=(n-i)/r+2;break;case n:e=(i-o)/r+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),h=s.s,u=s.v;this._hsva.h=s.h,this._hsva.s=h,this._hsva.v=u,this._updateBrightness()},o.fromHsv=function(t){var e=t.s,i=t.v;this._hsva.h=t.h,this._hsva.s=e,this._hsva.v=i;var o=function(t){var e=t.h,i=t.s,o=t.v;e*=6;var n=Math.floor(e),s=e-n,h=o*(1-i),r=o*(1-s*i),u=o*(1-(1-s)*i),a=n%6;return{r:[o,r,h,h,u,o][a],g:[u,o,o,r,h,h][a],b:[h,h,u,o,o,r][a]}}(this._hsva),n=o.g,h=o.b;this._rgba.r=o.r,this._rgba.g=n,this._rgba.b=h,this._hexString=function(t){var e=t.g,i=t.b;return["#",s(Math.round(255*t.r).toString(16)),s(Math.round(255*e).toString(16)),s(Math.round(255*i).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=r(this._hexString),this._updateBrightness()},o._updateBrightness=function(){var t=this._rgba;this._brightness=(299*t.r+587*t.g+114*t.b)/1e3,this._isDark=this._brightness<.5,this._isLight=!this._isDark},e(t,[{key:"rgb",get:function(){return this._rgba}},{key:"hsv",get:function(){return this._hsva}},{key:"hex",get:function(){return this._hexNumber}},{key:"hexString",get:function(){return this._hexString}},{key:"brightness",get:function(){return this._brightness}},{key:"isDark",get:function(){return this._isDark}},{key:"isLight",get:function(){return this._isLight}}]),t}();function r(t){return parseInt(t.replace("#",""),16)}return function(){function t(t){var e=this;void 0===t&&(t={}),this._widthUnits="px",this._heightUnits="px",this._huePosition=0,this._hueHeight=0,this._maxHue=0,this._inputIsNumber=!1,this._saturationWidth=0,this._isChoosing=!1,this._callbacks=[],this.width=0,this.height=0,this.hue=0,this.position={x:0,y:0},this.color=new h(0),this.backgroundColor=new h(0),this.hueColor=new h(0),this._onSaturationMouseDown=function(t){var i=e.$saturation.getBoundingClientRect(),o=n(t),s=o.x,h=o.y;e._isChoosing=!0,e._moveSelectorTo(s-i.left,h-i.top),e._updateColorFromPosition(),e._window.addEventListener("mouseup",e._onSaturationMouseUp),e._window.addEventListener("touchend",e._onSaturationMouseUp),e._window.addEventListener("mousemove",e._onSaturationMouseMove),e._window.addEventListener("touchmove",e._onSaturationMouseMove),t.preventDefault()},this._onSaturationMouseMove=function(t){var i=e.$saturation.getBoundingClientRect(),o=n(t);e._moveSelectorTo(o.x-i.left,o.y-i.top),e._updateColorFromPosition()},this._onSaturationMouseUp=function(){e._isChoosing=!1,e._window.removeEventListener("mouseup",e._onSaturationMouseUp),e._window.removeEventListener("touchend",e._onSaturationMouseUp),e._window.removeEventListener("mousemove",e._onSaturationMouseMove),e._window.removeEventListener("touchmove",e._onSaturationMouseMove)},this._onHueMouseDown=function(t){var i=e.$hue.getBoundingClientRect(),o=n(t).y;e._isChoosing=!0,e._moveHueTo(o-i.top),e._updateHueFromPosition(),e._window.addEventListener("mouseup",e._onHueMouseUp),e._window.addEventListener("touchend",e._onHueMouseUp),e._window.addEventListener("mousemove",e._onHueMouseMove),e._window.addEventListener("touchmove",e._onHueMouseMove),t.preventDefault()},this._onHueMouseMove=function(t){var i=e.$hue.getBoundingClientRect(),o=n(t);e._moveHueTo(o.y-i.top),e._updateHueFromPosition()},this._onHueMouseUp=function(){e._isChoosing=!1,e._window.removeEventListener("mouseup",e._onHueMouseUp),e._window.removeEventListener("touchend",e._onHueMouseUp),e._window.removeEventListener("mousemove",e._onHueMouseMove),e._window.removeEventListener("touchmove",e._onHueMouseMove)},this._window=t.window||window,this._document=this._window.document,this.$el=this._document.createElement("div"),this.$el.className="Scp",this.$el.innerHTML='\n      <div class="Scp-saturation">\n        <div class="Scp-brightness"></div>\n        <div class="Scp-sbSelector"></div>\n      </div>\n      <div class="Scp-hue">\n        <div class="Scp-hSelector"></div>\n      </div>\n    ',this.$saturation=this.$el.querySelector(".Scp-saturation"),this.$hue=this.$el.querySelector(".Scp-hue"),this.$sbSelector=this.$el.querySelector(".Scp-sbSelector"),this.$hSelector=this.$el.querySelector(".Scp-hSelector"),this.$saturation.addEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.addEventListener("touchstart",this._onSaturationMouseDown),this.$hue.addEventListener("mousedown",this._onHueMouseDown),this.$hue.addEventListener("touchstart",this._onHueMouseDown),t.el&&this.appendTo(t.el),t.background&&this.setBackgroundColor(t.background),t.widthUnits&&(this._widthUnits=t.widthUnits),t.heightUnits&&(this._heightUnits=t.heightUnits),this.setSize(t.width||175,t.height||150),this.setColor(t.color)}var s=t.prototype;return s.appendTo=function(t){return"string"==typeof t?document.querySelector(t).appendChild(this.$el):t.appendChild(this.$el),this},s.remove=function(){this._callbacks=[],this._onSaturationMouseUp(),this._onHueMouseUp(),this.$saturation.removeEventListener("mousedown",this._onSaturationMouseDown),this.$saturation.removeEventListener("touchstart",this._onSaturationMouseDown),this.$hue.removeEventListener("mousedown",this._onHueMouseDown),this.$hue.removeEventListener("touchstart",this._onHueMouseDown),this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el)},s.setColor=function(t){this._inputIsNumber=i(t),this.color.fromHex(t);var e=this.color.hsv,o=e.h,n=e.s,s=e.v;return isNaN(o)||(this.hue=o),this._moveSelectorTo(this._saturationWidth*n,(1-s)*this._hueHeight),this._moveHueTo((1-this.hue)*this._hueHeight),this._updateHue(),this},s.setSize=function(t,e){return this.width=t,this.height=e,this.$el.style.width=this.width+this._widthUnits,this.$el.style.height=this.height+this._heightUnits,this._saturationWidth=this.width-25,this.$saturation.style.width=this._saturationWidth+"px",this._hueHeight=this.height,this._maxHue=this._hueHeight-2,this},s.setBackgroundColor=function(t){return this.backgroundColor.fromHex(t),this.$el.style.padding="5px",this.$el.style.background=this.backgroundColor.hexString,this},s.setNoBackground=function(){return this.$el.style.padding="0px",this.$el.style.background="none",this},s.onChange=function(t){return this._callbacks.indexOf(t)<0&&(this._callbacks.push(t),t(this.getHexString())),this},s.getColor=function(){return this._inputIsNumber?this.getHexNumber():this.getHexString()},s.getHexString=function(){return this.color.hexString.toUpperCase()},s.getHexNumber=function(){return this.color.hex},s.getRGB=function(){return this.color.rgb},s.getHSV=function(){return this.color.hsv},s.isDark=function(){return this.color.isDark},s.isLight=function(){return this.color.isLight},s._moveSelectorTo=function(t,e){this.position.x=o(t,0,this._saturationWidth),this.position.y=o(e,0,this._hueHeight),this.$sbSelector.style.transform="translate("+this.position.x+"px, "+this.position.y+"px)"},s._updateColorFromPosition=function(){this.color.fromHsv({h:this.hue,s:this.position.x/this._saturationWidth,v:1-this.position.y/this._hueHeight}),this._updateColor()},s._moveHueTo=function(t){this._huePosition=o(t,0,this._maxHue),this.$hSelector.style.transform="translateY("+this._huePosition+"px)"},s._updateHueFromPosition=function(){var t=this.getHSV();this.hue=1-this._huePosition/this._maxHue,this.color.fromHsv({h:this.hue,s:t.s,v:t.v}),this._updateHue()},s._updateHue=function(){this.hueColor.fromHsv({h:this.hue,s:1,v:1}),this.$saturation.style.background="linear-gradient(to right, #fff, "+this.hueColor.hexString+")",this._updateColor()},s._updateColor=function(){this.$sbSelector.style.background=this.getHexString(),this.$sbSelector.style.borderColor=this.isDark()?"#fff":"#000",this._triggerChange()},s._triggerChange=function(){var t=this;this._callbacks.forEach(function(e){return e(t.getHexString())})},e(t,[{key:"isChoosing",get:function(){return this._isChoosing}}]),t}()});
 //# sourceMappingURL=simple-color-picker.umd.js.map

package.json

 {
   "name": "simple-color-picker",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Simple Color picker for the web",
@@ -5,0 +5,0 @@ "author": "Guillaume Gouessan <[e-mail]>",

README.md

@@ -19,5 +19,5 @@ # simple-color-picker
 ```javascript
-var ColorPicker = require('simple-color-picker');
+import ColorPicker from 'simple-color-picker';
 
-var colorPicker = new ColorPicker();
+const colorPicker = new ColorPicker();
 ```
@@ -37,3 +37,3 @@
 ```javascript
-var colorPicker = new ColorPicker({
+const colorPicker = new ColorPicker({
   color: '#FF0000',
@@ -68,2 +68,7 @@ background: '#454545',
 
+## Properties
+
+### `.isChoosing`
+Is true when mouse is down and user is currently choosing a color.
+
 ## Methods
@@ -70,0 +75,0 @@

src/ColorPicker.ts

@@ -26,2 +26,3 @@ import { Color, RGBAColor, HSVAColor } from './color'
   private _saturationWidth: number = 0
+  private _isChoosing: boolean = false
   private _callbacks: Function[] = []
@@ -222,2 +223,9 @@
 
+  /**
+   * Is true when mouse is down and user is currently choosing a color.
+   */
+  public get isChoosing(): boolean {
+    return this._isChoosing
+  }
+
   /* =============================================================================
@@ -339,2 +347,3 @@ Color getters
     const { x, y } = getMousePosition(e)
+    this._isChoosing = true
     this._moveSelectorTo(x - sbOffset.left, y - sbOffset.top)
@@ -357,2 +366,3 @@ this._updateColorFromPosition()
   private _onSaturationMouseUp = () => {
+    this._isChoosing = false
     this._window.removeEventListener('mouseup', this._onSaturationMouseUp)
@@ -367,2 +377,3 @@ this._window.removeEventListener('touchend', this._onSaturationMouseUp)
     const { y } = getMousePosition(e)
+    this._isChoosing = true
     this._moveHueTo(y - hOffset.top)
@@ -385,2 +396,3 @@ this._updateHueFromPosition()
   private _onHueMouseUp = () => {
+    this._isChoosing = false
     this._window.removeEventListener('mouseup', this._onHueMouseUp)
@@ -387,0 +399,0 @@ this._window.removeEventListener('touchend', this._onHueMouseUp)

tests/ColorPicker.ts

@@ -270,9 +270,20 @@ import { suite, test } from 'uvu'
 
-// uiSuite('_updateColorFromPosition()', () => {
-//   const picker = new ColorPicker()
-//   // _updateColorFromPosition
-// })
+uiSuite('_updateColorFromPosition()', () => {
+  const picker = new ColorPicker()
+  const e1 = new window.MouseEvent('mousedown', { clientX: 10, clientY: 10 })
+  
+  assert.not(picker.isChoosing)
+  
+  // @ts-ignore
+  picker._onSaturationMouseDown(e1)
+  assert.ok(picker.isChoosing)
+  
+  // @ts-ignore
+  picker._onSaturationMouseUp()
+  assert.not(picker.isChoosing)
 
+})
+
 createSuite.run()
 methodSuite.run()
 uiSuite.run()

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

235355

increased by1.81%

Lines of code

1360

increased by2.03%

Number of lines in readme file

114

increased by4.59%

No dependency changes