[Summary view] [Print] [Text view]

   1  if(!Joomla)throw new Error("Joomla API is not properly initiated");const getExtension=t=>{const e=t.split(/[#]/);return e.length>1?e[1].split(/[?]/)[0].split(".").pop().trim():t.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)}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.updatePreview(),this.inputElement.removeAttribute("readonly"),this.inputElement.addEventListener("change",this.validateValue)}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(t){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.updatePreview(),this.inputElement.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0}))}validateValue(t){let{value:e}=t.target;if(this.validatedUrl!==e&&""!==e)if(/^(http(s)?:\/\/).+$/.test(e))try{fetch(e).then((t=>{200===t.status?(this.validatedUrl=e,this.markValid()):(this.validatedUrl=e,this.markInvalid())}))}catch(t){this.validatedUrl=e,this.markInvalid()}else{/^\//.test(e)&&(e=e.substring(1));const t=e.split("#")[0].split("/"),i=t.slice(1);fetch(`$Joomla.getOptions("system.paths").rootFull}/$e}`).then((t=>t.blob())).then((s=>{if(s.type.includes("image")){const e=new Image;e.src=URL.createObjectURL(s),e.onload=()=>{this.inputElement.value=`$t[0]}/$i.join("/")}#joomlaImage://local-$t[0]}/$i.join("/")}?width=$e.width}&height=$e.height}`,this.validatedUrl=`$t[0]}/$i.join("/")}#joomlaImage://local-${t[0]}/${i.join("/")}?width=${e.width}&height=${e.height}`,this.markValid()}}else s.type.includes("audio")||s.type.includes("video")||s.type.includes("application/pdf")?(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(-1!==["true","static"].indexOf(this.preview)&&"false"!==this.preview&&this.previewElement&&this.preview){const{value:t}=this.inputElement,{supportedExtensions:e}=this;if(t){let i;this.buttonClearEl.style.display="",this.previewElement.innerHTML="";const s=getExtension(t);let l;e.images.includes(s)&&(i="images"),e.audios.includes(s)&&(i="audios"),e.videos.includes(s)&&(i="videos"),e.documents.includes(s)&&(i="documents");const a={images:()=>{e.images.includes(s)&&(l=new Image,l.src=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,l.setAttribute("alt",""))},audios:()=>{e.audios.includes(s)&&(l=document.createElement("audio"),l.src=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,l.setAttribute("controls",""))},videos:()=>{if(e.videos.includes(s)){l=document.createElement("video");const e=document.createElement("source");e.src=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,e.type=`video/${s}`,l.setAttribute("controls",""),l.setAttribute("width",this.previewWidth),l.setAttribute("height",this.previewHeight),l.appendChild(e)}},documents:()=>{e.documents.includes(s)&&(l=document.createElement("object"),l.data=/http/.test(t)?t:Joomla.getOptions("system.paths").rootFull+t,l.type=`application/${s}`,l.setAttribute("width",this.previewWidth),l.setAttribute("height",this.previewHeight))}};if(this.givenType&&["images","audios","videos","documents"].includes(this.givenType))a[this.givenType]();else{if(!i||!["images","audios","videos","documents"].includes(i))return;a[i]()}this.previewElement.style.width=this.previewWidth,this.previewElement.appendChild(l)}else this.buttonClearEl.style.display="none",this.previewElement.innerHTML=Joomla.sanitizeHtml('<span class="field-media-preview-icon"></span>')}}}customElements.define("joomla-field-media",JoomlaFieldMedia);