simple-color-picker - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

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){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}()});
 //# sourceMappingURL=simple-color-picker.umd.js.map

package.json

 {
   "name": "simple-color-picker",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Simple Color picker for the web",
@@ -27,2 +27,3 @@ "author": "Guillaume Gouessan <[e-mail]>",
   "unpkg": "dist/simple-color-picker.umd.js",
+  "amdName": "SimpleColorPicker",
   "scripts": {
@@ -29,0 +30,0 @@ "build": "microbundle --css-modules false",

README.md

@@ -8,4 +8,11 @@ # simple-color-picker
 ## Installation
+You can simply install it via NPM
 [![NPM](https://nodei.co/npm/simple-color-picker.png)](https://nodei.co/npm/simple-color-picker/)
 
+Or use UNPKG CDN to load it as an UMD module, ready to be used in your browser.
+```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"/>
+```
+
 ## Quickstart
@@ -18,3 +25,3 @@ ```javascript
 
-And include `simple-color-picker.css` in your html or import it in your css.
+And include `dist/simple-color-picker.css` in your html or import it in your css.
 
@@ -21,0 +28,0 @@ You can retrieve the current color in different formats by using these convenient methods:

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

231172

increased by0.15%

Number of lines in readme file

109

increased by6.86%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes