init
This commit is contained in:
AlexBa16
+21
@@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 Osman Nuri Okumuş
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@@ -0,0 +1,232 @@
|
||||
/*!
|
||||
* metismenujs - v1.4.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 (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MetisMenu = factory());
|
||||
})(this, (function () { 'use strict';
|
||||
|
||||
const Default = {
|
||||
parentTrigger: 'li',
|
||||
subMenu: 'ul',
|
||||
toggle: true,
|
||||
triggerElement: 'a',
|
||||
};
|
||||
const ClassName = {
|
||||
ACTIVE: 'mm-active',
|
||||
COLLAPSE: 'mm-collapse',
|
||||
COLLAPSED: 'mm-collapsed',
|
||||
COLLAPSING: 'mm-collapsing',
|
||||
METIS: 'metismenu',
|
||||
SHOW: 'mm-show',
|
||||
};
|
||||
|
||||
/* eslint-disable max-len */
|
||||
class MetisMenu {
|
||||
/**
|
||||
* Creates an instance of MetisMenu.
|
||||
*
|
||||
* @constructor
|
||||
* @param {Element | string} element
|
||||
* @param {IMMOptions} [options]
|
||||
* @memberof MetisMenu
|
||||
*/
|
||||
constructor(element, options) {
|
||||
this.element = MetisMenu.isElement(element) ? element : document.querySelector(element);
|
||||
this.config = Object.assign(Object.assign({}, Default), options);
|
||||
this.disposed = false;
|
||||
this.triggerArr = [];
|
||||
this.boundEventHandler = this.clickEvent.bind(this);
|
||||
this.init();
|
||||
}
|
||||
static attach(el, opt) {
|
||||
return new MetisMenu(el, opt);
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
init() {
|
||||
const { METIS, ACTIVE, COLLAPSE } = ClassName;
|
||||
this.element.classList.add(METIS);
|
||||
const uls = [...this.element.querySelectorAll(this.config.subMenu)];
|
||||
if (uls.length === 0) {
|
||||
return;
|
||||
}
|
||||
uls.forEach((ul) => {
|
||||
ul.classList.add(COLLAPSE);
|
||||
const li = ul.closest(this.config.parentTrigger);
|
||||
if (li === null || li === void 0 ? void 0 : li.classList.contains(ACTIVE)) {
|
||||
this.show(ul);
|
||||
}
|
||||
else {
|
||||
this.hide(ul);
|
||||
}
|
||||
const a = li === null || li === void 0 ? void 0 : li.querySelector(this.config.triggerElement);
|
||||
if ((a === null || a === void 0 ? void 0 : a.getAttribute("aria-disabled")) === "true") {
|
||||
return;
|
||||
}
|
||||
a === null || a === void 0 ? void 0 : a.setAttribute("aria-expanded", "false");
|
||||
a === null || a === void 0 ? void 0 : a.addEventListener("click", this.boundEventHandler);
|
||||
this.triggerArr.push(a);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
clickEvent(evt) {
|
||||
if (!this.disposed) {
|
||||
const target = evt === null || evt === void 0 ? void 0 : evt.currentTarget;
|
||||
if (target && target.tagName === "A") {
|
||||
evt.preventDefault();
|
||||
}
|
||||
const li = target.closest(this.config.parentTrigger);
|
||||
const ul = li === null || li === void 0 ? void 0 : li.querySelector(this.config.subMenu);
|
||||
this.toggle(ul);
|
||||
}
|
||||
}
|
||||
update() {
|
||||
this.disposed = false;
|
||||
this.init();
|
||||
}
|
||||
dispose() {
|
||||
this.triggerArr.forEach((arr) => {
|
||||
arr.removeEventListener("click", this.boundEventHandler);
|
||||
});
|
||||
this.disposed = true;
|
||||
}
|
||||
on(evtType, handler, options) {
|
||||
this.element.addEventListener(evtType, handler, options);
|
||||
return this;
|
||||
}
|
||||
off(evtType, handler, options) {
|
||||
this.element.removeEventListener(evtType, handler, options);
|
||||
return this;
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
emit(evtType, evtData, shouldBubble = false) {
|
||||
const evt = new CustomEvent(evtType, {
|
||||
bubbles: shouldBubble,
|
||||
detail: evtData,
|
||||
});
|
||||
this.element.dispatchEvent(evt);
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
toggle(ul) {
|
||||
const li = ul.closest(this.config.parentTrigger);
|
||||
if (li === null || li === void 0 ? void 0 : li.classList.contains(ClassName.ACTIVE)) {
|
||||
this.hide(ul);
|
||||
}
|
||||
else {
|
||||
this.show(ul);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
show(el) {
|
||||
var _a;
|
||||
const ul = el;
|
||||
const { ACTIVE, COLLAPSE, COLLAPSED, COLLAPSING, SHOW } = ClassName;
|
||||
if (this.isTransitioning || ul.classList.contains(COLLAPSING)) {
|
||||
return;
|
||||
}
|
||||
const complete = () => {
|
||||
ul.classList.remove(COLLAPSING);
|
||||
ul.style.height = "";
|
||||
ul.removeEventListener("transitionend", complete);
|
||||
this.setTransitioning(false);
|
||||
this.emit("shown.metisMenu", {
|
||||
shownElement: ul,
|
||||
});
|
||||
};
|
||||
const li = ul.closest(this.config.parentTrigger);
|
||||
li === null || li === void 0 ? void 0 : li.classList.add(ACTIVE);
|
||||
const a = li === null || li === void 0 ? void 0 : li.querySelector(this.config.triggerElement);
|
||||
a === null || a === void 0 ? void 0 : a.setAttribute("aria-expanded", "true");
|
||||
a === null || a === void 0 ? void 0 : a.classList.remove(COLLAPSED);
|
||||
ul.style.height = "0px";
|
||||
ul.classList.remove(COLLAPSE);
|
||||
ul.classList.remove(SHOW);
|
||||
ul.classList.add(COLLAPSING);
|
||||
const eleParentSiblins = [].slice.call((_a = li === null || li === void 0 ? void 0 : li.parentNode) === null || _a === void 0 ? void 0 : _a.children).filter((c) => c !== li);
|
||||
if (this.config.toggle && eleParentSiblins.length > 0) {
|
||||
eleParentSiblins.forEach((sibli) => {
|
||||
const sibUl = sibli.querySelector(this.config.subMenu);
|
||||
if (sibUl) {
|
||||
this.hide(sibUl);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.setTransitioning(true);
|
||||
ul.classList.add(COLLAPSE);
|
||||
ul.classList.add(SHOW);
|
||||
ul.style.height = `${ul.scrollHeight}px`;
|
||||
this.emit("show.metisMenu", {
|
||||
showElement: ul,
|
||||
});
|
||||
ul.addEventListener("transitionend", complete);
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
hide(el) {
|
||||
const { ACTIVE, COLLAPSE, COLLAPSED, COLLAPSING, SHOW } = ClassName;
|
||||
const ul = el;
|
||||
if (this.isTransitioning || !ul.classList.contains(SHOW)) {
|
||||
return;
|
||||
}
|
||||
this.emit("hide.metisMenu", {
|
||||
hideElement: ul,
|
||||
});
|
||||
const li = ul.closest(this.config.parentTrigger);
|
||||
li === null || li === void 0 ? void 0 : li.classList.remove(ACTIVE);
|
||||
const complete = () => {
|
||||
ul.classList.remove(COLLAPSING);
|
||||
ul.classList.add(COLLAPSE);
|
||||
ul.style.height = "";
|
||||
ul.removeEventListener("transitionend", complete);
|
||||
this.setTransitioning(false);
|
||||
this.emit("hidden.metisMenu", {
|
||||
hiddenElement: ul,
|
||||
});
|
||||
};
|
||||
ul.style.height = `${ul.getBoundingClientRect().height}px`;
|
||||
ul.style.height = `${ul.offsetHeight}px`;
|
||||
ul.classList.add(COLLAPSING);
|
||||
ul.classList.remove(COLLAPSE);
|
||||
ul.classList.remove(SHOW);
|
||||
this.setTransitioning(true);
|
||||
ul.addEventListener("transitionend", complete);
|
||||
ul.style.height = "0px";
|
||||
const a = li === null || li === void 0 ? void 0 : li.querySelector(this.config.triggerElement);
|
||||
a === null || a === void 0 ? void 0 : a.setAttribute("aria-expanded", "false");
|
||||
a === null || a === void 0 ? void 0 : a.classList.add(COLLAPSED);
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
setTransitioning(isTransitioning) {
|
||||
this.isTransitioning = isTransitioning;
|
||||
}
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
static isElement(element) {
|
||||
return Boolean(element.classList);
|
||||
}
|
||||
}
|
||||
|
||||
return MetisMenu;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=metismenujs.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,10 @@
|
||||
/*!
|
||||
* metismenujs - v1.4.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"};class s{constructor(e,i){this.element=s.isElement(e)?e:document.querySelector(e),this.config=Object.assign(Object.assign({},t),i),this.disposed=!1,this.triggerArr=[],this.boundEventHandler=this.clickEvent.bind(this),this.init()}static attach(t,e){return new s(t,e)}init(){const{METIS:t,ACTIVE:s,COLLAPSE:i}=e;this.element.classList.add(t);const n=[...this.element.querySelectorAll(this.config.subMenu)];0!==n.length&&n.forEach((t=>{t.classList.add(i);const e=t.closest(this.config.parentTrigger);(null==e?void 0:e.classList.contains(s))?this.show(t):this.hide(t);const n=null==e?void 0:e.querySelector(this.config.triggerElement);"true"!==(null==n?void 0:n.getAttribute("aria-disabled"))&&(null==n||n.setAttribute("aria-expanded","false"),null==n||n.addEventListener("click",this.boundEventHandler),this.triggerArr.push(n))}))}clickEvent(t){if(!this.disposed){const e=null==t?void 0:t.currentTarget;e&&"A"===e.tagName&&t.preventDefault();const s=e.closest(this.config.parentTrigger),i=null==s?void 0:s.querySelector(this.config.subMenu);this.toggle(i)}}update(){this.disposed=!1,this.init()}dispose(){this.triggerArr.forEach((t=>{t.removeEventListener("click",this.boundEventHandler)})),this.disposed=!0}on(t,e,s){return this.element.addEventListener(t,e,s),this}off(t,e,s){return this.element.removeEventListener(t,e,s),this}emit(t,e,s=!1){const i=new CustomEvent(t,{bubbles:s,detail:e});this.element.dispatchEvent(i)}toggle(t){const s=t.closest(this.config.parentTrigger);(null==s?void 0:s.classList.contains(e.ACTIVE))?this.hide(t):this.show(t)}show(t){var s;const i=t,{ACTIVE:n,COLLAPSE:l,COLLAPSED:o,COLLAPSING:r,SHOW:c}=e;if(this.isTransitioning||i.classList.contains(r))return;const a=()=>{i.classList.remove(r),i.style.height="",i.removeEventListener("transitionend",a),this.setTransitioning(!1),this.emit("shown.metisMenu",{shownElement:i})},h=i.closest(this.config.parentTrigger);null==h||h.classList.add(n);const d=null==h?void 0:h.querySelector(this.config.triggerElement);null==d||d.setAttribute("aria-expanded","true"),null==d||d.classList.remove(o),i.style.height="0px",i.classList.remove(l),i.classList.remove(c),i.classList.add(r);const g=[].slice.call(null===(s=null==h?void 0:h.parentNode)||void 0===s?void 0:s.children).filter((t=>t!==h));this.config.toggle&&g.length>0&&g.forEach((t=>{const e=t.querySelector(this.config.subMenu);e&&this.hide(e)})),this.setTransitioning(!0),i.classList.add(l),i.classList.add(c),i.style.height=`${i.scrollHeight}px`,this.emit("show.metisMenu",{showElement:i}),i.addEventListener("transitionend",a)}hide(t){const{ACTIVE:s,COLLAPSE:i,COLLAPSED:n,COLLAPSING:l,SHOW:o}=e,r=t;if(this.isTransitioning||!r.classList.contains(o))return;this.emit("hide.metisMenu",{hideElement:r});const c=r.closest(this.config.parentTrigger);null==c||c.classList.remove(s);const a=()=>{r.classList.remove(l),r.classList.add(i),r.style.height="",r.removeEventListener("transitionend",a),this.setTransitioning(!1),this.emit("hidden.metisMenu",{hiddenElement:r})};r.style.height=`${r.getBoundingClientRect().height}px`,r.style.height=`${r.offsetHeight}px`,r.classList.add(l),r.classList.remove(i),r.classList.remove(o),this.setTransitioning(!0),r.addEventListener("transitionend",a),r.style.height="0px";const h=null==c?void 0:c.querySelector(this.config.triggerElement);null==h||h.setAttribute("aria-expanded","false"),null==h||h.classList.add(n)}setTransitioning(t){this.isTransitioning=t}static isElement(t){return Boolean(t.classList)}}return s}));
|
||||
//# sourceMappingURL=metismenujs.min.js.map
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user