[Summary view] [Print] [Text view]

   1  (t=>{const e=/^#([a-z0-9]{1,2})([a-z0-9]{1,2})([a-z0-9]{1,2})$/i,s=/^rgba?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)(?:[\D]+([0-9](?:.\d+)?))?\)$/i,a=/^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$/i,i=/^(([0-1])|(0\\.[0-9]+)|([0-9]{1,2})|(100))$/,h=/^[0-9]{1,3}$/;class r{constructor(t){this.messageSpan=t.querySelector(".form-control-feedback"),this.mainInput=t.querySelector(".color-input"),this.input=t.querySelector("#slider-input"),this.sliders=t.querySelectorAll(".color-slider"),this.hueSlider=t.querySelector("#hue-slider"),this.saturationSlider=t.querySelector("#saturation-slider"),this.lightSlider=t.querySelector("#light-slider"),this.alphaSlider=t.querySelector("#alpha-slider"),this.color=t.dataset.color||"",this.default=t.dataset.default||"",this.format=this.input.dataset.format||"hex",this.saveFormat=this.mainInput.dataset.format||"hex",this.preview="true"===t.dataset.preview,this.setAlpha="hsla"===this.format||"rgba"===this.format,this.hue=360,this.saturation=1,this.light=1,this.alpha=1,this.defaultHsl=[this.hue,this.saturation,this.light,this.alpha],this.setInitValue(),this.setBackground(),this.preview?this.setInputPattern():this.input.classList.add("hidden"),this.mainInput.classList.add("hidden"),Array.prototype.forEach.call(this.sliders,(t=>{t.addEventListener("change",(()=>this.updateValue(t)))})),this.input.addEventListener("change",(()=>this.changeInput(this.input)))}updateValue(t){this.showError("");const e=this.getSliderValueAsHsl(t.value,t.dataset.type),s=this.hslToRgb(e);[this.hue,this.saturation,this.light,this.alpha]=e,this.input.style.border=`2px solid $this.getRgbString(s)}`,this.setSliderValues(e,t.dataset.type),this.setInputValue(e),this.setBackground(t)}changeInput(t){let e=[this.hue,this.saturation,this.light,this.alpha];if(!t.value)return this.mainInput.value="",void this.showError("");if(this.checkValue(t.value)){switch(this.showError(""),this.format){case"hue":e[0]=t.value,this.hue=t.value;break;case"saturation":e[1]=t.value,this.saturation=t.value;break;case"light":e[2]=t.value,this.light=t.value;break;case"alpha":e[3]=t.value,this.alpha=t.value;break;default:e=this.getHsl(t.value)}this.setSliderValues(e),this.setInputValue(e,!0)}else this.showError("JFIELD_COLOR_ERROR_WRONG_FORMAT"),this.setInputValue(this.defaultHsl)}checkValue(t,r){switch(r||this.format){case"hue":return t<=360&&h.test(t);case"saturation":case"light":case"alpha":return i.test(t);case"hsl":case"hsla":return a.test(t);case"hex":return e.test(t);case"rgb":case"rgba":return s.test(t);default:return!1}}setInputPattern(){let t;switch(this.format){case"hue":t=h.source.slice(1,-1);break;case"saturation":case"light":case"alpha":t=i.source.slice(1,-1);break;case"hsl":case"hsla":t=a.source.slice(1,-1);break;case"rgb":t=s.source.slice(1,-1);break;case"hex":default:t=e.source.slice(1,-1)}this.input.setAttribute("pattern",t)}setBackground(t){Array.prototype.forEach.call(this.sliders,(e=>{if(t===e)return;let s=[],a=100;if(s.push(this.getSliderValueAsRgb(0,e.dataset.type)),"hue"===e.dataset.type){const t=Math.floor(18);a=360;for(let a=0;a<=360;a+=t)s.push(this.getSliderValueAsRgb(a,e.dataset.type))}else for(let t=0;t<=100;t+=10)s.push(this.getSliderValueAsRgb(t,e.dataset.type));s.push(this.getSliderValueAsRgb(a,e.dataset.type)),s=s.map((t=>this.getRgbString(t))),e.style.background=`linear-gradient(90deg, $s.join(",")})`,e.style.webkitAppearance="none"}))}setInitValue(){const t=window.getComputedStyle(this.input).getPropertyValue(this.default);if(this.default=t||this.default,""===this.color||void 0===this.color)return this.input.value="",void(this.mainInput.value="");const e=this.checkValue(this.color,this.saveFormat)?this.color:this.default;if(!e)return void this.showError("JFIELD_COLOR_ERROR_NO_COLOUR");let s=[];/^[0-9]+$/.test(e)?(s=this.default&&this.getHsl(this.default),"hue"===this.format&&(s[0]=e),"saturation"===this.format&&(s[1]=e>1?e/100:e),"light"===this.format&&(s[2]=e>1?e/100:e),"alpha"===this.format&&(s[3]=e>1?e/100:e)):s=this.getHsl(e),[this.hue,this.saturation,this.light]=s,this.alpha=s[4]||this.alpha,this.defaultHsl=this.default?this.getHsl(this.default):s,this.setSliderValues(s),this.setInputValue(s),this.input.style.border=`2px solid $this.getRgbString(this.hslToRgb(s))}`}showError(t){this.messageSpan.innerText=t?Joomla.Text._(t):""}getHsl(t){let i,h=[];if(Array.isArray(t))h=t;else if(e.test(t))h=this.hexToHsl(t);else if(s.test(t))h=this.rgbToHsl(t);else{if(!a.test(t))return this.showError("JFIELD_COLOR_ERROR_CONVERT_HSL"),this.defaultHsl;{const e=t.match(a);h=[e[1],e[2],e[3],e[4]]}}for(i=1;i<h.length;i+=1)h[i]=h[i]>1?h[i]/100:h[i];return h}getSliderValueAsHsl(t,e){let s=this.hue,a=this.saturation,i=this.light,h=this.alpha;switch(e){case"alpha":h=t;break;case"saturation":a=t;break;case"light":i=t;break;case"hue":default:s=t}return i>1&&(i/=100),a>1&&(a/=100),h>1&&(h/=100),[s,a,i,h]}getSliderValueAsRgb(t,e){return this.hslToRgb(this.getSliderValueAsHsl(t,e))}setSliderValues([t,e,s,a],i){this.hueSlider&&"hue"!==i&&(this.hueSlider.value=Math.round(t)),this.saturationSlider&&"saturation"!==i&&(this.saturationSlider.value=Math.round(100*e)),this.lightSlider&&"light"!==i&&(this.lightSlider.value=Math.round(100*s)),a&&this.alphaSlider&&"alpha"!==i&&(this.alphaSlider.value=Math.round(100*a))}setInputValue(t,e){const s=[this.mainInput];e||s.push(this.input),s.forEach((e=>{let s;switch(e.dataset.format){case"hsl":s=this.getHslString(t);break;case"hsla":s=this.getHslString(t,!0);break;case"rgb":s=this.getRgbString(this.hslToRgb(t));break;case"rgba":s=this.getRgbString(this.hslToRgb(t),!0);break;case"hex":s=this.rgbToHex(this.hslToRgb(t));break;case"alpha":s=Math.round(100*t[3]);break;case"saturation":s=Math.round(100*t[1]);break;case"light":s=Math.round(100*t[2]);break;case"hue":default:s=Math.round(t[0])}e.value=s}))}getRgbString([t,e,s,a],i){if(i||this.setAlpha){return`rgba($t}, $e}, $s}, $void 0===a?this.alpha:a})`}return`rgb($t}, $e}, $s})`}getHslString(t,e){let[s,a,i,h]=t;return a*=100,i*=100,[s,a,i]=[s,a,i].map((t=>Math.round(t))),e||this.setAlpha?(h=h||this.alpha,`hsla($s}, $a}%, $i}%, $h})`):`hsl($s}, $a}%, $i}%)`}rgbToHex(t){let e=t[0].toString(16).toUpperCase(),s=t[1].toString(16).toUpperCase(),a=t[2].toString(16).toUpperCase();return e=1===e.length?`$e}$e}`:e,s=1===s.length?`$s}$s}`:s,a=1===a.length?`$a}$a}`:a,`#$e}$s}$a}`}rgbToHsl(t){let e=t;if("string"==typeof t){const a=t.match(s);e=[a[1],a[2],a[3],a[4]]}const[a,i,h]=e.map((t=>t>1?t/255:t)),r=Math.max(a,i,h),l=Math.min(a,i,h),u=(r+l)/2,o=r-l;let n=0,c=0,d=e[3]||t[3]||this.alpha;if(r!==l)switch(c=0===r?r:1===l?l:(r-u)/Math.min(u,1-u),r){case a:n=60*(i-h)/o;break;case i:n=60*(2+(h-a)/o);break;case h:default:n=60*(4+(a-i)/o)}return n=n<0?n+360:n,d=d>1?d/100:d,[n,c,u,d]}hexToHsl(t){const s=t.match(e),a=s[1],i=s[2],h=s[3],r=[parseInt(a,16),parseInt(i,16),parseInt(h,16)];return this.rgbToHsl(r)}hslToRgb([t,e,s,a]){let i=1,h=1,r=1;const l=e>1?e/100:e,u=s>1?s/100:s,o=a>1?a/100:a;if(t<0||t>360||l<0||l>1||u<0||u>1)return this.showError("JFIELD_COLOR_ERROR_CONVERT_HSL"),this.hslToRgb(this.defaultHsl);const n=(1-Math.abs(2*u-1))*l,c=t/60,d=n*(1-Math.abs(c%2-1)),g=u-n/2;if(t>=0&&t<60)[i,h,r]=[n,d,0];else if(t>=60&&t<120)[i,h,r]=[d,n,0];else if(t>=120&&t<180)[i,h,r]=[0,n,d];else if(t>=180&&t<240)[i,h,r]=[0,d,n];else if(t>=240&&t<300)[i,h,r]=[d,0,n];else{if(!(t>=300&&t<=360))return this.showError("JFIELD_COLOR_ERROR_CONVERT_HUE"),this.hslToRgb(this.defaultHsl);[i,h,r]=[n,0,d]}const p=[i,h,r].map((t=>Math.round(255*(t+g))));return p.push(o),p}}t.addEventListener("DOMContentLoaded",(()=>{const e=t.querySelectorAll(".color-slider-wrapper");e&&Array.prototype.forEach.call(e,(t=>{new r(t)}))}))})(document);