simple-color-picker
Version:
Simple Color picker for the web
3 lines (2 loc) • 9.09 kB
JavaScript
import{insertCss as t}from"insert-css";function e(t){return"number"==typeof t&&!isNaN(t)}function i(t,e,i){return Math.min(Math.max(t,e),i)}function s(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 o(t){return 1==t.length?"0"+t:""+t}class h{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(t){t||(t=0),e(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=n(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,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=h,this._hsva.s=r,this._hsva.v=u,this._updateBrightness()}fromHsv(t){const{h:e,s:i,v:s}=t;this._hsva.h=e,this._hsva.s=i,this._hsva.v=s;const{r:h,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=h,this._rgba.g=r,this._rgba.b=u,this._hexString=function(t){const{r:e,g:i,b:s}=t;return["#",o(Math.round(255*e).toString(16)),o(Math.round(255*i).toString(16)),o(Math.round(255*s).toString(16))].join("").toUpperCase()}(this._rgba),this._hexNumber=n(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 n(t){return parseInt(t.replace("#",""),16)}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}");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 h(0),this.backgroundColor=new h(0),this.hueColor=new h(0),this._onSaturationMouseDown=t=>{const e=this.$saturation.getBoundingClientRect(),{x:i,y:o}=s(t);this._isChoosing=!0,this._moveSelectorTo(i-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:i,y:o}=s(t);this._moveSelectorTo(i-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:i}=s(t);this._isChoosing=!0,this._moveHueTo(i-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:i}=s(t);this._moveHueTo(i-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(t){this._inputIsNumber=e(t),this.color.fromHex(t);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,e){this.position.x=i(t,0,this._saturationWidth),this.position.y=i(e,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=i(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