simple-color-picker - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/simple-color-picker.js

@@ -1,2 +0,2 @@
-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}();
+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 r=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=h(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),r=Math.min(i,o,n),h=s-r,u=0===s?0:h/s,a=s;if(s==r)e=0;else{switch(s){case i:e=(o-n)/h+(o<n?6:0);break;case o:e=(n-i)/h+2;break;case n:e=(i-o)/h+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),r=s.s,u=s.v;this._hsva.h=s.h,this._hsva.s=r,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,r=o*(1-i),h=o*(1-s*i),u=o*(1-(1-s)*i),a=n%6;return{r:[o,h,r,r,u,o][a],g:[u,o,o,h,r,r][a],b:[r,r,u,o,o,h][a]}}(this._hsva),n=o.g,r=o.b;this._rgba.r=o.r,this._rgba.g=n,this._rgba.b=r,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=h(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 h(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 r(0),this.backgroundColor=new r(0),this.hueColor=new r(0),this._onSaturationMouseDown=function(t){var i=e.$saturation.getBoundingClientRect(),o=n(t),s=o.x,r=o.y;e._isChoosing=!0,e._moveSelectorTo(s-i.left,r-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}();!function(t,e){void 0===e&&(e={});var i=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}(".Scp{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.Scp-saturation{position:relative;height:100%;background:linear-gradient(90deg,#fff,red);float:left;margin-right:5px}.Scp-brightness{width:100%;height:100%;background:linear-gradient(hsla(0,0%,100%,0),#000)}.Scp-sbSelector{border:2px solid #fff;position:absolute;width:14px;height:14px;background:#fff;border-radius:10px;top:-7px;left:-7px;box-sizing:border-box;z-index:10}.Scp-hue{width:20px;height:100%;position:relative;float:left;background:linear-gradient(red,#f0f 17%,#00f 34%,#0ff 50%,#0f0 67%,#ff0 84%,red)}.Scp-hSelector{position:absolute;background:#fff;border-bottom:1px solid #000;right:-3px;width:10px;height:2px}",{insertAt:"top"}),module.exports=u;
 //# 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._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()))}}
+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)}!function(t,e){void 0===e&&(e={});var i=e.insertAt;if("undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&s.firstChild?s.insertBefore(o,s.firstChild):s.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}(".Scp{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.Scp-saturation{position:relative;height:100%;background:linear-gradient(90deg,#fff,red);float:left;margin-right:5px}.Scp-brightness{width:100%;height:100%;background:linear-gradient(hsla(0,0%,100%,0),#000)}.Scp-sbSelector{border:2px solid #fff;position:absolute;width:14px;height:14px;background:#fff;border-radius:10px;top:-7px;left:-7px;box-sizing:border-box;z-index:10}.Scp-hue{width:20px;height:100%;position:relative;float:left;background:linear-gradient(red,#f0f 17%,#00f 34%,#0ff 50%,#0f0 67%,#ff0 84%,red)}.Scp-hSelector{position:absolute;background:#fff;border-bottom:1px solid #000;right:-3px;width:10px;height:2px}",{insertAt:"top"});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,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;
+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 r=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=h(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),r=Math.min(i,o,n),h=s-r,u=0===s?0:h/s,a=s;if(s==r)e=0;else{switch(s){case i:e=(o-n)/h+(o<n?6:0);break;case o:e=(n-i)/h+2;break;case n:e=(i-o)/h+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),r=s.s,u=s.v;this._hsva.h=s.h,this._hsva.s=r,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,r=o*(1-i),h=o*(1-s*i),u=o*(1-(1-s)*i),a=n%6;return{r:[o,h,r,r,u,o][a],g:[u,o,o,h,r,r][a],b:[r,r,u,o,o,h][a]}}(this._hsva),n=o.g,r=o.b;this._rgba.r=o.r,this._rgba.g=n,this._rgba.b=r,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=h(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 h(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 r(0),this.backgroundColor=new r(0),this.hueColor=new r(0),this._onSaturationMouseDown=function(t){var i=e.$saturation.getBoundingClientRect(),o=n(t),s=o.x,r=o.y;e._isChoosing=!0,e._moveSelectorTo(s-i.left,r-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}();!function(t,e){void 0===e&&(e={});var i=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}(".Scp{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.Scp-saturation{position:relative;height:100%;background:linear-gradient(90deg,#fff,red);float:left;margin-right:5px}.Scp-brightness{width:100%;height:100%;background:linear-gradient(hsla(0,0%,100%,0),#000)}.Scp-sbSelector{border:2px solid #fff;position:absolute;width:14px;height:14px;background:#fff;border-radius:10px;top:-7px;left:-7px;box-sizing:border-box;z-index:10}.Scp-hue{width:20px;height:100%;position:relative;float:left;background:linear-gradient(red,#f0f 17%,#00f 34%,#0ff 50%,#0f0 67%,#ff0 84%,red)}.Scp-hSelector{position:absolute;background:#fff;border-bottom:1px solid #000;right:-3px;width:10px;height:2px}",{insertAt:"top"});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,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}()});
+!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 r=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=h(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),r=Math.min(i,o,n),h=s-r,u=0===s?0:h/s,a=s;if(s==r)e=0;else{switch(s){case i:e=(o-n)/h+(o<n?6:0);break;case o:e=(n-i)/h+2;break;case n:e=(i-o)/h+4}e/=6}return{h:e,s:u,v:a}}(this._rgba),r=s.s,u=s.v;this._hsva.h=s.h,this._hsva.s=r,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,r=o*(1-i),h=o*(1-s*i),u=o*(1-(1-s)*i),a=n%6;return{r:[o,h,r,r,u,o][a],g:[u,o,o,h,r,r][a],b:[r,r,u,o,o,h][a]}}(this._hsva),n=o.g,r=o.b;this._rgba.r=o.r,this._rgba.g=n,this._rgba.b=r,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=h(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 h(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 r(0),this.backgroundColor=new r(0),this.hueColor=new r(0),this._onSaturationMouseDown=function(t){var i=e.$saturation.getBoundingClientRect(),o=n(t),s=o.x,r=o.y;e._isChoosing=!0,e._moveSelectorTo(s-i.left,r-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}();return function(t,e){void 0===e&&(e={});var i=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}(".Scp{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.Scp-saturation{position:relative;height:100%;background:linear-gradient(90deg,#fff,red);float:left;margin-right:5px}.Scp-brightness{width:100%;height:100%;background:linear-gradient(hsla(0,0%,100%,0),#000)}.Scp-sbSelector{border:2px solid #fff;position:absolute;width:14px;height:14px;background:#fff;border-radius:10px;top:-7px;left:-7px;box-sizing:border-box;z-index:10}.Scp-hue{width:20px;height:100%;position:relative;float:left;background:linear-gradient(red,#f0f 17%,#00f 34%,#0ff 50%,#0f0 67%,#ff0 84%,red)}.Scp-hSelector{position:absolute;background:#fff;border-bottom:1px solid #000;right:-3px;width:10px;height:2px}",{insertAt:"top"}),u});
 //# sourceMappingURL=simple-color-picker.umd.js.map

example/src/index.js

 import ColorPicker from '../../dist/simple-color-picker'
-import '../../dist/simple-color-picker.css'
 
@@ -4,0 +3,0 @@ /* --------------------------

package.json

 {
   "name": "simple-color-picker",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Simple Color picker for the web",
@@ -29,6 +29,6 @@ "author": "Guillaume Gouessan <[e-mail]>",
   "scripts": {
-    "build": "microbundle --css-modules false",
+    "build": "microbundle --css-modules false --css-inject true --css-insert-at-top true",
     "example": "rimraf example/dist && parcel example/src/index.html -d example/dist",
     "example:build": "rimraf example/dist && parcel build example/src/index.html --public-url '.' -d example/dist",
-    "test": "uvu -r ts-node/register tests -i \\d+.styl$",
+    "test": "uvu -r ts-node/register tests",
     "cover": "nyc npm test",
@@ -44,3 +44,3 @@ "gh-pages": "gh-pages -d example/dist -b gh-pages"
     "gh-pages": "^3.1.0",
-    "microbundle": "^0.12.4",
+    "microbundle": "github:superguigui/microbundle",
     "nyc": "^15.1.0",
@@ -47,0 +47,0 @@ "parcel-bundler": "^1.12.4",

README.md

@@ -13,3 +13,2 @@ # simple-color-picker
 ```html
-<link rel="stylesheet" href="https://unpkg.com/simple-color-picker/dist/simple-color-picker.css"/>
 <script src="https://unpkg.com/simple-color-picker/dist/simple-color-picker.umd.js"/>
@@ -25,4 +24,2 @@ ```
 
-And include `dist/simple-color-picker.css` in your html or import it in your css.
-
 You can retrieve the current color in different formats by using these convenient methods: 
@@ -116,1 +113,5 @@ * `colorPicker.getColor(); // output depends on previously inputed color format`
 Returns true if color is perceived as light.
+
+## Styling
+The javascript module automatically injects a `<style>` tag with the css it needs at the very top of the HEAD of your HTML.
+If you want to override the default styles, just add your own styles in your page.

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

244118

increased by3.72%

Lines of code

1376

increased by1.18%

Worsened metrics

Number of package files

32

decreased by-8.57%

No dependency changes