@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,120 lines • 229 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 } 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-checkbox-wrapper';
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 = [];
// eslint-disable-next-line
_this.validArr = [];
_this.validNodes = [];
_this.expandChildren = [];
_this.isFieldChange = false;
_this.changeDataSource = false;
_this.hasTemplate = false;
_this.isFirstRender = false;
// Specifies whether the node is dropped or not
_this.isNodeDropped = false;
_this.isInteracted = false;
_this.isRightClick = false;
_this.mouseDownStatus = 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();
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');
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);
}
else {
this.element.classList.remove(DISABLED);
}
};
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) {
var firstUl = select('.' + PARENTITEM, this.element);
if (isEnabled) {
firstUl.setAttribute('aria-multiselectable', 'true');
}
else {
firstUl.removeAttribute('aria-multiselectable');
}
};
// eslint-disable-next-line
TreeView.prototype.templateComplier = function (template) {
if (template) {
this.hasTemplate = true;
// eslint-disable-next-line
var e = void 0;
this.element.classList.add(INTERACTION);
try {
if (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) {
/* eslint-disable */
this.isOffline = this.fields.dataSource.dataSource.offline;
if (this.fields.dataSource.ready) {
this.fields.dataSource.ready.then(function (e) {
/* eslint-disable */
_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 (prop.hasOwnProperty('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.renderItems = function (isSorted) {
/* eslint-disable */
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[i], 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
*/
TreeView.prototype.updateCheckedStateFromDS = function (id) {
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[i][this.fields.id] ? resultData[i][this.fields.id].toString() : null;
var resultPId = resultData[i][this.fields.parentID] ? resultData[i][this.fields.parentID].toString() : null;
if (this.checkedNodes.indexOf(resultId) === -1 && !(this.isLoaded)) {
this.checkedNodes.push(resultId);
}
if (resultData[i][this.fields.hasChildren]) {
var id_1 = resultData[i][this.fields.id];
var childData = new DataManager(this.treeData).
executeLocal(new Query().where(mapper.parentID, 'equal', id_1, false));
for (var child = 0; child < childData.length; child++) {
var childId = childData[child][this.fields.id] ? childData[child][this.fields.id].toString() : null;
if (this.checkedNodes.indexOf(childId) === -1 && this.autoCheck) {
this.checkedNodes.push(childId);
}
}
}
}
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[i], 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[i], true));
for (var index = 0; index < checkedData.length; index++) {
var checkedId = checkedData[index][this.fields.id] ? checkedData[index][this.fields.id].toString() : null;
if (this.checkedNodes.indexOf(checkedId) === -1 && this.autoCheck) {
this.checkedNodes.push(checkedId);
}
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[index][this.fields.id] ? this.treeData[index][this.fields.id].toString() : '';
if (this.treeData[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(fieldId) === -1) {
this.checkedNodes.push(fieldId);
}
if (this.checkedNodes.indexOf(fieldId) > -1 && this.validNodes.indexOf(fieldId) === -1) {
this.validNodes.push(fieldId);
}
var childItems = getValue(this.fields.child.toString(), this.treeData[index]);
if (childItems) {
this.updateChildCheckState(childItems, this.treeData[index]);
}
}
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
*/
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) {
var len = this.parentNodeCheck.length;
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[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;
if (this.checkedNodes.indexOf(childId) !== -1) {
count++;
}
if (count === childNodes.length && this.checkedNodes.indexOf(id) === -1) {
this.checkedNodes.push(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
*/
TreeView.prototype.updateParentCheckState = function () {
var indeterminate = selectAll('.' + INDETERMINATE, this.element);
var childCheckedElement;
for (var i = 0; i < indeterminate.length; i++) {
var node = closest(indeterminate[i], '.' + LISTITEM);
var nodeId = node.getAttribute('data-uid').toString();
if (this.dataType === 1) {
childCheckedElement = new DataManager(this.treeData).
executeLocal(new Query().where(this.fields.parentID, 'equal', nodeId, true));
}
else {
childCheckedElement = this.getChildNodes(this.treeData, nodeId);
}
var count = 0;
if (childCheckedElement) {
for (var j = 0; j < childCheckedElement.length; j++) {
var childId = childCheckedElement[j][this.fields.id].toString();
if (this.checkedNodes.indexOf(childId) !== -1) {
count++;
}
}
if (count === childCheckedElement.length) {
var nodeCheck = node.getAttribute('data-uid');
if (this.checkedNodes.indexOf(nodeCheck) === -1) {
this.checkedNodes.push(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
*/
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.querySelector('.' + CHECKBOXWRAP).getAttribute('aria-checked');
if (ariaChecked !== 'true') {
this.changeState(element, 'indeterminate', null, true, true);
}
}
else if (this.dataType === 2) {
var len = this.parentNodeCheck.length;
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
*/
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[index][this.fields.id] ? childItems[index][this.fields.id].toString() : '';
if (childItems[index][this.fields.isChecked] && !(this.isLoaded) && this.checkedNodes.indexOf(checkedChild) === -1) {
this.checkedNodes.push(checkedChild);
}
if (this.checkedNodes.indexOf(checkedParent) !== -1 && this.checkedNodes.indexOf(checkedChild) === -1 && this.autoCheck) {
this.checkedNodes.push(checkedChild);
}
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[index]);
if (subChildItems && subChildItems.length) {
if (this.parentCheckData.indexOf(treeData) === -1)
this.parentCheckData.push(treeData);
this.updateChildCheckState(subChildItems, childItems[index]);
}
if (count === childItems.length && this.autoCheck && this.checkedNodes.indexOf(checkedParent) === -1) {
this.checkedNodes.push(checkedParent);
}
}
if (count !== 0 && this.autoCheck) {
this.checkIndeterminateState(treeData);
for (var len = 0; len < this.parentCheckData.length; len++) {
if ((treeData !== this.parentCheckData[len]) && (this.parentCheckData[len])) {
this.checkIndeterminateState(this.parentCheckData[len]);
}
}
}
this.parentCheckData = [];
};
TreeView.prototype.beforeNodeCreate = function (e) {
if (this.showCheckBox) {
var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
checkboxEle.setAttribute('role', 'checkbox');
checkboxEle.setAttribute('aria-label', 'checkbox');
var icon = select('div.' + ICON, 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);
checkboxEle.setAttribute('aria-checked', 'true');
this.addCheck(e.item);
}
else if (!isNOU(checkValue) && checkValue.toString() === 'true') {
select('.' + CHECKBOXFRAME, checkboxEle).classList.add(CHECK);
checkboxEle.setAttribute('aria-checked', 'true');
this.addCheck(e.item);
}
else {
checkboxEle.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);
e.item.firstElementChild.setAttribute('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[i])) && !isNOU(getValue(mapper.parentID, ds[i]))) {
return 1;
}
}
else if ((typeof mapper.child === 'string') && isNOU(getValue(mapper.child, ds[i]))) {
return 1;
}
}
return 2;
}
for (var i = 0, len = ds.length; i < len; i++) {
if ((typeof mapper.child === 'string') && !isNOU(getValue(mapper.child, ds[i]))) {
return 2;
}
if (!isNOU(getValue(mapper.parentID, ds[i])) || !isNOU(getValue(mapper.hasChildren, ds[i]))) {
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[j].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) {
var iNodes = selectAll('.' + IMAGE, element);
for (var k = 0; k < iNodes.length; k++) {
iNodes[k].setAttribute('alt', IMAGE);
}
if (this.isLoaded) {
var sNodes = selectAll('.' + SELECTED, element);
for (var i = 0; i < sNodes.length; i++) {
this.selectNode(sNodes[i], 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[j]);
if (icon && icon.classList.contains(EXPANDABLE)) {
this.disableExpandAttr(cNodes[j]);
}
}
var eNodes = selectAll('.' + EXPANDED, element);
if (!this.isInitalExpand) {
for (var i = 0; i < eNodes.length; i++) {
this.renderChildNodes(eNodes[i]);
}
}
removeClass(eNodes, EXPANDED);
this.updateList();
if (this.isLoaded) {
this.updateCheckedProp();
}
};
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[i].classList.contains(LISTITEM)) {
ulElement = select('.' + PARENTITEM, liElement[i]);
if (ulElement) {
this.ensureParentCheckState(liElement[i]);
}
else {
this.ensureChildCheckState(liElement[i]);
}
}
}
}
else {
var indeterminate = selectAll('.' + INDETERMINATE, this.element);
for (var i = 0; i < indeterminate.length; i++) {
indeterminate[i].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('.' + CHECK, ulElement);
var indeterminateNodes = selectAll('.' + INDETERMINATE, ulElement);
var nodes = selectAll('.' + LISTITEM, ulElement);
var checkBoxEle = element.getElementsByClassName(CHECKBOXWRAP)[0];
if (nodes.length === checkedNodes.length) {
this.changeState(checkBoxEle, 'check', null, true, true);
}
else if (checkedNodes.length > 0 || indeterminateNodes.length > 0) {
this.changeState(checkBoxEle, 'indeterminate', null, true, true);
}
else if (checkedNodes.length === 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.ensureChildCheckState = function (element, e) {
if (!isNOU(element)) {
var childElement = select('.' + PARENTITEM, element);
var checkBoxes = void 0;
if (!isNOU(childElement)) {
checkBoxes = selectAll('.' + CHECKBOXWRAP, childElement);
var isChecked = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);
var parentCheck = element.getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(INDETERMINATE);
var childCheck = childElement.querySelectorAll('li');
var expandState = childElement.parentElement.getAttribute('aria-expanded');
var checkedState = void 0;
for (var index = 0; index < checkBoxes.length; index++) {
var childId = childCheck[index].getAttribute('data-uid');
if (!isNOU(this.currentLoadData) && !isNOU(getValue(this.fields.isChecked, this.currentLoadData[index]))) {
checkedState = getValue(this.fields.isChecked, this.currentLoadData[index]) ? 'check' : 'uncheck';
if (this.ele !== -1) {
checkedState = isChecked ? 'check' : 'uncheck';
}
if ((checkedState === 'uncheck') && (!isUndefined(this.parentNodeCheck) && this.autoCheck
&& this.parentNodeCheck.indexOf(childId) !== -1)) {
this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);
checkedState = 'indeterminate';
}
}
else {
var isNodeChecked = checkBoxes[index].getElementsByClassName(CHECKBOXFRAME)[0].classList.contains(CHECK);
if (isChecked) {
checkedState = 'check';
}
else if (isNodeChecked && !this.isLoaded) {
checkedState = 'check';
}
else if (this.checkedNodes.indexOf(childId) !== -1 && this.isLoaded && (parentCheck || isChecked)) {
checkedState = 'check';
}
else if (childCheck[index].classList.contains(CHILD) && (!isUndefined(this.parentNodeCheck) && this.autoCheck
&& (isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {
checkedState = 'indeterminate';
this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);
}
else if (this.dataType === 1 && (!isUndefined(this.parentNodeCheck) && this.autoCheck &&
(isChecked || parentCheck) && this.parentNodeCheck.indexOf(childId) !== -1)) {
checkedState = 'indeterminate';
this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(childId), 1);
}
else {
checkedState = 'uncheck';
}
}
this.changeState(checkBoxes[index], checkedState, e, true, true);
}
}
if (this.autoCheck && this.isLoaded) {
this.updateParentCheckState();
}
}
};
TreeView.prototype.doCheckBoxAction = function (nodes, doCheck) {
var li = selectAll('.' + LISTITEM, this.element);
if (!isNOU(nodes)) {
for (var len = nodes.length; len >= 0; len--) {
var liEle = void 0;
if (nodes.length === 1) {
liEle = this.getElement(nodes[len - 1]);
}
else {
liEle = this.getElement(nodes[len]);
}
if (isNOU(liEle)) {
var node = void 0;
node = nodes[len - nodes.length] ? nodes[len - nodes.length].toString() : nodes[len] ? nodes[len].toString() : null;
if (node !== '' && doCheck && node) {
this.setValidCheckedNode(node);
this.dynamicCheckState(node, doCheck);
}
else if (this.checkedNodes.indexOf(node) !== -1 && node !== '' && !doCheck) {
this.checkedNodes.splice(this.checkedNodes.indexOf(node), 1);
var childItems = this.getChildNodes(this.treeData, node);
if (childItems) {
for (var i = 0; i < childItems.length; i++) {
var id = childItems[i][this.fields.id] ? childItems[i][this.fields.id].toString() : null;
if (this.checkedNodes.indexOf(id) !== -1) {
this.checkedNodes.splice(this.checkedNodes.indexOf(id), 1);
var ele = this.element.querySelector('[data-uid="' + id + '"]');
if (ele) {
this.changeState(ele, 'uncheck', null);
}
}
}
if (this.parentNodeCheck.indexOf(node) !== -1) {
this.parentNodeCheck.splice(this.parentNodeCheck.indexOf(node), 1);
}
}
if (node) {
this.dynamicCheckState(node, doCheck);
}
this.updateField(this.treeData, this.fields, node, 'isChecked', null);
}
continue;
}
var checkBox = select('.' + PARENTITEM + ' .' + CHECKBOXWRAP, liEle);
this.validateCheckNode(checkBox, !doCheck, liEle, null);
}
}
else {
var checkBoxes = selectAll('.' + CHECKBOXWRAP, this.element);
if (this.loadOnDemand) {
for (var index = 0; index < checkBoxes.length; index++) {
this.updateFieldChecked(checkBoxes[index], doCheck);
this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck', null, null, null, doCheck);
}
}
else {
for (var index = 0; index < checkBoxes.length; index++) {
this.updateFieldChecked(checkBoxes[index], doCheck);
this.changeState(checkBoxes[index], doCheck ? 'check' : 'uncheck');
}
}
}
if (nodes) {
for (var j = 0; j < nodes.length; j++) {
var node = nodes[j] ? nodes[j].toString() : '';
if (!doCheck) {
this.updateField(this.treeData, this.fields, node, 'isChecked', null);
}
}
}
if (this.autoCheck) {
this.updateParentCheckState();
}
};
TreeView.prototype.updateFieldChecked = function (checkbox, doCheck) {
var currLi = closest(checkbox, '.' + LISTITEM);
var id = currLi.getAttribute('data-uid');
var nodeDetails = this.getNodeData(currLi);
if (nodeDetails.isChecked === 'true' && !doCheck) {
this.updateField(this.treeData, this.fields, id, 'isChecked', null);
}
};
/**
* Changes the parent and child check state while changing the checkedNodes via setmodel
*/
TreeView.prototype.dynamicCheckState = function (node, doCheck) {
if (this.dataType === 1) {
var count = 0;
var resultId = new DataManager(this.treeData).executeLocal(new Query().where(this.fields.id, 'equal', node, true));
if (resultId[0]) {
var id = resultId[0][this.fields.id] ? resultId[0][this.fields.id].toString() : null;
var parent_1 = resultId[0][this.fields.parentID] ? resultId[0][this.fields.parentID].toString() : null;
var parentElement = this.element.querySelector('[data-uid="' + parent_1 + '"]');
var indeterminate = parentElement ? select('.' + INDETERMINATE, parentElement) : null;
var check = parentElement ? select('.' + CHECK, parentElement) : null;
var element = this.element.querySelector('[data-uid="' + id + '"]');
var childNodes = this.getChildNodes(this.treeData, parent_1);
if (childNodes) {
for (var i = 0; i < childNodes.length; i++) {
var childId = childNodes[i][this.fields.id] ? childNodes[i][this.fields.id].toString() : null;
if (this.checkedNodes.indexOf(childId) !== -1) {
count++;
}
}
}
if (this.checkedNodes.indexOf(node) !== -1 && parentElement && (id === node) && this.autoCheck) {
this.changeState(parentElement, 'indeterminate', null);
}
else if (this.checkedNodes.indexOf(node) === -1 && element && (id === node) && !doCheck) {
this.changeState(element, 'uncheck', null);
}
else if (this.checkedNodes.indexOf(node) !== -1 && element && (id === node) && doCheck) {
this.changeState(element, 'check', null);
}
else if (this.checkedNodes.indexOf(node) === -1 && !element && parentElement && (id === node) && this.autoCheck
&& count !== 0) {
this.changeState(parentElement, 'indeterminate', null);
}
else if (this.checkedNodes.inde