/** * @copyright (C) 2018 Open Source Matters, Inc. <https://www.joomla.org> * @license GNU General Public License version 2 or later; see LICENSE.txt */if(!Joomla)throw new Error("Joomla API is not properly initiated");const getExtension=n=>{const t=n.split(/[#]/);return t.length>1?t[1].split(/[?]/)[0].split(".").pop().trim():n.split(/[#?]/)[0].split(".").pop().trim()};class JoomlaFieldMedia extends HTMLElement{constructor(){super(),this.onSelected=this.onSelected.bind(this),this.show=this.show.bind(this),this.clearValue=this.clearValue.bind(this),this.modalClose=this.modalClose.bind(this),this.setValue=this.setValue.bind(this),this.updatePreview=this.updatePreview.bind(this),this.validateValue=this.validateValue.bind(this),this.markValid=this.markValid.bind(this),this.markInvalid=this.markInvalid.bind(this),this.mimeType=""}static get observedAttributes(){return["type","base-path","root-folder","url","modal-container","modal-width","modal-height","input","button-select","button-clear","button-save-selected","preview","preview-width","preview-height"]}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get basePath(){return this.getAttribute("base-path")}set basePath(t){this.setAttribute("base-path",t)}get rootFolder(){return this.getAttribute("root-folder")}set rootFolder(t){this.setAttribute("root-folder",t)}get url(){return this.getAttribute("url")}set url(t){this.setAttribute("url",t)}get modalContainer(){return this.getAttribute("modal-container")}set modalContainer(t){this.setAttribute("modal-container",t)}get input(){return this.getAttribute("input")}set input(t){this.setAttribute("input",t)}get buttonSelect(){return this.getAttribute("button-select")}set buttonSelect(t){this.setAttribute("button-select",t)}get buttonClear(){return this.getAttribute("button-clear")}set buttonClear(t){this.setAttribute("button-clear",t)}get buttonSaveSelected(){return this.getAttribute("button-save-selected")}set buttonSaveSelected(t){this.setAttribute("button-save-selected",t)}get modalWidth(){return parseInt(this.getAttribute("modal-width"),10)}set modalWidth(t){this.setAttribute("modal-width",t)}get modalHeight(){return parseInt(this.getAttribute("modal-height"),10)}set modalHeight(t){this.setAttribute("modal-height",t)}get previewWidth(){return parseInt(this.getAttribute("preview-width"),10)}set previewWidth(t){this.setAttribute("preview-width",t)}get previewHeight(){return parseInt(this.getAttribute("preview-height"),10)}set previewHeight(t){this.setAttribute("preview-height",t)}get preview(){return this.getAttribute("preview")}set preview(t){this.setAttribute("preview",t)}get previewContainer(){return this.getAttribute("preview-container")}connectedCallback(){if(this.button=this.querySelector(this.buttonSelect),this.inputElement=this.querySelector(this.input),this.buttonClearEl=this.querySelector(this.buttonClear),this.modalElement=this.querySelector(".joomla-modal"),this.buttonSaveSelectedElement=this.querySelector(this.buttonSaveSelected),this.previewElement=this.querySelector(".field-media-preview"),!this.button||!this.inputElement||!this.buttonClearEl||!this.modalElement||!this.buttonSaveSelectedElement)throw new Error("Misconfiguaration...");if(this.button.addEventListener("click",this.show),this.modalElement&&window.bootstrap&&window.bootstrap.Modal&&!window.bootstrap.Modal.getInstance(this.modalElement)&&Joomla.initialiseModal(this.modalElement,{isJoomla:!0}),this.buttonClearEl&&this.buttonClearEl.addEventListener("click",this.clearValue),this.supportedExtensions=Joomla.getOptions("media-picker",{}),!Object.keys(this.supportedExtensions).length)throw new Error("Joomla API is not properly initiated");this.inputElement.removeAttribute("readonly"),this.inputElement.addEventListener("change",this.validateValue),this.updatePreview()}disconnectedCallback(){this.button&&this.button.removeEventListener("click",this.show),this.buttonClearEl&&this.buttonClearEl.removeEventListener("click",this.clearValue),this.inputElement&&this.inputElement.removeEventListener("change",this.validateValue)}onSelected(t){return t.preventDefault(),t.stopPropagation(),this.modalClose(),!1}show(){this.modalElement.open(),Joomla.selectedMediaFile={},this.buttonSaveSelectedElement.addEventListener("click",this.onSelected)}async modalClose(){try{await Joomla.getMedia(Joomla.selectedMediaFile,this.inputElement,this)}catch{Joomla.renderMessages({error:[Joomla.Text._("JLIB_APPLICATION_ERROR_SERVER")]})}Joomla.selectedMediaFile={},Joomla.Modal.getCurrent().close()}setValue(t){this.inputElement.value=t,this.validatedUrl=t,this.mimeType=Joomla.selectedMediaFile.fileType,this.updatePreview(),this.inputElement.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0}))}async validateValue(t){let{value:e}=t.target;if(!(this.validatedUrl===e||e===""))if(/^(http(s)?:\/\/).+$/.test(e))try{fetch(e).then(r=>{r.status===200?(this.validatedUrl=e,this.markValid()):(this.validatedUrl=e,this.markInvalid())})}catch{this.validatedUrl=e,this.markInvalid()}else{/^\//.test(e)&&(e=e.substring(1));const s=e.split("#")[0].split("/"),i=s.slice(1);fetch(`${Joomla.getOptions("system.paths").rootFull}/${e}`).then(l=>l.blob()).then(l=>{if(l.type.includes("image")){const a=new Image;a.src=URL.createObjectURL(l),a.onload=()=>{this.inputElement.value=`${s[0]}/${i.join("/")}#joomlaImage://local-${s[0]}/${i.join("/")}?width=${a.width}&height=${a.height}`,this.validatedUrl=`${s[0]}/${i.join("/")}#joomlaImage://local-${s[0]}/${i.join("/")}?width=${a.width}&height=${a.height}`,this.markValid()}}else l.type.includes("audio")?(this.mimeType=l.type,this.inputElement.value=e,this.validatedUrl=e,this.markValid()):l.type.includes("video")?(this.mimeType=l.type,this.inputElement.value=e,this.validatedUrl=e,this.markValid()):l.type.includes("application/pdf")?(this.mimeType=l.type,this.inputElement.value=e,this.validatedUrl=e,this.markValid()):(this.validatedUrl=e,this.markInvalid())}).catch(()=>{this.setValue(e),this.validatedUrl=e,this.markInvalid()})}}markValid(){this.inputElement.removeAttribute("required"),this.inputElement.removeAttribute("pattern"),document.formvalidator&&document.formvalidator.validate(this.inputElement)}markInvalid(){this.inputElement.setAttribute("required",""),this.inputElement.setAttribute("pattern","/^(http://INVALID/).+$/"),document.formvalidator&&document.formvalidator.validate(this.inputElement)}clearValue(){this.setValue(""),this.validatedUrl="",this.inputElement.removeAttribute("required"),this.inputElement.removeAttribute("pattern"),document.formvalidator&&document.formvalidator.validate(this.inputElement)}updatePreview(){if(!(["true","static"].indexOf(this.preview)===-1||this.preview==="false"||!this.previewElement)&&this.preview){const{value:t}=this.inputElement,{supportedExtensions:e}=this;if(!t)this.buttonClearEl.style.display="none",this.previewElement.innerHTML=Joomla.sanitizeHtml('<span class="field-media-preview-icon"></span>');else{let r;this.buttonClearEl.style.display="",this.previewElement.innerHTML="";const s=getExtension(t).toLowerCase();e.images.includes(s)&&(r="images"),e.audios.includes(s)&&(r="audios"),e.videos.includes(s)&&(r="videos"),e.documents.includes(s)&&(r="documents");let i;const l={images:()=>{e.images.includes(s)&&(i=new Image,i.src=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,i.setAttribute("alt",""))},audios:()=>{e.audios.includes(s)&&(i=document.createElement("audio"),i.src=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,i.setAttribute("controls",""))},videos:()=>{if(e.videos.includes(s)){i=document.createElement("video");const a=document.createElement("source");a.src=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,a.type=this.mimeType,i.setAttribute("controls",""),i.setAttribute("width",this.previewWidth),i.setAttribute("height",this.previewHeight),i.appendChild(a)}},documents:()=>{e.documents.includes(s)&&(i=document.createElement("object"),i.data=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,i.type=this.mimeType,i.setAttribute("width",this.previewWidth),i.setAttribute("height",this.previewHeight))}};if(this.givenType&&["images","audios","videos","documents"].includes(this.givenType))l[this.givenType]();else if(r&&["images","audios","videos","documents"].includes(r))l[r]();else return;this.previewElement.style.width=this.previewWidth,this.previewElement.appendChild(i)}}}}customElements.define("joomla-field-media",JoomlaFieldMedia);