color-picker.js

/*!
 *
 * The MIT License (MIT)
 *
 * Copyright © 2021 Taufik Nurrohman
 *
 * <https://github.com/taufik-nurrohman/color-picker>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the “Software”), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 */
!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).CP=t()}(this,(function(){"use strict";var n=function(n){return Array.isArray(n)},t=function(n){return"function"==typeof n},e=function(n,t){return n&&i(t)&&n instanceof t},r=function(n){return"number"==typeof n},u=function(n,t){return void 0===t&&(t=!0),"object"==typeof n&&(!t||e(n,Object))},i=function(n){return function(n){return void 0!==n}(n)&&!function(n){return null===n}(n)},o=function(n){return"string"==typeof n},c=function t(e){if(n(e))return e.map((function(n){return t(e)}));if(u(e)){for(var r in e)e[r]=t(e[r]);return e}return!1===e?"false":null===e?"null":!0===e?"true":""+e},f=function(n){return n.toUpperCase()},l=function(n,t){return i(t[0])&&n<t[0]?t[0]:i(t[1])&&n>t[1]?t[1]:n},a=function(n,t){return void 0===t&&(t=10),t?parseInt(n,t):parseFloat(n)},s=function(n){return Object.keys(n)},v=function(n){return r(n)?Math.round(n):null},d=function(n,t){return void 0===t&&(t=10),r(n)?n.toString(t):""+n},p=function t(e){if(n(e))return e.map((function(n){return t(n)}));if(function(n){return/^-?(?:\d*.)?\d+$/.test(n+"")}(e))return a(e);if(u(e)){for(var r in e)e[r]=t(e[r]);return e}return"false"!==e&&("null"===e?null:"true"===e||e)},h=document,g=window,b=h.body,m=h.documentElement,y=function(n,t,e){if(void 0===e&&(e=!0),!C(n,t))return null;var r=n.getAttribute(t);return e?p(r):r},k=function(n,t,e){void 0===e&&(e=!0);var r=y(n,"data-"+t,e),u=(r+"").trim();return e&&u&&("["===u[0]&&"]"===u.slice(-1)||"{"===u[0]&&"}"===u.slice(-1))&&null!==(u=function(n){var t=null;try{t=JSON.parse(n)}catch(n){}return t}(r))?u:r},E=function(n){return n.parentNode||null},C=function(n,t){return n.hasAttribute(t)},w=function(n,t){return t in n},x=function(n,t){return n.removeAttribute(t),n},O=function(n,t,e){return!0===e&&(e=t),n.setAttribute(t,c(e)),n},A=function(n,t){return n.append(t),t},T=function(t,e,r){return(n(r)||u(r))&&(r=JSON.stringify(r)),O(t,"data-"+e,r)},H=function(n,t,e){return n=o(n)?h.createElement(n):n,u(t)&&(e=t,t=!1),o(t)&&L(n,t),u(e)&&function(n,t){var e;for(var r in t)(e=t[r])||""===e||0===e?O(n,r,e):x(n,r)}(n,e),n},L=function(n,t,e){if(void 0===e&&(e=!0),null===t)return n;var r="innerHTML";return w(n,r)&&(n[r]=e?t.trim():t),n},M=function(n,t,e){return r(e)&&(e+="px"),n.style[(u=t,u.replace(/[-_.](\w)/g,(function(n,t){return f(t)})))]=c(e),n;var u},P=function(n){return n&&n.preventDefault()},X=function(n,t,e){n.forEach((function(n){return function(n,t,e){t.removeEventListener(n,e)}(n,t,e)}))},N=function(n,t,e,r){void 0===r&&(r=!1),n.forEach((function(n){return function(n,t,e,r){void 0===r&&(r=!1),t.addEventListener(n,e,r)}(n,t,e,r)}))};var S=function(n,t){var e=n.touches,r=e?e[0].clientX:n.clientX,u=e?e[0].clientY:n.clientY;if(t){var i=Y(t);return[r-i[0],u-i[1],i[0],i[1]]}return[r,u]},Y=function(n){var t,e,r,u,i,o,c;return!function(n){return n===g}(n)?(u=(e=n.getBoundingClientRect()).left,i=e.top,r=e.width,t=e.height,o=e.right,c=e.bottom):(u=n.pageXOffset||m.scrollLeft||b.scrollLeft,i=n.pageYOffset||m.scrollTop||b.scrollTop,r=n.innerWidth,t=n.innerHeight),[u,i,r,t,o,c]};let $=g.setTimeout,J="HEX";function z(n,t){if(n===t)return n;for(;(n=n.parentElement)&&n!==t;);return n}function B(n){let t,e,r,u,o,c,f,l,a=+n[0],s=+n[1],d=+n[2];switch(u=Math.floor(6*a),o=6*a-u,c=d*(1-s),f=d*(1-o*s),l=d*(1-(1-o)*s),u=u||0,f=f||0,l=l||0,u%6){case 0:t=d,e=l,r=c;break;case 1:t=f,e=d,r=c;break;case 2:t=c,e=d,r=l;break;case 3:t=c,e=f,r=d;break;case 4:t=l,e=c,r=d;break;case 5:t=d,e=c,r=f}return[v(255*t),v(255*e),v(255*r),i(n[3])?+n[3]:1]}function D(n){let t,e,r=+n[0]/255,u=+n[1]/255,o=+n[2]/255,c=Math.max(r,u,o),f=Math.min(r,u,o),l=c,a=c-f;if(e=0===c?0:a/c,c===f)t=0;else{switch(c){case r:t=(u-o)/a+(u<o?6:0);break;case u:t=(o-r)/a+2;break;case o:t=(r-u)/a+4}t/=6}return[t,e,l,i(n[3])?+n[3]:1]}const F=["touchstart","mousedown"],I=["touchmove","mousemove"],R=["orientationchange","resize"],U=["touchend","mouseup"];function W(n,r={}){if(!n)return;const c=this;if(!e(c,W))return new W(n,r);if(n.CP)return;let{fire:f,hooks:a}=function(n){var t={};return n.hooks=t,n.fire=function(e,r){return i(t[e])?(t[e].forEach((function(t){return t.apply(n,r)})),n):n},n.off=function(e,r){if(!i(e))return t={},n;if(i(t[e]))if(i(r)){for(var u=0,o=t[e].length;u<o;++u)if(r===t[e][u]){t[e].splice(u,1);break}0===j&&delete t[e]}else delete t[e];return n},n.on=function(e,r){return i(t[e])||(t[e]=[]),i(r)&&t[e].push(r),n},n}(c);var v;function d(e){let u,o=W[t(W[r.color])?r.color:J];return(u=k(n,"color"))?i(e)?T(n,"color",o(e)):o(u):(u=function(n,t){return w(n,t)&&n[t]||null}(n,"value"))?i(e)?(c=n,f="value",l=o(e),c[f]=l,c):o(u):(u=function(n,t){void 0===t&&(t=!0);var e="textContent";if(!w(n,e))return!1;var r=n[e];return""!==(r=t?r.trim():r)?r:null}(n))?i(e)?function(n,t,e){if(void 0===e&&(e=!0),null===t)return n;var r="textContent";return w(n,r)&&(n[r]=e?t.trim():t),n}(n,o(e)):o(u):i(e)?void 0:[0,0,0,1];var c,f,l}c.state=r=function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return Object.assign.apply(Object,[{}].concat(t))}(W.state,o(r)?{color:r}:r||{}),c.source=n,c.visible=!1,W.instances[n.id||n.name||(v=W.instances,function(n){return n.length}(s(v)))]=c,n.CP=1;let p,y,C,x,O=r.class,L=d(),_=D(L),q=H("div",{class:O}),G=H("div"),K=H("div",{class:O+":sv"}),Q=H("div",{class:O+":h"}),V=H("div",{class:O+":a"}),Z=H("div"),nn=H("div"),tn=H("div"),en=H("i"),rn=H("div"),un=H("i"),on=H("div"),cn=H("div"),fn=H("i"),ln=0,an=0,sn=0,vn=0,dn=0,pn=0;function hn(t){if(a.focus)f("focus",L);else{let e=t.target;n===z(e,n)?!E(q)&&p(r.parent):y()}}return A(q,G),A(G,K),A(G,Q),A(G,V),A(K,Z),A(K,nn),A(K,tn),A(K,en),A(Q,rn),A(Q,un),A(V,on),A(V,cn),A(V,fn),function e(o,s){function v(n){c.current=V,sn=pn=1,O(n),P(n)}function k(n){c.current=Q,an=dn=1,O(n),P(n)}function w(n){c.current=K,ln=vn=1,O(n),P(n)}function O(n){vn&&function(n){let t=S(n,K),e=l(t[0],[0,mn]),r=l(t[1],[0,gn]);_[1]=1-(mn-e)/mn,_[2]=(gn-r)/gn,j()}(n),dn&&function(n){_[0]=(kn-l(S(n,Q)[1],[0,kn]))/kn,j()}(n),pn&&function(n){_[3]=(Cn-l(S(n,V)[1],[0,Cn]))/Cn,j()}(n),L=B(_),(vn||dn||pn)&&(f(ln||an||sn?"start":"drag",L),f("change",L)),ln=an=sn=0}function j(){!function(n){i(n[1])&&M(en,"right",mn-yn/2-mn*+n[1]),i(n[2])&&M(en,"top",gn-bn/2-gn*+n[2]),i(n[0])&&M(un,"top",kn-En/2-kn*+n[0]),i(n[3])&&M(fn,"top",Cn-wn/2-Cn*+n[3])}(_);let n=B(_),t=B([_[0],1,1]);M(Z,"background-color","rgb("+t[0]+","+t[1]+","+t[2]+")"),M(on,"background-image","linear-gradient(rgb("+n[0]+","+n[1]+","+n[2]+"),transparent)")}function T(t){L=B(_);let e=t.target,r=n===z(e,n),u=q===z(e,q);c.current=null,r||u?u&&(vn||dn||pn)&&f("stop",L):a.blur?f("blur",L):vn||dn||pn||E(q)&&y(),vn=dn=pn=0}_=D(L=d()),o||(A(s||r.parent||b,q),c.visible=!0),p=n=>(e(0,n),f("enter",L),c),y=()=>{var n;return E(q)&&(E(n=q),n.remove(),c.current=null,c.visible=!1),X(F,K,w),X(F,Q,k),X(F,V,v),X(I,h,O),X(U,h,T),X(R,g,x),f("exit",L)},C=t=>{let e=Y(m),r=Y(n),o=Y(g),c=o[3]-m.clientHeight,a=o[2]-e[2],s=Y(q),v=s[3],d=s[2],p=r[0]+o[0],h=r[1]+o[1]+r[3];if(u(t))i(t[0])&&(p=t[0]),i(t[1])&&(h=t[1]);else{let n=o[0],t=o[1],e=o[0]+o[2]-d-a,r=o[1]+o[3]-v-c;p=l(p,[n,e])>>0,h=l(h,[t,r])>>0}return M(q,"left",p),M(q,"top",h),f("fit",L)},x=()=>C();let H=Y(K),G=Y(en),nn=Y(Q),tn=Y(un),rn=Y(V),cn=Y(fn),gn=H[3],bn=G[3],mn=H[2],yn=G[2],kn=nn[3],En=tn[3],Cn=rn[3],wn=cn[3];o?(N(F,n,hn),$((()=>{f("change",L)}),1)):(N(F,K,w),N(F,Q,k),N(F,V,v),N(I,h,O),N(U,h,T),N(R,g,x),C()),j(),c.color=(n,e,u,i)=>W[t(W[r.color])?r.color:J]([n,e,u,i]),c.current=null,c.enter=p,c.exit=y,c.fit=C,c.get=()=>d(),c.pop=()=>n.CP?(delete n.CP,X(F,n,hn),y(),f("pop",L)):c,c.set=(n,t,e,r)=>(_=D([n,t,e,r]),j(),c),c.self=q,c.value=(n,t,e,r)=>(c.set(n,t,e,r),f("change",[n,t,e,r]))}(1),c}return W.HEX=n=>{if(o(n)){let t=(n=n.trim()).length;if(4!==t&&7!==t||"#"!==n[0]){if((5===t||9===t)&&"#"===n[0]&&/^#([a-f\d]{3,4}){1,2}$/i.test(n))return 5===t?[a(n[1]+n[1],16),a(n[2]+n[2],16),a(n[3]+n[3],16),a(n[4]+n[4],16)/255]:[a(n[1]+n[2],16),a(n[3]+n[4],16),a(n[5]+n[6],16),a(n[7]+n[8],16)/255]}else if(/^#([a-f\d]{3}){1,2}$/i.test(n))return 4===t?[a(n[1]+n[1],16),a(n[2]+n[2],16),a(n[3]+n[3],16),1]:[a(n[1]+n[2],16),a(n[3]+n[4],16),a(n[5]+n[6],16),1];return[0,0,0,1]}return"#"+("000000"+d(+n[2]|+n[1]<<8|+n[0]<<16,16)).slice(-6)+(i(n[3])&&n[3]<1?d(v(255*n[3])+65536,16).substr(-2):"")},W.instances={},W.state={class:"color-picker",color:J,parent:null},W.version="2.2.4",W}));