joomla-ui-custom-elements/dist/js/joomla-modal.min.js

Joomla UI components as custom elements

const e=9,t=27;customElements.define("joomla-modal",class extends HTMLElement{constructor(){super(),this.triggerBtn="",this.focusableElements=null,this.focusableSelectors=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],this.container=this.querySelector(".joomla-modal-dialog")}static get observedAttributes(){return["width","height","innerWidth","innerHeight","iframe"]}connectedCallback(){if(!this.id)throw new Error("`Joomla-modal` requires an id");if(this.title=this.getAttribute("title")||"Modal",this.setAttribute("role","dialog"),this.classList.add("fade"),this.iframe=this.getAttribute("iframe")||"",this.width=this.getAttribute("width")||"100%",this.height=this.getAttribute("height")||"600px",!this.container){const e=document.createElement("div");e.classList.add("joomla-modal-dialog"),e.setAttribute("role","document"),e.innerHTML=this.innerHTML,this.innerHTML="",this.appendChild(e),this.container=this.querySelector(".joomla-modal-dialog")}this.header=this.querySelector("header"),this.main=this.querySelector("section"),this.footer=this.querySelector("footer"),this.setAttribute("tabindex",-1);const e=`modal-title-${(new Date).getUTCMilliseconds()}`;if(this.setAttribute("aria-labelledby",e),!this.header){const t=document.createElement("h5");t.innerText=this.title,t.id=e;const i=document.createElement("button");i.setAttribute("aria-label","Close"),i.setAttribute("data-dismiss",""),i.innerHTML='<span aria-hidden="true">×</span>';const s=document.createElement("header");s.appendChild(t),s.appendChild(i),this.container.insertAdjacentElement("afterbegin",s)}this.header=this.container.querySelector("header"),this.body=this.container.querySelector("section"),this.footer=this.container.querySelector("footer"),this.triggerBtn=document.querySelector(`[data-href="#${this.id}"]`),this.triggerBtn&&this.triggerBtn.addEventListener("click",this.open.bind(this))}disconnectedCallback(){this.triggerBtn&&this.triggerBtn.removeEventListener("click",this.open)}open(){const e=document.createElement("div");if(e.classList.add("modal-backdrop","fade"),e.classList.add("modal-backdrop","show"),document.body.appendChild(e),this.removeAttribute("aria-hidden"),this.body&&(this.iframeEl=this.main.querySelector("iframe"),this.iframe)){this.iframeEl&&this.iframeEl.parentNode.remove(this.iframeEl);const e=document.createElement("iframe");e.width=this.width,e.height=this.height,e.src=this.iframe,e.setAttribute("frameborder",0),this.body.appendChild(e),this.iframeEl=this.main.querySelector("iframe")}this.adjustDimensions(),this.scrollTop=0,this.classList.add("show"),this.focusableElements=[].slice.call(this.querySelectorAll(this.focusableSelectors.join())),this.focusableElements.length?this.focusableElements[0].focus():this.header.querySelector("button").focus(),this.evKeypress=this.keyPress.bind(this),this.evClose=this.close.bind(this),this.evDocumentClose=this.documentClose.bind(this),this.addEventListener("keydown",this.evKeypress),document.addEventListener("click",this.evDocumentClose);[].slice.call(this.querySelectorAll("[data-dismiss]")).forEach((e=>{e.addEventListener("click",this.evClose)}))}close(){this.removeEventListener("keydown",this.evKeypress),document.removeEventListener("click",this.evDocumentClose);[].slice.call(this.querySelectorAll("[data-dismiss]")).forEach((e=>{e.removeEventListener("click",this.evClose)}));const e=document.querySelector(".modal-backdrop");e&&document.body.removeChild(e),this.setAttribute("aria-hidden","true"),this.classList.remove("show"),this.main.innerHTML="",this.triggerBtn.focus()}documentClose(e){this.findAncestorByClass(e.target,"joomla-modal-dialog")||e.target===this.triggerBtn||this.close()}keyPress(i){if(i.keyCode===t&&this.close(),i.keyCode===e){const e=this.focusableElements.indexOf(document.activeElement);!i.shiftKey||0!==e&&-1!==e||(this.focusableElements[this.focusableElements.length-1].focus(),i.preventDefault()),i.shiftKey||e!==this.focusableElements.length-1||(this.focusableElements[0].focus(),i.preventDefault())}}adjustDimensions(){let e=this.offsetHeight;e+=parseInt(window.getComputedStyle(this).getPropertyValue("margin-top"),10),e+=parseInt(window.getComputedStyle(this).getPropertyValue("margin-bottom"),10);const t=this.body.getBoundingClientRect.height;let i=this.body.offsetHeight;i+=parseInt(window.getComputedStyle(this.body).getPropertyValue("margin-top"),10),i+=parseInt(window.getComputedStyle(this.body).getPropertyValue("margin-bottom"),10);let s=this.header.offsetHeight;s+=parseInt(window.getComputedStyle(this.header).getPropertyValue("margin-top"),10),s+=parseInt(window.getComputedStyle(this.header).getPropertyValue("margin-bottom"),10);let o=this.footer.offsetHeight;o+=parseInt(window.getComputedStyle(this.footer).getPropertyValue("margin-top"),10),o+=parseInt(window.getComputedStyle(this.footer).getPropertyValue("margin-bottom"),10);const r=this.offsetTop,n=window.height-2*r,a=i-t,l=n-(s+o+a);if(this.iframeEl){this.iframeEl.getBoundingClientRect().height>l&&(this.container.style.maxHeight=l,this.container.style.overflowY="auto",this.iframeEl.style.maxHeight=l-a)}else e>n&&(this.container.style.maxHeight=l,this.container.style.overflowY="auto")}findAncestorByClass(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e}});