@syncfusion/ej2-navigations
Version:
A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another
1,121 lines (1,120 loc) • 114 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, Property, ChildProperty, NotifyPropertyChanges, isBlazor } from '@syncfusion/ej2-base';
import { Event, EventHandler, KeyboardEvents, Touch } from '@syncfusion/ej2-base';
import { Animation } from '@syncfusion/ej2-base';
import { Browser, Collection, setValue, getValue, getUniqueID, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';
import { select, selectAll, closest, detach, append, rippleEffect, isVisible, Complex, addClass, removeClass } from '@syncfusion/ej2-base';
import { ListBase } from '@syncfusion/ej2-lists';
import { getZindexPartial, calculatePosition, isCollide, fit, Popup } from '@syncfusion/ej2-popups';
import { SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { getScrollableParent } from '@syncfusion/ej2-popups';
import { HScroll } from '../common/h-scroll';
import { VScroll } from '../common/v-scroll';
import { addScrolling, destroyScroll } from '../common/menu-scroll';
var ENTER = 'enter';
var ESCAPE = 'escape';
var FOCUSED = 'e-focused';
var HEADER = 'e-menu-header';
var SELECTED = 'e-selected';
var SEPARATOR = 'e-separator';
var UPARROW = 'uparrow';
var DOWNARROW = 'downarrow';
var LEFTARROW = 'leftarrow';
var RIGHTARROW = 'rightarrow';
var HOME = 'home';
var END = 'end';
var TAB = 'tab';
var CARET = 'e-caret';
var ITEM = 'e-menu-item';
var DISABLED = 'e-disabled';
var HIDE = 'e-menu-hide';
var ICONS = 'e-icons';
var RTL = 'e-rtl';
var POPUP = 'e-menu-popup';
var TEMPLATE_PROPERTY = 'Template';
/**
* Configures the field options of the Menu.
*/
var FieldSettings = /** @class */ (function (_super) {
__extends(FieldSettings, _super);
function FieldSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('id')
], FieldSettings.prototype, "itemId", void 0);
__decorate([
Property('parentId')
], FieldSettings.prototype, "parentId", void 0);
__decorate([
Property('text')
], FieldSettings.prototype, "text", void 0);
__decorate([
Property('iconCss')
], FieldSettings.prototype, "iconCss", void 0);
__decorate([
Property('url')
], FieldSettings.prototype, "url", void 0);
__decorate([
Property('separator')
], FieldSettings.prototype, "separator", void 0);
__decorate([
Property('items')
], FieldSettings.prototype, "children", void 0);
return FieldSettings;
}(ChildProperty));
export { FieldSettings };
/**
* Specifies menu items.
*/
var MenuItem = /** @class */ (function (_super) {
__extends(MenuItem, _super);
function MenuItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(null)
], MenuItem.prototype, "iconCss", void 0);
__decorate([
Property('')
], MenuItem.prototype, "id", void 0);
__decorate([
Property(false)
], MenuItem.prototype, "separator", void 0);
__decorate([
Collection([], MenuItem)
], MenuItem.prototype, "items", void 0);
__decorate([
Property('')
], MenuItem.prototype, "text", void 0);
__decorate([
Property('')
], MenuItem.prototype, "url", void 0);
__decorate([
Property()
], MenuItem.prototype, "htmlAttributes", void 0);
return MenuItem;
}(ChildProperty));
export { MenuItem };
/**
* Animation configuration settings.
*/
var MenuAnimationSettings = /** @class */ (function (_super) {
__extends(MenuAnimationSettings, _super);
function MenuAnimationSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('SlideDown')
], MenuAnimationSettings.prototype, "effect", void 0);
__decorate([
Property(400)
], MenuAnimationSettings.prototype, "duration", void 0);
__decorate([
Property('ease')
], MenuAnimationSettings.prototype, "easing", void 0);
return MenuAnimationSettings;
}(ChildProperty));
export { MenuAnimationSettings };
/**
* Base class for Menu and ContextMenu components.
*
* @private
*/
var MenuBase = /** @class */ (function (_super) {
__extends(MenuBase, _super);
/**
* Constructor for creating the widget.
*
* @private
* @param {MenuBaseModel} options - Specifies the menu base model
* @param {string | HTMLUListElement} element - Specifies the element
*/
function MenuBase(options, element) {
var _this = _super.call(this, options, element) || this;
_this.navIdx = [];
_this.animation = new Animation({});
_this.isTapHold = false;
_this.tempItem = [];
_this.showSubMenuOn = 'Auto';
_this.isAnimationNone = false;
_this.isKBDAction = false;
return _this;
}
/**
* Initialized third party configuration settings.
*
* @private
* @returns {void}
*/
MenuBase.prototype.preRender = function () {
if (!this.isMenu) {
var ul = void 0;
if (this.element.tagName === 'EJS-CONTEXTMENU') {
ul = this.createElement('ul', {
id: getUniqueID(this.getModuleName()), className: 'e-control e-lib e-' + this.getModuleName()
});
var ejInst = getValue('ej2_instances', this.element);
removeClass([this.element], ['e-control', 'e-lib', 'e-' + this.getModuleName()]);
this.clonedElement = this.element;
this.element = ul;
setValue('ej2_instances', ejInst, this.element);
}
else {
ul = this.createElement('ul', { id: getUniqueID(this.getModuleName()) });
append([].slice.call(this.element.cloneNode(true).children), ul);
var refEle = this.element.nextElementSibling;
if (refEle) {
this.element.parentElement.insertBefore(ul, refEle);
}
else {
this.element.parentElement.appendChild(ul);
}
this.clonedElement = ul;
}
this.clonedElement.style.display = 'none';
}
if (this.element.tagName === 'EJS-MENU') {
var ele = this.element;
var ejInstance = getValue('ej2_instances', ele);
var ul = this.createElement('ul');
var wrapper = this.createElement('EJS-MENU', { className: 'e-' + this.getModuleName() + '-wrapper' });
for (var idx = 0, len = ele.attributes.length; idx < len; idx++) {
ul.setAttribute(ele.attributes[idx].nodeName, ele.attributes[idx].nodeValue);
}
ele.parentNode.insertBefore(wrapper, ele);
detach(ele);
ele = ul;
wrapper.appendChild(ele);
setValue('ej2_instances', ejInstance, ele);
this.clonedElement = wrapper;
this.element = ele;
if (!this.element.id) {
this.element.id = getUniqueID(this.getModuleName());
}
}
};
/**
* Initialize the control rendering.
*
* @private
* @returns {void}
*/
MenuBase.prototype.render = function () {
var _this = this;
this.initialize();
this.renderItems();
this.wireEvents();
this.renderComplete();
var wrapper = this.getWrapper();
// eslint-disable-next-line
if (this.template && this.enableScrolling && (this.isReact || this.isAngular)) {
requestAnimationFrame(function () {
addScrolling(_this.createElement, wrapper, _this.element, 'hscroll', _this.enableRtl);
});
}
};
MenuBase.prototype.enableTouchScroll = function (scrollList) {
var touchStartY = 0;
this.touchStartFn = function (e) {
touchStartY = e.touches[0].clientY;
};
this.touchMoveFn = function (e) {
var touchEndY = e.touches[0].clientY;
var touchDiff = touchStartY - touchEndY;
var atTop = scrollList.scrollTop === 0;
var atBottom = scrollList.scrollTop + scrollList.clientHeight === scrollList.scrollHeight;
if ((atTop && touchDiff < 0) || (atBottom && touchDiff > 0)) {
e.preventDefault();
}
touchStartY = touchEndY;
};
scrollList.addEventListener('touchstart', this.touchStartFn, { passive: false });
scrollList.addEventListener('touchmove', this.touchMoveFn, { passive: false });
};
MenuBase.prototype.touchOutsideHandler = function (e) {
var target = e.target;
if (!closest(target, '.e-' + this.getModuleName() + '-wrapper')) {
this.closeMenu();
}
};
MenuBase.prototype.initialize = function () {
var wrapper = this.getWrapper();
if (!wrapper) {
wrapper = this.createElement('div', { className: 'e-' + this.getModuleName() + '-wrapper' });
if (this.isMenu) {
this.element.parentElement.insertBefore(wrapper, this.element);
}
else {
document.body.appendChild(wrapper);
}
}
if (this.cssClass) {
addClass([wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
}
if (this.enableRtl) {
wrapper.classList.add(RTL);
}
wrapper.appendChild(this.element);
if (this.isMenu && this.hamburgerMode) {
if (!this.target) {
this.createHeaderContainer(wrapper);
}
}
this.defaultOption = this.showItemOnClick;
};
MenuBase.prototype.renderItems = function () {
if (!this.items.length) {
var items = ListBase.createJsonFromElement(this.element, { fields: { child: 'items' } });
this.setProperties({ items: items }, true);
if (isBlazor() && !this.isMenu) {
this.element = this.removeChildElement(this.element);
}
else {
this.element.innerHTML = '';
}
}
var ul = this.createItems(this.items);
append(Array.prototype.slice.call(ul.children), this.element);
this.element.classList.add('e-menu-parent');
if (this.isMenu) {
if (!this.hamburgerMode && this.element.classList.contains('e-vertical')) {
this.setBlankIconStyle(this.element);
}
if (this.enableScrolling) {
var wrapper = this.getWrapper();
if (this.element.classList.contains('e-vertical')) {
addScrolling(this.createElement, wrapper, this.element, 'vscroll', this.enableRtl);
}
else {
addScrolling(this.createElement, wrapper, this.element, 'hscroll', this.enableRtl);
}
}
}
else {
this.element.parentElement.setAttribute('role', 'dialog');
this.element.parentElement.setAttribute('aria-label', 'context menu');
}
};
MenuBase.prototype.wireEvents = function () {
var wrapper = this.getWrapper();
if (this.target) {
var target = void 0;
var targetElems = selectAll(this.target);
for (var i = 0, len = targetElems.length; i < len; i++) {
target = targetElems[i];
if (this.isMenu) {
EventHandler.add(target, 'click', this.menuHeaderClickHandler, this);
}
else {
if (Browser.isIos) {
new Touch(target, { tapHold: this.touchHandler.bind(this) });
}
else {
EventHandler.add(target, 'contextmenu', this.cmenuHandler, this);
}
}
}
this.targetElement = target;
if (!this.isMenu) {
EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
var parent_1 = _a[_i];
EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
}
}
}
if (!Browser.isDevice) {
this.delegateMoverHandler = this.moverHandler.bind(this);
this.delegateMouseDownHandler = this.mouseDownHandler.bind(this);
EventHandler.add(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler, this);
EventHandler.add(document, 'mousedown', this.delegateMouseDownHandler, this);
EventHandler.add(document, 'keydown', this.domKeyHandler, this);
if (!this.isMenu && !this.target) {
EventHandler.add(document, 'scroll', this.scrollHandler, this);
}
}
this.delegateClickHandler = this.clickHandler.bind(this);
EventHandler.add(document, 'click', this.delegateClickHandler, this);
this.wireKeyboardEvent(wrapper);
this.rippleFn = rippleEffect(wrapper, { selector: '.' + ITEM });
if (!this.isMenu && this.enableScrolling) {
this.enableTouchScroll(wrapper);
document.addEventListener('touchstart', this.touchOutsideHandler.bind(this), { passive: true });
}
};
MenuBase.prototype.wireKeyboardEvent = function (element) {
var keyConfigs = {
downarrow: DOWNARROW,
uparrow: UPARROW,
enter: ENTER,
leftarrow: LEFTARROW,
rightarrow: RIGHTARROW,
escape: ESCAPE
};
if (this.isMenu) {
keyConfigs.home = HOME;
keyConfigs.end = END;
keyConfigs.tab = TAB;
}
new KeyboardEvents(element, {
keyAction: this.keyBoardHandler.bind(this),
keyConfigs: keyConfigs
});
};
MenuBase.prototype.mouseDownHandler = function (e) {
if (closest(e.target, '.e-' + this.getModuleName() + '-wrapper') !== this.getWrapper()
&& (!closest(e.target, '.e-' + this.getModuleName() + '-popup'))) {
this.closeMenu(this.isMenu ? null : this.navIdx.length, e);
}
};
MenuBase.prototype.keyHandler = function (e) {
if (e.keyCode === 38 || e.keyCode === 40) {
if (e.target && (e.target.classList.contains('e-contextmenu') || e.target.classList.contains('e-menu-item'))) {
e.preventDefault();
}
}
};
MenuBase.prototype.domKeyHandler = function (e) {
if (e.keyCode === 27) {
if (this.isMenuVisible()) {
e.stopImmediatePropagation();
}
e.action = ESCAPE;
this.leftEscKeyHandler(e);
}
};
MenuBase.prototype.keyBoardHandler = function (e) {
var actionName = '';
var trgt = e.target;
var actionNeeded = this.isMenu && !this.hamburgerMode && !this.element.classList.contains('e-vertical')
&& this.navIdx.length < 1;
e.preventDefault();
if (this.enableScrolling && e.keyCode === 13 && trgt.classList.contains('e-scroll-nav')) {
this.removeLIStateByClass([FOCUSED, SELECTED], [closest(trgt, '.e-' + this.getModuleName() + '-wrapper')]);
}
this.isKBDAction = true;
if (actionNeeded) {
switch (e.action) {
case RIGHTARROW:
actionName = RIGHTARROW;
e.action = DOWNARROW;
break;
case LEFTARROW:
actionName = LEFTARROW;
e.action = UPARROW;
break;
case DOWNARROW:
actionName = DOWNARROW;
e.action = RIGHTARROW;
break;
case UPARROW:
actionName = UPARROW;
e.action = '';
break;
}
}
else if (this.enableRtl) {
switch (e.action) {
case LEFTARROW:
actionNeeded = true;
actionName = LEFTARROW;
e.action = RIGHTARROW;
break;
case RIGHTARROW:
actionNeeded = true;
actionName = RIGHTARROW;
e.action = LEFTARROW;
break;
}
}
switch (e.action) {
case DOWNARROW:
case UPARROW:
case END:
case HOME:
case TAB:
this.upDownKeyHandler(e);
break;
case RIGHTARROW:
this.rightEnterKeyHandler(e);
break;
case LEFTARROW:
this.leftEscKeyHandler(e);
break;
case ENTER:
if (this.hamburgerMode && trgt.tagName === 'SPAN' && trgt.classList.contains('e-menu-icon')) {
this.menuHeaderClickHandler(e);
}
else {
this.rightEnterKeyHandler(e);
}
break;
}
if (this.isAnimationNone) {
this.isKBDAction = false;
}
if (actionNeeded) {
e.action = actionName;
}
};
MenuBase.prototype.upDownKeyHandler = function (e) {
var cul = this.getUlByNavIdx();
var defaultIdx = (e.action === DOWNARROW || e.action === HOME || e.action === TAB) ? 0 : cul.childElementCount - 1;
var fliIdx = defaultIdx;
var fli = this.getLIByClass(cul, FOCUSED);
if (fli) {
if (e.action !== END && e.action !== HOME) {
fliIdx = this.getIdx(cul, fli);
}
fli.classList.remove(FOCUSED);
if (e.action !== END && e.action !== HOME) {
if (e.action === DOWNARROW) {
fliIdx++;
}
else {
fliIdx--;
}
if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {
fliIdx = defaultIdx;
}
}
}
var cli = cul.children[fliIdx];
fliIdx = this.isValidLI(cli, fliIdx, e.action);
cul.children[fliIdx].classList.add(FOCUSED);
cul.children[fliIdx].focus();
};
MenuBase.prototype.isValidLI = function (cli, index, action) {
var cul = this.getUlByNavIdx();
var defaultIdx = (action === DOWNARROW || action === HOME || action === TAB) ? 0 : cul.childElementCount - 1;
if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {
if (action === DOWNARROW && index === cul.childElementCount - 1) {
index = defaultIdx;
}
else if (action === UPARROW && index === 0) {
index = defaultIdx;
}
else if ((action === DOWNARROW) || (action === RIGHTARROW)) {
index++;
}
else if (action === 'tab' && cli.classList.contains(SEPARATOR)) {
index++;
}
else {
index--;
}
}
cli = cul.children[index];
if (cli && (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE))) {
index = this.isValidLI(cli, index, action);
}
return index;
};
MenuBase.prototype.getUlByNavIdx = function (navIdxLen) {
var _this = this;
if (navIdxLen === void 0) { navIdxLen = this.navIdx.length; }
if (this.isMenu) {
var popup = [this.getWrapper()].concat([].slice.call(selectAll('.' + POPUP)))[navIdxLen];
var popups_1 = [];
var allPopup = selectAll('.' + POPUP);
allPopup.forEach(function (elem) {
if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {
popups_1.push(elem);
}
});
popup = [this.getWrapper()].concat([].slice.call(popups_1))[navIdxLen];
return isNullOrUndefined(popup) ? null : select('.e-menu-parent', popup);
}
else {
if (!document.body.contains(this.element) && navIdxLen === 0) {
return null;
}
return this.getWrapper().children[navIdxLen];
}
};
MenuBase.prototype.rightEnterKeyHandler = function (e) {
var eventArgs;
var cul = this.getUlByNavIdx();
var fli = this.getLIByClass(cul, FOCUSED);
if (fli) {
var fliIdx = this.getIdx(cul, fli);
var navIdx = this.navIdx.concat(fliIdx);
var item = this.getItem(navIdx);
if (item.items.length) {
this.navIdx.push(fliIdx);
this.keyType = 'right';
this.action = e.action;
this.openMenu(fli, item, -1, -1, e);
}
else {
if (e.action === ENTER) {
if (this.isMenu && this.navIdx.length === 0) {
this.removeLIStateByClass([SELECTED], [this.getWrapper()]);
}
else {
fli.classList.remove(FOCUSED);
}
fli.classList.add(SELECTED);
eventArgs = { element: fli, item: item, event: e };
this.trigger('select', eventArgs);
var aEle = fli.querySelector('.e-menu-url');
if (item.url && aEle) {
switch (aEle.getAttribute('target')) {
case '_blank':
window.open(item.url, '_blank');
break;
case '_parent':
window.parent.location.href = item.url;
break;
default:
window.location.href = item.url;
}
}
this.closeMenu(null, e);
var sli = this.getLIByClass(this.getUlByNavIdx(), SELECTED);
if (sli) {
sli.classList.add(FOCUSED);
sli.focus();
}
}
}
}
};
MenuBase.prototype.leftEscKeyHandler = function (e) {
if (this.navIdx.length) {
this.keyType = 'left';
this.closeMenu(this.navIdx.length, e);
}
else {
if (e.action === ESCAPE) {
this.closeMenu(null, e);
}
}
};
MenuBase.prototype.scrollHandler = function (e) {
this.closeMenu(null, e);
};
MenuBase.prototype.touchHandler = function (e) {
this.isTapHold = true;
this.cmenuHandler(e.originalEvent);
};
MenuBase.prototype.cmenuHandler = function (e) {
e.preventDefault();
this.currentTarget = e.target;
this.isCMenu = true;
this.pageX = e.changedTouches ? e.changedTouches[0].pageX + 1 : e.pageX + 1;
this.pageY = e.changedTouches ? e.changedTouches[0].pageY + 1 : e.pageY + 1;
this.closeMenu(null, e);
if (this.isCMenu) {
if (this.canOpen(e.target)) {
this.openMenu(null, null, this.pageY, this.pageX, e);
}
this.isCMenu = false;
}
};
// eslint:disable-next-line:max-func-body-length
MenuBase.prototype.closeMenu = function (ulIndex, e, isIterated) {
var _this = this;
if (ulIndex === void 0) { ulIndex = 0; }
if (e === void 0) { e = null; }
if (this.isMenuVisible()) {
var sli = void 0;
var item_1;
var wrapper_1 = this.getWrapper();
var beforeCloseArgs = void 0;
var items_1;
var popups = this.getPopups();
var isClose = false;
var cnt = this.isMenu ? popups.length + 1 : wrapper_1.childElementCount;
var ul_1 = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])
: selectAll('.e-menu-parent', wrapper_1)[cnt - 1];
if (this.isMenu && ul_1.classList.contains('e-menu')) {
sli = this.getLIByClass(ul_1, SELECTED);
if (sli) {
sli.classList.remove(SELECTED);
}
isClose = true;
}
if (!isClose) {
var liElem_1 = e && e.target && this.getLI(e.target);
if (liElem_1) {
this.cli = liElem_1;
}
else {
this.cli = ul_1.children[0];
}
item_1 = this.navIdx.length ? this.getItem(this.navIdx) : null;
items_1 = item_1 ? item_1.items : this.items;
beforeCloseArgs = { element: ul_1, parentItem: item_1, items: items_1, event: e, cancel: false, isFocused: true };
this.trigger('beforeClose', beforeCloseArgs, function (observedCloseArgs) {
var popupEle;
var closeArgs;
var popupId = '';
var popupObj;
var isOpen = !observedCloseArgs.cancel;
if (isOpen || _this.isCMenu) {
if (_this.isMenu) {
popupEle = closest(ul_1, '.' + POPUP);
if (_this.hamburgerMode) {
popupEle.parentElement.style.minHeight = '';
closest(ul_1, '.e-menu-item').setAttribute('aria-expanded', 'false');
}
_this.unWireKeyboardEvent(popupEle);
destroyScroll(getInstance(popupEle.children[0], VScroll), popupEle.children[0]);
popupObj = getInstance(popupEle, Popup);
popupObj.hide();
popupId = popupEle.id;
popupObj.destroy();
detach(popupEle);
}
else {
_this.isContextMenuClosed = false;
_this.toggleAnimation(ul_1, false);
}
closeArgs = { element: ul_1, parentItem: item_1, items: items_1 };
_this.trigger('onClose', closeArgs);
_this.navIdx.pop();
if (_this.navIdx.length === 0 && e && e.type === 'keyup') {
_this.showSubMenu = false;
}
if (!_this.isMenu) {
EventHandler.remove(ul_1, 'keydown', _this.keyHandler);
if (_this.keyType === 'right') {
_this.keyType = '';
}
}
}
_this.updateReactTemplate();
var trgtliId;
var closedLi;
var trgtLi;
var trgtpopUp = _this.getWrapper() && _this.getUlByNavIdx();
if (_this.isCMenu) {
if (_this.canOpen(e.target)) {
_this.openMenu(null, null, _this.pageY, _this.pageX, e);
}
_this.isCMenu = false;
}
if (_this.isMenu && trgtpopUp && popupId.length) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var regExp = RegExp;
trgtliId = new regExp('(.*)-ej2menu-' + _this.element.id + '-popup').exec(popupId)[1];
closedLi = trgtpopUp.querySelector('[id="' + trgtliId + '"]');
trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
}
else if (trgtpopUp) {
closedLi = trgtpopUp.querySelector('.e-menu-item.e-selected');
trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
}
var submenus = liElem_1 && liElem_1.querySelectorAll('.e-menu-item');
if (isOpen && _this.hamburgerMode && ulIndex && !(submenus.length)) {
_this.afterCloseMenu(e);
}
else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {
var ele = (e && e.target.classList && (e.target.classList.contains('e-vscroll') || e.target.classList.contains('e-scroll-nav')))
? closest(e.target, '.e-menu-wrapper') : null;
if (ele) {
ele = ele.querySelector('.e-menu-item');
if (_this.showItemOnClick || (ele && _this.getIndex(ele.id, true).length <= _this.navIdx.length)) {
_this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e, true);
}
}
else {
if (!(e && e.target.classList && e.target.classList.contains('e-nav-arrow'))) {
_this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e);
}
}
}
else if (isOpen && !isIterated && !ulIndex && ((_this.hamburgerMode && _this.navIdx.length) ||
_this.navIdx.length === 1 && liElem_1 && trgtpopUp !== liElem_1.parentElement)) {
_this.closeMenu(null, e);
}
else if (isOpen && isNullOrUndefined(ulIndex) && _this.navIdx.length) {
_this.closeMenu(null, e);
}
else if (isOpen && !_this.isMenu && !ulIndex && _this.navIdx.length === 0 &&
!_this.isMenusClosed && !_this.isCmenuHover) {
_this.isMenusClosed = true;
_this.closeMenu(0, e);
}
else if (isOpen && _this.isMenu && e && e.target &&
_this.navIdx.length !== 0 && closest(e.target, '.e-menu-parent.e-control')) {
_this.closeMenu(0, e);
}
else if (isOpen && !_this.isMenu && selectAll('.e-menu-parent', wrapper_1)[ulIndex - 1] && e.which === 3) {
_this.closeMenu(null, e);
}
else {
if (isOpen && (_this.keyType === 'right' || _this.keyType === 'click')) {
_this.afterCloseMenu(e);
}
else {
var cul = _this.getUlByNavIdx();
var sli_1 = _this.getLIByClass(cul, SELECTED);
if (sli_1) {
sli_1.setAttribute('aria-expanded', 'false');
sli_1.classList.remove(SELECTED);
if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === 'left') {
sli_1.classList.add(FOCUSED);
if (!e.target || !e.target.classList.contains('e-edit-template')) {
sli_1.focus();
}
}
}
if (!isOpen && _this.hamburgerMode && liElem_1 && liElem_1.getAttribute('aria-expanded') === 'false' &&
liElem_1.getAttribute('aria-haspopup') === 'true') {
if (closest(liElem_1, '.e-menu-parent.e-control')) {
_this.navIdx = [];
}
else {
_this.navIdx.pop();
}
_this.navIdx.push(_this.cliIdx);
var item_2 = _this.getItem(_this.navIdx);
liElem_1.setAttribute('aria-expanded', 'true');
_this.openMenu(liElem_1, item_2, -1, -1, e);
}
}
if (_this.navIdx.length < 1) {
if (_this.showSubMenuOn === 'Hover' || _this.showSubMenuOn === 'Click') {
_this.showItemOnClick = _this.defaultOption;
_this.showSubMenuOn = 'Auto';
}
}
}
_this.removeStateWrapper();
});
}
}
};
MenuBase.prototype.updateReactTemplate = function () {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (this.isReact && this.template && this.navIdx.length === 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var portals = void 0;
if (this.portals) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
portals = this.portals.splice(0, this.items.length);
}
this.clearTemplate(['template']);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.portals = portals;
this.renderReactTemplates();
}
};
MenuBase.prototype.getMenuItemModel = function (item, level) {
if (isNullOrUndefined(item)) {
return null;
}
if (isNullOrUndefined(level)) {
level = 0;
}
var fields = this.getFields(level);
return { text: item[fields.text], id: item[fields.id], items: item[fields.child], separator: item[fields.separator],
iconCss: item[fields.iconCss], url: item[fields.url] };
};
MenuBase.prototype.getPopups = function () {
var _this = this;
var popups = [];
[].slice.call(document.querySelectorAll('.' + POPUP)).forEach(function (elem) {
if (!isNullOrUndefined(elem.querySelector('.' + ITEM)) && _this.getIndex(elem.querySelector('.' + ITEM).id, true).length) {
popups.push(elem);
}
});
return popups;
};
MenuBase.prototype.isMenuVisible = function () {
return (this.navIdx.length > 0 || (this.element.classList.contains('e-contextmenu') && isVisible(this.element).valueOf()));
};
MenuBase.prototype.canOpen = function (target) {
var canOpen = true;
if (this.filter) {
canOpen = false;
var filter = this.filter.split(' ');
for (var i = 0, len = filter.length; i < len; i++) {
if (closest(target, '.' + filter[i])) {
canOpen = true;
break;
}
}
}
return canOpen;
};
MenuBase.prototype.openMenu = function (li, item, top, left, e, target) {
var _this = this;
if (top === void 0) { top = 0; }
if (left === void 0) { left = 0; }
if (e === void 0) { e = null; }
if (target === void 0) { target = this.targetElement; }
var wrapper = this.getWrapper();
this.lItem = li;
var elemId = this.element.id !== '' ? this.element.id : 'menu';
this.isMenusClosed = false;
if (isNullOrUndefined(top)) {
top = -1;
}
if (isNullOrUndefined(left)) {
left = -1;
}
if (li) {
this.uList = this.createItems(item[this.getField('children', this.navIdx.length - 1)]);
if (!this.isMenu && Browser.isDevice) {
wrapper.lastChild.style.display = 'none';
var data = {
text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'
};
if (this.template) {
item.iconCss = (item.iconCss || '') + ICONS + ' e-previous';
}
var hdata = new MenuItem(this.items[0], 'items', this.template ? item : data, true);
var hli = this.createItems([hdata]).children[0];
hli.classList.add(HEADER);
this.uList.insertBefore(hli, this.uList.children[0]);
}
if (this.isMenu) {
this.popupWrapper = this.createElement('div', {
className: 'e-' + this.getModuleName() + '-wrapper ' + POPUP, id: li.id + '-ej2menu-' + elemId + '-popup'
});
this.popupWrapper.setAttribute('role', 'navigation');
this.popupWrapper.setAttribute('aria-label', item.text + '-menu-popup');
if (this.hamburgerMode) {
top = li.offsetHeight;
li.appendChild(this.popupWrapper);
}
else {
document.body.appendChild(this.popupWrapper);
}
this.isNestedOrVertical = this.element.classList.contains('e-vertical') || this.navIdx.length !== 1;
this.popupObj = this.generatePopup(this.popupWrapper, this.uList, li, this.isNestedOrVertical);
if (this.template) {
this.renderReactTemplates();
}
if (this.hamburgerMode) {
this.calculateIndentSize(this.uList, li);
}
else {
if (this.cssClass) {
addClass([this.popupWrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
}
this.popupObj.hide();
}
if (!this.hamburgerMode && !this.showItemOnClick && this.hoverDelay) {
window.clearInterval(this.timer);
this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, 0, 0, 'menu'); }, this.hoverDelay);
}
else {
this.triggerBeforeOpen(li, this.uList, item, e, 0, 0, 'menu');
}
}
else {
this.uList.style.zIndex = this.element.style.zIndex;
wrapper.appendChild(this.uList);
if (!this.showItemOnClick && this.hoverDelay) {
window.clearInterval(this.timer);
this.timer = window.setTimeout(function () { _this.triggerBeforeOpen(li, _this.uList, item, e, top, left, 'none'); }, this.hoverDelay);
}
else {
this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');
}
}
}
else {
this.uList = this.element;
this.uList.style.zIndex = getZindexPartial(target ? target : this.element).toString();
if (isNullOrUndefined(e)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var ev = document.createEvent('MouseEvents');
ev.initEvent('click', true, false);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var targetEvent = this.copyObject(ev, {});
targetEvent.target = targetEvent.srcElement = target;
targetEvent.currentTarget = target;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.triggerBeforeOpen(li, this.uList, item, targetEvent, top, left, 'none');
}
else {
this.triggerBeforeOpen(li, this.uList, item, e, top, left, 'none');
}
}
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
MenuBase.prototype.copyObject = function (source, destination) {
// eslint-disable-next-line guard-for-in
for (var prop in source) {
destination["" + prop] = source["" + prop];
}
return destination;
};
MenuBase.prototype.calculateIndentSize = function (ul, li) {
var liStyle = getComputedStyle(li);
var liIndent = parseInt(liStyle.textIndent, 10);
if (this.navIdx.length < 2 && !li.classList.contains('e-blankicon')) {
liIndent *= 2;
}
else {
liIndent += (liIndent / 4);
}
ul.style.textIndent = liIndent + 'px';
var blankIconElem = ul.querySelectorAll('.e-blankicon');
if (blankIconElem && blankIconElem.length) {
var menuIconElem = ul.querySelector('.e-menu-icon');
var menuIconElemStyle = getComputedStyle(menuIconElem);
var blankIconIndent = (parseInt(menuIconElemStyle.marginRight, 10) + menuIconElem.offsetWidth + liIndent);
for (var i = 0; i < blankIconElem.length; i++) {
blankIconElem[i].style.textIndent = blankIconIndent + 'px';
}
}
};
MenuBase.prototype.generatePopup = function (popupWrapper, ul, li, isNestedOrVertical) {
var _this = this;
var popupObj = new Popup(popupWrapper, {
actionOnScroll: this.hamburgerMode ? 'none' : 'reposition',
relateTo: li,
collision: this.hamburgerMode ? { X: 'none', Y: 'none' } : { X: isNestedOrVertical ||
this.enableRtl ? 'none' : 'flip', Y: 'fit' },
position: (isNestedOrVertical && !this.hamburgerMode) ? { X: 'right', Y: 'top' } : { X: 'left', Y: 'bottom' },
targetType: 'relative',
enableRtl: this.enableRtl,
content: ul,
open: function () {
var scrollEle = select('.e-menu-vscroll', popupObj.element);
if (scrollEle) {
scrollEle.style.height = 'inherit';
scrollEle.style.maxHeight = '';
}
var ul = select('.e-ul', popupObj.element);
popupObj.element.style.maxHeight = '';
ul.focus();
_this.triggerOpen(ul);
}
});
return popupObj;
};
MenuBase.prototype.createHeaderContainer = function (wrapper) {
wrapper = wrapper || this.getWrapper();
var spanElem = this.createElement('span', { className: 'e-' + this.getModuleName() + '-header' });
var tempTitle = (this.enableHtmlSanitizer) ? SanitizeHtmlHelper.sanitize(this.title) : this.title;
var spanTitle = this.createElement('span', {
className: 'e-' + this.getModuleName() + '-title', innerHTML: tempTitle
});
var spanIcon = this.createElement('span', {
className: 'e-icons e-' + this.getModuleName() + '-icon', attrs: { 'tabindex': '0' }
});
spanElem.appendChild(spanTitle);
spanElem.appendChild(spanIcon);
wrapper.insertBefore(spanElem, this.element);
};
MenuBase.prototype.openHamburgerMenu = function (e) {
if (this.hamburgerMode) {
this.triggerBeforeOpen(null, this.element, null, e, 0, 0, 'hamburger');
}
};
MenuBase.prototype.closeHamburgerMenu = function (e) {
var _this = this;
var beforeCloseArgs = { element: this.element, parentItem: null, event: e,
items: this.items, cancel: false };
this.trigger('beforeClose', beforeCloseArgs, function (observedHamburgerCloseArgs) {
if (!observedHamburgerCloseArgs.cancel) {
_this.closeMenu(null, e);
_this.element.classList.add('e-hide-menu');
_this.trigger('onClose', { element: _this.element, parentItem: null, items: _this.items });
}
});
};
MenuBase.prototype.callFit = function (element, x, y, top, left) {
return fit(element, null, { X: x, Y: y }, { top: top, left: left });
};
MenuBase.prototype.triggerBeforeOpen = function (li, ul, item, e, top, left, type) {
var _this = this;
var items = li ? item[this.getField('children', this.navIdx.length - 1)] : this.items;
var eventArgs = {
element: ul, items: items, parentItem: item, event: e, cancel: false, top: top, left: left, showSubMenuOn: 'Auto'
};
var menuType = type;
var observedElement;
this.trigger('beforeOpen', eventArgs, function (observedOpenArgs) {
switch (menuType) {
case 'menu':
if (!_this.hamburgerMode) {
if (observedOpenArgs.showSubMenuOn !== 'Auto') {
_this.showItemOnClick = !_this.defaultOption;
_this.showSubMenuOn = observedOpenArgs.showSubMenuOn;
}
_this.top = observedOpenArgs.top;
_this.left = observedOpenArgs.left;
}
_this.popupWrapper.style.display = 'block';
if (!_this.hamburgerMode) {
_this.popupWrapper.style.maxHeight = _this.popupWrapper.getBoundingClientRect().height + 'px';
if (_this.enableScrolling) {
addScrolling(_this.createElement, _this.popupWrapper, _this.uList, 'vscroll', _this.enableRtl);
}
_this.checkScrollOffset(e);
}
if (!_this.hamburgerMode && !_this.left && !_this.top) {
_this.popupObj.refreshPosition(_this.lItem, true);
_this.left = parseInt(_this.popupWrapper.style.left, 10);
_this.top = parseInt(_this.popupWrapper.style.top, 10);
if (_this.enableRtl) {
_this.left =
_this.isNestedOrVertical ? _this.left - _this.popupWrapper.offsetWidth - _this.lItem.parentElement.offsetWidth + 2
: _this.left - _this.popupWrapper.offsetWidth + _this.lItem.offsetWidth;
}
// eslint-disable-next-line
if (_this.template && (_this.isReact || _this.isAngular)) {
requestAnimationFrame(function () {
_this.collision();
_this.popupWrapper.style.display = '';
});
}
else {
_this.collision();
_this.popupWrapper.style.display = '';
}
}
else {
_this.popupObj.collision = { X: 'none', Y: 'none' };
_this.popupWrapper.style.display = '';
}
break;
case 'none':
_this.top = observedOpenArgs.top;
_this.left = observedOpenArgs.left;
_this.isContextMenuClosed = true;
observedElement = observedOpenArgs.element;
if (_this.enableScrolling && _this.isCMenu && observedElement && observedElement.parentElement) {
observedElement.style.height = observedElement.parentElement.style.height;
}
break;
case 'hamburger':
if (!observedOpenArgs.cancel) {
_this.element.classList.remove('e-hide-menu');
_this.triggerOpen(_this.element);
}
break;
}
if (menuType !== 'hamburger') {
if (observedOpenArgs.cancel) {
if (_this.isMenu) {
_this.popupObj.destroy();
detach(_this.popupWrapper);
}