joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
2 lines (1 loc) • 8.34 kB
JavaScript
function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(t)}function t(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,i(o.key),o)}}function i(t){var i=function(t,i){if("object"!=e(t)||!t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,i||"default");if("object"!=e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===i?String:Number)(t)}(t,"string");return"symbol"==e(i)?i:i+""}function r(t,i,r){return i=a(i),function(t,i){if(i&&("object"==e(i)||"function"==typeof i))return i;if(void 0!==i)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(t,n()?Reflect.construct(i,r||[],a(t).constructor):i.apply(t,r))}function o(e){var t="function"==typeof Map?new Map:void 0;return o=function(e){if(null===e||!function(e){try{return-1!==Function.toString.call(e).indexOf("[native code]")}catch(t){return"function"==typeof e}}(e))return e;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,i)}function i(){return function(e,t,i){if(n())return Reflect.construct.apply(null,arguments);var r=[null];r.push.apply(r,t);var o=new(e.bind.apply(e,r));return i&&s(o,i.prototype),o}(e,arguments,a(this).constructor)}return i.prototype=Object.create(e.prototype,{constructor:{value:i,enumerable:!1,writable:!0,configurable:!0}}),s(i,e)},o(e)}function n(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(n=function(){return!!e})()}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}function a(e){return a=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},a(e)}var l=9,c=27;customElements.define("joomla-modal",function(){function e(){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),(t=r(this,e)).triggerBtn="",t.focusableElements=null,t.focusableSelectors=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],t.container=t.querySelector(".joomla-modal-dialog"),t}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&s(e,t)}(e,o(HTMLElement)),i=e,n=[{key:"connectedCallback",value:function(){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){var 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);var t="modal-title-".concat((new Date).getUTCMilliseconds());if(this.setAttribute("aria-labelledby",t),!this.header){var i=document.createElement("h5");i.innerText=this.title,i.id=t;var r=document.createElement("button");r.setAttribute("aria-label","Close"),r.setAttribute("data-dismiss",""),r.innerHTML='<span aria-hidden="true">×</span>';var o=document.createElement("header");o.appendChild(i),o.appendChild(r),this.container.insertAdjacentElement("afterbegin",o)}this.header=this.container.querySelector("header"),this.body=this.container.querySelector("section"),this.footer=this.container.querySelector("footer"),this.triggerBtn=document.querySelector('[data-href="#'.concat(this.id,'"]')),this.triggerBtn&&this.triggerBtn.addEventListener("click",this.open.bind(this))}},{key:"disconnectedCallback",value:function(){this.triggerBtn&&this.triggerBtn.removeEventListener("click",this.open)}},{key:"open",value:function(){var e=this,t=document.createElement("div");if(t.classList.add("modal-backdrop","fade"),t.classList.add("modal-backdrop","show"),document.body.appendChild(t),this.removeAttribute("aria-hidden"),this.body&&(this.iframeEl=this.main.querySelector("iframe"),this.iframe)){this.iframeEl&&this.iframeEl.parentNode.remove(this.iframeEl);var i=document.createElement("iframe");i.width=this.width,i.height=this.height,i.src=this.iframe,i.setAttribute("frameborder",0),this.body.appendChild(i),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((function(t){t.addEventListener("click",e.evClose)}))}},{key:"close",value:function(){var e=this;this.removeEventListener("keydown",this.evKeypress),document.removeEventListener("click",this.evDocumentClose),[].slice.call(this.querySelectorAll("[data-dismiss]")).forEach((function(t){t.removeEventListener("click",e.evClose)}));var t=document.querySelector(".modal-backdrop");t&&document.body.removeChild(t),this.setAttribute("aria-hidden","true"),this.classList.remove("show"),this.main.innerHTML="",this.triggerBtn.focus()}},{key:"documentClose",value:function(e){this.findAncestorByClass(e.target,"joomla-modal-dialog")||e.target===this.triggerBtn||this.close()}},{key:"keyPress",value:function(e){if(e.keyCode===c&&this.close(),e.keyCode===l){var t=this.focusableElements.indexOf(document.activeElement);!e.shiftKey||0!==t&&-1!==t||(this.focusableElements[this.focusableElements.length-1].focus(),e.preventDefault()),e.shiftKey||t!==this.focusableElements.length-1||(this.focusableElements[0].focus(),e.preventDefault())}}},{key:"adjustDimensions",value:function(){var e=this.offsetHeight;e+=parseInt(window.getComputedStyle(this).getPropertyValue("margin-top"),10),e+=parseInt(window.getComputedStyle(this).getPropertyValue("margin-bottom"),10);var t=this.body.getBoundingClientRect.height,i=this.body.offsetHeight;i+=parseInt(window.getComputedStyle(this.body).getPropertyValue("margin-top"),10),i+=parseInt(window.getComputedStyle(this.body).getPropertyValue("margin-bottom"),10);var r=this.header.offsetHeight;r+=parseInt(window.getComputedStyle(this.header).getPropertyValue("margin-top"),10),r+=parseInt(window.getComputedStyle(this.header).getPropertyValue("margin-bottom"),10);var o=this.footer.offsetHeight;o+=parseInt(window.getComputedStyle(this.footer).getPropertyValue("margin-top"),10),o+=parseInt(window.getComputedStyle(this.footer).getPropertyValue("margin-bottom"),10);var n=this.offsetTop,s=window.height-2*n,a=i-t,l=s-(r+o+a);this.iframeEl?this.iframeEl.getBoundingClientRect().height>l&&(this.container.style.maxHeight=l,this.container.style.overflowY="auto",this.iframeEl.style.maxHeight=l-a):e>s&&(this.container.style.maxHeight=l,this.container.style.overflowY="auto")}},{key:"findAncestorByClass",value:function(e,t){for(;(e=e.parentElement)&&!e.classList.contains(t););return e}}],a=[{key:"observedAttributes",get:function(){return["width","height","innerWidth","innerHeight","iframe"]}}],n&&t(i.prototype,n),a&&t(i,a),Object.defineProperty(i,"prototype",{writable:!1}),i;var i,n,a}());