190 lines
7.6 KiB
JavaScript
190 lines
7.6 KiB
JavaScript
import { __assign } from "tslib";
|
|
/* eslint-disable max-len */
|
|
import { ClassName, Default } from './constant';
|
|
import { closest } from './util';
|
|
var MetisMenu = /** @class */ (function () {
|
|
/**
|
|
* Creates an instance of MetisMenu.
|
|
*
|
|
* @constructor
|
|
* @param {Element | string} element
|
|
* @param {IMMOptions} [options]
|
|
* @memberof MetisMenu
|
|
*/
|
|
function MetisMenu(element, options) {
|
|
this.element = MetisMenu.isElement(element) ? element : document.querySelector(element);
|
|
this.config = __assign(__assign({}, Default), options);
|
|
this.disposed = false;
|
|
this.triggerArr = [];
|
|
this.init();
|
|
}
|
|
MetisMenu.attach = function (el, opt) {
|
|
return new MetisMenu(el, opt);
|
|
};
|
|
MetisMenu.prototype.init = function () {
|
|
var _this = this;
|
|
var METIS = ClassName.METIS, ACTIVE = ClassName.ACTIVE, COLLAPSE = ClassName.COLLAPSE;
|
|
this.element.classList.add(METIS);
|
|
[].slice.call(this.element.querySelectorAll(this.config.subMenu)).forEach(function (ul) {
|
|
ul.classList.add(COLLAPSE);
|
|
var li = closest(ul, _this.config.parentTrigger);
|
|
if (li === null || li === void 0 ? void 0 : li.classList.contains(ACTIVE)) {
|
|
_this.show(ul);
|
|
}
|
|
else {
|
|
_this.hide(ul);
|
|
}
|
|
var 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.clickEvent.bind(_this));
|
|
_this.triggerArr.push(a);
|
|
});
|
|
};
|
|
MetisMenu.prototype.clickEvent = function (evt) {
|
|
if (!this.disposed) {
|
|
var target = evt === null || evt === void 0 ? void 0 : evt.currentTarget;
|
|
if (target && target.tagName === 'A') {
|
|
evt.preventDefault();
|
|
}
|
|
var li = closest(target, this.config.parentTrigger);
|
|
var ul = li === null || li === void 0 ? void 0 : li.querySelector(this.config.subMenu);
|
|
this.toggle(ul);
|
|
}
|
|
};
|
|
MetisMenu.prototype.update = function () {
|
|
this.disposed = false;
|
|
this.init();
|
|
};
|
|
MetisMenu.prototype.dispose = function () {
|
|
var _this = this;
|
|
this.triggerArr.forEach(function (arr) {
|
|
arr.removeEventListener('click', _this.clickEvent.bind(_this));
|
|
});
|
|
this.disposed = true;
|
|
};
|
|
MetisMenu.prototype.on = function (evtType, handler, options) {
|
|
this.element.addEventListener(evtType, handler, options);
|
|
return this;
|
|
};
|
|
MetisMenu.prototype.off = function (evtType, handler, options) {
|
|
this.element.removeEventListener(evtType, handler, options);
|
|
return this;
|
|
};
|
|
MetisMenu.prototype.emit = function (evtType, evtData, shouldBubble) {
|
|
if (shouldBubble === void 0) { shouldBubble = false; }
|
|
var evt;
|
|
if (typeof CustomEvent === 'function') {
|
|
evt = new CustomEvent(evtType, {
|
|
bubbles: shouldBubble,
|
|
detail: evtData,
|
|
});
|
|
}
|
|
else {
|
|
evt = document.createEvent('CustomEvent');
|
|
evt.initCustomEvent(evtType, shouldBubble, false, evtData);
|
|
}
|
|
this.element.dispatchEvent(evt);
|
|
return this;
|
|
};
|
|
MetisMenu.prototype.toggle = function (ul) {
|
|
var li = closest(ul, this.config.parentTrigger);
|
|
if (li === null || li === void 0 ? void 0 : li.classList.contains(ClassName.ACTIVE)) {
|
|
this.hide(ul);
|
|
}
|
|
else {
|
|
this.show(ul);
|
|
}
|
|
};
|
|
MetisMenu.prototype.show = function (el) {
|
|
var _this = this;
|
|
var _a;
|
|
var ul = el;
|
|
var ACTIVE = ClassName.ACTIVE, COLLAPSE = ClassName.COLLAPSE, COLLAPSED = ClassName.COLLAPSED, COLLAPSING = ClassName.COLLAPSING, SHOW = ClassName.SHOW;
|
|
if (this.isTransitioning || ul.classList.contains(COLLAPSING)) {
|
|
return;
|
|
}
|
|
var complete = function () {
|
|
ul.classList.remove(COLLAPSING);
|
|
ul.style.height = '';
|
|
ul.removeEventListener('transitionend', complete);
|
|
_this.setTransitioning(false);
|
|
_this.emit('shown.metisMenu', {
|
|
shownElement: ul,
|
|
});
|
|
};
|
|
var li = closest(ul, this.config.parentTrigger);
|
|
li === null || li === void 0 ? void 0 : li.classList.add(ACTIVE);
|
|
var 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);
|
|
var eleParentSiblins = [].slice
|
|
.call((_a = li === null || li === void 0 ? void 0 : li.parentNode) === null || _a === void 0 ? void 0 : _a.children)
|
|
.filter(function (c) { return c !== li; });
|
|
if (this.config.toggle && eleParentSiblins.length > 0) {
|
|
eleParentSiblins.forEach(function (sibli) {
|
|
var 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);
|
|
};
|
|
MetisMenu.prototype.hide = function (el) {
|
|
var _this = this;
|
|
var ACTIVE = ClassName.ACTIVE, COLLAPSE = ClassName.COLLAPSE, COLLAPSED = ClassName.COLLAPSED, COLLAPSING = ClassName.COLLAPSING, SHOW = ClassName.SHOW;
|
|
var ul = el;
|
|
if (this.isTransitioning || !ul.classList.contains(SHOW)) {
|
|
return;
|
|
}
|
|
this.emit('hide.metisMenu', {
|
|
hideElement: ul,
|
|
});
|
|
var li = closest(ul, this.config.parentTrigger);
|
|
li === null || li === void 0 ? void 0 : li.classList.remove(ACTIVE);
|
|
var complete = function () {
|
|
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';
|
|
var 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);
|
|
};
|
|
MetisMenu.prototype.setTransitioning = function (isTransitioning) {
|
|
this.isTransitioning = isTransitioning;
|
|
};
|
|
MetisMenu.isElement = function (element) {
|
|
return Boolean(element.classList);
|
|
};
|
|
return MetisMenu;
|
|
}());
|
|
export default MetisMenu;
|