@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,125 lines • 266 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, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';
import { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';
import { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';
import { rippleEffect, Animation, remove } from '@syncfusion/ej2-base';
import { Draggable, Droppable } from '@syncfusion/ej2-base';
import { getElement } from '@syncfusion/ej2-base';
import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { isNullOrUndefined as isNOU, Touch, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';
import { ListBase } from '@syncfusion/ej2-lists';
import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';
import { Input } from '@syncfusion/ej2-inputs';
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
var ROOT = 'e-treeview';
var CONTROL = 'e-control';
var COLLAPSIBLE = 'e-icon-collapsible';
var EXPANDABLE = 'e-icon-expandable';
var LISTITEM = 'e-list-item';
var LISTTEXT = 'e-list-text';
var LISTWRAP = 'e-text-wrap';
var IELISTWRAP = 'e-ie-wrap';
var PARENTITEM = 'e-list-parent';
var HOVER = 'e-hover';
var ACTIVE = 'e-active';
var LOAD = 'e-icons-spinner';
var PROCESS = 'e-process';
var ICON = 'e-icons';
var TEXTWRAP = 'e-text-content';
var INPUT = 'e-input';
var INPUTGROUP = 'e-input-group';
var TREEINPUT = 'e-tree-input';
var EDITING = 'e-editing';
var RTL = 'e-rtl';
var INTERACTION = 'e-interaction';
var DRAGITEM = 'e-drag-item';
var DROPPABLE = 'e-droppable';
var DRAGGING = 'e-dragging';
var SIBLING = 'e-sibling';
var DROPIN = 'e-drop-in';
var DROPNEXT = 'e-drop-next';
var DROPOUT = 'e-drop-out';
var NODROP = 'e-no-drop';
var FULLROWWRAP = 'e-fullrow-wrap';
var FULLROW = 'e-fullrow';
var SELECTED = 'e-selected';
var EXPANDED = 'e-expanded';
var NODECOLLAPSED = 'e-node-collapsed';
var DISABLE = 'e-disable';
var DROPCOUNT = 'e-drop-count';
var CHECK = 'e-check';
var INDETERMINATE = 'e-stop';
var CHECKBOXWRAP = 'e-treeview-checkbox';
var CHECKBOXFRAME = 'e-frame';
var CHECKBOXRIPPLE = 'e-ripple-container';
var RIPPLE = 'e-ripple';
var RIPPLEELMENT = 'e-ripple-element';
var FOCUS = 'e-node-focus';
var IMAGE = 'e-list-img';
var BIGGER = 'e-bigger';
var SMALL = 'e-small';
var CHILD = 'e-has-child';
var ITEM_ANIMATION_ACTIVE = 'e-animation-active';
var DISABLED = 'e-disabled';
var PREVENTSELECT = 'e-prevent';
var treeAriaAttr = {
treeRole: 'group',
itemRole: 'treeitem',
listRole: 'group',
itemText: '',
wrapperRole: ''
};
/**
* Configures the fields to bind to the properties of node in the TreeView component.
*/
var FieldsSettings = /** @class */ (function (_super) {
__extends(FieldsSettings, _super);
function FieldsSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('child')
], FieldsSettings.prototype, "child", void 0);
__decorate([
Property([])
], FieldsSettings.prototype, "dataSource", void 0);
__decorate([
Property('expanded')
], FieldsSettings.prototype, "expanded", void 0);
__decorate([
Property('hasChildren')
], FieldsSettings.prototype, "hasChildren", void 0);
__decorate([
Property('htmlAttributes')
], FieldsSettings.prototype, "htmlAttributes", void 0);
__decorate([
Property('iconCss')
], FieldsSettings.prototype, "iconCss", void 0);
__decorate([
Property('id')
], FieldsSettings.prototype, "id", void 0);
__decorate([
Property('imageUrl')
], FieldsSettings.prototype, "imageUrl", void 0);
__decorate([
Property('isChecked')
], FieldsSettings.prototype, "isChecked", void 0);
__decorate([
Property('parentID')
], FieldsSettings.prototype, "parentID", void 0);
__decorate([
Property(null)
], FieldsSettings.prototype, "query", void 0);
__decorate([
Property('selectable')
], FieldsSettings.prototype, "selectable", void 0);
__decorate([
Property('selected')
], FieldsSettings.prototype, "selected", void 0);
__decorate([
Property(null)
], FieldsSettings.prototype, "tableName", void 0);
__decorate([
Property('text')
], FieldsSettings.prototype, "text", void 0);
__decorate([
Property('tooltip')
], FieldsSettings.prototype, "tooltip", void 0);
__decorate([
Property('navigateUrl')
], FieldsSettings.prototype, "navigateUrl", void 0);
return FieldsSettings;
}(ChildProperty));
export { FieldsSettings };
/**
* Configures animation settings for the TreeView component.
*/
var ActionSettings = /** @class */ (function (_super) {
__extends(ActionSettings, _super);
function ActionSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('SlideDown')
], ActionSettings.prototype, "effect", void 0);
__decorate([
Property(400)
], ActionSettings.prototype, "duration", void 0);
__decorate([
Property('linear')
], ActionSettings.prototype, "easing", void 0);
return ActionSettings;
}(ChildProperty));
export { ActionSettings };
/**
* Configures the animation settings for expanding and collapsing nodes in TreeView.
*/
var NodeAnimationSettings = /** @class */ (function (_super) {
__extends(NodeAnimationSettings, _super);
function NodeAnimationSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Complex({ effect: 'SlideUp', duration: 400, easing: 'linear' }, ActionSettings)
], NodeAnimationSettings.prototype, "collapse", void 0);
__decorate([
Complex({ effect: 'SlideDown', duration: 400, easing: 'linear' }, ActionSettings)
], NodeAnimationSettings.prototype, "expand", void 0);
return NodeAnimationSettings;
}(ChildProperty));
export { NodeAnimationSettings };
/**
* The TreeView component is used to represent hierarchical data in a tree like structure with advanced
* functions to perform edit, drag and drop, selection with check-box, and more.
* ```html
* <div id="tree"></div>
* ```
* ```typescript
* let treeObj: TreeView = new TreeView();
* treeObj.appendTo('#tree');
* ```
*/
var TreeView = /** @class */ (function (_super) {
__extends(TreeView, _super);
function TreeView(options, element) {
var _this = _super.call(this, options, element) || this;
_this.isRefreshed = false;
_this.preventExpand = false;
_this.checkedElement = [];
_this.disableNode = [];
_this.validArr = [];
_this.validNodes = [];
_this.expandChildren = [];
_this.isFieldChange = false;
_this.changeDataSource = false;
_this.hasTemplate = false;
_this.isFirstRender = false;
_this.batchParentNode = new Set();
// Specifies whether the node is dropped or not
_this.isNodeDropped = false;
_this.isInteracted = false;
_this.isRightClick = false;
_this.mouseDownStatus = false;
_this.isDropIn = false;
_this.OldCheckedData = [];
_this.isHiddenItem = false;
return _this;
}
TreeView_1 = TreeView;
/**
* Get component name.
*
* @returns {string} - returns module name.
* @private
*/
TreeView.prototype.getModuleName = function () {
return 'treeview';
};
/**
* Initialize the event handler
*
* @returns {void}
*/
TreeView.prototype.preRender = function () {
var _this = this;
this.checkActionNodes = [];
this.parentNodeCheck = [];
this.dragStartAction = false;
this.isAnimate = false;
this.keyConfigs = {
escape: 'escape',
end: 'end',
enter: 'enter',
f2: 'f2',
home: 'home',
moveDown: 'downarrow',
moveLeft: 'leftarrow',
moveRight: 'rightarrow',
moveUp: 'uparrow',
ctrlDown: 'ctrl+downarrow',
ctrlUp: 'ctrl+uparrow',
ctrlEnter: 'ctrl+enter',
ctrlHome: 'ctrl+home',
ctrlEnd: 'ctrl+end',
ctrlA: 'ctrl+A',
shiftDown: 'shift+downarrow',
shiftUp: 'shift+uparrow',
shiftEnter: 'shift+enter',
shiftHome: 'shift+home',
shiftEnd: 'shift+end',
csDown: 'ctrl+shift+downarrow',
csUp: 'ctrl+shift+uparrow',
csEnter: 'ctrl+shift+enter',
csHome: 'ctrl+shift+home',
csEnd: 'ctrl+shift+end',
space: 'space',
shiftSpace: 'shift+space',
ctrlSpace: 'ctrl+space'
};
this.listBaseOption = {
expandCollapse: true,
showIcon: true,
expandIconClass: EXPANDABLE,
ariaAttributes: treeAriaAttr,
expandIconPosition: 'Left',
itemCreated: function (e) {
_this.beforeNodeCreate(e);
},
enableHtmlSanitizer: this.enableHtmlSanitizer,
itemNavigable: this.fullRowNavigable
};
this.updateListProp(this.fields);
this.aniObj = new Animation({});
this.treeList = [];
this.isLoaded = false;
this.isInitalExpand = false;
this.expandChildren = [];
this.index = 0;
this.setTouchClass();
this.DDTTreeData = JSON.parse(JSON.stringify(this.fields.dataSource));
if (isNOU(this.selectedNodes)) {
this.setProperties({ selectedNodes: [] }, true);
}
if (isNOU(this.checkedNodes)) {
this.setProperties({ checkedNodes: [] }, true);
}
if (isNOU(this.expandedNodes)) {
this.setProperties({ expandedNodes: [] }, true);
}
else {
this.isInitalExpand = true;
}
};
/**
* Get the properties to be maintained in the persisted state.
*
* @returns {string} - returns the persisted data
* @hidden
*/
TreeView.prototype.getPersistData = function () {
var keyEntity = ['selectedNodes', 'checkedNodes', 'expandedNodes'];
return this.addOnPersist(keyEntity);
};
/**
* To Initialize the control rendering
*
* @private
* @returns {void}
*/
TreeView.prototype.render = function () {
this.initialRender = true;
this.initialize();
this.setDataBinding(false);
this.setDisabledMode();
this.setExpandOnType();
if (!this.disabled) {
this.setRipple();
}
this.wireEditingEvents(this.allowEditing);
this.setDragAndDrop(this.allowDragAndDrop);
if (!this.disabled) {
this.wireEvents();
}
this.initialRender = false;
this.renderComplete();
};
TreeView.prototype.initialize = function () {
this.element.setAttribute('role', 'tree');
if (!isNOU(this.fields.dataSource) && Array.isArray(this.fields.dataSource) && this.fields.dataSource.length !== 0) {
this.element.setAttribute('aria-activedescendant', this.element.id + '_active');
}
this.setCssClass(null, this.cssClass);
this.setEnableRtl();
this.setFullRow(this.fullRowSelect);
this.setTextWrap();
this.nodeTemplateFn = this.templateComplier(this.nodeTemplate);
};
TreeView.prototype.setDisabledMode = function () {
if (this.disabled) {
this.element.classList.add(DISABLED);
this.element.setAttribute('aria-disabled', 'true');
}
else {
this.element.classList.remove(DISABLED);
this.element.setAttribute('aria-disabled', 'false');
}
};
TreeView.prototype.setEnableRtl = function () {
(this.enableRtl ? addClass : removeClass)([this.element], RTL);
};
TreeView.prototype.setRipple = function () {
var tempStr = '.' + FULLROW + ',.' + TEXTWRAP;
var rippleModel = {
selector: tempStr,
ignore: '.' + TEXTWRAP + ' > .' + ICON + ',.' + INPUTGROUP + ',.' + INPUT + ', .' + CHECKBOXWRAP
};
this.rippleFn = rippleEffect(this.element, rippleModel);
var iconModel = {
selector: '.' + TEXTWRAP + ' > .' + ICON,
isCenterRipple: true
};
this.rippleIconFn = rippleEffect(this.element, iconModel);
};
TreeView.prototype.setFullRow = function (isEnabled) {
(isEnabled ? addClass : removeClass)([this.element], FULLROWWRAP);
};
TreeView.prototype.setMultiSelect = function (isEnabled) {
if (isEnabled) {
this.element.setAttribute('aria-multiselectable', 'true');
}
else {
this.element.setAttribute('aria-multiselectable', 'false');
}
};
TreeView.prototype.templateComplier = function (template) {
if (template) {
this.hasTemplate = true;
this.element.classList.add(INTERACTION);
try {
if (typeof template !== 'function' && document.querySelectorAll(template).length) {
return compile(document.querySelector(template).innerHTML.trim());
}
else {
return compile(template);
}
}
catch (e) {
return compile(template);
}
}
this.element.classList.remove(INTERACTION);
return undefined;
};
TreeView.prototype.setDataBinding = function (changeDataSource) {
var _this = this;
this.treeList.push('false');
if (this.fields.dataSource instanceof DataManager) {
this.isOffline = this.fields.dataSource.dataSource.offline;
if (this.fields.dataSource.ready) {
this.fields.dataSource.ready.then(function (e) {
_this.isOffline = _this.fields.dataSource.dataSource.offline;
if (_this.fields.dataSource instanceof DataManager && _this.isOffline) {
_this.treeList.pop();
_this.treeData = e.result;
_this.isNumberTypeId = _this.getType();
_this.setRootData();
_this.renderItems(true);
if (_this.treeList.length === 0 && !_this.isLoaded) {
_this.finalize();
}
}
}).catch(function (e) {
_this.trigger('actionFailure', { error: e });
});
}
else {
this.fields.dataSource.executeQuery(this.getQuery(this.fields)).then(function (e) {
_this.treeList.pop();
_this.treeData = e.result;
_this.isNumberTypeId = _this.getType();
_this.setRootData();
if (changeDataSource) {
_this.changeDataSource = true;
}
_this.renderItems(true);
_this.changeDataSource = false;
if (_this.treeList.length === 0 && !_this.isLoaded) {
_this.finalize();
}
}).catch(function (e) {
_this.trigger('actionFailure', { error: e });
});
}
}
else {
this.treeList.pop();
if (isNOU(this.fields.dataSource)) {
this.rootData = this.treeData = [];
}
else {
this.treeData = JSON.parse(JSON.stringify(this.fields.dataSource));
this.setRootData();
}
this.isNumberTypeId = this.getType();
this.renderItems(false);
}
if (this.treeList.length === 0 && !this.isLoaded) {
this.finalize();
}
};
TreeView.prototype.getQuery = function (mapper, value) {
if (value === void 0) { value = null; }
var columns = [];
var query;
if (!mapper.query) {
query = new Query();
var prop = this.getActualProperties(mapper);
for (var _i = 0, _a = Object.keys(prop); _i < _a.length; _i++) {
var col = _a[_i];
if (col !== 'dataSource' && col !== 'tableName' && col !== 'child' && !!mapper["" + col]
&& col !== 'url' && columns.indexOf(mapper["" + col]) === -1) {
columns.push(mapper["" + col]);
}
}
query.select(columns);
if (Object.prototype.hasOwnProperty.call(prop, 'tableName')) {
query.from(mapper.tableName);
}
}
else {
query = mapper.query.clone();
}
ListBase.addSorting(this.sortOrder, mapper.text, query);
if (!isNOU(value) && !isNOU(mapper.parentID)) {
query.where(mapper.parentID, 'equal', (this.isNumberTypeId ? parseFloat(value) : value));
}
return query;
};
TreeView.prototype.getType = function () {
return this.treeData[0] ? ((typeof getValue(this.fields.id, this.treeData[0]) === 'number') ? true : false) : false;
};
TreeView.prototype.setRootData = function () {
this.dataType = this.getDataType(this.treeData, this.fields);
if (this.dataType === 1) {
this.groupedData = this.getGroupedData(this.treeData, this.fields.parentID);
var rootItems = this.getChildNodes(this.treeData, undefined, true);
if (isNOU(rootItems)) {
this.rootData = [];
}
else {
this.rootData = rootItems;
}
}
else {
this.rootData = this.treeData;
}
};
TreeView.prototype.isChildObject = function () {
if (typeof this.fields.child === 'object') {
return true;
}
else {
return false;
}
};
TreeView.prototype.renderItems = function (isSorted) {
this.listBaseOption.ariaAttributes.level = 1;
var sortedData = this.getSortedData(this.rootData);
this.ulElement = ListBase.createList(this.createElement, isSorted ? this.rootData : sortedData, this.listBaseOption);
this.element.appendChild(this.ulElement);
var rootNodes = this.ulElement.querySelectorAll('.e-list-item');
if (this.loadOnDemand === false) {
var i = 0;
while (i < rootNodes.length) {
this.renderChildNodes(rootNodes[parseInt(i.toString(), 10)], true, null, true);
i++;
}
}
var parentEle = selectAll('.' + PARENTITEM, this.element);
if ((parentEle.length === 1 && (rootNodes && rootNodes.length !== 0)) || this.loadOnDemand) {
this.finalizeNode(this.element);
}
this.parentNodeCheck = [];
this.parentCheckData = [];
this.updateCheckedStateFromDS();
if (this.autoCheck && this.showCheckBox && !this.isLoaded) {
this.updateParentCheckState();
}
};
/**
* Update the checkedNodes from datasource at initial rendering
*
* @returns {void}
*/
TreeView.prototype.updateCheckedStateFromDS = function () {
this.validNodes = [];
if (this.treeData && this.showCheckBox) {
if (this.dataType === 1) {
var mapper = this.fields;
var resultData = new DataManager(this.treeData).executeLocal(new Query().where(mapper.isChecked, 'equal', true, false));
for (var i = 0; i < resultData.length; i++) {
var resultId = resultData[parseInt(i.toString(), 10)][this.fields.id]
? resultData[parseInt(i.toString(), 10)][this.fields.id].toString()
: null;
if (this.checkedNodes.indexOf(resultId) === -1 && !(this.isLoaded)) {
this.checkDisabledState(resultId, resultData[i]);
}
if (resultData[parseInt(i.toString(), 10)][this.fields.hasChildren]) {
var id = resultData[parseInt(i.toString(), 10)][this.fields.id];
var childData = new DataManager(this.treeData).
executeLocal(new Query().where(mapper.parentID, 'equal', id, false));
for (var child = 0; child < childData.length; child++) {
var childId = childData[parseInt(child.toString(), 10)][this.fields.id]
? childData[parseInt(child.toString(), 10)][this.fields.id].toString()
: null;
if (this.checkedNodes.indexOf(childId) === -1 && this.autoCheck) {
this.checkDisabledState(childId, childData[child]);
}
}
}
}
for (var i = 0; i < this.checkedNodes.length; i++) {
var mapper_1 = this.fields;
var checkState = new DataManager(this.treeData).
executeLocal(new Query().where(mapper_1.id, 'equal', this.checkedNodes[parseInt(i.toString(), 10)], true));
if (checkState[0] && this.autoCheck) {
this.getCheckedNodeDetails(mapper_1, checkState);
this.checkIndeterminateState(checkState[0]);
}
if (checkState.length > 0) {
var checkedId = checkState[0][this.fields.id] ? checkState[0][this.fields.id].toString() : null;
if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {
this.validNodes.push(checkedId);
}
}
var checkedData = new DataManager(this.treeData).
executeLocal(new Query().where(mapper_1.parentID, 'equal', this.checkedNodes[parseInt(i.toString(), 10)], true));
for (var index = 0; index < checkedData.length; index++) {
var checkedId = checkedData[parseInt(index.toString(), 10)][this.fields.id]
? checkedData[parseInt(index.toString(), 10)][this.fields.id].toString()
: null;
if (this.checkedNodes.indexOf(checkedId) === -1 && this.autoCheck) {
this.checkDisabledState(checkedId, checkedData[index]);
}
if (this.checkedNodes.indexOf(checkedId) > -1 && this.validNodes.indexOf(checkedId) === -1) {
this.validNodes.push(checkedId);
}
}
}
}
else if (this.dataType === 2 || (this.fields.dataSource instanceof DataManager &&
this.isOffline)) {
for (var index = 0; index < this.treeData.length; index++) {
var fieldId = this.treeData[parseInt(index.toString(), 10)][this.fields.id] ? this.treeData[parseInt(index.toString(), 10)][this.fields.id].toString() : '';
if (this.treeData[parseInt(index.toString(), 10)][this.fields.isChecked] &&
!(this.isLoaded) && this.checkedNodes.indexOf(fieldId) === -1) {
this.checkDisabledState(fieldId, this.treeData[index]);
}
if (this.checkedNodes.indexOf(fieldId) > -1 && this.validNodes.indexOf(fieldId) === -1) {
this.validNodes.push(fieldId);
}
var childItems = getValue(this.fields.child.toString(), this.treeData[parseInt(index.toString(), 10)]);
if (childItems) {
this.updateChildCheckState(childItems, this.treeData[parseInt(index.toString(), 10)]);
}
}
this.validNodes = (this.enablePersistence) ? this.checkedNodes : this.validNodes;
}
this.setProperties({ checkedNodes: this.validNodes }, true);
}
};
/**
* To check whether the list data has sub child and to change the parent check state accordingly
*
* @param {FieldsSettingsModel} mapper - The mapper object containing field settings.
* @param {Object[]} checkNodes - The array of checked nodes.
* @returns {void}
* @private
*/
TreeView.prototype.getCheckedNodeDetails = function (mapper, checkNodes) {
var id = checkNodes[0][this.fields.parentID] ? checkNodes[0][this.fields.parentID].toString() : null;
var count = 0;
var element = this.element.querySelector('[data-uid="' + checkNodes[0][this.fields.id] + '"]');
var parentEle = this.element.querySelector('[data-uid="' + checkNodes[0][this.fields.parentID] + '"]');
if (!element && !parentEle) {
if (this.parentNodeCheck.indexOf(id) === -1) {
this.parentNodeCheck.push(id);
}
var childNodes = this.getChildNodes(this.treeData, id);
for (var i = 0; i < childNodes.length; i++) {
var childId = childNodes[parseInt(i.toString(), 10)][this.fields.id]
? childNodes[parseInt(i.toString(), 10)][this.fields.id].toString()
: null;
if (this.checkedNodes.indexOf(childId) !== -1) {
count++;
}
if (count === childNodes.length && this.checkedNodes.indexOf(id) === -1) {
this.checkDisabledState(id);
}
}
var preElement = new DataManager(this.treeData).
executeLocal(new Query().where(mapper.id, 'equal', id, true));
this.getCheckedNodeDetails(mapper, preElement);
}
else if (parentEle) {
var check = select('.' + CHECK, parentEle);
if (!check) {
this.changeState(parentEle, 'indeterminate', null, true, true);
}
}
};
/**
* Update the checkedNodes and parent state when all the child Nodes are in checkedstate at initial rendering
*
* @returns {void}
* @private
*/
TreeView.prototype.updateParentCheckState = function () {
var indeterminate = selectAll('.' + INDETERMINATE, this.element);
var childCheckedElement;
var data = this.treeData;
if (this.element.classList.contains('e-filtering')) {
data = this.DDTTreeData;
}
for (var i = 0; i < indeterminate.length; i++) {
var node = closest(indeterminate[parseInt(i.toString(), 10)], '.' + LISTITEM);
var nodeId = node.getAttribute('data-uid').toString();
var OldCheckedNodes = void 0;
if (this.element.classList.contains('e-filtering')) {
OldCheckedNodes = new DataManager(this.OldCheckedData).executeLocal(new Query().where('parentID', 'equal', nodeId, true));
}
if (this.dataType === 1) {
childCheckedElement = new DataManager(data).
executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));
}
else {
childCheckedElement = this.getChildNodes(data, nodeId);
}
var count = 0;
if (childCheckedElement) {
var _loop_1 = function (j) {
var childId = childCheckedElement[parseInt(j.toString(), 10)][this_1.fields.id].toString();
if (this_1.checkedNodes.indexOf(childId) !== -1) {
count++;
}
else if (this_1.element.classList.contains('e-filtering') && OldCheckedNodes.findIndex(function (e) { return e['id'] === childId; }) !== -1) {
count++;
}
};
var this_1 = this;
for (var j = 0; j < childCheckedElement.length; j++) {
_loop_1(j);
}
if (count === childCheckedElement.length) {
var nodeCheck = node.getAttribute('data-uid');
if (this.checkedNodes.indexOf(nodeCheck) === -1) {
this.checkDisabledState(nodeCheck);
}
this.changeState(node, 'check', null, true, true);
}
else if (count === 0 && this.checkedNodes.length === 0) {
this.changeState(node, 'uncheck', null, true, true);
}
}
}
};
/**
* Change the parent to indeterminate state whenever the child is in checked state which is not rendered in DOM
*
* @param {Object} data - The data object to check for indeterminate state.
* @returns {void}
* @private
*/
TreeView.prototype.checkIndeterminateState = function (data) {
var element;
if (this.dataType === 1) {
element = this.element.querySelector('[data-uid="' + data[this.fields.parentID] + '"]');
}
else {
element = this.element.querySelector('[data-uid="' + data[this.fields.id] + '"]');
}
if (element) {
var ariaChecked = element.getAttribute('aria-checked');
if (ariaChecked !== 'true') {
this.changeState(element, 'indeterminate', null, true, true);
}
}
else if (this.dataType === 2) {
if (this.parentNodeCheck.indexOf(data[this.fields.id].toString()) === -1) {
this.parentNodeCheck.push(data[this.fields.id].toString());
}
}
};
/**
* Update the checkedNodes for child and subchild from datasource (hierarchical datasource) at initial rendering
*
* @param {Object[]} childItems - The array of child items to update the checked state.
* @param {Object} treeData - The tree data object containing field values.
* @returns {void}
* @private
*/
TreeView.prototype.updateChildCheckState = function (childItems, treeData) {
var count = 0;
var checkedParent = treeData[this.fields.id] ? treeData[this.fields.id].toString() : '';
for (var index = 0; index < childItems.length; index++) {
var checkedChild = childItems[parseInt(index.toString(), 10)][this.fields.id] ? childItems[parseInt(index.toString(), 10)][this.fields.id].toString() : '';
if (childItems[parseInt(index.toString(), 10)][this.fields.isChecked] &&
!(this.isLoaded) && this.checkedNodes.indexOf(checkedChild) === -1) {
this.checkDisabledState(checkedChild, childItems[index]);
}
if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1 && this.autoCheck) {
this.checkDisabledState(checkedChild, childItems[index]);
}
if (this.checkedNodes.indexOf(checkedChild) !== -1 && this.autoCheck) {
count++;
}
if (this.checkedNodes.indexOf(checkedChild) > -1 && this.validNodes.indexOf(checkedChild) === -1) {
this.validNodes.push(checkedChild);
}
var subChildItems = getValue(this.fields.child.toString(), childItems[parseInt(index.toString(), 10)]);
if (subChildItems && subChildItems.length) {
if (this.parentCheckData.indexOf(treeData) === -1) {
this.parentCheckData.push(treeData);
}
this.updateChildCheckState(subChildItems, childItems[parseInt(index.toString(), 10)]);
}
if (count === childItems.length && this.autoCheck && this.checkedNodes.indexOf(checkedParent) === -1) {
this.checkDisabledState(checkedParent, treeData);
}
}
if (count !== 0 && this.autoCheck) {
this.checkIndeterminateState(treeData);
for (var len = 0; len < this.parentCheckData.length; len++) {
if ((treeData !== this.parentCheckData[parseInt(len.toString(), 10)]) &&
(this.parentCheckData[parseInt(len.toString(), 10)])) {
this.checkIndeterminateState(this.parentCheckData[parseInt(len.toString(), 10)]);
}
}
}
this.parentCheckData = [];
};
TreeView.prototype.beforeNodeCreate = function (e) {
if (this.showCheckBox) {
var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
checkboxEle.classList.add(CHECKBOXWRAP);
var icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, e.item);
var id = e.item.getAttribute('data-uid');
e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNOU(icon) ? 0 : 1]);
var checkValue = getValue(e.fields.isChecked, e.curData);
if (this.checkedNodes.indexOf(id) > -1) {
select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
e.item.setAttribute('aria-checked', 'true');
this.addCheck(e.item);
}
else if (!isNOU(checkValue) && checkValue.toString() === 'true') {
select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
e.item.setAttribute('aria-checked', 'true');
this.addCheck(e.item);
}
else {
e.item.setAttribute('aria-checked', 'false');
}
var frame = select('.' + CHECKBOXFRAME, checkboxEle);
EventHandler.add(frame, 'mousedown', this.frameMouseHandler, this);
EventHandler.add(frame, 'mouseup', this.frameMouseHandler, this);
}
if (this.fullRowSelect) {
this.createFullRow(e.item);
}
if (this.allowMultiSelection && !e.item.classList.contains(SELECTED)) {
e.item.setAttribute('aria-selected', 'false');
}
var fields = e.fields;
this.addActionClass(e, fields.selected, SELECTED);
this.addActionClass(e, fields.expanded, EXPANDED);
e.item.setAttribute('tabindex', '-1');
EventHandler.add(e.item, 'focus', this.focusIn, this);
if (!isNOU(this.nodeTemplateFn)) {
var textEle = e.item.querySelector('.' + LISTTEXT);
var dataId = e.item.getAttribute('data-uid');
textEle.innerHTML = '';
this.renderNodeTemplate(e.curData, textEle, dataId);
}
var eventArgs = {
node: e.item,
nodeData: e.curData,
text: e.text
};
if (!this.isRefreshed) {
this.trigger('drawNode', eventArgs);
if (e.curData[this.fields.selectable] === false && !this.showCheckBox) {
e.item.classList.add(PREVENTSELECT);
var firstChild = e.item.firstElementChild;
firstChild.style.cursor = 'not-allowed';
}
}
};
TreeView.prototype.frameMouseHandler = function (e) {
var rippleSpan = select('.' + CHECKBOXRIPPLE, e.target.parentElement);
rippleMouseHandler(e, rippleSpan);
};
TreeView.prototype.addActionClass = function (e, action, cssClass) {
var data = e.curData;
var actionValue = getValue(action, data);
if (!isNOU(actionValue) && actionValue.toString() !== 'false') {
e.item.classList.add(cssClass);
}
};
TreeView.prototype.getDataType = function (ds, mapper) {
if (this.fields.dataSource instanceof DataManager) {
for (var i = 0; i < ds.length; i++) {
if (this.isOffline) {
if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[parseInt(i.toString(), 10)])) && !isNOU(getValue(mapper.parentID, ds[parseInt(i.toString(), 10)]))) {
return 1;
}
}
else if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[parseInt(i.toString(), 10)]))) {
return 1;
}
}
return 2;
}
for (var i = 0, len = ds.length; i < len; i++) {
if ((typeof mapper.child === 'string') && (!isNOU(getValue(mapper.child, ds[parseInt(i.toString(), 10)])) || (Object.prototype.hasOwnProperty.call(ds[parseInt(i.toString(), 10)], mapper.child)))) {
return 2;
}
if (this.isChildObject()) {
return 2;
}
if (!isNOU(getValue(mapper.parentID, ds[parseInt(i.toString(), 10)])) ||
!isNOU(getValue(mapper.hasChildren, ds[parseInt(i.toString(), 10)]))) {
return 1;
}
}
return 1;
};
TreeView.prototype.getGroupedData = function (dataSource, groupBy) {
var cusQuery = new Query().group(groupBy);
var ds = ListBase.getDataSource(dataSource, cusQuery);
var grpItem = [];
for (var j = 0; j < ds.length; j++) {
var itemObj = ds[parseInt(j.toString(), 10)].items;
grpItem.push(itemObj);
}
return grpItem;
};
TreeView.prototype.getSortedData = function (list) {
if (list && this.sortOrder !== 'None') {
list = ListBase.getDataSource(list, ListBase.addSorting(this.sortOrder, this.fields.text));
}
return list;
};
TreeView.prototype.finalizeNode = function (element, isFromExpandAll, expandChild) {
var _this = this;
if (!isFromExpandAll) {
this.updateAttributes(element);
}
if (!expandChild) {
var eNodes = selectAll('.' + EXPANDED, element);
if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] === true; }).length > 0
? true
: this.isInitalExpand;
}
if (!this.isInitalExpand) {
for (var i = 0; i < eNodes.length; i++) {
this.renderChildNodes(eNodes[parseInt(i.toString(), 10)]);
}
}
removeClass(eNodes, EXPANDED);
}
if (!isFromExpandAll) {
this.updateList();
}
if (this.isLoaded) {
this.updateCheckedProp();
}
};
TreeView.prototype.updateAttributes = function (element) {
var iNodes = selectAll('.' + IMAGE, element);
for (var k = 0; k < iNodes.length; k++) {
iNodes[parseInt(k.toString(), 10)].setAttribute('alt', IMAGE);
}
if (this.isLoaded) {
var sNodes = selectAll('.' + SELECTED, element);
for (var i = 0; i < sNodes.length; i++) {
this.selectNode(sNodes[parseInt(i.toString(), 10)], null);
break;
}
removeClass(sNodes, SELECTED);
}
var cNodes = selectAll('.' + LISTITEM + ':not(.' + EXPANDED + ')', element);
for (var j = 0; j < cNodes.length; j++) {
var icon = select('div.' + ICON, cNodes[parseInt(j.toString(), 10)]);
if (icon && icon.classList.contains(EXPANDABLE)) {
this.disableExpandAttr(cNodes[parseInt(j.toString(), 10)]);
}
}
};
TreeView.prototype.updateCheckedProp = function () {
if (this.showCheckBox) {
var nodes = [].concat([], this.checkedNodes);
this.setProperties({ checkedNodes: nodes }, true);
}
};
TreeView.prototype.ensureIndeterminate = function () {
if (this.autoCheck) {
var liElement = selectAll('li', this.element);
var ulElement = void 0;
for (var i = 0; i < liElement.length; i++) {
if (liElement[parseInt(i.toString(), 10)].classList.contains(LISTITEM)) {
ulElement = select('.' + PARENTITEM, liElement[parseInt(i.toString(), 10)]);
if (ulElement) {
this.ensureParentCheckState(liElement[parseInt(i.toString(), 10)]);
}
else {
this.ensureChildCheckState(liElement[parseInt(i.toString(), 10)]);
}
}
}
}
else {
var indeterminate = selectAll('.' + INDETERMINATE, this.element);
for (var i = 0; i < indeterminate.length; i++) {
indeterminate[parseInt(i.toString(), 10)].classList.remove(INDETERMINATE);
}
}
};
TreeView.prototype.ensureParentCheckState = function (element) {
if (!isNOU(element)) {
if (element.classList.contains(ROOT)) {
return;
}
var ulElement = element;
if (element.classList.contains(LISTITEM)) {
ulElement = select('.' + PARENTITEM, element);
}
var checkedNodes = selectAll('.' + CHECKBOXWRAP + ' .' + CHECK, ulElement);
var indeterminateNodes = selectAll('.' + INDETERMINATE, ulElement);
var nodes = selectAll(this.checkDisabledChildren ? '.' + LISTITEM : '.' + LISTITEM + ':not(.' + DISABLE + ')', ulElement);
var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];
var count = nodes.length;
var checkedCount = checkedNodes.length;
var matchedChildNodes = [];
var oldChildCount = [];
var dataUid_1 = element.getAttribute('data-uid');
var rootNodeChecked_1 = true;
var childNodeChecked_1 = false;
nodes.forEach(function (childNode) {
if (childNode instanceof HTMLElement) {
var ariaChecked = childNode.getAttribute('aria-checked');
if (ariaChecked === 'true') {
childNodeChecked_1 = true;
}
else {
rootNodeChecked_1 = false;
}
}
});
var parentNodeChecked = false;
if (this.element.classList.contains('e-filtering')) {
var oldCheckedNodes = new DataManager(this.OldCheckedData).executeLocal(new Query().where('parentID', 'equal', dataUid_1, true));
checkedCount = oldCheckedNodes.length;
var parentNode = new DataManager(this.OldCheckedData).executeLocal(new Query().where('hasChildren', 'equal', true, true));
if (parentNode.length > 0 && childNodeChecked_1 && ((this.OldCheckedData.some(function (oldNode) { return oldNode.id === dataUid_1; })) ||
this.parentNodeCheck.indexOf(dataUid_1) !== -1)) {
checkedCount = parentNode.length;
parentNodeChecked = true;
}
var childItems = [];
if (this.dataType === 1) {
childItems = new DataManager(this.DDTTreeData).executeLocal(new Query().where(this.fields.parentID, 'equal', dataUid_1, true));
}
else {
childItems = this.getChildNodes(this.DDTTreeData, dataUid_1);
}
count = childItems.length;
}
if (this.autoCheck && this.showCheckBox && !(this.fields.dataSource instanceof DataManager)) {
var selectedChildNodeDetails = this.getSelectedChildNodeDetails(dataUid_1);
matchedChildNodes = selectedChildNodeDetails;
oldChildCount = new DataManager(this.checkActionNodes)
.executeLocal(new Query().where('parentID', 'equal', dataUid_1, true));
}
if (count === 0 && checkedCount === 0) {
return;
}
else if (count === checkedCount || ((parentNodeChecked && count > 0) && ((oldChildCount.length === matchedChildNodes.length)
|| (oldChildCount.length !== matchedChildNodes.length))
&& (oldChildCount.length !== 0 && matchedChildNodes.length !== 0) && rootNodeChecked_1
&& (this.autoCheck && this.showCheckBox))) {
this.changeState(checkBoxEle, 'check', null, true, true);
}
else if ((checkedCount > 0 && !parentNodeChecked && (this.autoCheck && this.showCheckBox))) {
this.changeState(checkBoxEle, 'indeterminate', null, true, true);
}
else if (checkedCount > 0 || indeterminateNodes.length > 0) {
this.changeState(checkBoxEle, 'indeterminate', null, true, true);
}
else if (checkedCount === 0) {
this.changeState(checkBoxEle, 'uncheck', null, true, true);
}
var parentUL = closest(element, '.' + PARENTITEM);
if (!isNOU(parentUL)) {
var currentParent = closest(parentUL, '.' + LISTITEM);
this.ensureParentCheckState(currentParent);
}
}
};
TreeView.prototype.getSelectedChildNodeDetails = function (dataUid) {
var _this = this;
var childKey = typeof this.fields.child === 'string' ? this.fields.child : null;
var dataId = this.fields.id;
var parentKey = this.fields.parentID;
var matchesDataUid = function (childNode) {
if (!isNOU(childKey) && childKey in childNode && Array.isArray(childNode[childKey])) {
var matchNode = childNode[dataId];
if (!isNOU(matchNode)) {
return matchNode.toString() === dataUid;
}
}
else {
var childNodePid = childNode[parentKey];
if (!isNOU(childNodePid)) {
return childNodePid.toString() === dataUid;
}
}
return false;
};
return this.checkedNodes
.map(function (checkedNodeId) {
return _this.getNodeObject(checkedNodeId);
})
.filter(function (childNode) {
if (childNode && typeof childNode === 'object' && (childKey in childNode)) {
return matchesDataUid(childNode);
}
else if (_this.dataType !== 2 && typeof childNode === 'object' && (parentKey in childNode || childKey in childNode)) {
return matchesDataUid(childNode);
}
return false;
});
};
TreeView.prototype.ensureChildCheckState = function (element, e, isFromExpandAll) {
var _this = this;
if (!isNOU(element)) {
var childElement = select('.' + PARENTITEM, element);
var checkBoxes = void 0;
if (!isNOU(childElement)) {
var childCheck = Array.from(childElement.querySelectorAll('li'));
checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);
if (this.isFilter) {
checkBoxes = Array.from(checkBoxes).filter(function (checkbox) {
var dataUID = checkbox.closest('li').getAttribute('data-uid');
return dataUID !== null && _this.checkedNodes.indexOf(dataUID) !== -1;
});
childCheck = Array.from(childCheck).filter(function (li) {
var childIds = li.getAttribute('data-uid');
return childIds !== null && _this.checkedNodes.indexOf(childIds) !== -1;
});
if (checkBoxes.length === 0) {
checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);
childCheck = Array.from(childElement.querySelectorAll('li'));
}
}
var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);
var parentCheck = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(INDETERMINA