joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
2 lines (1 loc) • 15.8 kB
JavaScript
function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(t){return function(t){if(Array.isArray(t))return i(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||n(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){if(t){if("string"==typeof t)return i(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=Array(e);n<e;n++)i[n]=t[n];return i}function r(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,o(i.key),i)}}function a(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function o(e){var n=function(e,n){if("object"!=t(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var r=i.call(e,n||"default");if("object"!=t(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==t(n)?n:n+""}function s(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(e,n,i){return n=h(n),function(e,n){if(n&&("object"==t(n)||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(e)}(e,l()?Reflect.construct(n,i||[],h(e).constructor):n.apply(e,i))}function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&d(t,e)}function b(t){var e="function"==typeof Map?new Map:void 0;return b=function(t){if(null===t||!function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(e){return"function"==typeof t}}(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==e){if(e.has(t))return e.get(t);e.set(t,n)}function n(){return function(t,e,n){if(l())return Reflect.construct.apply(null,arguments);var i=[null];i.push.apply(i,e);var r=new(t.bind.apply(t,i));return n&&d(r,n.prototype),r}(t,arguments,h(this).constructor)}return n.prototype=Object.create(t.prototype,{constructor:{value:n,enumerable:!1,writable:!0,configurable:!0}}),d(n,t)},b(t)}function l(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(t){}return(l=function(){return!!t})()}function d(t,e){return d=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},d(t,e)}function h(t){return h=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},h(t)}var f=function(){function t(){return s(this,t),u(this,t,arguments)}return c(t,b(HTMLElement)),a(t)}();customElements.define("joomla-tab-element",f);var v=function(){function t(){var e;return s(this,t),(e=u(this,t)).tabs=[],e.tabsElements=[],e.previousActive=null,e.onMutation=e.onMutation.bind(e),e.keyBehaviour=e.keyBehaviour.bind(e),e.activateTab=e.activateTab.bind(e),e.deactivateTabs=e.deactivateTabs.bind(e),e.checkView=e.checkView.bind(e),e.observer=new MutationObserver(e.onMutation),e.observer.observe(e,{attributes:!1,childList:!0,subtree:!0}),e}return c(t,b(HTMLElement)),a(t,[{key:"recall",get:function(){return this.getAttribute("recall")},set:function(t){this.setAttribute("recall",t)}},{key:"view",get:function(){return this.getAttribute("view")},set:function(t){this.setAttribute("view",t)}},{key:"orientation",get:function(){return this.getAttribute("orientation")},set:function(t){this.setAttribute("orientation",t)}},{key:"breakpoint",get:function(){return parseInt(this.getAttribute("breakpoint"),10)},set:function(t){this.setAttribute("breakpoint",t)}},{key:"connectedCallback",value:function(){var t=this;if((!this.orientation||this.orientation&&!["horizontal","vertical"].includes(this.orientation))&&(this.orientation="horizontal"),(!this.view||this.view&&!["tabs","accordion"].includes(this.view))&&(this.view="tabs"),this.tabsElements=[].slice.call(this.children).filter((function(t){return"joomla-tab-element"===t.tagName.toLowerCase()})),this.tabsElements.length){if(this.isNested=this.parentNode.closest("joomla-tab")instanceof HTMLElement,this.hydrate(),this.hasAttribute("recall")&&!this.isNested&&this.activateFromState(),window.location.hash){var e=window.location.hash.substr(1),n=this.tabs.filter((function(t){return t.tab.id===e}));n.length&&this.activateTab(n[0].tab,!1)}this.tabs.filter((function(t){return t.tab.hasAttribute("active")})).length||this.activateTab(this.tabs[0].tab,!1),this.addEventListener("keyup",this.keyBehaviour),this.breakpoint&&(this.checkView(),window.addEventListener("resize",(function(){t.checkView()})))}}},{key:"disconnectedCallback",value:function(){var t=this;this.tabs.map((function(e){return e.tabButton.removeEventListener("click",t.activateTab),e.accordionButton.removeEventListener("click",t.activateTab),e})),this.removeEventListener("keyup",this.keyBehaviour)}},{key:"attributeChangedCallback",value:function(t,e,n){if("view"===t)(!n||n&&!["tabs","accordion"].includes(n))&&(this.view="tabs"),"tabs"===n&&n!==e?(this.tabButtonContainer&&this.tabButtonContainer.removeAttribute("hidden"),this.tabs.map((function(t){return t.accordionButton.setAttribute("hidden","")}))):"accordion"===n&&n!==e&&(this.tabButtonContainer&&this.tabButtonContainer.setAttribute("hidden",""),this.tabs.map((function(t){return t.accordionButton.removeAttribute("hidden")})))}},{key:"hydrate",value:function(){var t=this;this.tabButtonContainer=document.createElement("div"),this.tabButtonContainer.setAttribute("role","tablist"),this.insertAdjacentElement("afterbegin",this.tabButtonContainer),"accordion"===this.view&&this.tabButtonContainer.setAttribute("hidden",""),this.tabsElements.map((function(e){var n=document.createElement("button");n.setAttribute("aria-expanded",!!e.hasAttribute("active")),n.setAttribute("aria-controls",e.id),n.setAttribute("type","button"),n.innerHTML='<span class="accordion-title">'.concat(e.getAttribute("name"),'<span class="accordion-icon"></span></span>'),e.insertAdjacentElement("beforebegin",n),"tabs"===t.view&&n.setAttribute("hidden",""),n.addEventListener("click",t.activateTab);var i=document.createElement("button");return i.setAttribute("aria-selected",!!e.hasAttribute("active")),i.setAttribute("aria-controls",e.id),i.setAttribute("role","tab"),i.setAttribute("type","button"),i.setAttribute("tabindex",-1),i.innerHTML="".concat(e.getAttribute("name")),e.hasAttribute("active")&&i.setAttribute("tabindex",0),t.tabButtonContainer.appendChild(i),i.addEventListener("click",t.activateTab),"tabs"===t.view?e.setAttribute("role","tabpanel"):e.setAttribute("role","region"),t.tabs.push({tab:e,tabButton:i,accordionButton:n}),e}))}},{key:"onMutation",value:function(t){var e,i=this,r=function(t,e){var i="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!i){if(Array.isArray(t)||(i=n(t))||e&&t&&"number"==typeof t.length){i&&(t=i);var r=0,a=function(){};return{s:a,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,s=!0,u=!1;return{s:function(){i=i.call(t)},n:function(){var t=i.next();return s=t.done,t},e:function(t){u=!0,o=t},f:function(){try{s||null==i.return||i.return()}finally{if(u)throw o}}}}(t);try{for(r.s();!(e=r.n()).done;){var a=e.value;"childList"===a.type&&(a.addedNodes.length&&[].slice.call(a.addedNodes).map((function(t){return i.createNavs(t)})),a.removedNodes.length&&[].slice.call(a.addedNodes).map((function(t){return i.removeNavs(t)})))}}catch(t){r.e(t)}finally{r.f()}}},{key:"keyBehaviour",value:function(t){if([].concat(e(this.tabs.map((function(t){return t.tabButton}))),e(this.tabs.map((function(t){return t.accordionButton})))).includes(document.activeElement)&&!t.metaKey&&!t.altKey){var n,i;if("tabs"===this.view){var r=this.tabs.findIndex((function(t){return t.tab.hasAttribute("active")}));n=r-1>=0?this.tabs[r-1]:this.tabs[this.tabs.length-1],i=r+1<=this.tabs.length-1?this.tabs[r+1]:this.tabs[0]}else{var a=this.tabs.map((function(t){return t.accordionButton})).findIndex((function(t){return t===document.activeElement}));n=a-1>=0?this.tabs[a-1]:this.tabs[this.tabs.length-1],i=a+1<=this.tabs.length-1?this.tabs[a+1]:this.tabs[0]}switch(t.keyCode){case 37:case 38:"tabs"===this.view?(n.tabButton.click(),n.tabButton.focus()):n.accordionButton.focus(),t.preventDefault();break;case 39:case 40:"tabs"===this.view?(i.tabButton.click(),i.tabButton.focus()):i.accordionButton.focus(),t.preventDefault()}}}},{key:"deactivateTabs",value:function(){var t=this;this.tabs.map((function(e){return e.accordionButton.removeAttribute("aria-disabled"),e.tabButton.setAttribute("aria-selected",!1),e.tabButton.setAttribute("tabindex",-1),e.accordionButton.setAttribute("aria-expanded",!1),e.tab.hasAttribute("active")&&(t.dispatchCustomEvent("joomla.tab.hide","tabs"===t.view?e.tabButton:e.accordionButton,t.previousActive),e.tab.removeAttribute("active"),e.tab.setAttribute("tabindex","-1"),t.dispatchCustomEvent("joomla.tab.hidden","tabs"===t.view?e.tabButton:e.accordionButton,t.previousActive),t.previousActive="tabs"===t.view?e.tabButton:e.accordionButton),e}))}},{key:"activateTab",value:function(t){var e,n=this,i=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(t.currentTarget?e=this.tabs.find((function(e){return("tabs"===n.view?e.tabButton:e.accordionButton)===t.currentTarget})):t instanceof HTMLElement?e=this.tabs.find((function(e){return e.tab===t})):Number.isInteger(t)&&(e=this.tabs[t]),e){if("accordion"===this.view&&this.tabs.find((function(t){return"true"===t.accordionButton.getAttribute("aria-expanded")}))===e)return e.tab.hasAttribute("active")?void e.tab.removeAttribute("active"):void e.tab.setAttribute("active","");this.deactivateTabs(),e.tabButton.setAttribute("aria-selected",!0),e.accordionButton.setAttribute("aria-expanded",!0),e.accordionButton.setAttribute("aria-disabled",!0),e.tab.setAttribute("active",""),e.tabButton.removeAttribute("tabindex"),this.dispatchCustomEvent("joomla.tab.show","tabs"===this.view?e.tabButton:e.accordionButton,this.previousActive),i&&("tabs"===this.view?e.tabButton.focus():e.accordionButton.focus()),i&&this.saveState(e.tab.id),this.dispatchCustomEvent("joomla.tab.shown","tabs"===this.view?e.tabButton:e.accordionButton,this.previousActive)}}},{key:"createNavs",value:function(t){if(!(t instanceof Element&&"joomla-tab-element"!==t.tagName.toLowerCase())&&[].some.call(this.children,(function(e){return e===t}))&&t.getAttribute("name")&&t.getAttribute("id")){var e=[].slice.call(this.children).filter((function(t){return"joomla-tab-element"===t.tagName.toLowerCase()})),n=e.findIndex((function(e){return e===t})),i=document.createElement("button");i.setAttribute("aria-expanded",!!t.hasAttribute("active")),i.setAttribute("aria-controls",t.id),i.setAttribute("type","button"),i.innerHTML='<span class="accordion-title">'.concat(t.getAttribute("name"),'<span class="accordion-icon"></span></span>'),t.insertAdjacentElement("beforebegin",i),"tabs"===this.view&&i.setAttribute("hidden",""),i.addEventListener("click",this.activateTab);var r=document.createElement("button");r.setAttribute("aria-expanded",!!t.hasAttribute("active")),r.setAttribute("aria-controls",t.id),r.setAttribute("role","tab"),r.setAttribute("type","button"),r.innerHTML="".concat(t.getAttribute("name")),e.length-1===n?(this.tabButtonContainer.appendChild(r),this.tabs.push({tab:t,tabButton:r,accordionButton:i})):0===n?(this.tabButtonContainer.insertAdjacentElement("afterbegin",r),this.tabs.slice(0,0,{tab:t,tabButton:r,accordionButton:i})):(this.tabs[n-1].tabButton.insertAdjacentElement("afterend",r),this.tabs.slice(n-1,0,{tab:t,tabButton:r,accordionButton:i})),r.addEventListener("click",this.activateTab)}}},{key:"removeNavs",value:function(t){if(!(t instanceof Element&&"joomla-tab-element"!==t.tagName.toLowerCase())&&[].some.call(this.children,(function(e){return e===t}))&&t.getAttribute("name")&&t.getAttribute("id")){var e=t.previousSilbingElement;e&&"button"===e.tagName.toLowerCase()&&(e.removeEventListener("click",this.keyBehaviour),e.parentNode.removeChild(e));var n=this.tabButtonContainer.querySelector("[aria-controls=".concat(e.id,"]"));n&&(n.removeEventListener("click",this.keyBehaviour),n.parentNode.removeChild(n));var i=this.tabs.findIndex((function(e){return e.tabs===t}));i-1==0?this.tabs.shift():i-1===this.tabs.length?this.tabs.pop():this.tabs.splice(i-1,1)}}},{key:"checkView",value:function(){if(this.breakpoint)if(document.body.getBoundingClientRect().width>this.breakpoint){if("tabs"===this.view)return;this.tabButtonContainer.removeAttribute("hidden"),this.tabs.map((function(t){return t.accordionButton.setAttribute("hidden",""),t.accordionButton.setAttribute("role","tabpanel"),"true"===t.accordionButton.getAttribute("aria-expanded")&&t.tab.setAttribute("active",""),t})),this.setAttribute("view","tabs")}else{if("accordion"===this.view)return;this.tabButtonContainer.setAttribute("hidden",""),this.tabs.map((function(t){return t.accordionButton.removeAttribute("hidden"),t.accordionButton.setAttribute("role","region"),t})),this.setAttribute("view","accordion")}}},{key:"getStorageKey",value:function(){return window.location.href.toString().split(window.location.host)[1].replace(/&return=[a-zA-Z0-9%]+/,"").split("#")[0]}},{key:"saveState",value:function(t){var e=this.getStorageKey();sessionStorage.setItem(e,t)}},{key:"activateFromState",value:function(){var t=this;this.hasNested=this.querySelector("joomla-tab")instanceof HTMLElement;var e=sessionStorage.getItem(this.getStorageKey());if(e){var n=this.tabs.findIndex((function(t){return t.tab.id===e}));if(n>=0)this.activateTab(n,!1);else if(this.hasNested){if(this.querySelector("joomla-tab")){var i=[].slice.call(this.querySelectorAll("joomla-tab-element")).reverse().filter((function(t){return t.id===e}));if(i.length){var r=i[0].closest("joomla-tab");[].slice.call(r.querySelectorAll("joomla-tab-element")).forEach((function(t){t.removeAttribute("active"),t.id===e&&t.setAttribute("active","")}));for(var a=function(){var t=r.closest("joomla-tab"),e=r.parentNode.closest("joomla-tab-element");[].slice.call(t.querySelectorAll("joomla-tab-element")).forEach((function(t){t.removeAttribute("active"),e===t&&(t.setAttribute("active",""),r=e)}))};r.parentNode.closest("joomla-tab")!==this;)a();[].slice.call(this.children).filter((function(t){return"joomla-tab-element"===t.tagName.toLowerCase()})).forEach((function(e){e.removeAttribute("active"),e.querySelector("joomla-tab-element[active]")&&t.activateTab(e,!1)}))}}}}}},{key:"dispatchCustomEvent",value:function(t,e,n){var i=new CustomEvent(t,{bubbles:!0,cancelable:!0});i.relatedTarget=n,e.dispatchEvent(i)}}],[{key:"observedAttributes",get:function(){return["recall","orientation","view","breakpoint"]}}])}();customElements.define("joomla-tab",v);