/* MFColorPicker (@https://methodfish.com/Projects/MFColorPicker) Version: beta Licence: MIT */ 'use strict';const _MFC_COMPLEMENTARY="COMP",_MFC_ANALOGOUS="ANALO",_MFC_TRIADIC="TRIADIC",_MFC_SPLITCOMP="SPLIT"; function MFColorPicker(){function P(a,b,c,d){m=a;r=a.value;document.querySelectorAll(".mfcolorpicker-container").forEach(function(k){k.remove()});void 0==d&&(d=I);let f=document.querySelector(".container");f||(f=document.createElement("div"),f.className="mfcolorpicker-container removeOnEscape removeOnResize");f.style.left=b.getBoundingClientRect().left+"px";f.style.top=b.getBoundingClientRect().bottom+window.pageYOffset+"px";f.style.zIndex=Q()+1;document.body.appendChild(f);f.appendChild(R(d));a= document.createElement("div");a.style.padding="20px";a.style.borderTop="solid 1px #dcd8dc";f.appendChild(a);b=x(m.value);d=document.createElement("div");d.style.padding="0";a.appendChild(d);var e=document.createElement("input");e.className="mfcolorpicker-darkness";e.title="Color darkness";e.type="range";e.setAttribute("min",-255);e.setAttribute("max",255);e.setAttribute("step",1);e.value=0;d.appendChild(e);e.addEventListener("input",function(k){var B=k.target.getAttribute("data-orig");k=k.target.value; let E=B.substring(B.indexOf("(")+1).split(",");k=parseInt(k);B=F(parseInt(E[0])+k,0,255);let S=F(parseInt(E[1])+k,0,255);k=F(parseInt(E[2])+k,0,255);k=`rgb(${B}, ${S}, ${k})`.replace(")",`,${t.value})`).replace(/rgb\(/,"rgba(");n(k);n(k);q(m,k)});e.style.background="linear-gradient(to right, black, "+b+", white)";e.setAttribute("data-orig",b);d=document.createElement("div");d.className="";d.style.padding="0";a.appendChild(d);e=document.createElement("div");e.className="mfcolorpicker-checkerboard mfcolorpicker-checkerboard-wrapper"; e.style.padding="0";e.title="Color transparency";d.appendChild(e);let g=document.createElement("div");g.className="mfcolorpicker-checkerboard-underlay";e.appendChild(g);let h=document.createElement("input");h.className="mfcolorpicker-transparency";h.type="range";h.setAttribute("min",0);h.setAttribute("max",1);h.setAttribute("step",.01);e.appendChild(h);t=h;h.addEventListener("input",function(){document.querySelector(".mfcolorpicker-picker").style.opacity=h.value;l.innerHTML=100*parseFloat(h.value)+ "%";var k=p.getAttribute("data-selected");k.startsWith("#")&&(k=G(k));k=k.substring(k.indexOf("(")+1).split(",");k=`rgba(${k[0].trim()}, ${k[1].trim()}, ${k[2].trim()}, ${h.value})`;p.style.backgroundColor=k;n(k);n(k);q(m,k)});let l=document.createElement("span");l.className="mfcolorpicker-transparencyvalue";l.innerHTML="100%";d.appendChild(l);window.EyeDropper?(d=document.createElement("i"),d.className="material-icons mfcolorpicker-eyedropper",d.innerHTML="colorize",a.appendChild(d),d.addEventListener("click", async()=>{(new EyeDropper).open().then(k=>{k=x(k.sRGBHex+"ff");n(k);q(m,k)}).catch(k=>{console.error(k)})})):console.warn("No EyeDropper available on this browser");d=document.createElement("div");d.className="mfcolorpicker-presets-pair mfcolorpicker-selected-color";a.appendChild(d);e=document.createElement("div");e.className="mfcolorpicker-selected-bg mfcolorpicker-checkerboard";d.appendChild(e);p=document.createElement("div");p.className="mfcolorpicker-selected";d.appendChild(p);let u=document.createElement("span"); u.className="mfcolorpicker-selectedvalue";a.appendChild(u);u.addEventListener("click",function(){"hex"==u.getAttribute("data-type")?u.setAttribute("data-type","rgb"):u.setAttribute("data-type","hex");C(p.getAttribute("data-selected"))});y=u;a.appendChild(T());(c=U(c))&&a.appendChild(c);n(b);c=document.createElement("div");c.className="mfcolorpicker-buttons";a.appendChild(c);a=document.createElement("button");a.className="mfcolorpicker-button";a.innerHTML="OK";c.appendChild(a);a.addEventListener("click", function(){let k=p.getAttribute("data-selected");q(m,k);J(m,"change");f.remove()});a=document.createElement("button");a.className="mfcolorpicker-button";a.innerHTML="Cancel";c.appendChild(a);a.addEventListener("click",function(){n(r);q(m,r);f.remove()});V(f);D=!0;document.querySelector(".mfcolorpicker-comps-container > SELECT").addEventListener("change",z);document.querySelector(".mfcolorpicker-comps-container > SELECT").addEventListener("input",z);setTimeout(function(){z()},1)}function F(a,b,c){return Math.min(Math.max(a, b),c)}function K(a){return!isNaN(parseFloat(a))&&isFinite(a)}function Q(){let a=document.querySelectorAll("div"),b=0;for(var c=0;c<a.length;c++){var d=L(a[c],"z-index");"auto"!=d&&K(d)&&parseInt(d)>b&&(b=parseInt(d))}a=document.getElementsByTagName("canvas");for(c=0;c<a.length;c++)d=L(a[c],"z-index"),K(d)&&parseInt(d)>b&&(b=parseInt(d));return parseInt(b)}function L(a,b){return a?window.getComputedStyle(a).getPropertyValue(b):null}function M(a){return a.startsWith("#")?a:N(a)}function x(a){return a.startsWith("rgba")? a:a.startsWith("rgb")?a.replace(")",", 1)"):G(a)}function T(){let a=document.createElement("span");a.className="mfcolorpicker-comps-container";var b=document.createElement("SELECT");b.innerHTML='<option value="COMP">Complementary</option><option value="ANALO">Analogous</option><option value="TRIADIC">Triadic</option><option value="SPLIT" title="Split-complementary">Split-comp</option>';a.appendChild(b);b=document.createElement("DIV");b.className="mfcolorpicker-colorblock";a.appendChild(b);return a} function z(){if(document.querySelector(".mfcolorpicker-comps-container > SELECT")){var a=document.querySelector(".mfcolorpicker-comps-container > SELECT").value,b=document.querySelector(".mfcolorpicker-selected").style.backgroundColor,c=document.querySelector(".mfcolorpicker-comps-container > .mfcolorpicker-colorblock"),d=document.querySelectorAll(".mfcolorpicker-colorblock .sample");d&&d.forEach(function(f){f.remove()});d=document.createElement("div");d.className="sample";d.style.backgroundColor= b;d.title=b;c.appendChild(d);a=W(b,a);for(d=0;d<a.length;d++){b=a[d];let f=document.createElement("div");f.className="sample";f.style.backgroundColor=b;f.title=b;c.appendChild(f);f.addEventListener("click",function(e){e.preventDefault();e.stopPropagation();e=e.target.style.backgroundColor;e.startsWith("rgb(")&&(e="rgba("+e.substring(4,e.length-1)+", 1)");n(e);let g=document.querySelector(".mfcolorpicker-darkness");g.style.background="linear-gradient(to right, black, "+e+", white)";g.setAttribute("data-orig", e);g.value=0})}}}function W(a,b){const c=[];let [d,f,e,g]=a.match(/(\d+(\.\d+)?)/g).map(Number);void 0==g&&(g=1);switch(b){case _MFC_COMPLEMENTARY:c.push(`rgba(${255-d}, ${255-f}, ${255-e}, ${g})`);break;case _MFC_ANALOGOUS:a=v(d,f,e,-30);b=v(d,f,e,30);c.push(`rgba(${a[0]}, ${a[1]}, ${a[2]}, ${g})`);c.push(`rgba(${b[0]}, ${b[1]}, ${b[2]}, ${g})`);break;case _MFC_TRIADIC:a=v(d,f,e,120);b=v(d,f,e,240);c.push(`rgba(${a[0]}, ${a[1]}, ${a[2]}, ${g})`);c.push(`rgba(${b[0]}, ${b[1]}, ${b[2]}, ${g})`);break; case _MFC_SPLITCOMP:a=v(d,f,e,72);b=v(d,f,e,216);c.push(`rgba(${a[0]}, ${a[1]}, ${a[2]}, ${g})`);c.push(`rgba(${b[0]}, ${b[1]}, ${b[2]}, ${g})`);break;default:console.error("Invalid type code give "+b)}return c}function v(a,b,c,d){a/=255;b/=255;c/=255;let f=Math.max(a,b,c);var e=Math.min(a,b,c);let g=(f+e)/2;if(f==e)var h=e=0;else{let l=f-e;e=.5<g?l/(2-f-e):l/(f+e);switch(f){case a:h=(b-c)/l+(b<c?6:0);break;case b:h=(c-a)/l+2;break;case c:h=(a-b)/l+4}h/=6}h=[h,e,g];h[0]+=d/360;return X(h[0],h[1], h[2])}function X(a,b,c){if(0==b)c=b=a=c;else{function d(g,h,l){0>l&&(l+=1);1<l&&--l;return l<1/6?g+6*(h-g)*l:.5>l?h:l<2/3?g+(h-g)*(2/3-l)*6:g}let f=.5>c?c*(1+b):c+b-c*b,e=2*c-f;c=d(e,f,a+1/3);b=d(e,f,a);a=d(e,f,a-1/3)}return[Math.round(255*c),Math.round(255*b),Math.round(255*a)]}function U(a){if(!document.querySelector("#"+a))return null;var b=document.createElement("div");b.className="mfcolorpicker-presets-container";document.querySelector("#"+a).value.replace(/#/g,"").split(",").forEach(function(c){let d= document.createElement("div");d.className="mfcolorpicker-presets-pair preset";b.appendChild(d);var f=document.createElement("div");f.className="mfcolorpicker-preset mfcolorpicker-checkerboard";d.appendChild(f);f=document.createElement("div");f.className="mfcolorpicker-preset";let e=x("#"+c);f.style.backgroundColor=e;d.appendChild(f);f.addEventListener("click",function(){var g=x(c);n(g);q(m,g);g=g.replace(/rgba\(/,"").split(",");g=`rgb(${parseInt(g[0])}, ${parseInt(g[1])}, ${parseInt(g[2])})`;let h= document.querySelector(".mfcolorpicker-darkness");h.style.background="linear-gradient(to right, black, "+g+", white)";h.setAttribute("data-orig",g);h.value=0})});return b}function J(a,b){a=[a];for(let c=0;c<a.length;c++)if(void 0==b&&(b="change"),"createEvent"in document){let d=document.createEvent("HTMLEvents");d.initEvent(b,!0,!0);a[c]&&a[c].dispatchEvent(d)}else a[c].fireEvent("on"+b)}function R(a){let b=document.querySelector(".mfcolorpicker-picker");b||(b=document.createElement("div"),b.className= "mfcolorpicker-picker");b.style.gridTemplateColumns=`repeat(${a}, 1fr)`;b.style.gridTemplateRows=`repeat(${a}, 1fr)`;for(let c=0;c<a;c++)for(let d=0;d<a;d++){const f=`hsla(${d/(a-1)*360}, ${100}%, ${c/(a-1)*100}%, ${1})`,e=document.createElement("div");e.classList.add("mfcolorpicker-color-box");e.style.backgroundColor=f;b.appendChild(e);e.addEventListener("mouseover",function(g){g.preventDefault();g.stopPropagation();g=g.target.style.backgroundColor;g.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/); let h=t.value;g=g.replace("rgb","rgba").replace(")",`, ${h})`);p.style.backgroundColor=g;C(g);q(m,g)});e.addEventListener("click",function(g){g.preventDefault();g.stopPropagation();document.querySelector(".mfcolorpicker-darkness").value=0;var h=t.value;g=g.target.style.backgroundColor.replace("rgb","rgba").replace(")",`, ${h})`);n(g);h=document.querySelector(".mfcolorpicker-darkness");h.style.background="linear-gradient(to right, black, "+g+", white)";h.setAttribute("data-orig",g)})}b.addEventListener("mouseout", function(c){if(c=p.getAttribute("data-selected"))p.style.backgroundColor=c,C(c),n(c),q(m,c)});return b}function G(a){if(a.startsWith("rgb"))return x(a);a=a.replace(/^#/,"");6==a.length&&(a+="FF");let b=parseInt(a.substring(0,2),16),c=parseInt(a.substring(2,4),16),d=parseInt(a.substring(4,6),16);a=parseInt(parseInt(a.substring(6,8),16)/255*100)/100;return`rgba(${b}, ${c}, ${d}, ${a})`}function n(a){if(p){p.style.backgroundColor=a;p.setAttribute("data-selected",a);var b=a.split(",");b[3]="0)";var c= b.join(",");b[3]="1)";b=b.join(",");t.style.background=`linear-gradient(to right, ${c}, ${b})`;C(a);c=t;a=(a=a.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/))?100*parseFloat(a[4]):null;c.value=a/100;if(a=document.querySelector(".mfcolorpicker-picker"))a.style.opacity=t.value,document.querySelector(".mfcolorpicker-transparencyvalue").innerHTML=parseInt(100*parseFloat(t.value))+"%"}}function C(a){"hex"==y.getAttribute("data-type")?y.innerHTML=N(a):y.innerHTML=a;if(-1<y.innerHTML.indexOf("NaN"))debugger; z()}function N(a){if(!a)debugger;if(a.startsWith("#"))return a;if(a){var b=a.substring(5,a.length-1).split(",");a=parseInt(b[0]);let c=parseInt(b[1]),d=parseInt(b[2]),f=1;2<b.length&&(f=parseFloat(b[3]));b=Math.round(255*f).toString(16).padStart(2,"0");return"#"+H(a)+H(c)+H(d)+b}return""}function H(a){a=a.toString(16);return 1==a.length?"0"+a:a}function Y(a,b){a.style.display="none";a.addEventListener("change",function(){var e=document.querySelector("#"+w);if(e){var g=e.value,h=g.split(","),l=a.value.replace(/#/, "");h.includes(l)||""==a.value||(e.value=l+","+g,O())}});b&&a.setAttribute("list",b);var c=document.createElement("div");c.className="mfcolorpicker-presets-pair mfcolorpicker-current-color "+a.className;c&&(c.className=c.className.replace(RegExp("\\bhidden\\b","g"),"").trim());a.parentNode.insertBefore(c,a.nextElementSibling);var d=document.createElement("div");d.className="mfcolorpicker-color-button mfcolorpicker-checkerboard";c.appendChild(d);var f=document.createElement("div");f.className="mfcolorpicker-color-button"; f.innerHTML=" ";f.style.backgroundColor=a.value;c.appendChild(f);f.addEventListener("click",function(){P(a,f,b)})}function V(a,b){let c,d=0,f=window.scrollY||window.pageYOffset;void 0===b&&(b=window);b===window?c=window.innerWidth-5:(d=b.getBoundingClientRect().left,c=b.getBoundingClientRect().width-5);b=b===window?window.innerHeight-5:b.getBoundingClientRect().height-5;const e=a.getBoundingClientRect();let g=e.top+window.pageYOffset+5,h=e.left+window.pageXOffset;e.right-d>c&&(h-=e.right-d-c+ 10);e.bottom>b&&(g-=e.bottom-b+10);0>e.top&&(g-=e.top-f+10);a.style.top=g+"px";a.style.left=h+"px"}function O(){var a=document.querySelector("#"+w+"list");a||(a=document.createElement("datalist"),a.id=w+"list",document.body.appendChild(a));var b;a:{if(w&&(b=document.querySelector("#"+w))){b=b.value;break a}b="ffffff,000000,ababab,d7d7d7,d7d7d7,e6dee0,c00000,ea0000,ff0505,ff5001,ed7d31,375623,548235,00b050,a9d18e,e2f0d9"}b=b.split(",");a.innerHTML="";for(var c=0;c<b.length;c++)a.innerHTML+="<option>#"+ b[c].toUpperCase()+"</option>"}function Z(a,b){if("wysiwyg"==a.id)debugger;(new RegExp("\\b"+b+"\\b","g")).test(a.className)||(a.className+=" "+b)}function A(a,b){return(new RegExp("\\b"+b+"\\b")).test(a.classList)}function q(a,b){a&&(a.type="text",b=M(b),a.value=b,a.nextElementSibling.children[1].style.backgroundColor=G(b),J(m,"input"),z())}function aa(a,b){for(;a&&!A(a,b);)a=a.parentElement;return a}var I=150,w,p,y,t,r,m,D=!1;return{colToHex(a){return M(a)},setSelectedTarget(a,b){q(a,b)},init(a, b){void 0!=b&&(I=b);w=a;O();b=document.querySelectorAll("input.mfcolorpicker");for(var c=0;c<b.length;c++)A(b[c],"mfcolorpicker-ready")||(b[c].className+=" mfcolorpicker-ready",b[c].value||(b[c].value="#ffffff"),Y(b[c],a));A(document.body,"mfcolorpicker-events")||(Z(document.body,"mfcolorpicker-events"),window.addEventListener("click",function(d){d.target&&(d.target.className&&A(d.target,"removeOnEscape")||d.target.className&&A(d.target,"mfcolorpicker-color-button")||null!=aa(d.target,"mfcolorpicker-container"))|| !D||(n(r),q(m,r),document.querySelectorAll(".removeOnEscape").forEach(function(f){f.close?f.close:f.remove()}))}),window.addEventListener("resize",d=>{n(r);m&&q(m,r);document.querySelectorAll(".removeOnResize").forEach(function(f){f.remove();D=!1})}),window.addEventListener("keydown",d=>{"Escape"===d.key&&(window.EyeDropper&&(new EyeDropper).close(),n(r),q(m,r),document.querySelectorAll(".removeOnEscape").forEach(function(f){f.close?f.close:f.remove()}),D=!1)}))}}};