[Summary view] [Print] [Text view]

   1  /*!
   2  * metismenujs - v1.3.1
   3  * MetisMenu: Collapsible menu plugin with Vanilla-JS
   4  * https://github.com/onokumus/metismenujs#readme
   5  *
   6  * Made by Osman Nuri Okumus <[email protected]> (https://github.com/onokumus)
   7  * Under MIT License
   8  */
   9  (function (global, factory) {
  10      typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  11      typeof define === 'function' && define.amd ? define(factory) :
  12      (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MetisMenu = factory());
  13  }(this, (function () { 'use strict';
  14  
  15      const Default = {
  16          parentTrigger: 'li',
  17          subMenu: 'ul',
  18          toggle: true,
  19          triggerElement: 'a',
  20      };
  21      const ClassName = {
  22          ACTIVE: 'mm-active',
  23          COLLAPSE: 'mm-collapse',
  24          COLLAPSED: 'mm-collapsed',
  25          COLLAPSING: 'mm-collapsing',
  26          METIS: 'metismenu',
  27          SHOW: 'mm-show',
  28      };
  29  
  30      /* eslint-disable max-len */
  31      class MetisMenu {
  32          /**
  33           * Creates an instance of MetisMenu.
  34           *
  35           * @constructor
  36           * @param {Element | string} element
  37           * @param {IMMOptions} [options]
  38           * @memberof MetisMenu
  39           */
  40          constructor(element, options) {
  41              this.element = MetisMenu.isElement(element) ? element : document.querySelector(element);
  42              this.config = Object.assign(Object.assign({}, Default), options);
  43              this.disposed = false;
  44              this.triggerArr = [];
  45              this.init();
  46          }
  47          static attach(el, opt) {
  48              return new MetisMenu(el, opt);
  49          }
  50          init() {
  51              const { METIS, ACTIVE, COLLAPSE } = ClassName;
  52              this.element.classList.add(METIS);
  53              [].slice.call(this.element.querySelectorAll(this.config.subMenu)).forEach((ul) => {
  54                  ul.classList.add(COLLAPSE);
  55                  const li = ul.closest(this.config.parentTrigger);
  56                  if (li === null || li === void 0 ? void 0 : li.classList.contains(ACTIVE)) {
  57                      this.show(ul);
  58                  }
  59                  else {
  60                      this.hide(ul);
  61                  }
  62                  const a = li === null || li === void 0 ? void 0 : li.querySelector(this.config.triggerElement);
  63                  if ((a === null || a === void 0 ? void 0 : a.getAttribute('aria-disabled')) === 'true') {
  64                      return;
  65                  }
  66                  a === null || a === void 0 ? void 0 : a.setAttribute('aria-expanded', 'false');
  67                  a === null || a === void 0 ? void 0 : a.addEventListener('click', this.clickEvent.bind(this));
  68                  this.triggerArr.push(a);
  69              });
  70          }
  71          clickEvent(evt) {
  72              if (!this.disposed) {
  73                  const target = evt === null || evt === void 0 ? void 0 : evt.currentTarget;
  74                  if (target && target.tagName === 'A') {
  75                      evt.preventDefault();
  76                  }
  77                  const li = target.closest(this.config.parentTrigger);
  78                  const ul = li === null || li === void 0 ? void 0 : li.querySelector(this.config.subMenu);
  79                  this.toggle(ul);
  80              }
  81          }
  82          update() {
  83              this.disposed = false;
  84              this.init();
  85          }
  86          dispose() {
  87              this.triggerArr.forEach((arr) => {
  88                  arr.removeEventListener('click', this.clickEvent.bind(this));
  89              });
  90              this.disposed = true;
  91          }
  92          on(evtType, handler, options) {
  93              this.element.addEventListener(evtType, handler, options);
  94              return this;
  95          }
  96          off(evtType, handler, options) {
  97              this.element.removeEventListener(evtType, handler, options);
  98              return this;
  99          }
 100          emit(evtType, evtData, shouldBubble = false) {
 101              const evt = new CustomEvent(evtType, {
 102                  bubbles: shouldBubble,
 103                  detail: evtData,
 104              });
 105              this.element.dispatchEvent(evt);
 106          }
 107          toggle(ul) {
 108              const li = ul.closest(this.config.parentTrigger);
 109              if (li === null || li === void 0 ? void 0 : li.classList.contains(ClassName.ACTIVE)) {
 110                  this.hide(ul);
 111              }
 112              else {
 113                  this.show(ul);
 114              }
 115          }
 116          show(el) {
 117              var _a;
 118              const ul = el;
 119              const { ACTIVE, COLLAPSE, COLLAPSED, COLLAPSING, SHOW, } = ClassName;
 120              if (this.isTransitioning || ul.classList.contains(COLLAPSING)) {
 121                  return;
 122              }
 123              const complete = () => {
 124                  ul.classList.remove(COLLAPSING);
 125                  ul.style.height = '';
 126                  ul.removeEventListener('transitionend', complete);
 127                  this.setTransitioning(false);
 128                  this.emit('shown.metisMenu', {
 129                      shownElement: ul,
 130                  });
 131              };
 132              const li = ul.closest(this.config.parentTrigger);
 133              li === null || li === void 0 ? void 0 : li.classList.add(ACTIVE);
 134              const a = li === null || li === void 0 ? void 0 : li.querySelector(this.config.triggerElement);
 135              a === null || a === void 0 ? void 0 : a.setAttribute('aria-expanded', 'true');
 136              a === null || a === void 0 ? void 0 : a.classList.remove(COLLAPSED);
 137              ul.style.height = '0px';
 138              ul.classList.remove(COLLAPSE);
 139              ul.classList.remove(SHOW);
 140              ul.classList.add(COLLAPSING);
 141              const eleParentSiblins = [].slice
 142                  .call((_a = li === null || li === void 0 ? void 0 : li.parentNode) === null || _a === void 0 ? void 0 : _a.children)
 143                  .filter((c) => c !== li);
 144              if (this.config.toggle && eleParentSiblins.length > 0) {
 145                  eleParentSiblins.forEach((sibli) => {
 146                      const sibUl = sibli.querySelector(this.config.subMenu);
 147                      if (sibUl) {
 148                          this.hide(sibUl);
 149                      }
 150                  });
 151              }
 152              this.setTransitioning(true);
 153              ul.classList.add(COLLAPSE);
 154              ul.classList.add(SHOW);
 155              ul.style.height = `$ul.scrollHeight}px`;
 156              this.emit('show.metisMenu', {
 157                  showElement: ul,
 158              });
 159              ul.addEventListener('transitionend', complete);
 160          }
 161          hide(el) {
 162              const { ACTIVE, COLLAPSE, COLLAPSED, COLLAPSING, SHOW, } = ClassName;
 163              const ul = el;
 164              if (this.isTransitioning || !ul.classList.contains(SHOW)) {
 165                  return;
 166              }
 167              this.emit('hide.metisMenu', {
 168                  hideElement: ul,
 169              });
 170              const li = ul.closest(this.config.parentTrigger);
 171              li === null || li === void 0 ? void 0 : li.classList.remove(ACTIVE);
 172              const complete = () => {
 173                  ul.classList.remove(COLLAPSING);
 174                  ul.classList.add(COLLAPSE);
 175                  ul.style.height = '';
 176                  ul.removeEventListener('transitionend', complete);
 177                  this.setTransitioning(false);
 178                  this.emit('hidden.metisMenu', {
 179                      hiddenElement: ul,
 180                  });
 181              };
 182              ul.style.height = `$ul.getBoundingClientRect().height}px`;
 183              ul.style.height = `$ul.offsetHeight}px`;
 184              ul.classList.add(COLLAPSING);
 185              ul.classList.remove(COLLAPSE);
 186              ul.classList.remove(SHOW);
 187              this.setTransitioning(true);
 188              ul.addEventListener('transitionend', complete);
 189              ul.style.height = '0px';
 190              const a = li === null || li === void 0 ? void 0 : li.querySelector(this.config.triggerElement);
 191              a === null || a === void 0 ? void 0 : a.setAttribute('aria-expanded', 'false');
 192              a === null || a === void 0 ? void 0 : a.classList.add(COLLAPSED);
 193          }
 194          setTransitioning(isTransitioning) {
 195              this.isTransitioning = isTransitioning;
 196          }
 197          static isElement(element) {
 198              return Boolean(element.classList);
 199          }
 200      }
 201  
 202      return MetisMenu;
 203  
 204  })));
 205  //# sourceMappingURL=metismenujs.js.map