From dd8333173c254d60c4d64ea8a49ec0e7de363d8f Mon Sep 17 00:00:00 2001 From: Florent Masson Date: Wed, 26 Jan 2022 11:34:22 +0100 Subject: [PATCH 1/5] Allow library to be inserted in HEAD tag and lazily loaded https://github.com/R-TEK/colr_pickr/issues/5 --- gulpfile.js | 5 +++++ package.json | 2 ++ src/sample.html | 4 +++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/gulpfile.js b/gulpfile.js index 7077238..d4a056a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,6 +9,7 @@ const concatJS = require('gulp-concat'); const uglifyJS = require('gulp-uglify-es').default; const concatCSS = require('gulp-concat-css'); const uglifyCSS = require('gulp-uglifycss'); +const inject = require('gulp-inject-string'); const sass = require('gulp-sass'); sass.compiler = require('node-sass'); @@ -20,6 +21,8 @@ sass.compiler = require('node-sass'); gulp.task('devScripts', async function () { gulp.src(['./src/js/setup.js', './src/js/*.js']) .pipe(concatJS('colr_pickr.js')) + .pipe(inject.prepend('document.addEventListener("DOMContentLoaded", function () {')) + .pipe(inject.append('window.ColorPicker = ColorPicker;window.colorPickerComp = colorPickerComp;});')) .pipe(gulp.dest('./build')); }); @@ -44,6 +47,8 @@ gulp.task('productionScripts', async function () { gulp.src(['./src/js/setup.js', './src/js/*.js']) .pipe(concatJS('colr_pickr.min.js')) .pipe(uglifyJS()) + .pipe(inject.prepend('document.addEventListener("DOMContentLoaded", function () {')) + .pipe(inject.append('window.ColorPicker = ColorPicker;window.colorPickerComp = colorPickerComp;});')) .pipe(gulp.dest('./build')); }); diff --git a/package.json b/package.json index b5afb24..4074fda 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "browser": "build/colr_pickr.min.js", "license": "MIT", "scripts": { + "devBuild": "gulp devBuild", "build": "gulp productionBuild", "doc": "jsdoc -c jsdoc.json", "test": "echo \"Error: no test specified\" && exit 1" @@ -49,6 +50,7 @@ "gulp": "^4.0.2", "gulp-concat": "^2.6.1", "gulp-concat-css": "^3.1.0", + "gulp-inject-string": "^1.1.2", "gulp-markdown": "^5.0.1", "gulp-rimraf": "^1.0.0", "gulp-sass": "^4.1.0", diff --git a/src/sample.html b/src/sample.html index 02def23..e45c728 100644 --- a/src/sample.html +++ b/src/sample.html @@ -7,6 +7,7 @@ + @@ -205,8 +206,8 @@

Color Selector

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Pellentesque in ipsum id orci porta dapibus.

