color-picker.min.js

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ColorPicker=e()}(this,(function(){"use strict";var t={color:"white"};const e=t=>t.match(/\((.*)\)/)[1].split(",").map(Number),n=t=>{var e,n=document.createElement("canvas").getContext("2d");return n.fillStyle=t,"#"==(e=n.fillStyle)[0]?e:i(e)},i=t=>{const[n,i,a,s]=e(t),o="#"+[n,i,a].map((t=>t.toString(16).padStart(2,"0"))).join("");return 3==t.length?o:o+Math.round(255*s).toString(16).padStart(2,"0")};function a({name:t,min:e,max:n,value:i}){return`<div class="range color-picker__${t}" title="${t}">\n            <input type="range" name="${t}" value="${i}" min="${e||0}" max="${n||100}">\n            <div class='range__progress'></div>\n          </div>`}function s(t){return`\n    <div class='color-picker__value'>\n      <input name='value' value='${n(t)}'>\n    </div>\n  `}var o=Object.freeze({__proto__:null,scope:function(){const{h:t,s:e,l:n,a:i}=this.color;return`\n    <div class='color-picker'>\n      ${a({name:"hue",value:t,max:"360"})}\n      ${a({name:"saturation",value:e})}\n      ${a({name:"lightness",value:n,max:50})}\n      ${a({name:"alpha",value:i})}\n      <output></output>\n      ${s(this.color)}\n    </div>\n  `},slider:a,value:s});function r(e){this.settings=Object.assign({},t,e),this.color=this.getHSLA()||{h:0,s:0,l:0,a:1},this.DOM={},this.init()}return r.prototype={templates:o,getHSLA(t=this.settings.color){return(t=>{let[n,i,a,s]=e(t);n/=255,i/=255,a/=255;let o=Math.max(n,i,a),r=Math.min(n,i,a),l=o-r,u=0,c=0,p=((o+r)/2).toPrecision(2);return l&&(c=p>.5?l/(2-o-r):l/(o+r),u=o==n?(i-a)/l+(i<a?6:0):u=o==i?(a-n)/l+2:(n-i)/l+4,u/=6),{h:360*u,s:100*c,l:100*p,a:s}})(t=(t=>{const[e,n,i,a]=(t=>t.match(/\w\w/g))(t),[s,o,r]=[e,n,i].map((t=>parseInt(t,16)));return`rgba(${s},${o},${r},${a?(parseInt(a,16)/255).toFixed(2):1})`})(t=n(t)))},onInput(t){const{name:e,value:n,type:i}=t.target;"range"==i&&this.updateColor(e,n)},updateColor(t,e){this.DOM.scope.style.setProperty("--"+t,e)},bindEvents(){this.DOM.scope.addEventListener("input",this.onInput.bind(this))},init(){const t=this.templates.scope.call(this);var e;this.DOM.scope=(e=t,(new DOMParser).parseFromString(e.trim(),"text/html").body.firstElementChild),this.bindEvents()}},r}));