boothifier/temporary/hue-select-min.js

class HueSelect extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='\n\t\t<style>\n\t\t  .color-option {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tcursor: pointer;\n\t\t  \t}\n\t\t  \t.color-patch {\n\t\t\t\twidth: 30px;\n\t\t\t\theight: 30px;\n\t\t\t\tmargin-top: 18px;\n\t\t\t\tmargin-right: 10px;\n\t\t\t\tborder: 1px solid #000;\n\t\t  \t}\n\t\t  \t.hue-label {\n\t\t\t\tmargin-top: 18px;\n\t\t\t\twidth: 90px;\n\t\t\t\ttext-align: left;\n\t  \t\t}\n\t\t\t.label-container {\n                display: flex;\n                align-items: center;\n            }\n\t\t\t.dropdown {\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t  \t.dropdown-content {\n\t\t\t\tdisplay: none;\n\t\t\t\tposition: absolute;\n\t\t\t\tbackground-color: #f9f9f9;\n\t\t\t\tmin-width: 180px;\n\t\t\t\tbox-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n\t\t\t\tz-index: 1;\n\t\t\t\tmax-height: 300px;\n\t\t\t\toverflow-y: auto;\n\t\t  \t}\n\t\t\t.dropdown-content .color-option {\n\t\t\t\tpadding: 8px 12px;\n\t\t\t}\n\t\t  \t.dropdown:hover .dropdown-content {\n\t\t\t\tdisplay: block;\n\t\t  \t}\n\t\t</style>\n\t\t<div class="dropdown">\n\t\t  \t<div class="color-option" id="selectedColor">\n\t\t\t\t<span class="color-patch" style="background-color: hsl(0, 100%, 50%)"></span>\n\t\t\t\t<div class="label-container">\n\t\t\t\t\t<label class="hue-label" id="hue-label">0</label>\n\t\t\t\t</div>\n\t\t\t</div> \n\t\t  \t<div class="dropdown-content" id="colorPicker">\n\t\t\t\t\x3c!-- The options will be added dynamically using JavaScript --\x3e\n\t\t  \t</div>\n\t\t</div>\n\t  ',this.currentHue=0,this.colorList,this.hueLabel=this.shadowRoot.getElementById("hue-label");this.shadowRoot.getElementById("selectedColor").querySelector(".color-patch").addEventListener("mouseenter",(()=>{this.shadowRoot.querySelector(".dropdown-content").style.display="block"})),window.addEventListener("click",(t=>{const e=this.shadowRoot.querySelector(".dropdown-content");t.target.closest(".dropdown")||(e.style.display="none")})),this.createColorOptions(),this.setHue(0)}generateColors(){const t=[];for(let e=0;e<=360;e+=10)360==e&&(e=359),t.push(e);return t.push(-1),t.push(-2),t}createColorOption(t){const e=document.createElement("div");e.classList.add("color-option");const o=document.createElement("span");o.classList.add("color-patch");const n=document.createElement("span");n.classList.add("color-text"),n.textContent=t;const s=document.createElement("span");if(s.classList.add("rgb-hex"),-2===t)o.style.backgroundColor="rgb(0,0,0)",s.innerHTML="&nbsp; #000000";else if(-1===t)o.style.backgroundColor="rgb(255,255,255)",s.innerHTML="&nbsp; #FFFFFF";else{o.style.backgroundColor=`hsl(${t}, 100%, 50%)`;const e=this.hslToRgb(t,100,50).toUpperCase();s.innerHTML=`<span>&nbsp; ${e}</span>`}return e.appendChild(o),e.appendChild(n),e.appendChild(s),e.addEventListener("click",(()=>this.handleColorSelection(t))),e}createColorOptions(){const t=this.shadowRoot.querySelector(".dropdown-content");this.colorList=this.generateColors(),this.colorList.forEach((e=>{const o=this.createColorOption(e);t.appendChild(o)}))}hslToRgb(t,e,o){let n,s,l;if(t/=360,o/=100,0===(e/=100))n=s=l=o;else{const r=(t,e,o)=>(o<0&&(o+=1),o>1&&(o-=1),o<1/6?t+6*(e-t)*o:o<.5?e:o<2/3?t+(e-t)*(2/3-o)*6:t),i=o<.5?o*(1+e):o+e-o*e,d=2*o-i;n=r(d,i,t+1/3),s=r(d,i,t),l=r(d,i,t-1/3)}const r=t=>{const e=Math.round(255*t).toString(16);return 1===e.length?"0"+e:e};return`#${r(n)}${r(s)}${r(l)}`}handleColorSelection(t){this.currentHue=t;const e=this.shadowRoot.getElementById("selectedColor").querySelector(".color-patch"),o=this.getRGBfromHue(t);e.style.backgroundColor=o,console.log(e.style.backgroundColor),this.setHueLabel(t),this.hideDropdown(),this.dispatchEvent(new CustomEvent("change",{detail:{hue:t,rgb:o}}))}getSelectedHue(){return this.currentHue}getSelectedRGB(){const t=this.shadowRoot.getElementById("selectedColor").textContent.trim();return parseFloat(t)}getRGBfromHue(t){return-1==t?"#FFFFFF":-2==t?"#000000":this.hslToRgb(t,100,50)}getSelectedRgb(){const t=this.getSelectedHue();return getRGBfromHue(t)}setHue(t){let e=t;-1===t||-2===t?e=t:(e=10*Math.round(t/10),e>=360&&(e=359),e<0&&(e=0)),this.currentHue=e,this.colorList.forEach((t=>{t===e&&this.handleColorSelection(e)})),this.hideDropdown()}hideDropdown(){this.shadowRoot.querySelector(".dropdown-content").style.display="none"}setHueLabel(t){this.hueLabel.textContent="Hue: "+t}}customElements.define("hue-select",HueSelect);