first commit
This commit is contained in:
@@ -0,0 +1,233 @@
|
||||
/*!
|
||||
* metismenujs - v1.2.1
|
||||
* 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
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var tslib = require('tslib');
|
||||
|
||||
var Default = {
|
||||
parentTrigger: 'li',
|
||||
subMenu: 'ul',
|
||||
toggle: true,
|
||||
triggerElement: 'a',
|
||||
};
|
||||
var ClassName = {
|
||||
ACTIVE: 'mm-active',
|
||||
COLLAPSE: 'mm-collapse',
|
||||
COLLAPSED: 'mm-collapsed',
|
||||
COLLAPSING: 'mm-collapsing',
|
||||
METIS: 'metismenu',
|
||||
SHOW: 'mm-show',
|
||||
};
|
||||
|
||||
function matches(element, selector) {
|
||||
var nativeMatches = element.matches
|
||||
|| element.webkitMatchesSelector
|
||||
|| element.msMatchesSelector;
|
||||
return nativeMatches.call(element, selector);
|
||||
}
|
||||
function closest(element, selector) {
|
||||
if (element.closest) {
|
||||
return element.closest(selector);
|
||||
}
|
||||
var el = element;
|
||||
while (el) {
|
||||
if (matches(el, selector)) {
|
||||
return el;
|
||||
}
|
||||
el = el.parentElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
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 = tslib.__assign(tslib.__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;
|
||||
}());
|
||||
|
||||
module.exports = MetisMenu;
|
||||
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* metismenujs - v1.2.1
|
||||
* A menu plugin
|
||||
* https://github.com/onokumus/metismenujs#readme
|
||||
*
|
||||
* Made by Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* Under MIT License
|
||||
*/.metismenu .arrow{float:right;line-height:1.42857}[dir=rtl] .metismenu .arrow{float:left}.metismenu .glyphicon.arrow:before{content:"\e079"}.metismenu .mm-active>a>.glyphicon.arrow:before{content:"\e114"}.metismenu .fa.arrow:before{content:"\f104"}.metismenu .mm-active>a>.fa.arrow:before{content:"\f107"}.metismenu .ion.arrow:before{content:"\f3d2"}.metismenu .mm-active>a>.ion.arrow:before{content:"\f3d0"}.metismenu .plus-times{float:right}[dir=rtl] .metismenu .plus-times{float:left}.metismenu .fa.plus-times:before{content:"\f067"}.metismenu .mm-active>a>.fa.plus-times{transform:rotate(45deg)}.metismenu .plus-minus{float:right}[dir=rtl] .metismenu .plus-minus{float:left}.metismenu .fa.plus-minus:before{content:"\f067"}.metismenu .mm-active>a>.fa.plus-minus:before{content:"\f068"}.metismenu .mm-collapse:not(.mm-show){display:none}.metismenu .mm-collapsing{position:relative;height:0;overflow:hidden;transition-timing-function:ease;transition-duration:.35s;transition-property:height,visibility}.metismenu .has-arrow{position:relative}.metismenu .has-arrow:after{position:absolute;content:"";width:.5em;height:.5em;border-style:solid;border-width:1px 0 0 1px;border-color:initial;right:1em;transform:rotate(-45deg) translateY(-50%);transform-origin:top;top:50%;transition:all .3s ease-out}[dir=rtl] .metismenu .has-arrow:after{right:auto;left:1em;transform:rotate(135deg) translateY(-50%)}.metismenu .has-arrow[aria-expanded=true]:after,.metismenu .mm-active>.has-arrow:after{transform:rotate(-135deg) translateY(-50%)}[dir=rtl] .metismenu .has-arrow[aria-expanded=true]:after,[dir=rtl] .metismenu .mm-active>.has-arrow:after{transform:rotate(225deg) translateY(-50%)}
|
||||
/*# sourceMappingURL=metismenujs.min.css.map */
|
||||
@@ -0,0 +1,24 @@
|
||||
/*!
|
||||
* metismenujs - v1.2.1
|
||||
* 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=t||self).MetisMenu=e()}(this,function(){"use strict";
|
||||
/*! *****************************************************************************
|
||||
Copyright (c) Microsoft Corporation.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
***************************************************************************** */var i=function(){return(i=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var s in e=arguments[i])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},n={parentTrigger:"li",subMenu:"ul",toggle:!0,triggerElement:"a"},g="mm-active",f="mm-collapse",m="mm-collapsed",p="mm-collapsing",t="metismenu",v="mm-show";function y(t,e){if(t.closest)return t.closest(e);for(var i,n,s=t;s;){if(n=e,((i=s).matches||i.webkitMatchesSelector||i.msMatchesSelector).call(i,n))return s;s=s.parentElement}return null}function s(t,e){this.element=s.isElement(t)?t:document.querySelector(t),this.config=i(i({},n),e),this.disposed=!1,this.triggerArr=[],this.init()}return s.attach=function(t,e){return new s(t,e)},s.prototype.init=function(){var n=this,s=g,r=f;this.element.classList.add(t),[].slice.call(this.element.querySelectorAll(this.config.subMenu)).forEach(function(t){t.classList.add(r);var e=y(t,n.config.parentTrigger);null!=e&&e.classList.contains(s)?n.show(t):n.hide(t);var i=null==e?void 0:e.querySelector(n.config.triggerElement);"true"!==(null==i?void 0:i.getAttribute("aria-disabled"))&&(null!=i&&i.setAttribute("aria-expanded","false"),null!=i&&i.addEventListener("click",n.clickEvent.bind(n)),n.triggerArr.push(i))})},s.prototype.clickEvent=function(t){var e,i,n;this.disposed||((e=null==t?void 0:t.currentTarget)&&"A"===e.tagName&&t.preventDefault(),n=null==(i=y(e,this.config.parentTrigger))?void 0:i.querySelector(this.config.subMenu),this.toggle(n))},s.prototype.update=function(){this.disposed=!1,this.init()},s.prototype.dispose=function(){var e=this;this.triggerArr.forEach(function(t){t.removeEventListener("click",e.clickEvent.bind(e))}),this.disposed=!0},s.prototype.on=function(t,e,i){return this.element.addEventListener(t,e,i),this},s.prototype.off=function(t,e,i){return this.element.removeEventListener(t,e,i),this},s.prototype.emit=function(t,e,i){var n;return void 0===i&&(i=!1),"function"==typeof CustomEvent?n=new CustomEvent(t,{bubbles:i,detail:e}):(n=document.createEvent("CustomEvent")).initCustomEvent(t,i,!1,e),this.element.dispatchEvent(n),this},s.prototype.toggle=function(t){var e=y(t,this.config.parentTrigger);null!=e&&e.classList.contains(g)?this.hide(t):this.show(t)},s.prototype.show=function(t){var e,i,n,s,r,o=this,l=t,a=g,c=f,u=m,h=p,d=v;this.isTransitioning||l.classList.contains(h)||(i=function(){l.classList.remove(h),l.style.height="",l.removeEventListener("transitionend",i),o.setTransitioning(!1),o.emit("shown.metisMenu",{shownElement:l})},null!=(n=y(l,this.config.parentTrigger))&&n.classList.add(a),null!=(s=null==n?void 0:n.querySelector(this.config.triggerElement))&&s.setAttribute("aria-expanded","true"),null!=s&&s.classList.remove(u),l.style.height="0px",l.classList.remove(c),l.classList.remove(d),l.classList.add(h),r=[].slice.call(null===(e=null==n?void 0:n.parentNode)||void 0===e?void 0:e.children).filter(function(t){return t!==n}),this.config.toggle&&0<r.length&&r.forEach(function(t){var e=t.querySelector(o.config.subMenu);e&&o.hide(e)}),this.setTransitioning(!0),l.classList.add(c),l.classList.add(d),l.style.height=l.scrollHeight+"px",this.emit("show.metisMenu",{showElement:l}),l.addEventListener("transitionend",i))},s.prototype.hide=function(t){var e,i,n,s=this,r=g,o=f,l=m,a=p,c=v,u=t;!this.isTransitioning&&u.classList.contains(c)&&(this.emit("hide.metisMenu",{hideElement:u}),null!=(e=y(u,this.config.parentTrigger))&&e.classList.remove(r),i=function(){u.classList.remove(a),u.classList.add(o),u.style.height="",u.removeEventListener("transitionend",i),s.setTransitioning(!1),s.emit("hidden.metisMenu",{hiddenElement:u})},u.style.height=u.getBoundingClientRect().height+"px",u.style.height=u.offsetHeight+"px",u.classList.add(a),u.classList.remove(o),u.classList.remove(c),this.setTransitioning(!0),u.addEventListener("transitionend",i),u.style.height="0px",null!=(n=null==e?void 0:e.querySelector(this.config.triggerElement))&&n.setAttribute("aria-expanded","false"),null!=n&&n.classList.add(l))},s.prototype.setTransitioning=function(t){this.isTransitioning=t},s.isElement=function(t){return Boolean(t.classList)},s});
|
||||
//# sourceMappingURL=metismenujs.min.js.map
|
||||
@@ -0,0 +1,14 @@
|
||||
export var Default = {
|
||||
parentTrigger: 'li',
|
||||
subMenu: 'ul',
|
||||
toggle: true,
|
||||
triggerElement: 'a',
|
||||
};
|
||||
export var ClassName = {
|
||||
ACTIVE: 'mm-active',
|
||||
COLLAPSE: 'mm-collapse',
|
||||
COLLAPSED: 'mm-collapsed',
|
||||
COLLAPSING: 'mm-collapsing',
|
||||
METIS: 'metismenu',
|
||||
SHOW: 'mm-show',
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
"use strict";
|
||||
@@ -0,0 +1,189 @@
|
||||
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;
|
||||
@@ -0,0 +1,19 @@
|
||||
export function matches(element, selector) {
|
||||
var nativeMatches = element.matches
|
||||
|| element.webkitMatchesSelector
|
||||
|| element.msMatchesSelector;
|
||||
return nativeMatches.call(element, selector);
|
||||
}
|
||||
export function closest(element, selector) {
|
||||
if (element.closest) {
|
||||
return element.closest(selector);
|
||||
}
|
||||
var el = element;
|
||||
while (el) {
|
||||
if (matches(el, selector)) {
|
||||
return el;
|
||||
}
|
||||
el = el.parentElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user