[Summary view] [Print] [Text view]

   1  if(!Joomla)throw new Error("Joomla API is not properly initiated");Joomla.selectedMediaFile={};const supportedExtensions=Joomla.getOptions("media-picker",{});if(!Object.keys(supportedExtensions).length)throw new Error("No supported extensions provided");document.addEventListener("onMediaFileSelected",(async e=>{Joomla.selectedMediaFile=e.detail;const t=Joomla.Modal.getCurrent(),i=t.querySelector(".modal-body");if(!i)return;const l=i.querySelector("joomla-field-mediamore");if(l&&l.parentNode.removeChild(l),i.closest("joomla-field-media"))return;const{images:a,audios:s,videos:o,documents:n}=supportedExtensions;if(Joomla.selectedMediaFile.path){let e;a.includes(Joomla.selectedMediaFile.extension.toLowerCase())?e="images":s.includes(Joomla.selectedMediaFile.extension.toLowerCase())?e="audios":o.includes(Joomla.selectedMediaFile.extension.toLowerCase())?e="videos":n.includes(Joomla.selectedMediaFile.extension.toLowerCase())&&(e="documents"),e&&i.insertAdjacentHTML("afterbegin",`<joomla-field-mediamore\n  parent-id="$t.id}"\n  type="$e}"\n  summary-label="$Joomla.Text._("JFIELD_MEDIA_SUMMARY_LABEL")}"\n  lazy-label="$Joomla.Text._("JFIELD_MEDIA_LAZY_LABEL")}"\n  alt-label="$Joomla.Text._("JFIELD_MEDIA_ALT_LABEL")}"\n  alt-check-label="$Joomla.Text._("JFIELD_MEDIA_ALT_CHECK_LABEL")}"\n  alt-check-desc-label="$Joomla.Text._("JFIELD_MEDIA_ALT_CHECK_DESC_LABEL")}"\n  classes-label="$Joomla.Text._("JFIELD_MEDIA_CLASS_LABEL")}"\n  figure-classes-label="$Joomla.Text._("JFIELD_MEDIA_FIGURE_CLASS_LABEL")}"\n  figure-caption-label="$Joomla.Text._("JFIELD_MEDIA_FIGURE_CAPTION_LABEL")}"\n  embed-check-label="$Joomla.Text._("JFIELD_MEDIA_EMBED_CHECK_LABEL")}"\n  embed-check-desc-label="$Joomla.Text._("JFIELD_MEDIA_EMBED_CHECK_DESC_LABEL")}"\n  download-check-label="$Joomla.Text._("JFIELD_MEDIA_DOWNLOAD_CHECK_LABEL")}"\n  download-check-desc-label="$Joomla.Text._("JFIELD_MEDIA_DOWNLOAD_CHECK_DESC_LABEL")}"\n  title-label="$Joomla.Text._("JFIELD_MEDIA_TITLE_LABEL")}"\n  width-label="$Joomla.Text._("JFIELD_MEDIA_WIDTH_LABEL")}"\n  height-label="$Joomla.Text._("JFIELD_MEDIA_HEIGHT_LABEL")}"\n></joomla-field-mediamore>\n`)}}));const isElement=e=>"object"==typeof HTMLElement?e instanceof HTMLElement:e&&"object"==typeof e&&1===e.nodeType&&"string"==typeof e.nodeName,getImageSize=e=>new Promise(((t,i)=>{const l=new Image;l.src=e,l.onload=()=>{Joomla.selectedMediaFile.width=l.width,Joomla.selectedMediaFile.height=l.height,t(!0)},l.onerror=()=>{i(!1)}})),insertAsImage=async(e,t,i)=>{if(e.url){const{rootFull:t}=Joomla.getOptions("system.paths"),i=e.url.split(t);i.length>1?(Joomla.selectedMediaFile.url=i[1],e.thumb_path?Joomla.selectedMediaFile.thumb=e.thumb_path:Joomla.selectedMediaFile.thumb=!1):e.thumb_path&&(Joomla.selectedMediaFile.url=e.url,Joomla.selectedMediaFile.thumb=e.thumb_path)}else Joomla.selectedMediaFile.url=!1;if(Joomla.selectedMediaFile.url){let l,a="",s="",o="",n="",d="",c="",r="";if(isElement(t)){if(0===Joomla.selectedMediaFile.width||0===Joomla.selectedMediaFile.height)try{await getImageSize(Joomla.selectedMediaFile.url)}catch(e){Joomla.selectedMediaFile.height=0,Joomla.selectedMediaFile.width=0}i.markValid(),i.setValue(`$Joomla.selectedMediaFile.url}#joomlaImage://${e.path.replace(":","")}?width=${Joomla.selectedMediaFile.width}&height=${Joomla.selectedMediaFile.height}`)}else{if(l=i.closest(".modal-content").querySelector("joomla-field-mediamore"),l&&("true"===l.getAttribute("alt-check")&&(o=' alt=""'),s=l.getAttribute("alt-value")?` alt="${l.getAttribute("alt-value")}"`:o,n=l.getAttribute("img-classes")?` class="${l.getAttribute("img-classes")}"`:"",d=l.getAttribute("fig-classes")?` class="image ${l.getAttribute("fig-classes")}"`:' class="image"',c=l.getAttribute("fig-caption")?`${l.getAttribute("fig-caption")}`:"","true"===l.getAttribute("is-lazy")&&(a=` loading="lazy" width="${Joomla.selectedMediaFile.width}" height="${Joomla.selectedMediaFile.height}"`,0===Joomla.selectedMediaFile.width||0===Joomla.selectedMediaFile.height)))try{await getImageSize(Joomla.selectedMediaFile.url),a=` loading="lazy" width="${Joomla.selectedMediaFile.width}" height="${Joomla.selectedMediaFile.height}"`}catch(e){a=""}r=c?`<figure${d}><img src="${Joomla.selectedMediaFile.url}"${n}${a}${s} data-path="${Joomla.selectedMediaFile.path}"/><figcaption>${c}</figcaption></figure>`:`<img src="${Joomla.selectedMediaFile.url}"${n}${a}${s} data-path="${Joomla.selectedMediaFile.path}"/>`,l&&l.parentNode.removeChild(l),Joomla.editors.instances[t].replaceSelection(r)}}},insertAsOther=(e,t,i,l)=>{if(e.url){const{rootFull:t}=Joomla.getOptions("system.paths"),i=e.url.split(t);i.length>1?Joomla.selectedMediaFile.url=i[1]:Joomla.selectedMediaFile.url=e.url}else Joomla.selectedMediaFile.url=!1;let a;if(Joomla.selectedMediaFile.url)if(isElement(t))i.markValid(),i.givenType=l,i.setValue(Joomla.selectedMediaFile.url);else{let e;if(a=i.closest(".modal-content").querySelector("joomla-field-mediamore"),a){const i=a.getAttribute("embed-it");if(i&&"true"===i){if("audios"===l&&(e=`<audio controls src="${Joomla.selectedMediaFile.url}"></audio>`),"documents"===l){const t=a.getAttribute("title");e=`<object type="application/${Joomla.selectedMediaFile.extension}" data="${Joomla.selectedMediaFile.url}" ${t?`title="${t}"`:""} width="${a.getAttribute("width")}" height="${a.getAttribute("height")}">\n  ${Joomla.Text._("JFIELD_MEDIA_UNSUPPORTED").replace("{tag}",`<a download href="${Joomla.selectedMediaFile.url}">`).replace(/{extension}/g,Joomla.selectedMediaFile.extension)}\n</object>`}"videos"===l&&(e=`<video controls width="${a.getAttribute("width")}" height="${a.getAttribute("height")}">\n  <source src="${Joomla.selectedMediaFile.url}" type="${Joomla.selectedMediaFile.fileType}">\n</video>`)}else if(""!==Joomla.editors.instances[t].getSelection())e=`<a download href="${Joomla.selectedMediaFile.url}">${Joomla.editors.instances[t].getSelection()}</a>`;else{const t=/([\w-]+)\./.exec(Joomla.selectedMediaFile.url);e=`<a download href="${Joomla.selectedMediaFile.url}">${Joomla.Text._("JFIELD_MEDIA_DOWNLOAD_FILE").replace("{file}",t[1])}</a>`}}a&&a.parentNode.removeChild(a),Joomla.editors.instances[t].replaceSelection(e)}},execTransform=async(e,t,i)=>{if(!0===e.success){const l=e.data[0],{images:a,audios:s,videos:o,documents:n}=supportedExtensions;return Joomla.selectedMediaFile.extension&&a.includes(l.extension.toLowerCase())?insertAsImage(l,t,i):Joomla.selectedMediaFile.extension&&s.includes(l.extension.toLowerCase())?insertAsOther(l,t,i,"audios"):Joomla.selectedMediaFile.extension&&n.includes(l.extension.toLowerCase())?insertAsOther(l,t,i,"documents"):Joomla.selectedMediaFile.extension&&o.includes(l.extension.toLowerCase())?insertAsOther(l,t,i,"videos"):""}return""};Joomla.getMedia=(e,t,i)=>new Promise(((l,a)=>{if(!e||"object"==typeof e&&(!e.path||""===e.path))return Joomla.selectedMediaFile={},void l({resp:{success:!1}});const s=`${Joomla.getOptions("system.paths").baseFull}index.php?option=com_media&task=api.files&url=true&path=${e.path}&mediatypes=0,1,2,3&${Joomla.getOptions("csrf.token")}=1&format=json`;fetch(s,{method:"GET",headers:{"Content-Type":"application/json"}}).then((e=>e.json())).then((async e=>l(await execTransform(e,t,i)))).catch((e=>a(e)))})),Joomla.getImage=Joomla.getMedia;class JoomlaFieldMediaOptions extends HTMLElement{get type(){return this.getAttribute("type")}get parentId(){return this.getAttribute("parent-id")}get lazytext(){return this.getAttribute("lazy-label")}get alttext(){return this.getAttribute("alt-label")}get altchecktext(){return this.getAttribute("alt-check-label")}get altcheckdesctext(){return this.getAttribute("alt-check-desc-label")}get embedchecktext(){return this.getAttribute("embed-check-label")}get embedcheckdesctext(){return this.getAttribute("embed-check-desc-label")}get downloadchecktext(){return this.getAttribute("download-check-label")}get downloadcheckdesctext(){return this.getAttribute("download-check-desc-label")}get classestext(){return this.getAttribute("classes-label")}get figclassestext(){return this.getAttribute("figure-classes-label")}get figcaptiontext(){return this.getAttribute("figure-caption-label")}get summarytext(){return this.getAttribute("summary-label")}get widthtext(){return this.getAttribute("width-label")}get heighttext(){return this.getAttribute("height-label")}get titletext(){return this.getAttribute("title-label")}connectedCallback(){"images"===this.type?(this.innerHTML=`<details open>\n<summary>${this.summarytext}</summary>\n<div class="">\n  <div class="form-group">\n    <div class="input-group">\n      <label class="input-group-text" for="${this.parentId}-alt">${this.alttext}</label>\n      <input class="form-control" type="text" id="${this.parentId}-alt" data-is="alt-value" />\n    </div>\n  </div>\n  <div class="form-group">\n    <div class="form-check">\n      <input class="form-check-input" type="checkbox" id="${this.parentId}-alt-check">\n      <label class="form-check-label" for="${this.parentId}-alt-check">${this.altchecktext}</label>\n      <div><small class="form-text">${this.altcheckdesctext}</small></div>\n    </div>\n  </div>\n  <div class="form-group">\n    <div class="form-check">\n      <input class="form-check-input" type="checkbox" id="${this.parentId}-lazy" checked>\n      <label class="form-check-label" for="${this.parentId}-lazy">${this.lazytext}</label>\n    </div>\n  </div>\n  <div class="form-group">\n    <div class="input-group">\n      <label class="input-group-text" for="${this.parentId}-classes">${this.classestext}</label>\n      <input class="form-control" type="text" id="${this.parentId}-classes" data-is="img-classes"/>\n    </div>\n  </div>\n  <div class="form-group">\n    <div class="input-group">\n      <label class="input-group-text" for="${this.parentId}-figclasses">${this.figclassestext}</label>\n      <input class="form-control" type="text" id="${this.parentId}-figclasses" data-is="fig-classes"/>\n    </div>\n  </div>\n  <div class="form-group">\n    <div class="input-group">\n      <label class="input-group-text" for="${this.parentId}-figcaption">${this.figcaptiontext}</label>\n      <input class="form-control" type="text" id="${this.parentId}-figcaption" data-is="fig-caption"/>\n    </div>\n  </div>\n</div>\n</details>`,this.lazyInputFn=this.lazyInputFn.bind(this),this.altCheckFn=this.altCheckFn.bind(this),this.inputFn=this.inputFn.bind(this),this.lazyInput=this.querySelector(`#${this.parentId}-lazy`),this.lazyInput.addEventListener("change",this.lazyInputFn),this.altCheck=this.querySelector(`#${this.parentId}-alt-check`),this.altCheck.addEventListener("input",this.altCheckFn),[].slice.call(this.querySelectorAll('input[type="text"]')).map((e=>{e.addEventListener("input",this.inputFn);const{is:t}=e.dataset;return t&&this.setAttribute(t,e.value.replace(/"/g,"&quot;")),e})),this.setAttribute("is-lazy",!!this.lazyInput.checked),this.setAttribute("alt-check",!1)):["audios","videos","documents"].includes(this.type)&&(this.innerHTML=`<details open>\n<summary>${this.summarytext}</summary>\n<div class="">\n  <div class="form-group">\n    <div class="form-check">\n      <input class="form-check-input radio" type="radio" name="flexRadioDefault" id="${this.parentId}-embed-check-2" value="0" checked>\n      <label class="form-check-label" for="${this.parentId}-embed-check-2">\n        ${this.downloadchecktext}\n        <div><small class="form-text">${this.downloadcheckdesctext}</small></div>\n      </label>\n    </div>\n    <div class="form-check">\n      <input class="form-check-input radio" type="radio" name="flexRadioDefault" id="${this.parentId}-embed-check-1" value="1">\n      <label class="form-check-label" for="${this.parentId}-embed-check-1">\n        ${this.embedchecktext}\n        <div><small class="form-text">${this.embedcheckdesctext}</small></div>\n      </label>\n    </div>\n  </div>\n  <div class="toggable-parts" style="display: none">\n    <div style="display: ${"audios"===this.type?"none":"block"}">\n      <div class="form-group">\n        <div class="input-group">\n          <label class="input-group-text" for="${this.parentId}-width">${this.widthtext}</label>\n          <input class="form-control" type="text" id="${this.parentId}-width" value="800" data-is="width"/>\n        </div>\n      </div>\n      <div class="form-group">\n        <div class="input-group">\n          <label class="input-group-text" for="${this.parentId}-height">${this.heighttext}</label>\n          <input class="form-control" type="text" id="${this.parentId}-height" value="600" data-is="height"/>\n        </div>\n      </div>\n      <div style="display: ${"document"===this.type?"block":"none"}">\n        <div class="form-group">\n          <div class="input-group">\n            <label class="input-group-text" for="${this.parentId}-title">${this.titletext}</label>\n            <input class="form-control" type="text" id="${this.parentId}-title" value="" data-is="title"/>\n          </div>\n        </div>\n    </div>\n  </div>\n</div>\n</details>`,this.embedInputFn=this.embedInputFn.bind(this),this.inputFn=this.inputFn.bind(this),[].slice.call(this.querySelectorAll(".form-check-input.radio")).map((e=>e.addEventListener("input",this.embedInputFn))),this.setAttribute("embed-it",!1),[].slice.call(this.querySelectorAll('input[type="text"]')).map((e=>{e.addEventListener("input",this.inputFn);const{is:t}=e.dataset;return t&&this.setAttribute(t,e.value.replace(/"/g,"&quot;")),e})))}disconnectedCallback(){"image"===this.type&&(this.lazyInput.removeEventListener("input",this.lazyInputFn),this.altInput.removeEventListener("input",this.inputFn),this.altCheck.removeEventListener("input",this.altCheckFn)),["audio","video","document"].includes(this.type)&&([].slice.call(this.querySelectorAll(".form-check-input.radio")).map((e=>e.removeEventListener("input",this.embedInputFn))),[].slice.call(this.querySelectorAll('input[type="text"]')).map((e=>e.removeEventListener("input",this.embedInputFn)))),this.innerHTML=""}lazyInputFn(e){this.setAttribute("is-lazy",!!e.target.checked)}altCheckFn(e){this.setAttribute("alt-check",!!e.target.checked)}inputFn(e){const{is:t}=e.target.dataset;t&&this.setAttribute(t,e.target.value.replace(/"/g,"&quot;"))}embedInputFn(e){const{value:t}=e.target;this.setAttribute("embed-it","0"!==t);const i=this.querySelector(".toggable-parts");i&&("block"!==i.style.display?i.style.display="block":i.style.display="none")}}customElements.define("joomla-field-mediamore",JoomlaFieldMediaOptions);