metismenujs
Version:
MetisMenu: Collapsible menu plugin with Vanilla-JS
10 lines • 4.42 kB
JavaScript
/*!
* metismenujs - v1.3.0
* MetisMenu: Collapsible menu plugin with Vanilla-JS
* https://github.com/onokumus/metismenujs#readme
*
* Made by Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
* Under MIT License
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).MetisMenu=e()}(this,(function(){"use strict";const t={parentTrigger:"li",subMenu:"ul",toggle:!0,triggerElement:"a"},e={ACTIVE:"mm-active",COLLAPSE:"mm-collapse",COLLAPSED:"mm-collapsed",COLLAPSING:"mm-collapsing",METIS:"metismenu",SHOW:"mm-show"};function i(t,e){return(t.matches||t.webkitMatchesSelector||t.msMatchesSelector).call(t,e)}function s(t,e){if(t.closest)return t.closest(e);let s=t;for(;s;){if(i(s,e))return s;s=s.parentElement}return null}class n{constructor(e,i){this.element=n.isElement(e)?e:document.querySelector(e),this.config=Object.assign(Object.assign({},t),i),this.disposed=!1,this.triggerArr=[],this.init()}static attach(t,e){return new n(t,e)}init(){const{METIS:t,ACTIVE:i,COLLAPSE:n}=e;this.element.classList.add(t),[].slice.call(this.element.querySelectorAll(this.config.subMenu)).forEach((t=>{t.classList.add(n);const e=s(t,this.config.parentTrigger);(null==e?void 0:e.classList.contains(i))?this.show(t):this.hide(t);const l=null==e?void 0:e.querySelector(this.config.triggerElement);"true"!==(null==l?void 0:l.getAttribute("aria-disabled"))&&(null==l||l.setAttribute("aria-expanded","false"),null==l||l.addEventListener("click",this.clickEvent.bind(this)),this.triggerArr.push(l))}))}clickEvent(t){if(!this.disposed){const e=null==t?void 0:t.currentTarget;e&&"A"===e.tagName&&t.preventDefault();const i=s(e,this.config.parentTrigger),n=null==i?void 0:i.querySelector(this.config.subMenu);this.toggle(n)}}update(){this.disposed=!1,this.init()}dispose(){this.triggerArr.forEach((t=>{t.removeEventListener("click",this.clickEvent.bind(this))})),this.disposed=!0}on(t,e,i){return this.element.addEventListener(t,e,i),this}off(t,e,i){return this.element.removeEventListener(t,e,i),this}emit(t,e,i=!1){let s;return"function"==typeof CustomEvent?s=new CustomEvent(t,{bubbles:i,detail:e}):(s=document.createEvent("CustomEvent"),s.initCustomEvent(t,i,!1,e)),this.element.dispatchEvent(s),this}toggle(t){const i=s(t,this.config.parentTrigger);(null==i?void 0:i.classList.contains(e.ACTIVE))?this.hide(t):this.show(t)}show(t){var i;const n=t,{ACTIVE:l,COLLAPSE:r,COLLAPSED:o,COLLAPSING:c,SHOW:a}=e;if(this.isTransitioning||n.classList.contains(c))return;const h=()=>{n.classList.remove(c),n.style.height="",n.removeEventListener("transitionend",h),this.setTransitioning(!1),this.emit("shown.metisMenu",{shownElement:n})},d=s(n,this.config.parentTrigger);null==d||d.classList.add(l);const u=null==d?void 0:d.querySelector(this.config.triggerElement);null==u||u.setAttribute("aria-expanded","true"),null==u||u.classList.remove(o),n.style.height="0px",n.classList.remove(r),n.classList.remove(a),n.classList.add(c);const g=[].slice.call(null===(i=null==d?void 0:d.parentNode)||void 0===i?void 0:i.children).filter((t=>t!==d));this.config.toggle&&g.length>0&&g.forEach((t=>{const e=t.querySelector(this.config.subMenu);e&&this.hide(e)})),this.setTransitioning(!0),n.classList.add(r),n.classList.add(a),n.style.height=`${n.scrollHeight}px`,this.emit("show.metisMenu",{showElement:n}),n.addEventListener("transitionend",h)}hide(t){const{ACTIVE:i,COLLAPSE:n,COLLAPSED:l,COLLAPSING:r,SHOW:o}=e,c=t;if(this.isTransitioning||!c.classList.contains(o))return;this.emit("hide.metisMenu",{hideElement:c});const a=s(c,this.config.parentTrigger);null==a||a.classList.remove(i);const h=()=>{c.classList.remove(r),c.classList.add(n),c.style.height="",c.removeEventListener("transitionend",h),this.setTransitioning(!1),this.emit("hidden.metisMenu",{hiddenElement:c})};c.style.height=`${c.getBoundingClientRect().height}px`,c.style.height=`${c.offsetHeight}px`,c.classList.add(r),c.classList.remove(n),c.classList.remove(o),this.setTransitioning(!0),c.addEventListener("transitionend",h),c.style.height="0px";const d=null==a?void 0:a.querySelector(this.config.triggerElement);null==d||d.setAttribute("aria-expanded","false"),null==d||d.classList.add(l)}setTransitioning(t){this.isTransitioning=t}static isElement(t){return Boolean(t.classList)}}return n}));
//# sourceMappingURL=metismenujs.min.js.map