[Summary view] [Print] [Text view]

   1  (e=>{const t=9,s=27,i={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dimgrey:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgray:"#d3d3d3",lightgreen:"#90ee90",lightgrey:"#d3d3d3",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightslategrey:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370db",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#db7093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",slategrey:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};class a extends HTMLElement{constructor(){super(),this.select="",this.options=[],this.icon="",this.panel="",this.buttons=[],this.focusableElements=null,this.focusableSelectors=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])']}connectedCallback(){if(this.select=this.querySelector("select"),!this.select)throw new Error("Simple color field requires a select element");this.options=[].slice.call(this.select.querySelectorAll("option")),this.select.classList.add("hidden"),this.options.forEach((e=>{let t=e.value,s="swatch";"none"===t&&(s+=" nocolor",t="transparent"),e.selected&&(s+=" active");const i=document.createElement("button");i.setAttribute("class",s),i.style.backgroundColor=t,i.setAttribute("type","button");const a="transparent"===t?this.textTransp:this.getColorName(t);i.innerHTML=Joomla.sanitizeHtml(`<span class="visually-hidden">$a}</span>`),this.buttons.push(i)}));const e=document.createElement("button");e.setAttribute("class","btn-close"),e.setAttribute("type","button"),e.innerHTML=Joomla.sanitizeHtml(this.textClose),this.buttons.push(e);let t=this.select.value,s="";"none"===t&&(s+=" nocolor",t="transparent"),this.icon=document.createElement("button"),s&&this.icon.setAttribute("class",s);const i=`simple-color-$Math.random().toString(36).substr(2,10)}`;this.icon.setAttribute("type","button"),this.icon.setAttribute("tabindex","0"),this.icon.style.backgroundColor=t,this.icon.innerHTML=Joomla.sanitizeHtml(`<span class="visually-hidden">$this.textSelect}</span>`),this.icon.id=i,this.select.insertAdjacentElement("beforebegin",this.icon),this.icon.addEventListener("click",this.show.bind(this)),this.panel=document.createElement("div"),this.panel.classList.add("simplecolors-panel"),this.panel.setAttribute("aria-labelledby",i),this.hide=this.hide.bind(this),this.colorSelect=this.colorSelect.bind(this),this.buttons.forEach((e=>{e.classList.contains("btn-close")?e.addEventListener("click",this.hide):e.addEventListener("click",this.colorSelect),this.panel.insertAdjacentElement("beforeend",e)})),this.appendChild(this.panel),this.focusableElements=[].slice.call(this.panel.querySelectorAll(this.focusableSelectors.join())),this.keys=this.keys.bind(this),this.hide=this.hide.bind(this),this.mousedown=this.mousedown.bind(this)}static get observedAttributes(){return["text-select","text-color","text-close","text-transparent"]}get textSelect(){return this.getAttribute("text-select")}get textColor(){return this.getAttribute("text-color")}get textClose(){return this.getAttribute("text-close")}get textTransp(){return this.getAttribute("text-transparent")}show(){document.addEventListener("mousedown",this.hide),this.addEventListener("keydown",this.keys),this.panel.addEventListener("mousedown",this.mousedown),this.panel.setAttribute("data-open","");const e=this.panel.querySelector("button");e&&e.focus()}hide(){document.removeEventListener("mousedown",this.hide,!1),this.removeEventListener("keydown",this.keys),this.panel.hasAttribute("data-open")&&this.panel.removeAttribute("data-open"),this.icon.focus()}colorSelect(e){let t="",s="",i="";e.target.classList.contains("nocolor")?(t="none",s="transparent",i="nocolor"):(t=this.rgb2hex(e.target.style.backgroundColor),s=t),this.buttons.forEach((e=>{e.classList.contains("active")&&e.classList.remove("active")})),e.target.classList.add("active"),this.icon.classList.remove("nocolor"),this.icon.setAttribute("class",i),this.icon.style.backgroundColor=s,this.select.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0})),this.hide(),this.options.forEach((e=>{e.selected&&e.removeAttribute("selected"),e.value===s&&e.setAttribute("selected","")}))}keys(e){if(e.keyCode===s&&this.hide(),e.keyCode===t){const t=this.focusableElements.indexOf(document.activeElement);!e.shiftKey||0!==t&&-1!==t||(this.focusableElements[this.focusableElements.length-1].focus(),e.preventDefault()),e.shiftKey||t!==this.focusableElements.length-1||(this.focusableElements[0].focus(),e.preventDefault())}}mousedown(e){e.stopPropagation(),e.preventDefault()}getColorName(e){let t=e;if(4===e.length){const s=e.split("");t=s[0]+s[1]+s[1]+s[2]+s[2]+s[3]+s[3]}for(const e in i)if(i.hasOwnProperty(e)&&t.toLowerCase()===i[e])return e;return`$this.textColor} $e.replace("#","").split("").join(", ")}`}rgb2hex(e){const t=e=>`0$parseInt(e,10).toString(16)}`.slice(-2),s=e.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);return`#$t(s[1])}$t(s[2])}$t(s[3])}`}}e.define("joomla-field-simple-color",a)})(customElements);