- From 0dc2ac1718b4607d5f11e4e5fb9e908765d85336 Mon Sep 17 00:00:00 2001 From: Florent Masson Date: Wed, 26 Jan 2022 11:36:15 +0100 Subject: [PATCH 2/5] add build file --- build/colr_pickr.min.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/colr_pickr.min.js b/build/colr_pickr.min.js index 15b7c66..e80e275 100644 --- a/build/colr_pickr.min.js +++ b/build/colr_pickr.min.js @@ -1,4 +1,4 @@ -/*! +document.addEventListener("DOMContentLoaded", function () {/*! * Colr Pickr * * R-TEK @@ -7,4 +7,4 @@ * * MIT License */ -let colorPickerComp=new Object;function ColorPicker(t,e){this.element=t,t.colorPickerObj=this,t.setAttribute("data-color",e),t.style.background=e,t.addEventListener("click",(function(){colorPickerComp.instance=this.colorPickerObj,colorPickerComp.pickerOpen=!0;const t=document.getElementById("color_picker");t.style.display="block";let e=this.getBoundingClientRect().top,o=this.getBoundingClientRect().left;if(e=e+t.offsetHeight>window.innerHeight?e-t.offsetHeight-2:e+this.offsetHeight+2,o+t.offsetWidth>window.innerWidth-20){o=o-(o+t.offsetWidth-window.innerWidth)-20}t.style.top=e+"px",t.style.left=o+"px",colorPickerComp.updateColorDisplays(this.getAttribute("data-color")),document.getElementById("color_text_values").focus()}))}!function(){colorPickerComp.pickerOpen=!1,colorPickerComp.instance=null,colorPickerComp.boxStatus=!1,colorPickerComp.boxStatusTouch=!1,colorPickerComp.sliderStatus=!1,colorPickerComp.sliderStatusTouch=!1,colorPickerComp.opacityStatus=!1,colorPickerComp.opacityStatusTouch=!1,colorPickerComp.colorTypeStatus="HEXA",colorPickerComp.hue=0,colorPickerComp.saturation=100,colorPickerComp.lightness=50,colorPickerComp.alpha=1,colorPickerComp.contextMenuElem=null,colorPickerComp.doubleTapTime=0,colorPickerComp.LSCustomColors={0:[]};const t=document.createElement("ASIDE");if(t.id="color_picker",t.innerHTML='\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t }\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t',document.getElementsByTagName("BODY")[0].appendChild(t),null===localStorage.getItem("custom_colors"))localStorage.setItem("custom_colors",'{"0": []}');else{colorPickerComp.LSCustomColors=JSON.parse(localStorage.getItem("custom_colors"));for(let t=colorPickerComp.LSCustomColors[0].length-1;t>=0;t--){let e=document.createElement("BUTTON");e.className="custom_colors_preview",e.style.background=colorPickerComp.LSCustomColors[0][t],e.setAttribute("data-custom-color",colorPickerComp.LSCustomColors[0][t]),document.getElementById("custom_colors_box").appendChild(e),19==t&&(document.getElementById("custom_colors_add").style.display="none")}28==colorPickerComp.LSCustomColors[0].length&&(document.getElementById("custom_colors_add").style.display="none")}}(),colorPickerComp.keyShortcuts=function(t){for(let t in document.getElementsByTagName("INPUT"))if(!isNaN(t)&&document.getElementsByTagName("INPUT")[t]===document.activeElement)return;for(let t in document.getElementsByTagName("TEXTAREA"))if(!isNaN(t)&&document.getElementsByTagName("TEXTAREA")[t]===document.activeElement)return;switch(t.keyCode){case 46:"custom_colors_preview"==document.activeElement.className&&colorPickerComp.clearSingleCustomColor(document.activeElement);break;case 27:colorPickerComp.pickerOpen&&closePicker();break;case 9:let t=document.getElementsByClassName("remove_outline");for(;t.length>0;)t[0].classList.add("add_outline"),t[0].classList.remove("remove_outline"),t=document.getElementsByClassName("remove_outline")}},document.addEventListener("keydown",colorPickerComp.keyShortcuts.bind(event)),document.addEventListener("mousedown",(function(){let t=document.getElementsByClassName("add_outline");for(;t.length>0;)t[0].classList.add("remove_outline"),t[0].classList.remove("add_outline"),t=document.getElementsByClassName("add_outline")})),document.addEventListener("mousedown",(function(){"color_context_menu"!=event.target.id&&(document.getElementById("color_context_menu").style.display="none")}));let closePicker=function(){colorPickerComp.pickerOpen=!1,document.getElementById("color_picker").style.display="none","undefined"!=colorPickerComp.instance.element.getAttribute("data-color")&&updatePicker()},updatePicker=function(){colorPickerComp.colorChange({h:colorPickerComp.hue,s:colorPickerComp.saturation,l:colorPickerComp.lightness,a:colorPickerComp.alpha})};document.addEventListener("mousedown",(function(){let t=event.target;if(colorPickerComp.pickerOpen)for(;t!=document.getElementById("color_picker");){if("HTML"==t.tagName){closePicker();break}t=t.parentNode}})),document.addEventListener("scroll",(function(){colorPickerComp.pickerOpen&&closePicker()})),window.addEventListener("resize",(function(){colorPickerComp.pickerOpen&&closePicker()})),colorPickerComp.colorChange=function(t,e){"string"==typeof t&&(t=colorPickerComp.hexAToRGBA(t,!0));const o=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a),l=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a,!0),c=new CustomEvent("colorChange",{detail:{color:{hsl:`hsla(${t.h}, ${t.s}%, ${t.l}%)`,rgb:`rgba(${o.r}, ${o.g}, ${o.b})`,hex:l,hsla:`hsla(${t.h}, ${t.s}%, ${t.l}%, ${t.a})`,rgba:`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,hexa:l}}}),r=void 0===e?colorPickerComp.instance.element:e;r.setAttribute("data-color",l),r.style.background=l,r.dispatchEvent(c)},colorPickerComp.HSLAToRGBA=function(t,e,o,l,c){e/=100,o/=100;let r=(1-Math.abs(2*o-1))*e,n=r*(1-Math.abs(t/60%2-1)),i=o-r/2,s=0,a=0,u=0;return 0<=t&&t<60?(s=r,a=n,u=0):60<=t&&t<120?(s=n,a=r,u=0):120<=t&&t<180?(s=0,a=r,u=n):180<=t&&t<240?(s=0,a=n,u=r):240<=t&&t<300?(s=n,a=0,u=r):300<=t&&t<360&&(s=r,a=0,u=n),s=Math.round(255*(s+i)),a=Math.round(255*(a+i)),u=Math.round(255*(u+i)),!0===c?colorPickerComp.RGBAToHexA(s,a,u,l):{r:s,g:a,b:u,a:l}},colorPickerComp.RGBAToHSLA=function(t,e,o,l){t/=255,e/=255,o/=255,l=null==l?1:l;let c=Math.min(t,e,o),r=Math.max(t,e,o),n=r-c,i=0,s=0,a=0;return i=0==n?0:r==t?(e-o)/n%6:r==e?(o-t)/n+2:(t-e)/n+4,i=Math.round(60*i),i<0&&(i+=360),a=(r+c)/2,s=0==n?0:n/(1-Math.abs(2*a-1)),s=+(100*s).toFixed(1),a=+(100*a).toFixed(1),{h:i,s:s,l:a,a:l}},colorPickerComp.RGBAToHexA=function(t,e,o,l){return t=t.toString(16),e=e.toString(16),o=o.toString(16),l=Math.round(255*l).toString(16),1==t.length&&(t="0"+t),1==e.length&&(e="0"+e),1==o.length&&(o="0"+o),1==l.length&&(l="0"+l),"ff"==l?"#"+t+e+o:"#"+t+e+o+l},colorPickerComp.hexAToRGBA=function(t,e){7==t.length?t+="ff":4==t.length&&(t+=t.substring(1,4)+"ff");let o=0,l=0,c=0,r=1;return 5==t.length?(o="0x"+t[1]+t[1],l="0x"+t[2]+t[2],c="0x"+t[3]+t[3],r="0x"+t[4]+t[4]):9==t.length&&(o="0x"+t[1]+t[2],l="0x"+t[3]+t[4],c="0x"+t[5]+t[6],r="0x"+t[7]+t[8]),r=+(r/255).toFixed(3),!0===e?colorPickerComp.RGBAToHSLA(+o,+l,+c,r):"rgba("+ +o+","+ +l+","+ +c+","+r+")"},colorPickerComp.switchColorType=function(){if("HEXA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="RGBA",document.getElementById("hexa").style.display="none",document.getElementById("rgba").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else if("RGBA"==colorPickerComp.colorTypeStatus)colorPickerComp.colorTypeStatus="HSLA",document.getElementById("rgba").style.display="none",document.getElementById("hsla").style.display="block",document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha;else if("HSLA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="HEXA",document.getElementById("hsla").style.display="none",document.getElementById("hexa").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}},document.getElementById("switch_color_type").addEventListener("click",(function(){colorPickerComp.switchColorType()})),document.getElementById("hex_input").addEventListener("blur",(function(){const t=this.value;t.match(/^#[0-9a-f]{3}([0-9a-f]{3})?([0-9a-f]{2})?$/)&&(colorPickerComp.updateColorDisplays(t),updatePicker())})),document.querySelectorAll(".rgba_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".rgba_input");if(t[0].value>255)throw"Value must be below 256";if(t[1].value>255)throw"Value must be below 256";if(t[2].value>255)throw"Value must be below 256";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`rgba(${t[0].value}, ${t[1].value}, ${t[2].value}, ${t[3].value})`),updatePicker()}))}),document.querySelectorAll(".hsla_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".hsla_input");if(t[0].value>359)throw"Value must be below 360";if(t[1].value>100)throw"Value must be below 100";if(t[2].value>100)throw"Value must be below 100";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`hsla(${t[0].value}, ${t[1].value}%, ${t[2].value}%, ${t[3].value})`),updatePicker()}))}),colorPickerComp.getCustomColors=function(){return colorPickerComp.LSCustomColors()},document.getElementById("custom_colors_box").addEventListener("click",(function(t){if("custom_colors_preview"==t.target.className){const e=t.target.getAttribute("data-custom-color");colorPickerComp.updateColorDisplays(e),updatePicker()}})),colorPickerComp.addCustomColor=function(){19==colorPickerComp.LSCustomColors[0].length&&(document.getElementById("custom_colors_add").style.display="none");const t=`hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`;let e=document.createElement("BUTTON");e.className="custom_colors_preview",e.style.background=t,e.setAttribute("data-custom-color",t),document.getElementById("custom_colors_box").appendChild(e),colorPickerComp.LSCustomColors[0].unshift(t),localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors))},document.getElementById("custom_colors_add").addEventListener("click",(function(){colorPickerComp.addCustomColor()})),document.getElementById("custom_colors_box").addEventListener("contextmenu",(function(t){if("custom_colors_preview"==t.target.className){t.preventDefault();const e=document.getElementById("color_context_menu");e.style.display="block",e.style.top=t.target.getBoundingClientRect().top+25+"px",e.style.left=t.target.getBoundingClientRect().left+"px",colorPickerComp.contextMenuElem=t.target}})),colorPickerComp.clearSingleCustomColor=function(t){const e=void 0===t?colorPickerComp.contextMenuElem:t;document.getElementById("custom_colors_box").removeChild(e),colorPickerComp.LSCustomColors={0:[]};for(let t in document.getElementsByClassName("custom_colors_preview"))!0!==isNaN(t)&&colorPickerComp.LSCustomColors[0].push(document.getElementsByClassName("custom_colors_preview")[t].getAttribute("data-custom-color"));localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors)),document.getElementById("custom_colors_add").style.display="inline-block"},document.getElementById("color_clear_single").addEventListener("mousedown",(function(){colorPickerComp.clearSingleCustomColor()})),colorPickerComp.clearAllCustomColors=function(){for(colorPickerComp.LSCustomColors={0:[]};document.getElementsByClassName("custom_colors_preview").length>0;)document.getElementById("custom_colors_box").removeChild(document.getElementsByClassName("custom_colors_preview")[0]);localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors)),document.getElementById("custom_colors_add").style.display="inline-block"},document.getElementById("color_clear_all").addEventListener("mousedown",(function(){colorPickerComp.clearAllCustomColors()})),colorPickerComp.colorSliderHandler=function(t){const e=document.getElementById("color_slider"),o=document.getElementById("color_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;const c=(l-11)/244*100,r=Math.round(359-3.59*c);colorPickerComp.hue=r,document.getElementById("saturation").children[1].setAttribute("stop-color",`hsla(${r}, 100%, 50%, ${colorPickerComp.alpha})`),colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_slider").addEventListener("mousedown",(function(t){colorPickerComp.sliderStatus=!0,colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.sliderStatus&&colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.sliderStatus&&(colorPickerComp.sliderStatus=!1)})),document.getElementById("color_slider").addEventListener("touchstart",(function(t){colorPickerComp.sliderStatusTouch=!0,colorPickerComp.colorSliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.sliderStatusTouch&&(event.preventDefault(),colorPickerComp.colorSliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.sliderStatusTouch&&(colorPickerComp.sliderStatusTouch=!1)})),colorPickerComp.opacitySliderHandler=function(t){const e=document.getElementById("opacity_slider"),o=document.getElementById("opacity_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;let c=.01*((l-11)/244*100);c=Number(Math.round(c+"e2")+"e-2"),colorPickerComp.alpha=c,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("opacity_slider").addEventListener("mousedown",(function(t){colorPickerComp.opacityStatus=!0,colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.opacityStatus&&colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.opacityStatus&&(colorPickerComp.opacityStatus=!1)})),document.getElementById("opacity_slider").addEventListener("touchstart",(function(t){colorPickerComp.opacityStatusTouch=!0,colorPickerComp.opacitySliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.opacityStatusTouch&&(event.preventDefault(),colorPickerComp.opacitySliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.opacityStatusTouch&&(colorPickerComp.opacityStatusTouch=!1)})),colorPickerComp.colorBoxHandler=function(t,e,o){const l=document.getElementById("color_box"),c=document.getElementById("box_dragger");let r=t-l.getBoundingClientRect().left,n=!0===o?e-l.getBoundingClientRect().top:e-l.getBoundingClientRect().top-document.getElementsByTagName("HTML")[0].scrollTop;r<14&&(r=14),r>252&&(r=252),n<14&&(n=14),n>119&&(n=119),c.attributes.y.nodeValue=n,c.attributes.x.nodeValue=r;const i=Math.round((r-15)/238*100),s=100-i/2,a=100-(n-15)/105*100,u=Math.floor(a/100*s);colorPickerComp.saturation=i,colorPickerComp.lightness=u,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_box").addEventListener("mousedown",(function(t){colorPickerComp.boxStatus=!0,colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.boxStatus&&colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mouseup",(function(t){!0===colorPickerComp.boxStatus&&(colorPickerComp.boxStatus=!1)})),document.getElementById("color_box").addEventListener("touchstart",(function(t){colorPickerComp.boxStatusTouch=!0,colorPickerComp.colorBoxHandler(t.changedTouches[0].clientX,t.changedTouches[0].clientY,!0)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.boxStatusTouch&&(event.preventDefault(),colorPickerComp.colorBoxHandler(event.changedTouches[0].clientX,event.changedTouches[0].clientY,!0))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.boxStatusTouch&&(colorPickerComp.boxStatusTouch=!1)})),colorPickerComp.updateColorDisplays=function(t){if("undefined"==t)t={h:0,s:100,l:50,a:1};else if("#"==t.substring(0,1))t=colorPickerComp.hexAToRGBA(t,!0);else if("r"==t.substring(0,1)){const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t=colorPickerComp.RGBAToHSLA(e[0],e[1],e[2],e[3])}else{const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t={h:e[0],s:e[1],l:e[2],a:e[3]}}colorPickerComp.hue=t.h,colorPickerComp.saturation=t.s,colorPickerComp.lightness=t.l,colorPickerComp.alpha=t.a,colorPickerComp.updateColorValueInput(),document.getElementById("saturation").children[1].setAttribute("stop-color",`hsl(${t.h}, 100%, 50%)`);const e=document.getElementById("box_dragger");let o=2.38*t.s+14;let l=1.05*(100-t.l/(100-t.s/2)*100)+14;o<14&&(o=14),o>252&&(o=252),l<14&&(l=14),l>119&&(l=119),e.attributes.x.nodeValue=o,e.attributes.y.nodeValue=l;const c=document.getElementById("color_slider_dragger");let r=2.44*(100-t.h/359*100)+11;c.attributes.x.nodeValue=r;const n=document.getElementById("opacity_slider_dragger");let i=100*t.a*2.44+11;n.attributes.x.nodeValue=i},colorPickerComp.updateColorValueInput=function(){if("HEXA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}else if("RGBA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha}; \ No newline at end of file +let colorPickerComp=new Object;function ColorPicker(t,e){this.element=t,t.colorPickerObj=this,t.setAttribute("data-color",e),t.style.background=e,t.addEventListener("click",(function(){colorPickerComp.instance=this.colorPickerObj,colorPickerComp.pickerOpen=!0;const t=document.getElementById("color_picker");t.style.display="block";let e=this.getBoundingClientRect().top,o=this.getBoundingClientRect().left;if(e=e+t.offsetHeight>window.innerHeight?e-t.offsetHeight-2:e+this.offsetHeight+2,o+t.offsetWidth>window.innerWidth-20){o=o-(o+t.offsetWidth-window.innerWidth)-20}t.style.top=e+"px",t.style.left=o+"px",colorPickerComp.updateColorDisplays(this.getAttribute("data-color")),document.getElementById("color_text_values").focus()}))}!function(){colorPickerComp.pickerOpen=!1,colorPickerComp.instance=null,colorPickerComp.boxStatus=!1,colorPickerComp.boxStatusTouch=!1,colorPickerComp.sliderStatus=!1,colorPickerComp.sliderStatusTouch=!1,colorPickerComp.opacityStatus=!1,colorPickerComp.opacityStatusTouch=!1,colorPickerComp.colorTypeStatus="HEXA",colorPickerComp.hue=0,colorPickerComp.saturation=100,colorPickerComp.lightness=50,colorPickerComp.alpha=1,colorPickerComp.contextMenuElem=null,colorPickerComp.doubleTapTime=0,colorPickerComp.LSCustomColors={0:[]};const t=document.createElement("ASIDE");if(t.id="color_picker",t.innerHTML='\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t }\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t',document.getElementsByTagName("BODY")[0].appendChild(t),null===localStorage.getItem("custom_colors"))localStorage.setItem("custom_colors",'{"0": []}');else{colorPickerComp.LSCustomColors=JSON.parse(localStorage.getItem("custom_colors"));for(let t=colorPickerComp.LSCustomColors[0].length-1;t>=0;t--){let e=document.createElement("BUTTON");e.className="custom_colors_preview",e.style.background=colorPickerComp.LSCustomColors[0][t],e.setAttribute("data-custom-color",colorPickerComp.LSCustomColors[0][t]),document.getElementById("custom_colors_box").appendChild(e),19==t&&(document.getElementById("custom_colors_add").style.display="none")}28==colorPickerComp.LSCustomColors[0].length&&(document.getElementById("custom_colors_add").style.display="none")}}(),colorPickerComp.keyShortcuts=function(t){for(let t in document.getElementsByTagName("INPUT"))if(!isNaN(t)&&document.getElementsByTagName("INPUT")[t]===document.activeElement)return;for(let t in document.getElementsByTagName("TEXTAREA"))if(!isNaN(t)&&document.getElementsByTagName("TEXTAREA")[t]===document.activeElement)return;switch(t.keyCode){case 46:"custom_colors_preview"==document.activeElement.className&&colorPickerComp.clearSingleCustomColor(document.activeElement);break;case 27:colorPickerComp.pickerOpen&&closePicker();break;case 9:let t=document.getElementsByClassName("remove_outline");for(;t.length>0;)t[0].classList.add("add_outline"),t[0].classList.remove("remove_outline"),t=document.getElementsByClassName("remove_outline")}},document.addEventListener("keydown",colorPickerComp.keyShortcuts.bind(event)),document.addEventListener("mousedown",(function(){let t=document.getElementsByClassName("add_outline");for(;t.length>0;)t[0].classList.add("remove_outline"),t[0].classList.remove("add_outline"),t=document.getElementsByClassName("add_outline")})),document.addEventListener("mousedown",(function(){"color_context_menu"!=event.target.id&&(document.getElementById("color_context_menu").style.display="none")}));let closePicker=function(){colorPickerComp.pickerOpen=!1,document.getElementById("color_picker").style.display="none","undefined"!=colorPickerComp.instance.element.getAttribute("data-color")&&updatePicker()},updatePicker=function(){colorPickerComp.colorChange({h:colorPickerComp.hue,s:colorPickerComp.saturation,l:colorPickerComp.lightness,a:colorPickerComp.alpha})};document.addEventListener("mousedown",(function(){let t=event.target;if(colorPickerComp.pickerOpen)for(;t!=document.getElementById("color_picker");){if("HTML"==t.tagName){closePicker();break}t=t.parentNode}})),document.addEventListener("scroll",(function(){colorPickerComp.pickerOpen&&closePicker()})),window.addEventListener("resize",(function(){colorPickerComp.pickerOpen&&closePicker()})),colorPickerComp.colorChange=function(t,e){"string"==typeof t&&(t=colorPickerComp.hexAToRGBA(t,!0));const o=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a),l=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a,!0),c=new CustomEvent("colorChange",{detail:{color:{hsl:`hsla(${t.h}, ${t.s}%, ${t.l}%)`,rgb:`rgba(${o.r}, ${o.g}, ${o.b})`,hex:l,hsla:`hsla(${t.h}, ${t.s}%, ${t.l}%, ${t.a})`,rgba:`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,hexa:l}}}),r=void 0===e?colorPickerComp.instance.element:e;r.setAttribute("data-color",l),r.style.background=l,r.dispatchEvent(c)},colorPickerComp.HSLAToRGBA=function(t,e,o,l,c){e/=100,o/=100;let r=(1-Math.abs(2*o-1))*e,n=r*(1-Math.abs(t/60%2-1)),i=o-r/2,s=0,a=0,u=0;return 0<=t&&t<60?(s=r,a=n,u=0):60<=t&&t<120?(s=n,a=r,u=0):120<=t&&t<180?(s=0,a=r,u=n):180<=t&&t<240?(s=0,a=n,u=r):240<=t&&t<300?(s=n,a=0,u=r):300<=t&&t<360&&(s=r,a=0,u=n),s=Math.round(255*(s+i)),a=Math.round(255*(a+i)),u=Math.round(255*(u+i)),!0===c?colorPickerComp.RGBAToHexA(s,a,u,l):{r:s,g:a,b:u,a:l}},colorPickerComp.RGBAToHSLA=function(t,e,o,l){t/=255,e/=255,o/=255,l=null==l?1:l;let c=Math.min(t,e,o),r=Math.max(t,e,o),n=r-c,i=0,s=0,a=0;return i=0==n?0:r==t?(e-o)/n%6:r==e?(o-t)/n+2:(t-e)/n+4,i=Math.round(60*i),i<0&&(i+=360),a=(r+c)/2,s=0==n?0:n/(1-Math.abs(2*a-1)),s=+(100*s).toFixed(1),a=+(100*a).toFixed(1),{h:i,s:s,l:a,a:l}},colorPickerComp.RGBAToHexA=function(t,e,o,l){return t=t.toString(16),e=e.toString(16),o=o.toString(16),l=Math.round(255*l).toString(16),1==t.length&&(t="0"+t),1==e.length&&(e="0"+e),1==o.length&&(o="0"+o),1==l.length&&(l="0"+l),"ff"==l?"#"+t+e+o:"#"+t+e+o+l},colorPickerComp.hexAToRGBA=function(t,e){7==t.length?t+="ff":4==t.length&&(t+=t.substring(1,4)+"ff");let o=0,l=0,c=0,r=1;return 5==t.length?(o="0x"+t[1]+t[1],l="0x"+t[2]+t[2],c="0x"+t[3]+t[3],r="0x"+t[4]+t[4]):9==t.length&&(o="0x"+t[1]+t[2],l="0x"+t[3]+t[4],c="0x"+t[5]+t[6],r="0x"+t[7]+t[8]),r=+(r/255).toFixed(3),!0===e?colorPickerComp.RGBAToHSLA(+o,+l,+c,r):"rgba("+ +o+","+ +l+","+ +c+","+r+")"},colorPickerComp.switchColorType=function(){if("HEXA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="RGBA",document.getElementById("hexa").style.display="none",document.getElementById("rgba").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else if("RGBA"==colorPickerComp.colorTypeStatus)colorPickerComp.colorTypeStatus="HSLA",document.getElementById("rgba").style.display="none",document.getElementById("hsla").style.display="block",document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha;else if("HSLA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="HEXA",document.getElementById("hsla").style.display="none",document.getElementById("hexa").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}},document.getElementById("switch_color_type").addEventListener("click",(function(){colorPickerComp.switchColorType()})),document.getElementById("hex_input").addEventListener("blur",(function(){const t=this.value;t.match(/^#[0-9a-f]{3}([0-9a-f]{3})?([0-9a-f]{2})?$/)&&(colorPickerComp.updateColorDisplays(t),updatePicker())})),document.querySelectorAll(".rgba_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".rgba_input");if(t[0].value>255)throw"Value must be below 256";if(t[1].value>255)throw"Value must be below 256";if(t[2].value>255)throw"Value must be below 256";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`rgba(${t[0].value}, ${t[1].value}, ${t[2].value}, ${t[3].value})`),updatePicker()}))}),document.querySelectorAll(".hsla_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".hsla_input");if(t[0].value>359)throw"Value must be below 360";if(t[1].value>100)throw"Value must be below 100";if(t[2].value>100)throw"Value must be below 100";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`hsla(${t[0].value}, ${t[1].value}%, ${t[2].value}%, ${t[3].value})`),updatePicker()}))}),colorPickerComp.getCustomColors=function(){return colorPickerComp.LSCustomColors()},document.getElementById("custom_colors_box").addEventListener("click",(function(t){if("custom_colors_preview"==t.target.className){const e=t.target.getAttribute("data-custom-color");colorPickerComp.updateColorDisplays(e),updatePicker()}})),colorPickerComp.addCustomColor=function(){19==colorPickerComp.LSCustomColors[0].length&&(document.getElementById("custom_colors_add").style.display="none");const t=`hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`;let e=document.createElement("BUTTON");e.className="custom_colors_preview",e.style.background=t,e.setAttribute("data-custom-color",t),document.getElementById("custom_colors_box").appendChild(e),colorPickerComp.LSCustomColors[0].unshift(t),localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors))},document.getElementById("custom_colors_add").addEventListener("click",(function(){colorPickerComp.addCustomColor()})),document.getElementById("custom_colors_box").addEventListener("contextmenu",(function(t){if("custom_colors_preview"==t.target.className){t.preventDefault();const e=document.getElementById("color_context_menu");e.style.display="block",e.style.top=t.target.getBoundingClientRect().top+25+"px",e.style.left=t.target.getBoundingClientRect().left+"px",colorPickerComp.contextMenuElem=t.target}})),colorPickerComp.clearSingleCustomColor=function(t){const e=void 0===t?colorPickerComp.contextMenuElem:t;document.getElementById("custom_colors_box").removeChild(e),colorPickerComp.LSCustomColors={0:[]};for(let t in document.getElementsByClassName("custom_colors_preview"))!0!==isNaN(t)&&colorPickerComp.LSCustomColors[0].push(document.getElementsByClassName("custom_colors_preview")[t].getAttribute("data-custom-color"));localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors)),document.getElementById("custom_colors_add").style.display="inline-block"},document.getElementById("color_clear_single").addEventListener("mousedown",(function(){colorPickerComp.clearSingleCustomColor()})),colorPickerComp.clearAllCustomColors=function(){for(colorPickerComp.LSCustomColors={0:[]};document.getElementsByClassName("custom_colors_preview").length>0;)document.getElementById("custom_colors_box").removeChild(document.getElementsByClassName("custom_colors_preview")[0]);localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors)),document.getElementById("custom_colors_add").style.display="inline-block"},document.getElementById("color_clear_all").addEventListener("mousedown",(function(){colorPickerComp.clearAllCustomColors()})),colorPickerComp.colorSliderHandler=function(t){const e=document.getElementById("color_slider"),o=document.getElementById("color_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;const c=(l-11)/244*100,r=Math.round(359-3.59*c);colorPickerComp.hue=r,document.getElementById("saturation").children[1].setAttribute("stop-color",`hsla(${r}, 100%, 50%, ${colorPickerComp.alpha})`),colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_slider").addEventListener("mousedown",(function(t){colorPickerComp.sliderStatus=!0,colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.sliderStatus&&colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.sliderStatus&&(colorPickerComp.sliderStatus=!1)})),document.getElementById("color_slider").addEventListener("touchstart",(function(t){colorPickerComp.sliderStatusTouch=!0,colorPickerComp.colorSliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.sliderStatusTouch&&(event.preventDefault(),colorPickerComp.colorSliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.sliderStatusTouch&&(colorPickerComp.sliderStatusTouch=!1)})),colorPickerComp.opacitySliderHandler=function(t){const e=document.getElementById("opacity_slider"),o=document.getElementById("opacity_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;let c=.01*((l-11)/244*100);c=Number(Math.round(c+"e2")+"e-2"),colorPickerComp.alpha=c,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("opacity_slider").addEventListener("mousedown",(function(t){colorPickerComp.opacityStatus=!0,colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.opacityStatus&&colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.opacityStatus&&(colorPickerComp.opacityStatus=!1)})),document.getElementById("opacity_slider").addEventListener("touchstart",(function(t){colorPickerComp.opacityStatusTouch=!0,colorPickerComp.opacitySliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.opacityStatusTouch&&(event.preventDefault(),colorPickerComp.opacitySliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.opacityStatusTouch&&(colorPickerComp.opacityStatusTouch=!1)})),colorPickerComp.colorBoxHandler=function(t,e,o){const l=document.getElementById("color_box"),c=document.getElementById("box_dragger");let r=t-l.getBoundingClientRect().left,n=!0===o?e-l.getBoundingClientRect().top:e-l.getBoundingClientRect().top-document.getElementsByTagName("HTML")[0].scrollTop;r<14&&(r=14),r>252&&(r=252),n<14&&(n=14),n>119&&(n=119),c.attributes.y.nodeValue=n,c.attributes.x.nodeValue=r;const i=Math.round((r-15)/238*100),s=100-i/2,a=100-(n-15)/105*100,u=Math.floor(a/100*s);colorPickerComp.saturation=i,colorPickerComp.lightness=u,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_box").addEventListener("mousedown",(function(t){colorPickerComp.boxStatus=!0,colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.boxStatus&&colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mouseup",(function(t){!0===colorPickerComp.boxStatus&&(colorPickerComp.boxStatus=!1)})),document.getElementById("color_box").addEventListener("touchstart",(function(t){colorPickerComp.boxStatusTouch=!0,colorPickerComp.colorBoxHandler(t.changedTouches[0].clientX,t.changedTouches[0].clientY,!0)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.boxStatusTouch&&(event.preventDefault(),colorPickerComp.colorBoxHandler(event.changedTouches[0].clientX,event.changedTouches[0].clientY,!0))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.boxStatusTouch&&(colorPickerComp.boxStatusTouch=!1)})),colorPickerComp.updateColorDisplays=function(t){if("undefined"==t)t={h:0,s:100,l:50,a:1};else if("#"==t.substring(0,1))t=colorPickerComp.hexAToRGBA(t,!0);else if("r"==t.substring(0,1)){const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t=colorPickerComp.RGBAToHSLA(e[0],e[1],e[2],e[3])}else{const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t={h:e[0],s:e[1],l:e[2],a:e[3]}}colorPickerComp.hue=t.h,colorPickerComp.saturation=t.s,colorPickerComp.lightness=t.l,colorPickerComp.alpha=t.a,colorPickerComp.updateColorValueInput(),document.getElementById("saturation").children[1].setAttribute("stop-color",`hsl(${t.h}, 100%, 50%)`);const e=document.getElementById("box_dragger");let o=2.38*t.s+14;let l=1.05*(100-t.l/(100-t.s/2)*100)+14;o<14&&(o=14),o>252&&(o=252),l<14&&(l=14),l>119&&(l=119),e.attributes.x.nodeValue=o,e.attributes.y.nodeValue=l;const c=document.getElementById("color_slider_dragger");let r=2.44*(100-t.h/359*100)+11;c.attributes.x.nodeValue=r;const n=document.getElementById("opacity_slider_dragger");let i=100*t.a*2.44+11;n.attributes.x.nodeValue=i},colorPickerComp.updateColorValueInput=function(){if("HEXA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}else if("RGBA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha};window.ColorPicker = ColorPicker;window.colorPickerComp = colorPickerComp;}); \ No newline at end of file From 2fc6040f9e604f6cc28812cb899a967e29e6d916 Mon Sep 17 00:00:00 2001 From: Florent Masson Date: Fri, 4 Feb 2022 17:20:30 +0100 Subject: [PATCH 3/5] Replace saturation/lightness box by saturation/value as in chrome devtools Add button to remove custom colors (eg on mobile) Allow entering uppercase hex colors --- package.json | 1 + src/js/color_text_values.js | 2 +- src/js/custom_color.js | 30 ++++++- src/js/saturation_lightness_box.js | 137 ----------------------------- src/js/saturation_value_box.js | 137 +++++++++++++++++++++++++++++ src/js/setup.js | 10 ++- src/js/update_picker.js | 25 +++++- src/scss/colr_pickr.scss | 14 +++ 8 files changed, 214 insertions(+), 142 deletions(-) delete mode 100644 src/js/saturation_lightness_box.js create mode 100644 src/js/saturation_value_box.js diff --git a/package.json b/package.json index 4074fda..d9140fb 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "license": "MIT", "scripts": { "devBuild": "gulp devBuild", + "devWatch": "gulp watch", "build": "gulp productionBuild", "doc": "jsdoc -c jsdoc.json", "test": "echo \"Error: no test specified\" && exit 1" diff --git a/src/js/color_text_values.js b/src/js/color_text_values.js index d6133e1..1ce3d2f 100644 --- a/src/js/color_text_values.js +++ b/src/js/color_text_values.js @@ -67,7 +67,7 @@ document.getElementById('switch_color_type').addEventListener('click', function // Event to update the color when the user leaves the hex value box document.getElementById('hex_input').addEventListener('blur', function () { // Value - const hexInput = this.value; + const hexInput = this.value.toLowerCase(); // Check to see if the hex is formatted correctly if (hexInput.match(/^#[0-9a-f]{3}([0-9a-f]{3})?([0-9a-f]{2})?$/)) { diff --git a/src/js/custom_color.js b/src/js/custom_color.js index 6e9fa45..908257b 100644 --- a/src/js/custom_color.js +++ b/src/js/custom_color.js @@ -26,6 +26,10 @@ document.getElementById('custom_colors_box').addEventListener('click', function // Update updatePicker(); + + // Show delete button + document.getElementById('custom_colors_del').style.display = 'inline-block'; + } }); @@ -38,6 +42,11 @@ colorPickerComp.addCustomColor = function () { // Getting the color const color = `hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`; + // Check if color is already present + for (let i = 0; i < colorPickerComp.LSCustomColors[0].length; i++) + if (colorPickerComp.LSCustomColors[0][i] == color) + return; + // Creating the element let customColorElem = document.createElement('BUTTON'); customColorElem.className = 'custom_colors_preview'; @@ -47,7 +56,7 @@ colorPickerComp.addCustomColor = function () { document.getElementById('custom_colors_box').appendChild(customColorElem); // Pushing the color to the top of the array - colorPickerComp.LSCustomColors[0].unshift(color); + colorPickerComp.LSCustomColors[0].push(color); // Updating the local storage with the new custom color localStorage.setItem('custom_colors', JSON.stringify(colorPickerComp.LSCustomColors)); @@ -56,6 +65,25 @@ document.getElementById('custom_colors_add').addEventListener('click', function colorPickerComp.addCustomColor(); }); +// Function to remove an existing custom color +colorPickerComp.removeCustomColor = function () { + // Update status of remove button + const color = `hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`; + + // Check if color is already present + let isCustomColor = false; + for (let i = 0; i < colorPickerComp.LSCustomColors[0].length; i++) + if (colorPickerComp.LSCustomColors[0][i] == color) { + let elem = document.getElementById('custom_colors_box').getElementsByClassName('custom_colors_preview')[i]; + colorPickerComp.clearSingleCustomColor(elem); + document.getElementById('custom_colors_del').style.display = 'none'; + return; + } +}; +document.getElementById('custom_colors_del').addEventListener('click', function () { + colorPickerComp.removeCustomColor(); +}); + // Event to fire for a context menu document.getElementById('custom_colors_box').addEventListener('contextmenu', function (event) { // Making sure the users has selected a color preview diff --git a/src/js/saturation_lightness_box.js b/src/js/saturation_lightness_box.js deleted file mode 100644 index 338a5b9..0000000 --- a/src/js/saturation_lightness_box.js +++ /dev/null @@ -1,137 +0,0 @@ -/** - * Saturation and Lightness Box - */ - -// Function to handle changes to the saturation and lightness box -colorPickerComp.colorBoxHandler = function (positionX, positionY, touch) { - // Defining the box and dragger - const boxContainer = document.getElementById('color_box'); - const boxDragger = document.getElementById('box_dragger'); - - // Defining X and Y position, Y differently works with scroll so I make conditions for that - let eventX = positionX - boxContainer.getBoundingClientRect().left; - let eventY = - touch === true - ? positionY - boxContainer.getBoundingClientRect().top - : positionY - - boxContainer.getBoundingClientRect().top - - document.getElementsByTagName('HTML')[0].scrollTop; - - // Making conditions so that the user don't drag outside the box - if (eventX < 14) eventX = 14; - - if (eventX > 252) eventX = 252; - - if (eventY < 14) eventY = 14; - - if (eventY > 119) eventY = 119; - - // Changes X and Y properties of the dragger - boxDragger.attributes.y.nodeValue = eventY; - boxDragger.attributes.x.nodeValue = eventX; - - // Calculating the Saturation Percent value - // SPercent is just the percent of where the dragger is on the X axis - // 322 is the max number of pixels the dragger can move - const SPercent = Math.round(((eventX - 15) / 238) * 100); - - // Calculating the X and Y Percent Values - const percentX = 100 - SPercent / 2; - const percentY = 100 - ((eventY - 15) / 105) * 100; - - // Calculating the LPercent - // LPercent is the the X percentage of the of the Y percentage of the dragger - const LPercent = Math.floor((percentY / 100) * percentX); - - // Applying the Saturation and Lightness to the data object - colorPickerComp.saturation = SPercent; - colorPickerComp.lightness = LPercent; - - // Update the color text values - colorPickerComp.updateColorValueInput(); - - // Setting the data-color attribute to a color string - // This is so that the color updates properly on instances where the color has not been set - colorPickerComp.instance.element.setAttribute('data-color', 'color'); - - // Update - updatePicker(); -}; - -/** - * Mouse Events - */ - -// Start box drag listener -document.getElementById('color_box').addEventListener('mousedown', function (event) { - // Updating the status in the data object - colorPickerComp.boxStatus = true; - // Calling handler function - colorPickerComp.colorBoxHandler(event.pageX, event.pageY); -}); - -// Moving box drag listener -document.addEventListener('mousemove', function (event) { - // Checking that the drag has started - if (colorPickerComp.boxStatus === true) { - // Calling handler function - colorPickerComp.colorBoxHandler(event.pageX, event.pageY); - } -}); - -// End box drag listener -document.addEventListener('mouseup', function (event) { - // Checking that the drag has started - if (colorPickerComp.boxStatus === true) { - // Updating the status in the data object - colorPickerComp.boxStatus = false; - } -}); - -/** - * Touch Events - */ - -// Start the box drag on touch -document.getElementById('color_box').addEventListener( - 'touchstart', - function (event) { - // Updating the status - colorPickerComp.boxStatusTouch = true; - // Calling the handler function - colorPickerComp.colorBoxHandler( - event.changedTouches[0].clientX, - event.changedTouches[0].clientY, - true - ); - }, - { passive: true } -); - -// Moving the box drag on touch -document.addEventListener( - 'touchmove', - function () { - // Checking that the touch drag has started - if (colorPickerComp.boxStatusTouch === true) { - // Prevent page scrolling - event.preventDefault(); - // Calling the handler function - colorPickerComp.colorBoxHandler( - event.changedTouches[0].clientX, - event.changedTouches[0].clientY, - true - ); - } - }, - { passive: false } -); - -// End box drag on touch -document.addEventListener('touchend', function () { - // Checking that the touch drag has started - if (colorPickerComp.boxStatusTouch === true) { - // Calling the handler function - colorPickerComp.boxStatusTouch = false; - } -}); diff --git a/src/js/saturation_value_box.js b/src/js/saturation_value_box.js new file mode 100644 index 0000000..7ec7963 --- /dev/null +++ b/src/js/saturation_value_box.js @@ -0,0 +1,137 @@ +/** + * Saturation and Value Box + */ + +// Function to handle changes to the saturation and lightness box +colorPickerComp.colorBoxHandler = function (positionX, positionY, touch) { + // Defining the box and dragger + const boxContainer = document.getElementById('color_box'); + const boxDragger = document.getElementById('box_dragger'); + + // Defining X and Y position, Y differently works with scroll so I make conditions for that + let eventX = positionX - boxContainer.getBoundingClientRect().left; + let eventY = + touch === true ? + positionY - boxContainer.getBoundingClientRect().top : + positionY - + boxContainer.getBoundingClientRect().top - + document.getElementsByTagName('HTML')[0].scrollTop; + + // Making conditions so that the user don't drag outside the box + if (eventX < 14) eventX = 14; + + if (eventX > 252) eventX = 252; + + if (eventY < 14) eventY = 14; + + if (eventY > 119) eventY = 119; + + // Changes X and Y properties of the dragger + boxDragger.attributes.y.nodeValue = eventY; + boxDragger.attributes.x.nodeValue = eventX; + + const s = (eventX - 14) / 238; + const v = 1 - (eventY - 14) / 105; + + //formulas from https://stackoverflow.com/a/54116681/4228964 + let l = v - v * s / 2; + + // Calculating the LPercent + const LPercent = l * 100; + // Calculating the SPercent + const SPercent = (l == 0 || l == 1 ? 0 : (v - l) / Math.min(l, 1 - l)) * 100; + + // Applying the Saturation and Lightness to the data object + colorPickerComp.saturation = SPercent; + colorPickerComp.lightness = LPercent; + + // Update the color text values + colorPickerComp.updateColorValueInput(); + + // Setting the data-color attribute to a color string + // This is so that the color updates properly on instances where the color has not been set + colorPickerComp.instance.element.setAttribute('data-color', 'color'); + + // Update + updatePicker(); +}; + +/** + * Mouse Events + */ + +// Start box drag listener +document.getElementById('color_box').addEventListener('mousedown', function (event) { + // Updating the status in the data object + colorPickerComp.boxStatus = true; + // Calling handler function + colorPickerComp.colorBoxHandler(event.pageX, event.pageY); +}); + +// Moving box drag listener +document.addEventListener('mousemove', function (event) { + // Checking that the drag has started + if (colorPickerComp.boxStatus === true) { + // Calling handler function + colorPickerComp.colorBoxHandler(event.pageX, event.pageY); + } +}); + +// End box drag listener +document.addEventListener('mouseup', function (event) { + // Checking that the drag has started + if (colorPickerComp.boxStatus === true) { + // Updating the status in the data object + colorPickerComp.boxStatus = false; + } +}); + +/** + * Touch Events + */ + +// Start the box drag on touch +document.getElementById('color_box').addEventListener( + 'touchstart', + function (event) { + // Updating the status + colorPickerComp.boxStatusTouch = true; + // Calling the handler function + colorPickerComp.colorBoxHandler( + event.changedTouches[0].clientX, + event.changedTouches[0].clientY, + true + ); + }, { + passive: true + } +); + +// Moving the box drag on touch +document.addEventListener( + 'touchmove', + function () { + // Checking that the touch drag has started + if (colorPickerComp.boxStatusTouch === true) { + // Prevent page scrolling + event.preventDefault(); + // Calling the handler function + colorPickerComp.colorBoxHandler( + event.changedTouches[0].clientX, + event.changedTouches[0].clientY, + true + ); + } + }, { + passive: false + } +); + +// End box drag on touch +document.addEventListener('touchend', function () { + // Checking that the touch drag has started + if (colorPickerComp.boxStatusTouch === true) { + // Calling the handler function + colorPickerComp.boxStatusTouch = false; + } +}); diff --git a/src/js/setup.js b/src/js/setup.js index 4174f2c..809ef71 100644 --- a/src/js/setup.js +++ b/src/js/setup.js @@ -226,6 +226,11 @@ function ColorPicker(element, color) { + \n\t\t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t',document.getElementsByTagName("BODY")[0].appendChild(t),null===localStorage.getItem("custom_colors"))localStorage.setItem("custom_colors",'{"0": []}');else{colorPickerComp.LSCustomColors=JSON.parse(localStorage.getItem("custom_colors"));for(let t=colorPickerComp.LSCustomColors[0].length-1;t>=0;t--){let e=document.createElement("BUTTON");e.className="custom_colors_preview",e.style.background=colorPickerComp.LSCustomColors[0][t],e.setAttribute("data-custom-color",colorPickerComp.LSCustomColors[0][t]),document.getElementById("custom_colors_box").appendChild(e),19==t&&(document.getElementById("custom_colors_add").style.display="none")}28==colorPickerComp.LSCustomColors[0].length&&(document.getElementById("custom_colors_add").style.display="none")}}(),colorPickerComp.keyShortcuts=function(t){for(let t in document.getElementsByTagName("INPUT"))if(!isNaN(t)&&document.getElementsByTagName("INPUT")[t]===document.activeElement)return;for(let t in document.getElementsByTagName("TEXTAREA"))if(!isNaN(t)&&document.getElementsByTagName("TEXTAREA")[t]===document.activeElement)return;switch(t.keyCode){case 46:"custom_colors_preview"==document.activeElement.className&&colorPickerComp.clearSingleCustomColor(document.activeElement);break;case 27:colorPickerComp.pickerOpen&&closePicker();break;case 9:let t=document.getElementsByClassName("remove_outline");for(;t.length>0;)t[0].classList.add("add_outline"),t[0].classList.remove("remove_outline"),t=document.getElementsByClassName("remove_outline")}},document.addEventListener("keydown",colorPickerComp.keyShortcuts.bind(event)),document.addEventListener("mousedown",(function(){let t=document.getElementsByClassName("add_outline");for(;t.length>0;)t[0].classList.add("remove_outline"),t[0].classList.remove("add_outline"),t=document.getElementsByClassName("add_outline")})),document.addEventListener("mousedown",(function(){"color_context_menu"!=event.target.id&&(document.getElementById("color_context_menu").style.display="none")}));let closePicker=function(){colorPickerComp.pickerOpen=!1,document.getElementById("color_picker").style.display="none","undefined"!=colorPickerComp.instance.element.getAttribute("data-color")&&updatePicker()},updatePicker=function(){colorPickerComp.colorChange({h:colorPickerComp.hue,s:colorPickerComp.saturation,l:colorPickerComp.lightness,a:colorPickerComp.alpha})};document.addEventListener("mousedown",(function(){let t=event.target;if(colorPickerComp.pickerOpen)for(;t!=document.getElementById("color_picker");){if("HTML"==t.tagName){closePicker();break}t=t.parentNode}})),document.addEventListener("scroll",(function(){colorPickerComp.pickerOpen&&closePicker()})),window.addEventListener("resize",(function(){colorPickerComp.pickerOpen&&closePicker()})),colorPickerComp.colorChange=function(t,e){"string"==typeof t&&(t=colorPickerComp.hexAToRGBA(t,!0));const o=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a),l=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a,!0),c=new CustomEvent("colorChange",{detail:{color:{hsl:`hsla(${t.h}, ${t.s}%, ${t.l}%)`,rgb:`rgba(${o.r}, ${o.g}, ${o.b})`,hex:l,hsla:`hsla(${t.h}, ${t.s}%, ${t.l}%, ${t.a})`,rgba:`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,hexa:l}}}),r=void 0===e?colorPickerComp.instance.element:e;r.setAttribute("data-color",l),r.style.background=l,r.dispatchEvent(c)},colorPickerComp.HSLAToRGBA=function(t,e,o,l,c){e/=100,o/=100;let r=(1-Math.abs(2*o-1))*e,n=r*(1-Math.abs(t/60%2-1)),i=o-r/2,s=0,a=0,u=0;return 0<=t&&t<60?(s=r,a=n,u=0):60<=t&&t<120?(s=n,a=r,u=0):120<=t&&t<180?(s=0,a=r,u=n):180<=t&&t<240?(s=0,a=n,u=r):240<=t&&t<300?(s=n,a=0,u=r):300<=t&&t<360&&(s=r,a=0,u=n),s=Math.round(255*(s+i)),a=Math.round(255*(a+i)),u=Math.round(255*(u+i)),!0===c?colorPickerComp.RGBAToHexA(s,a,u,l):{r:s,g:a,b:u,a:l}},colorPickerComp.RGBAToHSLA=function(t,e,o,l){t/=255,e/=255,o/=255,l=null==l?1:l;let c=Math.min(t,e,o),r=Math.max(t,e,o),n=r-c,i=0,s=0,a=0;return i=0==n?0:r==t?(e-o)/n%6:r==e?(o-t)/n+2:(t-e)/n+4,i=Math.round(60*i),i<0&&(i+=360),a=(r+c)/2,s=0==n?0:n/(1-Math.abs(2*a-1)),s=+(100*s).toFixed(1),a=+(100*a).toFixed(1),{h:i,s:s,l:a,a:l}},colorPickerComp.RGBAToHexA=function(t,e,o,l){return t=t.toString(16),e=e.toString(16),o=o.toString(16),l=Math.round(255*l).toString(16),1==t.length&&(t="0"+t),1==e.length&&(e="0"+e),1==o.length&&(o="0"+o),1==l.length&&(l="0"+l),"ff"==l?"#"+t+e+o:"#"+t+e+o+l},colorPickerComp.hexAToRGBA=function(t,e){7==t.length?t+="ff":4==t.length&&(t+=t.substring(1,4)+"ff");let o=0,l=0,c=0,r=1;return 5==t.length?(o="0x"+t[1]+t[1],l="0x"+t[2]+t[2],c="0x"+t[3]+t[3],r="0x"+t[4]+t[4]):9==t.length&&(o="0x"+t[1]+t[2],l="0x"+t[3]+t[4],c="0x"+t[5]+t[6],r="0x"+t[7]+t[8]),r=+(r/255).toFixed(3),!0===e?colorPickerComp.RGBAToHSLA(+o,+l,+c,r):"rgba("+ +o+","+ +l+","+ +c+","+r+")"},colorPickerComp.switchColorType=function(){if("HEXA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="RGBA",document.getElementById("hexa").style.display="none",document.getElementById("rgba").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else if("RGBA"==colorPickerComp.colorTypeStatus)colorPickerComp.colorTypeStatus="HSLA",document.getElementById("rgba").style.display="none",document.getElementById("hsla").style.display="block",document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha;else if("HSLA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="HEXA",document.getElementById("hsla").style.display="none",document.getElementById("hexa").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}},document.getElementById("switch_color_type").addEventListener("click",(function(){colorPickerComp.switchColorType()})),document.getElementById("hex_input").addEventListener("blur",(function(){const t=this.value;t.match(/^#[0-9a-f]{3}([0-9a-f]{3})?([0-9a-f]{2})?$/)&&(colorPickerComp.updateColorDisplays(t),updatePicker())})),document.querySelectorAll(".rgba_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".rgba_input");if(t[0].value>255)throw"Value must be below 256";if(t[1].value>255)throw"Value must be below 256";if(t[2].value>255)throw"Value must be below 256";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`rgba(${t[0].value}, ${t[1].value}, ${t[2].value}, ${t[3].value})`),updatePicker()}))}),document.querySelectorAll(".hsla_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".hsla_input");if(t[0].value>359)throw"Value must be below 360";if(t[1].value>100)throw"Value must be below 100";if(t[2].value>100)throw"Value must be below 100";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`hsla(${t[0].value}, ${t[1].value}%, ${t[2].value}%, ${t[3].value})`),updatePicker()}))}),colorPickerComp.getCustomColors=function(){return colorPickerComp.LSCustomColors()},document.getElementById("custom_colors_box").addEventListener("click",(function(t){if("custom_colors_preview"==t.target.className){const e=t.target.getAttribute("data-custom-color");colorPickerComp.updateColorDisplays(e),updatePicker()}})),colorPickerComp.addCustomColor=function(){19==colorPickerComp.LSCustomColors[0].length&&(document.getElementById("custom_colors_add").style.display="none");const t=`hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`;let e=document.createElement("BUTTON");e.className="custom_colors_preview",e.style.background=t,e.setAttribute("data-custom-color",t),document.getElementById("custom_colors_box").appendChild(e),colorPickerComp.LSCustomColors[0].unshift(t),localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors))},document.getElementById("custom_colors_add").addEventListener("click",(function(){colorPickerComp.addCustomColor()})),document.getElementById("custom_colors_box").addEventListener("contextmenu",(function(t){if("custom_colors_preview"==t.target.className){t.preventDefault();const e=document.getElementById("color_context_menu");e.style.display="block",e.style.top=t.target.getBoundingClientRect().top+25+"px",e.style.left=t.target.getBoundingClientRect().left+"px",colorPickerComp.contextMenuElem=t.target}})),colorPickerComp.clearSingleCustomColor=function(t){const e=void 0===t?colorPickerComp.contextMenuElem:t;document.getElementById("custom_colors_box").removeChild(e),colorPickerComp.LSCustomColors={0:[]};for(let t in document.getElementsByClassName("custom_colors_preview"))!0!==isNaN(t)&&colorPickerComp.LSCustomColors[0].push(document.getElementsByClassName("custom_colors_preview")[t].getAttribute("data-custom-color"));localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors)),document.getElementById("custom_colors_add").style.display="inline-block"},document.getElementById("color_clear_single").addEventListener("mousedown",(function(){colorPickerComp.clearSingleCustomColor()})),colorPickerComp.clearAllCustomColors=function(){for(colorPickerComp.LSCustomColors={0:[]};document.getElementsByClassName("custom_colors_preview").length>0;)document.getElementById("custom_colors_box").removeChild(document.getElementsByClassName("custom_colors_preview")[0]);localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors)),document.getElementById("custom_colors_add").style.display="inline-block"},document.getElementById("color_clear_all").addEventListener("mousedown",(function(){colorPickerComp.clearAllCustomColors()})),colorPickerComp.colorSliderHandler=function(t){const e=document.getElementById("color_slider"),o=document.getElementById("color_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;const c=(l-11)/244*100,r=Math.round(359-3.59*c);colorPickerComp.hue=r,document.getElementById("saturation").children[1].setAttribute("stop-color",`hsla(${r}, 100%, 50%, ${colorPickerComp.alpha})`),colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_slider").addEventListener("mousedown",(function(t){colorPickerComp.sliderStatus=!0,colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.sliderStatus&&colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.sliderStatus&&(colorPickerComp.sliderStatus=!1)})),document.getElementById("color_slider").addEventListener("touchstart",(function(t){colorPickerComp.sliderStatusTouch=!0,colorPickerComp.colorSliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.sliderStatusTouch&&(event.preventDefault(),colorPickerComp.colorSliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.sliderStatusTouch&&(colorPickerComp.sliderStatusTouch=!1)})),colorPickerComp.opacitySliderHandler=function(t){const e=document.getElementById("opacity_slider"),o=document.getElementById("opacity_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;let c=.01*((l-11)/244*100);c=Number(Math.round(c+"e2")+"e-2"),colorPickerComp.alpha=c,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("opacity_slider").addEventListener("mousedown",(function(t){colorPickerComp.opacityStatus=!0,colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.opacityStatus&&colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.opacityStatus&&(colorPickerComp.opacityStatus=!1)})),document.getElementById("opacity_slider").addEventListener("touchstart",(function(t){colorPickerComp.opacityStatusTouch=!0,colorPickerComp.opacitySliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.opacityStatusTouch&&(event.preventDefault(),colorPickerComp.opacitySliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.opacityStatusTouch&&(colorPickerComp.opacityStatusTouch=!1)})),colorPickerComp.colorBoxHandler=function(t,e,o){const l=document.getElementById("color_box"),c=document.getElementById("box_dragger");let r=t-l.getBoundingClientRect().left,n=!0===o?e-l.getBoundingClientRect().top:e-l.getBoundingClientRect().top-document.getElementsByTagName("HTML")[0].scrollTop;r<14&&(r=14),r>252&&(r=252),n<14&&(n=14),n>119&&(n=119),c.attributes.y.nodeValue=n,c.attributes.x.nodeValue=r;const i=Math.round((r-15)/238*100),s=100-i/2,a=100-(n-15)/105*100,u=Math.floor(a/100*s);colorPickerComp.saturation=i,colorPickerComp.lightness=u,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_box").addEventListener("mousedown",(function(t){colorPickerComp.boxStatus=!0,colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.boxStatus&&colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mouseup",(function(t){!0===colorPickerComp.boxStatus&&(colorPickerComp.boxStatus=!1)})),document.getElementById("color_box").addEventListener("touchstart",(function(t){colorPickerComp.boxStatusTouch=!0,colorPickerComp.colorBoxHandler(t.changedTouches[0].clientX,t.changedTouches[0].clientY,!0)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.boxStatusTouch&&(event.preventDefault(),colorPickerComp.colorBoxHandler(event.changedTouches[0].clientX,event.changedTouches[0].clientY,!0))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.boxStatusTouch&&(colorPickerComp.boxStatusTouch=!1)})),colorPickerComp.updateColorDisplays=function(t){if("undefined"==t)t={h:0,s:100,l:50,a:1};else if("#"==t.substring(0,1))t=colorPickerComp.hexAToRGBA(t,!0);else if("r"==t.substring(0,1)){const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t=colorPickerComp.RGBAToHSLA(e[0],e[1],e[2],e[3])}else{const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t={h:e[0],s:e[1],l:e[2],a:e[3]}}colorPickerComp.hue=t.h,colorPickerComp.saturation=t.s,colorPickerComp.lightness=t.l,colorPickerComp.alpha=t.a,colorPickerComp.updateColorValueInput(),document.getElementById("saturation").children[1].setAttribute("stop-color",`hsl(${t.h}, 100%, 50%)`);const e=document.getElementById("box_dragger");let o=2.38*t.s+14;let l=1.05*(100-t.l/(100-t.s/2)*100)+14;o<14&&(o=14),o>252&&(o=252),l<14&&(l=14),l>119&&(l=119),e.attributes.x.nodeValue=o,e.attributes.y.nodeValue=l;const c=document.getElementById("color_slider_dragger");let r=2.44*(100-t.h/359*100)+11;c.attributes.x.nodeValue=r;const n=document.getElementById("opacity_slider_dragger");let i=100*t.a*2.44+11;n.attributes.x.nodeValue=i},colorPickerComp.updateColorValueInput=function(){if("HEXA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}else if("RGBA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha};window.ColorPicker = ColorPicker;window.colorPickerComp = colorPickerComp;}); \ No newline at end of file +let colorPickerComp=new Object;function ColorPicker(t,e){this.element=t,t.colorPickerObj=this,t.setAttribute("data-color",e),t.style.background=e,t.addEventListener("click",(function(){colorPickerComp.instance=this.colorPickerObj,colorPickerComp.pickerOpen=!0;const t=document.getElementById("color_picker");t.style.display="block";let e=this.getBoundingClientRect().top,o=this.getBoundingClientRect().left;if(e=e+t.offsetHeight>window.innerHeight?e-t.offsetHeight-2:e+this.offsetHeight+2,o+t.offsetWidth>window.innerWidth-20){o=o-(o+t.offsetWidth-window.innerWidth)-20}t.style.top=e+"px",t.style.left=o+"px",colorPickerComp.updateColorDisplays(this.getAttribute("data-color")),document.getElementById("color_text_values").focus()}))}!function(){colorPickerComp.pickerOpen=!1,colorPickerComp.instance=null,colorPickerComp.boxStatus=!1,colorPickerComp.boxStatusTouch=!1,colorPickerComp.sliderStatus=!1,colorPickerComp.sliderStatusTouch=!1,colorPickerComp.opacityStatus=!1,colorPickerComp.opacityStatusTouch=!1,colorPickerComp.colorTypeStatus="HEXA",colorPickerComp.hue=0,colorPickerComp.saturation=100,colorPickerComp.lightness=50,colorPickerComp.alpha=1,colorPickerComp.contextMenuElem=null,colorPickerComp.doubleTapTime=0,colorPickerComp.LSCustomColors={0:[]};const t=document.createElement("ASIDE");t.id="color_picker",t.innerHTML='\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t }\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t
\n\t\t
\n\t\t\t\n\t\t\t\n\t\t
\n\t',document.getElementsByTagName("BODY")[0].appendChild(t);let e=null;try{e=localStorage.getItem("custom_colors")}catch(t){}if(null===e)try{localStorage.setItem("custom_colors",'{"0": []}')}catch(t){}else{colorPickerComp.LSCustomColors=JSON.parse(e);for(let t=0;t0;)t[0].classList.add("add_outline"),t[0].classList.remove("remove_outline"),t=document.getElementsByClassName("remove_outline")}},document.addEventListener("keydown",colorPickerComp.keyShortcuts.bind(event)),document.addEventListener("mousedown",(function(){let t=document.getElementsByClassName("add_outline");for(;t.length>0;)t[0].classList.add("remove_outline"),t[0].classList.remove("add_outline"),t=document.getElementsByClassName("add_outline")})),document.addEventListener("mousedown",(function(){"color_context_menu"!=event.target.id&&(document.getElementById("color_context_menu").style.display="none")}));let closePicker=function(){colorPickerComp.pickerOpen=!1,document.getElementById("color_picker").style.display="none","undefined"!=colorPickerComp.instance.element.getAttribute("data-color")&&updatePicker()},updatePicker=function(){colorPickerComp.colorChange({h:colorPickerComp.hue,s:colorPickerComp.saturation,l:colorPickerComp.lightness,a:colorPickerComp.alpha})};document.addEventListener("mousedown",(function(){let t=event.target;if(colorPickerComp.pickerOpen)for(;t!=document.getElementById("color_picker");){if("HTML"==t.tagName){closePicker();break}t=t.parentNode}})),document.addEventListener("scroll",(function(){colorPickerComp.pickerOpen&&closePicker()})),window.addEventListener("resize",(function(){colorPickerComp.pickerOpen&&closePicker()})),colorPickerComp.colorChange=function(t,e){"string"==typeof t&&(t=colorPickerComp.hexAToRGBA(t,!0));const o=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a),l=colorPickerComp.HSLAToRGBA(t.h,t.s,t.l,t.a,!0),c=new CustomEvent("colorChange",{detail:{color:{hsl:`hsla(${t.h}, ${t.s}%, ${t.l}%)`,rgb:`rgba(${o.r}, ${o.g}, ${o.b})`,hex:l,hsla:`hsla(${t.h}, ${t.s}%, ${t.l}%, ${t.a})`,rgba:`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,hexa:l}}}),r=void 0===e?colorPickerComp.instance.element:e;r.setAttribute("data-color",l),r.style.background=l,r.dispatchEvent(c)},colorPickerComp.HSLAToRGBA=function(t,e,o,l,c){e/=100,o/=100;let r=(1-Math.abs(2*o-1))*e,n=r*(1-Math.abs(t/60%2-1)),i=o-r/2,s=0,a=0,m=0;return 0<=t&&t<60?(s=r,a=n,m=0):60<=t&&t<120?(s=n,a=r,m=0):120<=t&&t<180?(s=0,a=r,m=n):180<=t&&t<240?(s=0,a=n,m=r):240<=t&&t<300?(s=n,a=0,m=r):300<=t&&t<360&&(s=r,a=0,m=n),s=Math.round(255*(s+i)),a=Math.round(255*(a+i)),m=Math.round(255*(m+i)),!0===c?colorPickerComp.RGBAToHexA(s,a,m,l):{r:s,g:a,b:m,a:l}},colorPickerComp.RGBAToHSLA=function(t,e,o,l){t/=255,e/=255,o/=255,l=null==l?1:l;let c=Math.min(t,e,o),r=Math.max(t,e,o),n=r-c,i=0,s=0,a=0;return i=0==n?0:r==t?(e-o)/n%6:r==e?(o-t)/n+2:(t-e)/n+4,i=Math.round(60*i),i<0&&(i+=360),a=(r+c)/2,s=0==n?0:n/(1-Math.abs(2*a-1)),s=+(100*s).toFixed(1),a=+(100*a).toFixed(1),{h:i,s:s,l:a,a:l}},colorPickerComp.RGBAToHexA=function(t,e,o,l){return t=t.toString(16),e=e.toString(16),o=o.toString(16),l=Math.round(255*l).toString(16),1==t.length&&(t="0"+t),1==e.length&&(e="0"+e),1==o.length&&(o="0"+o),1==l.length&&(l="0"+l),"ff"==l?"#"+t+e+o:"#"+t+e+o+l},colorPickerComp.hexAToRGBA=function(t,e){7==t.length?t+="ff":4==t.length&&(t+=t.substring(1,4)+"ff");let o=0,l=0,c=0,r=1;return 5==t.length?(o="0x"+t[1]+t[1],l="0x"+t[2]+t[2],c="0x"+t[3]+t[3],r="0x"+t[4]+t[4]):9==t.length&&(o="0x"+t[1]+t[2],l="0x"+t[3]+t[4],c="0x"+t[5]+t[6],r="0x"+t[7]+t[8]),r=+(r/255).toFixed(3),!0===e?colorPickerComp.RGBAToHSLA(+o,+l,+c,r):"rgba("+ +o+","+ +l+","+ +c+","+r+")"},colorPickerComp.switchColorType=function(){if("HEXA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="RGBA",document.getElementById("hexa").style.display="none",document.getElementById("rgba").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else if("RGBA"==colorPickerComp.colorTypeStatus)colorPickerComp.colorTypeStatus="HSLA",document.getElementById("rgba").style.display="none",document.getElementById("hsla").style.display="block",document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha;else if("HSLA"==colorPickerComp.colorTypeStatus){colorPickerComp.colorTypeStatus="HEXA",document.getElementById("hsla").style.display="none",document.getElementById("hexa").style.display="block";const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}},document.getElementById("switch_color_type").addEventListener("click",(function(){colorPickerComp.switchColorType()})),document.getElementById("hex_input").addEventListener("blur",(function(){const t=this.value.toLowerCase();t.match(/^#[0-9a-f]{3}([0-9a-f]{3})?([0-9a-f]{2})?$/)&&(colorPickerComp.updateColorDisplays(t),updatePicker())})),document.querySelectorAll(".rgba_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".rgba_input");if(t[0].value>255)throw"Value must be below 256";if(t[1].value>255)throw"Value must be below 256";if(t[2].value>255)throw"Value must be below 256";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`rgba(${t[0].value}, ${t[1].value}, ${t[2].value}, ${t[3].value})`),updatePicker()}))}),document.querySelectorAll(".hsla_input").forEach(t=>{t.addEventListener("change",(function(){const t=document.querySelectorAll(".hsla_input");if(t[0].value>359)throw"Value must be below 360";if(t[1].value>100)throw"Value must be below 100";if(t[2].value>100)throw"Value must be below 100";if(t[3].value>1)throw"Value must be equal to or below 1";colorPickerComp.updateColorDisplays(`hsla(${t[0].value}, ${t[1].value}%, ${t[2].value}%, ${t[3].value})`),updatePicker()}))}),colorPickerComp.getCustomColors=function(){return colorPickerComp.LSCustomColors()},document.getElementById("custom_colors_box").addEventListener("click",(function(t){if("custom_colors_preview"==t.target.className){const e=t.target.getAttribute("data-custom-color");colorPickerComp.updateColorDisplays(e),updatePicker(),document.getElementById("custom_colors_del").style.display="inline-block"}})),colorPickerComp.addCustomColor=function(){19==colorPickerComp.LSCustomColors[0].length&&(document.getElementById("custom_colors_add").style.display="none");const t=`hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`;for(let e=0;e0;)document.getElementById("custom_colors_box").removeChild(document.getElementsByClassName("custom_colors_preview")[0]);try{localStorage.setItem("custom_colors",JSON.stringify(colorPickerComp.LSCustomColors))}catch(t){}document.getElementById("custom_colors_add").style.display="inline-block"},document.getElementById("color_clear_all").addEventListener("mousedown",(function(){colorPickerComp.clearAllCustomColors()})),colorPickerComp.colorSliderHandler=function(t){const e=document.getElementById("color_slider"),o=document.getElementById("color_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;const c=(l-11)/244*100,r=Math.round(359-3.59*c);colorPickerComp.hue=r,document.getElementById("saturation").children[1].setAttribute("stop-color",`hsla(${r}, 100%, 50%, ${colorPickerComp.alpha})`),colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_slider").addEventListener("mousedown",(function(t){colorPickerComp.sliderStatus=!0,colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.sliderStatus&&colorPickerComp.colorSliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.sliderStatus&&(colorPickerComp.sliderStatus=!1)})),document.getElementById("color_slider").addEventListener("touchstart",(function(t){colorPickerComp.sliderStatusTouch=!0,colorPickerComp.colorSliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.sliderStatusTouch&&(event.preventDefault(),colorPickerComp.colorSliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.sliderStatusTouch&&(colorPickerComp.sliderStatusTouch=!1)})),colorPickerComp.opacitySliderHandler=function(t){const e=document.getElementById("opacity_slider"),o=document.getElementById("opacity_slider_dragger");let l=t-e.getBoundingClientRect().left;l<11&&(l=11),l>255&&(l=255),o.attributes.x.nodeValue=l;let c=.01*((l-11)/244*100);c=Number(Math.round(c+"e2")+"e-2"),colorPickerComp.alpha=c,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("opacity_slider").addEventListener("mousedown",(function(t){colorPickerComp.opacityStatus=!0,colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.opacityStatus&&colorPickerComp.opacitySliderHandler(t.pageX)})),document.addEventListener("mouseup",(function(){!0===colorPickerComp.opacityStatus&&(colorPickerComp.opacityStatus=!1)})),document.getElementById("opacity_slider").addEventListener("touchstart",(function(t){colorPickerComp.opacityStatusTouch=!0,colorPickerComp.opacitySliderHandler(t.changedTouches[0].clientX)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.opacityStatusTouch&&(event.preventDefault(),colorPickerComp.opacitySliderHandler(event.changedTouches[0].clientX))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.opacityStatusTouch&&(colorPickerComp.opacityStatusTouch=!1)})),colorPickerComp.colorBoxHandler=function(t,e,o){const l=document.getElementById("color_box"),c=document.getElementById("box_dragger");let r=t-l.getBoundingClientRect().left,n=!0===o?e-l.getBoundingClientRect().top:e-l.getBoundingClientRect().top-document.getElementsByTagName("HTML")[0].scrollTop;r<14&&(r=14),r>252&&(r=252),n<14&&(n=14),n>119&&(n=119),c.attributes.y.nodeValue=n,c.attributes.x.nodeValue=r;const i=1-(n-14)/105;let s=i-i*((r-14)/238)/2;const a=100*s,m=100*(0==s||1==s?0:(i-s)/Math.min(s,1-s));colorPickerComp.saturation=m,colorPickerComp.lightness=a,colorPickerComp.updateColorValueInput(),colorPickerComp.instance.element.setAttribute("data-color","color"),updatePicker()},document.getElementById("color_box").addEventListener("mousedown",(function(t){colorPickerComp.boxStatus=!0,colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mousemove",(function(t){!0===colorPickerComp.boxStatus&&colorPickerComp.colorBoxHandler(t.pageX,t.pageY)})),document.addEventListener("mouseup",(function(t){!0===colorPickerComp.boxStatus&&(colorPickerComp.boxStatus=!1)})),document.getElementById("color_box").addEventListener("touchstart",(function(t){colorPickerComp.boxStatusTouch=!0,colorPickerComp.colorBoxHandler(t.changedTouches[0].clientX,t.changedTouches[0].clientY,!0)}),{passive:!0}),document.addEventListener("touchmove",(function(){!0===colorPickerComp.boxStatusTouch&&(event.preventDefault(),colorPickerComp.colorBoxHandler(event.changedTouches[0].clientX,event.changedTouches[0].clientY,!0))}),{passive:!1}),document.addEventListener("touchend",(function(){!0===colorPickerComp.boxStatusTouch&&(colorPickerComp.boxStatusTouch=!1)})),colorPickerComp.updateColorDisplays=function(t){if("undefined"==t)t={h:0,s:100,l:50,a:1};else if("#"==t.substring(0,1))t=colorPickerComp.hexAToRGBA(t,!0);else if("r"==t.substring(0,1)){const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t=colorPickerComp.RGBAToHSLA(e[0],e[1],e[2],e[3])}else{const e=t.match(/[.?\d]+/g);e[3]=null==e[3]?1:e[3],t={h:e[0],s:e[1],l:e[2],a:e[3]}}let e=t.l/100+t.s/100*Math.min(t.l,100-t.l)/100,o=(t.h,0==e?0:2-2*t.l/100/e),l=e;colorPickerComp.hue=t.h,colorPickerComp.saturation=t.s,colorPickerComp.lightness=t.l,colorPickerComp.alpha=t.a,colorPickerComp.updateColorValueInput(),document.getElementById("saturation").children[1].setAttribute("stop-color",`hsl(${t.h}, 100%, 50%)`);const c=document.getElementById("box_dragger");let r=238*o+14;let n=1.05*(100-100*l)+14;r<14&&(r=14),r>252&&(r=252),n<14&&(n=14),n>119&&(n=119),c.attributes.x.nodeValue=r,c.attributes.y.nodeValue=n;const i=document.getElementById("color_slider_dragger");let s=2.44*(100-t.h/359*100)+11;i.attributes.x.nodeValue=s;const a=document.getElementById("opacity_slider_dragger");let m=100*t.a*2.44+11;a.attributes.x.nodeValue=m},colorPickerComp.updateColorValueInput=function(){if("HEXA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha,!0);document.getElementById("hex_input").value=t}else if("RGBA"==colorPickerComp.colorTypeStatus){const t=colorPickerComp.HSLAToRGBA(colorPickerComp.hue,colorPickerComp.saturation,colorPickerComp.lightness,colorPickerComp.alpha);document.getElementsByClassName("rgba_input")[0].value=t.r,document.getElementsByClassName("rgba_input")[1].value=t.g,document.getElementsByClassName("rgba_input")[2].value=t.b,document.getElementsByClassName("rgba_input")[3].value=t.a}else document.getElementsByClassName("hsla_input")[0].value=colorPickerComp.hue,document.getElementsByClassName("hsla_input")[1].value=colorPickerComp.saturation,document.getElementsByClassName("hsla_input")[2].value=colorPickerComp.lightness,document.getElementsByClassName("hsla_input")[3].value=colorPickerComp.alpha;const t=`hsla(${colorPickerComp.hue}, ${colorPickerComp.saturation}%, ${colorPickerComp.lightness}%, ${colorPickerComp.alpha})`;let e=!1;for(let o=0;o