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