@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,202 lines • 105 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;
};
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';
import { addClass, removeClass, isVisible, closest, attributes, detach, classList, KeyboardEvents } from '@syncfusion/ej2-base';
import { selectAll, setStyleAttribute as setStyle, select } from '@syncfusion/ej2-base';
import { isNullOrUndefined as isNOU, getUniqueID, formatUnit, Collection, compile as templateCompiler } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, ChildProperty, Browser, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { calculatePosition } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';
import { HScroll } from '../common/h-scroll';
import { VScroll } from '../common/v-scroll';
var CLS_VERTICAL = 'e-vertical';
var CLS_ITEMS = 'e-toolbar-items';
var CLS_ITEM = 'e-toolbar-item';
var CLS_RTL = 'e-rtl';
var CLS_SEPARATOR = 'e-separator';
var CLS_POPUPICON = 'e-popup-up-icon';
var CLS_POPUPDOWN = 'e-popup-down-icon';
var CLS_POPUPOPEN = 'e-popup-open';
var CLS_TEMPLATE = 'e-template';
var CLS_DISABLE = 'e-overlay';
var CLS_POPUPTEXT = 'e-toolbar-text';
var CLS_TBARTEXT = 'e-popup-text';
var CLS_TBAROVERFLOW = 'e-overflow-show';
var CLS_POPOVERFLOW = 'e-overflow-hide';
var CLS_TBARBTN = 'e-tbar-btn';
var CLS_TBARNAV = 'e-hor-nav';
var CLS_TBARSCRLNAV = 'e-scroll-nav';
var CLS_TBARRIGHT = 'e-toolbar-right';
var CLS_TBARLEFT = 'e-toolbar-left';
var CLS_TBARCENTER = 'e-toolbar-center';
var CLS_TBARPOS = 'e-tbar-pos';
var CLS_HSCROLLCNT = 'e-hscroll-content';
var CLS_VSCROLLCNT = 'e-vscroll-content';
var CLS_HSCROLLBAR = 'e-hscroll-bar';
var CLS_POPUPNAV = 'e-hor-nav';
var CLS_POPUPCLASS = 'e-toolbar-pop';
var CLS_POPUP = 'e-toolbar-popup';
var CLS_TBARBTNTEXT = 'e-tbar-btn-text';
var CLS_TBARNAVACT = 'e-nav-active';
var CLS_TBARIGNORE = 'e-ignore';
var CLS_POPPRI = 'e-popup-alone';
var CLS_HIDDEN = 'e-hidden';
var CLS_MULTIROW = 'e-toolbar-multirow';
var CLS_MULTIROWPOS = 'e-multirow-pos';
var CLS_MULTIROW_SEPARATOR = 'e-multirow-separator';
var CLS_EXTENDABLE_SEPARATOR = 'e-extended-separator';
var CLS_EXTEANDABLE_TOOLBAR = 'e-extended-toolbar';
var CLS_EXTENDABLECLASS = 'e-toolbar-extended';
var CLS_EXTENDPOPUP = 'e-expended-nav';
var CLS_EXTENDEDPOPOPEN = 'e-tbar-extended';
/**
* An item object that is used to configure Toolbar commands.
*/
var Item = /** @class */ (function (_super) {
__extends(Item, _super);
function Item() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], Item.prototype, "id", void 0);
__decorate([
Property('')
], Item.prototype, "text", void 0);
__decorate([
Property('auto')
], Item.prototype, "width", void 0);
__decorate([
Property('')
], Item.prototype, "cssClass", void 0);
__decorate([
Property(false)
], Item.prototype, "showAlwaysInPopup", void 0);
__decorate([
Property(false)
], Item.prototype, "disabled", void 0);
__decorate([
Property('')
], Item.prototype, "prefixIcon", void 0);
__decorate([
Property('')
], Item.prototype, "suffixIcon", void 0);
__decorate([
Property(true)
], Item.prototype, "visible", void 0);
__decorate([
Property('None')
], Item.prototype, "overflow", void 0);
__decorate([
Property('')
], Item.prototype, "template", void 0);
__decorate([
Property('Button')
], Item.prototype, "type", void 0);
__decorate([
Property('Both')
], Item.prototype, "showTextOn", void 0);
__decorate([
Property(null)
], Item.prototype, "htmlAttributes", void 0);
__decorate([
Property('')
], Item.prototype, "tooltipText", void 0);
__decorate([
Property('Left')
], Item.prototype, "align", void 0);
__decorate([
Event()
], Item.prototype, "click", void 0);
__decorate([
Property(-1)
], Item.prototype, "tabIndex", void 0);
return Item;
}(ChildProperty));
export { Item };
/**
* The Toolbar control contains a group of commands that are aligned horizontally.
* ```html
* <div id="toolbar"/>
* <script>
* var toolbarObj = new Toolbar();
* toolbarObj.appendTo("#toolbar");
* </script>
* ```
*/
var Toolbar = /** @class */ (function (_super) {
__extends(Toolbar, _super);
/**
* Initializes a new instance of the Toolbar class.
*
* @param {ToolbarModel} options - Specifies Toolbar model properties as options.
* @param { string | HTMLElement} element - Specifies the element that is rendered as a Toolbar.
*/
function Toolbar(options, element) {
var _this = _super.call(this, options, element) || this;
_this.resizeContext = _this.resize.bind(_this);
_this.orientationChangeContext = _this.orientationChange.bind(_this);
/**
* Contains the keyboard configuration of the Toolbar.
*/
_this.keyConfigs = {
moveLeft: 'leftarrow',
moveRight: 'rightarrow',
moveUp: 'uparrow',
moveDown: 'downarrow',
popupOpen: 'enter',
popupClose: 'escape',
tab: 'tab',
home: 'home',
end: 'end'
};
return _this;
}
/**
* Removes the control from the DOM and also removes all its related events.
*
* @returns {void}.
*/
Toolbar.prototype.destroy = function () {
var _this = this;
if (this.isReact || this.isAngular) {
this.clearTemplate();
}
var btnItems = this.element.querySelectorAll('.e-control.e-btn');
[].slice.call(btnItems).forEach(function (el) {
if (!isNOU(el) && !isNOU(el.ej2_instances) && !isNOU(el.ej2_instances[0]) && !(el.ej2_instances[0].isDestroyed)) {
el.ej2_instances[0].destroy();
}
});
this.unwireEvents();
this.tempId.forEach(function (ele) {
if (!isNOU(_this.element.querySelector(ele))) {
document.body.appendChild(_this.element.querySelector(ele)).style.display = 'none';
}
});
this.destroyItems();
while (this.element.lastElementChild) {
this.element.removeChild(this.element.lastElementChild);
}
if (this.trgtEle) {
this.element.appendChild(this.ctrlTem);
this.trgtEle = null;
this.ctrlTem = null;
}
if (this.popObj) {
this.popObj.destroy();
detach(this.popObj.element);
}
if (this.activeEle) {
this.activeEle = null;
}
this.popObj = null;
this.tbarAlign = null;
this.tbarItemsCol = [];
this.remove(this.element, 'e-toolpop');
if (this.cssClass) {
removeClass([this.element], this.cssClass.split(' '));
}
this.element.removeAttribute('style');
['aria-disabled', 'aria-orientation', 'role'].forEach(function (attrb) {
return _this.element.removeAttribute(attrb);
});
_super.prototype.destroy.call(this);
};
/**
* Initialize the event handler
*
* @private
* @returns {void}
*/
Toolbar.prototype.preRender = function () {
var eventArgs = { enableCollision: this.enableCollision, scrollStep: this.scrollStep };
this.trigger('beforeCreate', eventArgs);
this.enableCollision = eventArgs.enableCollision;
this.scrollStep = eventArgs.scrollStep;
this.scrollModule = null;
this.popObj = null;
this.tempId = [];
this.tbarItemsCol = this.items;
this.isVertical = this.element.classList.contains(CLS_VERTICAL) ? true : false;
this.isExtendedOpen = false;
this.popupPriCount = 0;
if (this.enableRtl) {
this.add(this.element, CLS_RTL);
}
};
Toolbar.prototype.wireEvents = function () {
EventHandler.add(this.element, 'click', this.clickHandler, this);
window.addEventListener('resize', this.resizeContext);
window.addEventListener('orientationchange', this.orientationChangeContext);
if (this.allowKeyboard) {
this.wireKeyboardEvent();
}
};
Toolbar.prototype.wireKeyboardEvent = function () {
this.keyModule = new KeyboardEvents(this.element, {
keyAction: this.keyActionHandler.bind(this),
keyConfigs: this.keyConfigs
});
EventHandler.add(this.element, 'keydown', this.docKeyDown, this);
this.updateTabIndex('0');
};
Toolbar.prototype.updateTabIndex = function (tabIndex) {
var ele = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
if (!isNOU(ele) && !isNOU(ele.firstElementChild)) {
var dataTabIndex = ele.firstElementChild.getAttribute('data-tabindex');
if (dataTabIndex && dataTabIndex === '-1' && ele.firstElementChild.tagName !== 'INPUT') {
ele.firstElementChild.setAttribute('tabindex', tabIndex);
}
}
};
Toolbar.prototype.unwireKeyboardEvent = function () {
if (this.keyModule) {
EventHandler.remove(this.element, 'keydown', this.docKeyDown);
this.keyModule.destroy();
this.keyModule = null;
}
};
Toolbar.prototype.docKeyDown = function (e) {
if (e.target.tagName === 'INPUT') {
return;
}
var popCheck = !isNOU(this.popObj) && isVisible(this.popObj.element) && this.overflowMode !== 'Extended';
if (e.keyCode === 9 && e.target.classList.contains('e-hor-nav') === true && popCheck) {
this.popObj.hide({ name: 'FadeOut', duration: 100 });
}
var keyCheck = (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 35 || e.keyCode === 36);
if (keyCheck) {
e.preventDefault();
}
};
Toolbar.prototype.unwireEvents = function () {
EventHandler.remove(this.element, 'click', this.clickHandler);
this.destroyScroll();
this.unwireKeyboardEvent();
window.removeEventListener('resize', this.resizeContext);
window.removeEventListener('orientationchange', this.orientationChangeContext);
document.removeEventListener('scroll', this.clickEvent);
document.removeEventListener('click', this.scrollEvent);
this.scrollEvent = null;
this.clickEvent = null;
};
Toolbar.prototype.clearProperty = function () {
this.tbarEle = [];
this.tbarAlgEle = { lefts: [], centers: [], rights: [] };
};
Toolbar.prototype.docEvent = function (e) {
var popEle = closest(e.target, '.e-popup');
if (this.popObj && isVisible(this.popObj.element) && !popEle && this.overflowMode === 'Popup') {
this.popObj.hide({ name: 'FadeOut', duration: 100 });
}
};
Toolbar.prototype.destroyScroll = function () {
if (this.scrollModule) {
if (this.tbarAlign) {
this.add(this.scrollModule.element, CLS_TBARPOS);
}
this.scrollModule.destroy();
this.scrollModule = null;
}
};
Toolbar.prototype.destroyItems = function () {
if (this.element) {
[].slice.call(this.element.querySelectorAll('.' + CLS_ITEM)).forEach(function (el) { detach(el); });
}
if (this.tbarAlign) {
var tbarItems = this.element.querySelector('.' + CLS_ITEMS);
if (tbarItems) {
if (tbarItems.children) {
[].slice.call(tbarItems.children).forEach(function (el) {
detach(el);
});
}
this.remove(tbarItems, CLS_TBARPOS);
}
this.tbarAlign = false;
}
this.clearProperty();
};
Toolbar.prototype.destroyMode = function () {
if (this.scrollModule) {
this.remove(this.scrollModule.element, CLS_RTL);
this.destroyScroll();
}
this.remove(this.element, CLS_EXTENDEDPOPOPEN);
this.remove(this.element, CLS_EXTEANDABLE_TOOLBAR);
var tempEle = this.element.querySelector('.e-toolbar-multirow');
if (tempEle) {
this.remove(tempEle, CLS_MULTIROW);
}
if (this.popObj) {
this.popupRefresh(this.popObj.element, true);
}
};
Toolbar.prototype.add = function (ele, val) {
ele.classList.add(val);
};
Toolbar.prototype.remove = function (ele, val) {
ele.classList.remove(val);
};
Toolbar.prototype.elementFocus = function (ele) {
var fChild = ele.firstElementChild;
if (fChild) {
fChild.focus();
this.activeEleSwitch(ele);
}
else {
ele.focus();
}
};
Toolbar.prototype.clstElement = function (tbrNavChk, trgt) {
var clst;
if (tbrNavChk && this.popObj && isVisible(this.popObj.element)) {
clst = this.popObj.element.querySelector('.' + CLS_ITEM);
}
else if (this.element === trgt || tbrNavChk) {
clst = this.element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_DISABLE + ' ):not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_HIDDEN + ' )');
}
else {
clst = closest(trgt, '.' + CLS_ITEM);
}
return clst;
};
Toolbar.prototype.getNextFocusableItem = function (currentItem, action) {
var selector = "." + CLS_ITEM + ":not(." + CLS_DISABLE + "):not(." + CLS_SEPARATOR + "):not(." + CLS_HIDDEN + ")";
var items = Array.from(this.element.querySelectorAll(selector));
var currentIndex = items.indexOf(currentItem);
if (currentIndex < 0) {
return null;
}
var nextIndex;
switch (action) {
case 'moveRight':
case 'moveDown':
case 'tab':
nextIndex = (currentIndex + 1) % items.length;
break;
case 'moveLeft':
case 'moveUp':
nextIndex = (currentIndex - 1 + items.length) % items.length;
break;
case 'home':
nextIndex = 0;
break;
case 'end':
nextIndex = items.length - 1;
break;
default:
nextIndex = currentIndex;
}
if (nextIndex >= 0 && nextIndex < items.length) {
return items[parseInt(nextIndex.toString(), 10)];
}
return null;
};
Toolbar.prototype.keyHandling = function (clst, e, trgt, navChk, scrollChk) {
var popObj = this.popObj;
var rootEle = this.element;
var popAnimate = { name: 'FadeOut', duration: 100 };
var value = e.action === 'moveUp' ? 'previous' : 'next';
var ele;
var nodes;
switch (e.action) {
case 'moveRight':
if (this.isVertical) {
return;
}
if (rootEle === trgt) {
this.elementFocus(clst);
}
else if (!navChk) {
this.eleFocus(clst, 'next');
}
break;
case 'moveLeft':
if (this.isVertical) {
return;
}
if (!navChk) {
this.eleFocus(clst, 'previous');
}
break;
case 'home':
case 'end':
if (clst) {
var popupCheck = closest(clst, '.e-popup');
var extendedPopup = this.element.querySelector('.' + CLS_EXTENDABLECLASS);
if (this.overflowMode === 'Extended' && extendedPopup && extendedPopup.classList.contains('e-popup-open')) {
popupCheck = e.action === 'end' ? extendedPopup : null;
}
if (popupCheck) {
if (isVisible(this.popObj.element)) {
nodes = [].slice.call(popupCheck.children);
if (e.action === 'home') {
ele = this.focusFirstVisibleEle(nodes);
}
else {
ele = this.focusLastVisibleEle(nodes);
}
}
}
else {
nodes = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')');
if (e.action === 'home') {
ele = this.focusFirstVisibleEle(nodes);
}
else {
ele = this.focusLastVisibleEle(nodes);
}
}
if (ele) {
this.elementFocus(ele);
}
}
break;
case 'moveUp':
case 'moveDown':
if (!this.isVertical) {
if (popObj && closest(trgt, '.e-popup')) {
var popEle = popObj.element;
if ((value === 'previous' && popEle.firstElementChild === clst)) {
var lastVisibleEle = this.focusLastVisibleEle([].slice.call(popEle.children));
if (lastVisibleEle) {
this.elementFocus(lastVisibleEle);
}
}
else if (value === 'next' && popEle.lastElementChild === clst) {
var firstVisibleEle = this.focusFirstVisibleEle([].slice.call(popEle.children));
if (firstVisibleEle) {
this.elementFocus(firstVisibleEle);
}
}
else {
this.eleFocus(clst, value);
}
}
else if (e.action === 'moveDown' && popObj && isVisible(popObj.element)) {
var skipEle = this.eleContains(clst);
if (skipEle) {
this.eleFocus(clst, value);
}
else {
this.elementFocus(clst);
}
}
}
else {
if (e.action === 'moveUp') {
this.eleFocus(clst, 'previous');
}
else {
this.eleFocus(clst, 'next');
}
}
break;
case 'tab':
if (!scrollChk && !navChk) {
var ele_1 = clst.firstElementChild;
if (rootEle === trgt) {
if (this.activeEle) {
this.activeEle.focus();
}
else {
this.activeEleRemove(ele_1);
ele_1.focus();
}
}
}
break;
case 'popupClose':
if (popObj && this.overflowMode !== 'Extended') {
popObj.hide(popAnimate);
}
break;
case 'popupOpen':
if (!navChk) {
return;
}
if (popObj && !isVisible(popObj.element)) {
popObj.element.style.top = rootEle.offsetHeight + 'px';
popObj.show({ name: 'FadeIn', duration: 100 });
}
else {
popObj.hide(popAnimate);
}
break;
}
};
Toolbar.prototype.keyActionHandler = function (e) {
var _this = this;
var trgt = e.target;
if ((e.action === 'home' || e.action === 'end' || e.action === 'moveRight' || e.action === 'moveLeft' || e.action === 'moveUp' || e.action === 'moveDown')
&& (trgt.tagName === 'INPUT' || trgt.tagName === 'TEXTAREA' || this.element.classList.contains(CLS_DISABLE))) {
return;
}
e.preventDefault();
var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
var tbarScrollChk = trgt.classList.contains(CLS_TBARSCRLNAV);
var clst = this.clstElement(tbrNavChk, trgt);
if (clst || tbarScrollChk) {
var currentItem = clst;
var nextItem = this.getNextFocusableItem(currentItem, e.action);
var keyDownEventArgs = {
originalEvent: e,
currentItem: currentItem,
nextItem: nextItem,
cancel: false
};
this.trigger('keyDown', keyDownEventArgs, function (keyDownArgs) {
if (!keyDownArgs.cancel) {
_this.keyHandling(clst, e, trgt, tbrNavChk, tbarScrollChk);
}
});
}
};
/**
* Specifies the value to disable/enable the Toolbar component.
* When set to `true`, the component will be disabled.
*
* @param {boolean} value - Based on this Boolean value, Toolbar will be enabled (false) or disabled (true).
* @returns {void}.
*/
Toolbar.prototype.disable = function (value) {
var rootEle = this.element;
if (value) {
rootEle.classList.add(CLS_DISABLE);
}
else {
rootEle.classList.remove(CLS_DISABLE);
}
if (this.activeEle) {
this.activeEle.setAttribute('tabindex', this.activeEle.getAttribute('data-tabindex'));
}
if (this.scrollModule) {
this.scrollModule.disable(value);
}
if (this.popObj) {
if (isVisible(this.popObj.element) && this.overflowMode !== 'Extended') {
this.popObj.hide();
}
rootEle.querySelector('#' + rootEle.id + '_nav').setAttribute('tabindex', !value ? '0' : '-1');
}
};
Toolbar.prototype.eleContains = function (el) {
return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE) || el.getAttribute('disabled') || el.classList.contains(CLS_HIDDEN) || !isVisible(el) || !el.classList.contains(CLS_ITEM);
};
Toolbar.prototype.focusFirstVisibleEle = function (nodes) {
var element;
var index = 0;
while (index < nodes.length) {
var ele = nodes[parseInt(index.toString(), 10)];
if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
return ele;
}
index++;
}
return element;
};
Toolbar.prototype.focusLastVisibleEle = function (nodes) {
var element;
var index = nodes.length - 1;
while (index >= 0) {
var ele = nodes[parseInt(index.toString(), 10)];
if (!ele.classList.contains(CLS_SEPARATOR) && !ele.classList.contains(CLS_HIDDEN) && !ele.classList.contains(CLS_DISABLE)) {
return ele;
}
index--;
}
return element;
};
Toolbar.prototype.eleFocus = function (closest, pos) {
var sib = Object(closest)[pos + 'ElementSibling'];
if (sib) {
var skipEle = this.eleContains(sib);
if (skipEle) {
this.eleFocus(sib, pos);
return;
}
this.elementFocus(sib);
}
else if (this.tbarAlign) {
var elem = Object(closest.parentElement)[pos + 'ElementSibling'];
if (!isNOU(elem) && elem.children.length === 0) {
elem = Object(elem)[pos + 'ElementSibling'];
}
if (!isNOU(elem) && elem.children.length > 0) {
if (pos === 'next') {
var el = elem.querySelector('.' + CLS_ITEM);
if (this.eleContains(el)) {
this.eleFocus(el, pos);
}
else {
el.firstElementChild.focus();
this.activeEleSwitch(el);
}
}
else {
var el = elem.lastElementChild;
if (this.eleContains(el)) {
this.eleFocus(el, pos);
}
else {
this.elementFocus(el);
}
}
}
}
else if (!isNOU(closest)) {
var tbrItems = this.element.querySelectorAll('.' + CLS_ITEMS + ' .' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ')' + ':not(.' + CLS_DISABLE + ')' + ':not(.' + CLS_HIDDEN + ')');
if (pos === 'next' && tbrItems) {
this.elementFocus(tbrItems[0]);
}
else if (pos === 'previous' && tbrItems) {
this.elementFocus(tbrItems[tbrItems.length - 1]);
}
}
};
Toolbar.prototype.clickHandler = function (e) {
var _this = this;
var trgt = e.target;
var ele = this.element;
var isPopupElement = !isNOU(closest(trgt, '.' + CLS_POPUPCLASS));
var clsList = trgt.classList;
var popupNav = closest(trgt, ('.' + CLS_TBARNAV));
if (!popupNav) {
popupNav = trgt;
}
if (!ele.children[0].classList.contains('e-hscroll') && !ele.children[0].classList.contains('e-vscroll')
&& (clsList.contains(CLS_TBARNAV))) {
clsList = trgt.querySelector('.e-icons').classList;
}
if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {
this.popupClickHandler(ele, popupNav, CLS_RTL);
}
var itemObj;
var clst = closest(e.target, '.' + CLS_ITEM);
if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {
return;
}
if (clst) {
var tempItem = this.items[this.tbarEle.indexOf(clst)];
itemObj = tempItem;
}
var eventArgs = { originalEvent: e, item: itemObj };
var isClickBinded = itemObj && !isNOU(itemObj.click) && typeof itemObj.click == 'object' ?
!isNOU(itemObj.click.observers) && itemObj.click.observers.length > 0 :
!isNOU(itemObj) && !isNOU(itemObj.click);
if (isClickBinded) {
this.trigger('items[' + this.tbarEle.indexOf(clst) + '].click', eventArgs);
}
if (!eventArgs.cancel) {
this.trigger('clicked', eventArgs, function (clickedArgs) {
if (!isNOU(_this.popObj) && isPopupElement && !clickedArgs.cancel && _this.overflowMode === 'Popup' &&
clickedArgs.item && clickedArgs.item.type !== 'Input') {
_this.popObj.hide({ name: 'FadeOut', duration: 100 });
}
});
}
};
Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {
var popObj = this.popObj;
if (isVisible(popObj.element)) {
popupNav.classList.remove(CLS_TBARNAVACT);
popObj.hide({ name: 'FadeOut', duration: 100 });
}
else {
if (ele.classList.contains(CLS_RTL)) {
popObj.enableRtl = true;
popObj.position = { X: 'left', Y: 'top' };
}
if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {
popObj.enableRtl = false;
popObj.position = { X: 'right', Y: 'top' };
}
if (this.overflowMode === 'Extended') {
popObj.element.style.minHeight = '0px';
popObj.width = this.getToolbarPopupWidth(this.element);
}
popObj.dataBind();
popObj.refreshPosition();
popObj.element.style.top = this.getElementOffsetY() + 'px';
popupNav.classList.add(CLS_TBARNAVACT);
popObj.show({ name: 'FadeIn', duration: 100 });
}
};
Toolbar.prototype.getToolbarPopupWidth = function (ele) {
var eleStyles = window.getComputedStyle(ele);
return parseFloat(eleStyles.width) + ((parseFloat(eleStyles.borderRightWidth)) * 2);
};
/**
* To Initialize the control rendering
*
* @private
* @returns {void}
*/
Toolbar.prototype.render = function () {
var _this = this;
this.initialize();
this.clickEvent = this.docEvent.bind(this);
this.scrollEvent = this.docEvent.bind(this);
this.renderControl();
this.wireEvents();
this.renderComplete();
if (this.isReact && this.portals && this.portals.length > 0) {
this.renderReactTemplates(function () {
_this.refreshOverflow();
});
}
};
Toolbar.prototype.initialize = function () {
var width = formatUnit(this.width);
var height = formatUnit(this.height);
if (Browser.info.name !== 'msie' || this.height !== 'auto' || this.overflowMode === 'MultiRow') {
setStyle(this.element, { 'height': height });
}
setStyle(this.element, { 'width': width });
var ariaAttr = {
'role': 'toolbar', 'aria-disabled': 'false',
'aria-orientation': !this.isVertical ? 'horizontal' : 'vertical'
};
attributes(this.element, ariaAttr);
if (this.cssClass) {
addClass([this.element], this.cssClass.split(' '));
}
};
Toolbar.prototype.renderControl = function () {
var ele = this.element;
this.trgtEle = (ele.children.length > 0) ? ele.querySelector('div') : null;
this.tbarAlgEle = { lefts: [], centers: [], rights: [] };
this.renderItems();
this.renderLayout();
};
Toolbar.prototype.renderLayout = function () {
this.renderOverflowMode();
if (this.tbarAlign) {
this.itemPositioning();
}
if (this.popObj && this.popObj.element.childElementCount > 1 && this.checkPopupRefresh(this.element, this.popObj.element)) {
this.popupRefresh(this.popObj.element, false);
}
this.separator();
};
Toolbar.prototype.itemsAlign = function (items, itemEleDom) {
var innerItem;
var innerPos;
if (!this.tbarEle) {
this.tbarEle = [];
}
for (var i = 0; i < items.length; i++) {
innerItem = this.renderSubComponent(items[parseInt(i.toString(), 10)], i);
if (this.tbarEle.indexOf(innerItem) === -1) {
this.tbarEle.push(innerItem);
}
if (!this.tbarAlign) {
this.tbarItemAlign(items[parseInt(i.toString(), 10)], itemEleDom, i);
}
innerPos = itemEleDom.querySelector('.e-toolbar-' + items[parseInt(i.toString(), 10)].align.toLowerCase());
if (innerPos) {
if (!(items[parseInt(i.toString(), 10)].showAlwaysInPopup && items[parseInt(i.toString(), 10)].overflow !== 'Show')) {
this.tbarAlgEle[(items[parseInt(i.toString(), 10)].align + 's').toLowerCase()].push(innerItem);
}
innerPos.appendChild(innerItem);
}
else {
itemEleDom.appendChild(innerItem);
}
}
if (this.isReact) {
var portals = 'portals';
this.notify('render-react-toolbar-template', this["" + portals]);
this.renderReactTemplates();
}
};
/**
* @hidden
* @returns {void}
*/
Toolbar.prototype.changeOrientation = function () {
var ele = this.element;
if (this.isVertical) {
ele.classList.remove(CLS_VERTICAL);
this.isVertical = false;
if (this.height === 'auto' || this.height === '100%') {
ele.style.height = this.height;
}
ele.setAttribute('aria-orientation', 'horizontal');
}
else {
ele.classList.add(CLS_VERTICAL);
this.isVertical = true;
ele.setAttribute('aria-orientation', 'vertical');
setStyle(this.element, { 'height': formatUnit(this.height), 'width': formatUnit(this.width) });
}
this.destroyMode();
this.refreshOverflow();
};
Toolbar.prototype.initScroll = function (element, innerItems) {
if (!this.scrollModule && this.checkOverflow(element, innerItems[0])) {
if (this.tbarAlign) {
this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');
}
if (this.isVertical) {
this.scrollModule = new VScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);
}
else {
this.scrollModule = new HScroll({ scrollStep: this.scrollStep, enableRtl: this.enableRtl }, innerItems[0]);
}
if (this.cssClass) {
addClass([innerItems[0]], this.cssClass.split(' '));
}
var scrollEle = this.scrollModule.element.querySelector('.' + CLS_HSCROLLBAR + ', .' + 'e-vscroll-bar');
if (scrollEle) {
scrollEle.removeAttribute('tabindex');
}
this.remove(this.scrollModule.element, CLS_TBARPOS);
setStyle(this.element, { overflow: 'hidden' });
}
};
Toolbar.prototype.itemWidthCal = function (items) {
var _this = this;
var width = 0;
var style;
[].slice.call(selectAll('.' + CLS_ITEM, items)).forEach(function (el) {
if (isVisible(el)) {
style = window.getComputedStyle(el);
width += _this.isVertical ? el.offsetHeight : el.offsetWidth;
width += parseFloat(_this.isVertical ? style.marginTop : style.marginRight);
width += parseFloat(_this.isVertical ? style.marginBottom : style.marginLeft);
}
});
return width;
};
Toolbar.prototype.getScrollCntEle = function (innerItem) {
var trgClass = (this.isVertical) ? '.e-vscroll-content' : '.e-hscroll-content';
return innerItem.querySelector(trgClass);
};
Toolbar.prototype.checkOverflow = function (element, innerItem) {
if (isNOU(element) || isNOU(innerItem) || !isVisible(element)) {
return false;
}
var eleWidth = this.isVertical ? element.offsetHeight : element.offsetWidth;
var itemWidth = this.isVertical ? innerItem.offsetHeight : innerItem.offsetWidth;
if (this.tbarAlign || this.scrollModule || (eleWidth === itemWidth)) {
itemWidth = this.itemWidthCal(this.scrollModule ? this.getScrollCntEle(innerItem) : innerItem);
}
var popNav = element.querySelector('.' + CLS_TBARNAV);
var scrollNav = element.querySelector('.' + CLS_TBARSCRLNAV);
var navEleWidth = 0;
if (popNav) {
navEleWidth = this.isVertical ? popNav.offsetHeight : popNav.offsetWidth;
}
else if (scrollNav) {
navEleWidth = this.isVertical ? (scrollNav.offsetHeight * (2)) : (scrollNav.offsetWidth * 2);
}
if (eleWidth >= itemWidth && scrollNav) {
return false;
}
else if (itemWidth > eleWidth - navEleWidth) {
return true;
}
else {
return false;
}
};
/**
* Refresh the whole Toolbar component without re-rendering.
* - It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.
* - It will refresh the Toolbar component after loading items dynamically.
*
* @returns {void}.
*/
Toolbar.prototype.refreshOverflow = function () {
this.resize();
};
Toolbar.prototype.toolbarAlign = function (innerItems) {
if (this.tbarAlign) {
this.add(innerItems, CLS_TBARPOS);
this.itemPositioning();
}
};
Toolbar.prototype.renderOverflowMode = function () {
var ele = this.element;
var innerItems = ele.querySelector('.' + CLS_ITEMS);
var priorityCheck = this.popupPriCount > 0;
if (ele && ele.children.length > 0) {
this.offsetWid = ele.offsetWidth;
this.remove(this.element, 'e-toolpop');
if (Browser.info.name === 'msie' && this.height === 'auto') {
ele.style.height = '';
}
switch (this.overflowMode) {
case 'Scrollable':
if (isNOU(this.scrollModule)) {
this.initScroll(ele, [].slice.call(ele.getElementsByClassName(CLS_ITEMS)));
}
break;
case 'Popup':
this.add(this.element, 'e-toolpop');
if (this.tbarAlign) {
this.removePositioning();
}
if (this.checkOverflow(ele, innerItems) || priorityCheck) {
this.setOverflowAttributes(ele);
}
this.toolbarAlign(innerItems);
break;
case 'MultiRow':
this.add(innerItems, CLS_MULTIROW);
if (this.checkOverflow(ele, innerItems) && this.tbarAlign) {
this.removePositioning();
this.add(innerItems, CLS_MULTIROWPOS);
}
if (ele.style.overflow === 'hidden') {
ele.style.overflow = '';
}
if (Browser.info.name === 'msie' || ele.style.height !== 'auto') {
ele.style.height = 'auto';
}
break;
case 'Extended':
this.add(this.element, CLS_EXTEANDABLE_TOOLBAR);
if (this.checkOverflow(ele, innerItems) || priorityCheck) {
if (this.tbarAlign) {
this.removePositioning();
}
this.setOverflowAttributes(ele);
}
this.toolbarAlign(innerItems);
}
}
};
Toolbar.prototype.setOverflowAttributes = function (ele) {
this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
var ariaAttr = {
'tabindex': '0', 'role': 'button', 'aria-haspopup': 'true',
'aria-label': 'overflow'
};
attributes(this.element.querySelector('.' + CLS_TBARNAV), ariaAttr);
};
Toolbar.prototype.separator = function () {
var element = this.element;
var eleItem = [].slice.call(element.querySelectorAll('.' + CLS_SEPARATOR));
var multiVar = element.querySelector('.' + CLS_MULTIROW_SEPARATOR);
var extendVar = element.querySelector('.' + CLS_EXTENDABLE_SEPARATOR);
var eleInlineItem = this.overflowMode === 'MultiRow' ? multiVar : extendVar;
if (eleInlineItem !== null) {
if (this.overflowMode === 'MultiRow') {
eleInlineItem.classList.remove(CLS_MULTIROW_SEPARATOR);
}
else if (this.overflowMode === 'Extended') {
eleInlineItem.classList.remove(CLS_EXTENDABLE_SEPARATOR);
}
}
for (var i = 0; i <= eleItem.length - 1; i++) {
if (eleItem[parseInt(i.toString(), 10)].offsetLeft < 30 && eleItem[parseInt(i.toString(), 10)].offsetLeft !== 0) {
if (this.overflowMode === 'MultiRow') {
eleItem[parseInt(i.toString(), 10)].classList.add(CLS_MULTIROW_SEPARATOR);
}
else if (this.overflowMode === 'Extended') {
eleItem[parseInt(i.toString(), 10)].classList.add(CLS_EXTENDABLE_SEPARATOR);
}
}
}
};
Toolbar.prototype.createPopupEle = function (ele, innerEle) {
var innerNav = ele.querySelector('.' + CLS_TBARNAV);
var vertical = this.isVertical;
if (!innerNav) {
this.createPopupIcon(ele);
}
innerNav = ele.querySelector('.' + CLS_TBARNAV);
var innerNavDom = (vertical ? innerNav.offsetHeight : innerNav.offsetWidth);
var eleWidth = ((vertical ? ele.offsetHeight : ele.offsetWidth) - (innerNavDom));
this.element.classList.remove('e-rtl');
setStyle(this.element, { direction: 'initial' });
this.checkPriority(ele, innerEle, eleWidth, true);
if (this.enableRtl) {
this.element.classList.add('e-rtl');
}
this.element.style.removeProperty('direction');
this.createPopup();
};
Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight, sepHeight) {
var element = tbarObj.element;
var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));
var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);
var nodeIndex = 0;
var nodePri = 0;
poppedEle.forEach(function (el, index) {
nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);
if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {
if (tbarObj.tbResize && nodes.length > index) {
ele.insertBefore(el, nodes[parseInt(index.toString(), 10)]);
++nodePri;
}
else {
ele.insertBefore(el, ele.children[nodes.length]);
++nodePri;
}
}
else if (el.classList.contains(CLS_TBAROVERFLOW)) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (el.classList.contains(CLS_POPOVERFLOW)) {
popupPri.push(el);
}
else if (tbarObj.tbResize) {
ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);
++nodeIndex;
}
else {
ele.appendChild(el);
}
if (el.classList.contains(CLS_SEPARATOR)) {
setStyle(el, { display: '', height: sepHeight + 'px' });
}
else {
setStyle(el, { display: '', height: eleHeight + 'px' });
}
});
popupPri.forEach(function (el) {
ele.appendChild(el);
});
var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));
for (var i = tbarEle.length - 1; i >= 0; i--) {
var tbarElement = tbarEle[parseInt(i.toString(), 10)];
if (tbarElement.classList.contains(CLS_SEPARATOR) && this.overflowMode !== 'Extended') {
setStyle(tbarElement, { display: 'none' });
}
else {
break;
}
}
};
Toolbar.prototype.createPopup = function () {
var element = this.element;
var sepHeight;
var sepItem;
if (this.overflowMode === 'Extended') {
sepItem = element.querySelector('.' + CLS_SEPARATOR);
sepHeight =
(element.style.height === 'auto' || element.style.height === '') ? null : (sepItem && sepItem.offsetHeight);
}
var eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_POPUP + ')');
var eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : (eleItem && eleItem.offsetHeight);
var ele;
var popupPri = [];
if (select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element)) {
ele = select('#' + element.id + '_popup.' + CLS_POPUPCLASS, element);
}
else {
var extendEle = this.createElement('div', {
id: element.id + '_popup', className: CLS_POPUPCLASS + ' ' + CLS_EXTENDABLECLASS
});
var popupEle = this.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });
ele = this.overflowMode === 'Extended' ? extendEle : popupEle;
}
this.pushingPoppedEle(this, popupPri, ele, eleHeight, sepHeight);
this.popupInit(element, ele);
};
Toolbar.prototype.getElementOffsetY = function () {
return (this.overflowMode === 'Extended' && window.getComputedStyle(this.element).getPropertyValue('box-sizing') === 'border-box' ?
this.element.clientHeight : this.element.offsetHeight);
};
Toolbar.prototype.popupInit = function (element, ele) {
if (!this.popObj) {
element.appendChild(ele);
if (this.cssClass) {
addClass([ele], this.cssClass.split(' '));
}
setStyle(this.element, { overflow: '' });
var popup = new Popup(null, {
relateTo: this.element,
offsetY: (this.isVertical) ? 0 : this.getElementOffsetY(),
enableRtl: this.enableRtl,
open: this.popupOpen.bind(this),
close: this.popupClose.bind(this),
collision: { Y: this.enableCollision ? 'flip' : 'none' },
position: this.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }
});
if (this.overflowMode === 'Extended') {
popup.width = this.getToolbarPopupWidth(this.element);
popup.offsetX = 0;
}
popup.appendTo(ele);
document.addEventListener('scroll', this.clickEvent);
document.addEventListener('click', this.scrollEvent);
if (this.overflowMode !== 'Extended') {
popup.element.style.maxHeight = popup.element.offsetHeight + 'px';
}
if (this.isVertical) {
popup.element.style.visibility = 'hidden';
}
if (this.isExtendedOpen) {
var popupNav = this.element.querySelector('.' + CLS_TBARNAV);
popupNav.classList.add(CLS_TBARNAVACT);
classList(popupNav.firstElementChild, [CLS_POPUPICON], [CLS_POPUPDOWN]);
this.element.querySelector('.' + CLS_EXTENDABLECLASS).classList.add(CLS_POPUPOPEN);
}
else {
popup.hide();
}
this.popObj = popup;
}
else if (this.overflowMode !== 'Extended') {
var popupEle = this.popObj.element;
setStyle(popupEle, { maxHeight: '', display: 'block' });
setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
}
};
Toolbar.prototype.tbarPopupHandler = function (isOpen) {
if (this.overflowMode === 'Extended') {
if (isOpen) {
this.add(this.element, CLS_EXTENDEDPOPOPEN);
}
else {
this.remove(this.element, CLS_EXTENDEDPOPOPEN);
}
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
Toolbar.prototype.popupOpen = function (e) {
var popObj = this.popObj;
if (!this.isVertical) {
popObj.offsetY = this.getElementOffsetY();
popObj.dataBind();
}
var popupEle = this.popObj.element;
var toolEle = this.popObj.element.parentElement;
var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
popupNav.setAttribute('aria-expanded', 'true');
if (this.overflowMode === 'Extended') {
popObj.element.style.minHeight = '';
}
else {
setStyle(popObj.element, { height: 'auto', maxHeight: '' });
popObj.element.style.maxHeight = popObj.element.offsetHeight