@syncfusion/ej2-lists
Version:
The listview control allows you to select an item or multiple items from a list-like interface and represents the data in interactive hierarchical structure across different layouts or views.
1,112 lines (1,111 loc) • 94.8 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 { merge, formatUnit, isNullOrUndefined, append, detach, extend } from '@syncfusion/ej2-base';
import { attributes, addClass, removeClass, prepend, closest, remove } from '@syncfusion/ej2-base';
import { Component, EventHandler, Property, Complex, Event } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
import { compile, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { Animation, rippleEffect, Touch, animationMode } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { createCheckBox } from '@syncfusion/ej2-buttons';
import { ListBase, getFieldValues } from '../common/list-base';
/* eslint-disable @typescript-eslint/no-explicit-any */
// Effect Configuration Effect[] = [fromViewBackward,fromViewForward,toViewBackward,toviewForward];
var effectsConfig = {
'None': [],
'SlideLeft': ['SlideRightOut', 'SlideLeftOut', 'SlideLeftIn', 'SlideRightIn'],
'SlideDown': ['SlideTopOut', 'SlideBottomOut', 'SlideBottomIn', 'SlideTopIn'],
'Zoom': ['FadeOut', 'FadeZoomOut', 'FadeZoomIn', 'FadeIn'],
'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']
};
var effectsRTLConfig = {
'None': [],
'SlideLeft': ['SlideLeftOut', 'SlideRightOut', 'SlideRightIn', 'SlideLeftIn'],
'SlideDown': ['SlideBottomOut', 'SlideTopOut', 'SlideTopIn', 'SlideBottomIn'],
'Zoom': ['FadeZoomOut', 'FadeOut', 'FadeIn', 'FadeZoomIn'],
'Fade': ['FadeOut', 'FadeOut', 'FadeIn', 'FadeIn']
};
// don't use space in classnames.
export var classNames = {
root: 'e-listview',
hover: 'e-hover',
selected: 'e-active',
focused: 'e-focused',
parentItem: 'e-list-parent',
listItem: 'e-list-item',
listIcon: 'e-list-icon',
textContent: 'e-text-content',
listItemText: 'e-list-text',
groupListItem: 'e-list-group-item',
hasChild: 'e-has-child',
view: 'e-view',
header: 'e-list-header',
headerText: 'e-headertext',
headerTemplateText: 'e-headertemplate-text',
text: 'e-text',
disable: 'e-disabled',
container: 'e-list-container',
icon: 'e-icons',
backIcon: 'e-icon-back',
backButton: 'e-back-button',
checkboxWrapper: 'e-checkbox-wrapper',
checkbox: 'e-checkbox',
checked: 'e-check',
checklist: 'e-checklist',
checkboxIcon: 'e-frame',
checkboxRight: 'e-checkbox-right',
checkboxLeft: 'e-checkbox-left',
listviewCheckbox: 'e-listview-checkbox',
itemCheckList: 'e-checklist',
virtualElementContainer: 'e-list-virtualcontainer',
listTemplate: 'e-listview-template'
};
var LISTVIEW_TEMPLATE_PROPERTY = 'Template';
var LISTVIEW_GROUPTEMPLATE_PROPERTY = 'GroupTemplate';
var LISTVIEW_HEADERTEMPLATE_PROPERTY = 'HeaderTemplate';
var swipeVelocity = 0.5;
/**
* Represents the field settings of the ListView.
*/
var FieldSettings = /** @class */ (function (_super) {
__extends(FieldSettings, _super);
function FieldSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('id')
], FieldSettings.prototype, "id", void 0);
__decorate([
Property('text')
], FieldSettings.prototype, "text", void 0);
__decorate([
Property('isChecked')
], FieldSettings.prototype, "isChecked", void 0);
__decorate([
Property('isVisible')
], FieldSettings.prototype, "isVisible", void 0);
__decorate([
Property('enabled')
], FieldSettings.prototype, "enabled", void 0);
__decorate([
Property('iconCss')
], FieldSettings.prototype, "iconCss", void 0);
__decorate([
Property('child')
], FieldSettings.prototype, "child", void 0);
__decorate([
Property('tooltip')
], FieldSettings.prototype, "tooltip", void 0);
__decorate([
Property('groupBy')
], FieldSettings.prototype, "groupBy", void 0);
__decorate([
Property('text')
], FieldSettings.prototype, "sortBy", void 0);
__decorate([
Property('htmlAttributes')
], FieldSettings.prototype, "htmlAttributes", void 0);
__decorate([
Property('tableName')
], FieldSettings.prototype, "tableName", void 0);
return FieldSettings;
}(ChildProperty));
export { FieldSettings };
/**
* Represents the EJ2 ListView control.
* ```html
* <div id="listview">
* <ul>
* <li>Favorite</li>
* <li>Documents</li>
* <li>Downloads</li>
* </ul>
* </div>
* ```
* ```typescript
* var listviewObject = new ListView({});
* listviewObject.appendTo("#listview");
* ```
*/
var ListView = /** @class */ (function (_super) {
__extends(ListView, _super);
/**
* Constructor for creating the widget
*
* @param options
*
* @param element
*/
function ListView(options, element) {
var _this = _super.call(this, options, element) || this;
_this.previousSelectedItems = [];
_this.hiddenItems = [];
_this.enabledItems = [];
_this.disabledItems = [];
return _this;
}
/**
* @param newProp
*
* @param oldProp
*
* @private
*/
ListView.prototype.onPropertyChanged = function (newProp, oldProp) {
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'htmlAttributes':
this.setHTMLAttribute();
break;
case 'cssClass':
this.setCSSClass(oldProp.cssClass);
break;
case 'enable':
this.setEnable();
break;
case 'width':
case 'height':
this.setSize();
break;
case 'enableRtl':
this.setEnableRTL();
break;
case 'fields':
this.listBaseOption.fields = this.fields.properties;
if (this.enableVirtualization) {
this.virtualizationModule.reRenderUiVirtualization();
}
else {
this.reRender();
}
break;
case 'headerTitle':
if (!this.curDSLevel.length) {
this.header(this.headerTitle, false, 'header');
}
break;
case 'query':
if (this.enableVirtualization) {
this.virtualizationModule.reRenderUiVirtualization();
}
else {
this.reRender();
}
break;
case 'showHeader':
this.header(this.headerTitle, false, 'header');
break;
case 'enableVirtualization':
if (!isNullOrUndefined(this.contentContainer)) {
detach(this.contentContainer);
}
this.refresh();
break;
case 'showCheckBox':
case 'checkBoxPosition':
if (this.enableVirtualization) {
this.virtualizationModule.reRenderUiVirtualization();
}
else {
this.setCheckbox();
}
break;
case 'dataSource':
this.previousScrollTop = this.element.scrollTop;
if (this.enableVirtualization) {
this.virtualizationModule.reRenderUiVirtualization();
}
else {
this.reRender();
}
break;
case 'sortOrder':
case 'template':
if (!this.enableVirtualization) {
this.refresh();
}
break;
case 'showIcon':
if (this.enableVirtualization) {
this.virtualizationModule.reRenderUiVirtualization();
}
else {
this.listBaseOption.showIcon = this.showIcon;
this.curViewDS = this.getSubDS();
this.resetCurrentList();
}
break;
default:
break;
}
}
};
// Model Changes
ListView.prototype.setHTMLAttribute = function () {
if (!isNullOrUndefined(this.htmlAttributes) && Object.keys(this.htmlAttributes).length) {
attributes(this.element, this.htmlAttributes);
}
};
ListView.prototype.setCSSClass = function (oldCSSClass) {
if (this.cssClass) {
addClass([this.element], this.cssClass.split(' ').filter(function (css) { return css; }));
}
if (oldCSSClass) {
removeClass([this.element], oldCSSClass.split(' ').filter(function (css) { return css; }));
}
};
ListView.prototype.setSize = function () {
this.element.style.height = formatUnit(this.height);
this.element.style.width = formatUnit(this.width);
this.isWindow = this.element.clientHeight ? false : true;
};
ListView.prototype.setEnable = function () {
this.enableElement(this.element, this.enable);
};
ListView.prototype.setEnableRTL = function () {
if (this.enableRtl) {
this.element.classList.add('e-rtl');
}
else {
this.element.classList.remove('e-rtl');
}
};
ListView.prototype.enableElement = function (element, isEnabled) {
if (isEnabled) {
element.classList.remove(classNames.disable);
}
else {
element.classList.add(classNames.disable);
}
};
// Support Component Functions
ListView.prototype.header = function (text, showBack, prop) {
if (this.headerEle === undefined && this.showHeader) {
this.headerEle = this.createElement('div', { className: classNames.header });
var innerHeaderEle = this.createElement('span', { className: classNames.headerText });
if (this.enableHtmlSanitizer) {
this.setProperties({ headerTitle: SanitizeHtmlHelper.sanitize(this.headerTitle) }, true);
innerHeaderEle.innerText = this.headerTitle;
}
else {
innerHeaderEle.innerHTML = this.headerTitle;
}
var textEle = this.createElement('div', { className: classNames.text, innerHTML: innerHeaderEle.outerHTML });
var hedBackButton = this.createElement('div', {
className: classNames.icon + ' ' + classNames.backIcon + ' ' + classNames.backButton,
attrs: { style: 'display:none;' }
});
this.headerEle.appendChild(hedBackButton);
this.headerEle.appendChild(textEle);
if (this.headerTemplate) {
var compiledString = compile(this.headerTemplate);
var headerTemplateEle = this.createElement('div', { className: classNames.headerTemplateText });
var compiledElement = compiledString({}, this, prop, this.LISTVIEW_HEADERTEMPLATE_ID, null, null, this.headerEle);
if (compiledElement) {
append(compiledElement, headerTemplateEle);
}
append([headerTemplateEle], this.headerEle);
if (this.isReact) {
this.renderReactTemplates();
}
}
if (this.headerTemplate && this.headerTitle) {
textEle.classList.add('header');
}
this.element.classList.add('e-has-header');
prepend([this.headerEle], this.element);
}
else if (this.headerEle) {
if (this.showHeader) {
this.headerEle.style.display = '';
var textEle = this.headerEle.querySelector('.' + classNames.headerText);
var hedBackButton = this.headerEle.querySelector('.' + classNames.backIcon);
if (this.enableHtmlSanitizer) {
text = SanitizeHtmlHelper.sanitize(text);
}
textEle.innerHTML = text;
if (this.headerTemplate && showBack) {
textEle.parentElement.classList.remove('header');
this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('nested-header');
}
if (this.headerTemplate && !showBack) {
textEle.parentElement.classList.add('header');
this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.remove('nested-header');
this.headerEle.querySelector('.' + classNames.headerTemplateText).classList.add('header');
}
if (showBack === true) {
hedBackButton.style.display = '';
}
else {
hedBackButton.style.display = 'none';
}
}
else {
this.headerEle.style.display = 'none';
}
}
};
// Animation Related Functions
ListView.prototype.switchView = function (fromView, toView, reverse) {
var _this = this;
if (fromView && toView) {
var fPos_1 = fromView.style.position;
var overflow_1 = (this.element.style.overflow !== 'hidden') ? this.element.style.overflow : '';
fromView.style.position = 'absolute';
fromView.classList.add('e-view');
var anim = void 0;
var duration = this.animation.duration;
if (this.animation.effect) {
anim = (this.enableRtl ? effectsRTLConfig[this.animation.effect] : effectsConfig[this.animation.effect]);
}
else {
var slideLeft = 'SlideLeft';
anim = effectsConfig["" + slideLeft];
reverse = this.enableRtl;
duration = 0;
}
this.element.style.overflow = 'hidden';
this.aniObj.animate(fromView, {
name: (reverse === true ? anim[0] : anim[1]),
duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
timingFunction: this.animation.easing,
end: function () {
fromView.style.display = 'none';
_this.element.style.overflow = overflow_1;
fromView.style.position = fPos_1;
fromView.classList.remove('e-view');
}
});
toView.style.display = '';
this.aniObj.animate(toView, {
name: (reverse === true ? anim[2] : anim[3]),
duration: (duration === 0 && animationMode === 'Enable') ? 400 : duration,
timingFunction: this.animation.easing,
end: function () {
_this.trigger('actionComplete');
}
});
this.curUL = toView;
}
};
ListView.prototype.preRender = function () {
if (this.template) {
try {
if (typeof this.template !== 'function' && document.querySelectorAll(this.template).length) {
this.setProperties({ template: document.querySelector(this.template).innerHTML.trim() }, true);
}
}
catch (e) {
compile(this.template);
}
}
this.listBaseOption = {
template: this.template,
headerTemplate: this.headerTemplate,
groupTemplate: this.groupTemplate, expandCollapse: true, listClass: '',
ariaAttributes: {
itemRole: 'listitem', listRole: 'list', itemText: '',
groupItemRole: 'presentation', wrapperRole: 'presentation'
},
fields: (this.fields.properties),
sortOrder: this.sortOrder,
showIcon: this.showIcon,
itemCreated: this.renderCheckbox.bind(this),
templateID: "" + this.element.id + LISTVIEW_TEMPLATE_PROPERTY,
groupTemplateID: "" + this.element.id + LISTVIEW_GROUPTEMPLATE_PROPERTY,
enableHtmlSanitizer: this.enableHtmlSanitizer
};
this.initialization();
};
ListView.prototype.initialization = function () {
this.curDSLevel = [];
this.animateOptions = {};
this.curViewDS = [];
this.currentLiElements = [];
this.isNestedList = false;
this.selectedData = [];
this.selectedId = this.enablePersistence ? this.selectedId : [];
this.LISTVIEW_TEMPLATE_ID = "" + this.element.id + LISTVIEW_TEMPLATE_PROPERTY;
this.LISTVIEW_GROUPTEMPLATE_ID = "" + this.element.id + LISTVIEW_GROUPTEMPLATE_PROPERTY;
this.LISTVIEW_HEADERTEMPLATE_ID = "" + this.element.id + LISTVIEW_HEADERTEMPLATE_PROPERTY;
this.aniObj = new Animation(this.animateOptions);
this.removeElement(this.curUL);
this.removeElement(this.ulElement);
this.removeElement(this.headerEle);
this.removeElement(this.contentContainer);
this.curUL = this.ulElement = this.liCollection = this.headerEle = this.contentContainer = undefined;
};
ListView.prototype.renderCheckbox = function (args) {
var _this = this;
if (args.item.classList.contains(classNames.hasChild)) {
this.isNestedList = true;
}
if (this.showCheckBox && args.item.classList.contains(classNames.listItem)) {
var fieldData_1;
var checkboxElement = createCheckBox(this.createElement, false, {
checked: false, enableRtl: this.enableRtl,
cssClass: classNames.listviewCheckbox
});
checkboxElement.setAttribute('role', 'checkbox');
var frameElement_1 = checkboxElement.querySelector('.' + classNames.checkboxIcon);
args.item.classList.add(classNames.itemCheckList);
args.item.firstElementChild.classList.add(classNames.checkbox);
if (this.template && this.element) {
addClass([this.element], classNames.listTemplate);
}
else if (this.template === null && this.element && this.element.classList && this.element.classList.contains('e-listview-template')) {
removeClass([this.element], classNames.listTemplate);
}
if (typeof this.dataSource[0] !== 'string' && typeof this.dataSource[0] !== 'number') {
fieldData_1 = getFieldValues(args.curData, this.listBaseOption.fields);
if (this.enablePersistence && !isNullOrUndefined(this.selectedId)) {
var index = this.selectedId.findIndex(function (e) { return e === fieldData_1[_this.listBaseOption.fields.id].toString(); });
if (index !== -1) {
this.checkInternally(args, checkboxElement);
}
}
else if (fieldData_1[this.listBaseOption.fields.isChecked]) {
this.checkInternally(args, checkboxElement);
}
}
else if (((typeof this.dataSource[0] === 'string' ||
typeof this.dataSource[0] === 'number') && this.selectedData.indexOf(args.text) !== -1)) {
this.checkInternally(args, checkboxElement);
}
checkboxElement.setAttribute('aria-checked', frameElement_1.classList.contains(classNames.checked) ? 'true' : 'false');
checkboxElement.setAttribute('aria-label', args.text);
if (this.checkBoxPosition === 'Left') {
checkboxElement.classList.add(classNames.checkboxLeft);
args.item.firstElementChild.classList.add(classNames.checkboxLeft);
args.item.firstElementChild.insertBefore(checkboxElement, args.item.firstElementChild.childNodes[0]);
}
else {
checkboxElement.classList.add(classNames.checkboxRight);
args.item.firstElementChild.classList.add(classNames.checkboxRight);
args.item.firstElementChild.appendChild(checkboxElement);
}
this.currentLiElements.push(args.item);
if (this.checkBoxPosition === 'Left') {
this.virtualCheckBox = args.item.firstElementChild.children[0];
}
else {
this.virtualCheckBox = args.item.firstElementChild.lastElementChild;
}
}
};
ListView.prototype.checkInternally = function (args, checkboxElement) {
args.item.classList.add(classNames.selected);
checkboxElement.querySelector('.' + classNames.checkboxIcon).classList.add(classNames.checked);
checkboxElement.setAttribute('aria-checked', 'true');
};
/**
* Checks the specific list item by passing the unchecked fields as an argument to this method.
*
* @param {Fields | HTMLElement | Element} item - It accepts Fields or HTML list element as an argument.
*/
ListView.prototype.checkItem = function (item) {
this.toggleCheckBase(item, true);
};
ListView.prototype.toggleCheckBase = function (item, checked) {
if (this.showCheckBox) {
var liElement = item;
if (item instanceof Object && item.constructor !== HTMLLIElement) {
liElement = this.getLiFromObjOrElement(item);
}
if (!isNullOrUndefined(liElement)) {
var checkboxIcon = liElement.querySelector('.' + classNames.checkboxIcon);
if (checked === true) {
liElement.classList.add(classNames.selected);
}
else {
liElement.classList.remove(classNames.selected);
}
if (checked === true) {
checkboxIcon.classList.add(classNames.checked);
}
else {
checkboxIcon.classList.remove(classNames.checked);
}
checkboxIcon.parentElement.setAttribute('aria-checked', checked ? 'true' : 'false');
}
this.setSelectedItemData(liElement);
this.updateSelectedId();
}
};
/**
* Uncheck the specific list item by passing the checked fields as an argument to this method.
*
* @param {Fields | HTMLElement | Element} item - It accepts Fields or HTML list element as an argument.
*/
ListView.prototype.uncheckItem = function (item) {
this.toggleCheckBase(item, false);
};
/**
* Checks all the unchecked items in the ListView.
*/
ListView.prototype.checkAllItems = function () {
this.toggleAllCheckBase(true);
};
/**
* Uncheck all the checked items in ListView.
*/
ListView.prototype.uncheckAllItems = function () {
this.toggleAllCheckBase(false);
};
ListView.prototype.toggleAllCheckBase = function (checked) {
if (this.showCheckBox) {
for (var i = 0; i < this.liCollection.length; i++) {
var checkIcon = this.liCollection[i].querySelector('.' + classNames.checkboxIcon);
if (checkIcon) {
if (checked) {
if (!checkIcon.classList.contains(classNames.checked)) {
this.checkItem(this.liCollection[i]);
}
}
else {
if (checkIcon.classList.contains(classNames.checked)) {
this.uncheckItem(this.liCollection[i]);
}
}
}
}
if (this.enableVirtualization) {
this.virtualizationModule.checkedItem(checked);
}
this.updateSelectedId();
}
};
ListView.prototype.setCheckbox = function () {
if (this.showCheckBox) {
var liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.listItem));
var args = {
item: undefined, curData: undefined, dataSource: undefined, fields: undefined,
options: undefined, text: ''
};
for (var i = 0; i < liCollection.length; i++) {
var element = liCollection[i];
args.item = element;
args.curData = this.getItemData(element);
if (element.querySelector('.' + classNames.checkboxWrapper)) {
this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));
}
this.renderCheckbox(args);
if (args.item.classList.contains(classNames.selected)) {
this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));
}
}
}
else {
var liCollection = Array.prototype.slice.call(this.element.querySelectorAll('.' + classNames.itemCheckList));
for (var i = 0; i < liCollection.length; i++) {
var element = liCollection[i];
element.classList.remove(classNames.selected);
element.firstElementChild.classList.remove(classNames.checkbox);
this.removeElement(element.querySelector('.' + classNames.checkboxWrapper));
}
if (this.selectedItems) {
this.selectedItems.item.classList.add(classNames.selected);
}
}
};
/**
* Refresh the height of the list item only on enabling the virtualization property.
*/
ListView.prototype.refreshItemHeight = function () {
if (this.virtualizationModule) {
this.virtualizationModule.refreshItemHeight();
}
};
ListView.prototype.handleCheckboxState = function (li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, isSetCheckboxLI, textAreaFocus) {
this.trigger('select', eventArgs, function (observedArgs) {
if (observedArgs.cancel) {
if (isSetCheckboxLI ? isCheckedBefore : !isCheckedBefore) {
checkIcon.classList.add(classNames.checked);
li.classList.add(classNames.selected);
}
else {
checkIcon.classList.remove(classNames.checked);
li.classList.remove(classNames.selected);
}
checkboxElement.setAttribute('aria-checked', isSetCheckboxLI ? (isCheckedBefore ? 'true' : 'false') : (isCheckedBefore ? 'false' : 'true'));
merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
if (isFocusedBefore) {
li.classList.remove(classNames.focused);
if (textAreaFocus) {
textAreaFocus.classList.remove('e-focused');
}
}
}
});
};
ListView.prototype.clickHandler = function (e) {
if (Array.isArray(this.dataSource) && this.dataSource.length === 0) {
return;
}
var target = e.target;
this.targetElement = target;
var classList = target.classList;
var closestElement;
if (classList.contains(classNames.backIcon) || classList.contains(classNames.headerText)) {
if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {
this.uncheckAllItems();
}
this.back();
}
else {
var li = closest(target.parentNode, '.' + classNames.listItem);
if (li === null) {
li = target;
}
this.removeFocus();
if (this.enable && this.showCheckBox && this.isValidLI(li)) {
if (e.target.classList.contains(classNames.checkboxIcon)) {
li.classList.add(classNames.focused);
if (isNullOrUndefined(li.querySelector('.' + classNames.checked))) {
var args = {
curData: undefined, dataSource: undefined, fields: undefined, options: undefined,
text: undefined, item: li
};
this.checkInternally(args, args.item.querySelector('.' + classNames.checkboxWrapper));
}
else {
this.uncheckItem(li);
li.classList.add(classNames.focused);
}
if (this.enableVirtualization) {
this.virtualizationModule.setCheckboxLI(li, e);
}
if (e) {
var eventArgs = this.selectEventData(li, e);
var checkIcon = li.querySelector('.' + classNames.checkboxIcon);
merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);
var isCheckedBefore = checkIcon.classList.contains(classNames.checked);
var isFocusedBefore = li.classList.contains(classNames.focused);
this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, false);
}
}
else if (li.classList.contains(classNames.hasChild)) {
this.removeHover();
this.removeSelect();
this.removeSelect(li);
this.setSelectLI(li, e);
li.classList.remove(classNames.selected);
}
else {
this.setCheckboxLI(li, e);
if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
target.classList.add('e-focused');
this.targetElement = target;
}
}
}
else {
this.setSelectLI(li, e);
if ((target.nodeName === 'INPUT') || (target.nodeName === 'TEXTAREA')) {
target.classList.add('e-focused');
this.targetElement = target;
}
}
closestElement = closest(e.target, 'li');
if (!isNullOrUndefined(closestElement)) {
if (closestElement.classList.contains('e-has-child') &&
!e.target.parentElement.classList.contains('e-listview-checkbox')) {
closestElement.classList.add(classNames.disable);
}
}
}
this.updateSelectedId();
};
ListView.prototype.removeElement = function (element) {
return element && element.parentNode && element.parentNode.removeChild(element);
};
ListView.prototype.hoverHandler = function (e) {
var curLi = closest(e.target.parentNode, '.' + classNames.listItem);
this.setHoverLI(curLi);
};
ListView.prototype.leaveHandler = function () {
this.removeHover();
};
ListView.prototype.homeKeyHandler = function (e, end) {
e.preventDefault();
if (Object.keys(this.dataSource).length && this.curUL) {
var li = this.curUL.querySelectorAll('.' + classNames.listItem);
var focusedElement = this.curUL.querySelector('.' + classNames.focused) ||
this.curUL.querySelector('.' + classNames.selected);
if (focusedElement) {
focusedElement.classList.remove(classNames.focused);
if (!this.showCheckBox) {
focusedElement.classList.remove(classNames.selected);
}
}
var index = !end ? 0 : li.length - 1;
if (li[index].classList.contains(classNames.hasChild) || this.showCheckBox) {
li[index].classList.add(classNames.focused);
}
else {
this.setSelectLI(li[index], e);
}
if (li[index]) {
this.element.setAttribute('aria-activedescendant', li[index].id.toString());
}
else {
this.element.removeAttribute('aria-activedescendant');
}
}
};
ListView.prototype.onArrowKeyDown = function (e, prev) {
var siblingLI;
var li;
var hasChild = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;
if (hasChild || this.showCheckBox) {
li = this.curUL.querySelector('.' + classNames.focused) || this.curUL.querySelector('.' + classNames.selected);
siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);
if (!isNullOrUndefined(siblingLI)) {
if (li) {
li.classList.remove(classNames.focused);
if (!this.showCheckBox) {
li.classList.remove(classNames.selected);
}
}
if (siblingLI.classList.contains(classNames.hasChild) || this.showCheckBox) {
siblingLI.classList.add(classNames.focused);
}
else {
this.setSelectLI(siblingLI, e);
}
}
}
else {
li = this.curUL.querySelector('.' + classNames.selected);
siblingLI = ListBase.getSiblingLI(this.curUL.querySelectorAll('.' + classNames.listItem), li, prev);
this.setSelectLI(siblingLI, e);
}
if (siblingLI) {
this.element.setAttribute('aria-activedescendant', siblingLI.id.toString());
}
else {
this.element.removeAttribute('aria-activedescendant');
}
return siblingLI;
};
ListView.prototype.arrowKeyHandler = function (e, prev) {
var _this = this;
e.preventDefault();
if (Object.keys(this.dataSource).length && this.curUL) {
var siblingLI = this.onArrowKeyDown(e, prev);
var elementTop = this.element.getBoundingClientRect().top;
var elementHeight = this.element.getBoundingClientRect().height;
var firstItemBounds = this.curUL.querySelector('.' + classNames.listItem).getBoundingClientRect();
var heightDiff = void 0;
var groupItemBounds = void 0;
if (this.fields.groupBy) {
groupItemBounds = this.curUL.querySelector('.' + classNames.groupListItem).getBoundingClientRect();
}
if (siblingLI) {
var siblingTop = siblingLI.getBoundingClientRect().top;
var siblingHeight = siblingLI.getBoundingClientRect().height;
if (!prev) {
var height = this.isWindow ? window.innerHeight : elementHeight;
heightDiff = this.isWindow ? (siblingTop + siblingHeight) :
((siblingTop - elementTop) + siblingHeight);
if (heightDiff > height) {
if (this.isWindow === true) {
window.scroll(0, pageYOffset + (heightDiff - height));
}
else {
this.element.scrollTop = this.element.scrollTop + (heightDiff - height);
}
}
}
else {
heightDiff = this.isWindow ? siblingTop : (siblingTop - elementTop);
if (heightDiff < 0) {
if (this.isWindow === true) {
window.scroll(0, pageYOffset + heightDiff);
}
else {
this.element.scrollTop = this.element.scrollTop + heightDiff;
}
}
}
}
else if (this.enableVirtualization && prev && this.virtualizationModule.uiFirstIndex) {
this.onUIScrolled = function () {
_this.onArrowKeyDown(e, prev);
_this.onUIScrolled = undefined;
};
heightDiff = this.virtualizationModule.listItemHeight;
if (this.isWindow === true) {
window.scroll(0, pageYOffset - heightDiff);
}
else {
this.element.scrollTop = this.element.scrollTop - heightDiff;
}
}
else if (prev) {
if (this.showHeader && this.headerEle) {
var topHeight = groupItemBounds ? groupItemBounds.top : firstItemBounds.top;
var headerBounds = this.headerEle.getBoundingClientRect();
heightDiff = headerBounds.top < 0 ? (headerBounds.height - topHeight) : 0;
if (this.isWindow === true) {
window.scroll(0, pageYOffset - heightDiff);
}
else {
this.element.scrollTop = 0;
}
}
else if (this.fields.groupBy) {
heightDiff = this.isWindow ? (groupItemBounds.top < 0 ? groupItemBounds.top : 0) :
(elementTop - firstItemBounds.top) + groupItemBounds.height;
if (this.isWindow === true) {
window.scroll(0, pageYOffset + heightDiff);
}
else {
this.element.scrollTop = this.element.scrollTop - heightDiff;
}
}
}
}
};
ListView.prototype.enterKeyHandler = function (e) {
if (Object.keys(this.dataSource).length && this.curUL) {
var hasChild = !isNullOrUndefined(this.curUL.querySelector('.' + classNames.hasChild)) ? true : false;
var li = this.curUL.querySelector('.' + classNames.focused);
if (hasChild && li) {
li.classList.remove(classNames.focused);
if (this.showCheckBox) {
this.removeSelect();
this.removeSelect(li);
this.removeHover();
}
this.setSelectLI(li, e);
}
}
};
ListView.prototype.spaceKeyHandler = function (e) {
if (this.enable && this.showCheckBox && Object.keys(this.dataSource).length && this.curUL) {
e.preventDefault();
var li = this.curUL.querySelector('.' + classNames.focused);
var checkboxElement = void 0;
var checkIcon = void 0;
if (!isNullOrUndefined(li) && isNullOrUndefined(li.querySelector('.' + classNames.checked))) {
var args = {
curData: undefined, dataSource: undefined, fields: undefined, options: undefined,
text: undefined, item: li
};
checkboxElement = args.item.querySelector('.' + classNames.checkboxWrapper);
this.checkInternally(args, checkboxElement);
checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);
}
else {
this.uncheckItem(li);
}
var eventArgs = this.selectEventData(li, e);
merge(eventArgs, { isChecked: checkIcon ? checkIcon.classList.contains(classNames.checked) : false });
if (!isNullOrUndefined(li)) {
var cbElement = li.querySelector('.' + classNames.checkboxWrapper);
var checkboxIcon = li.querySelector('.' + classNames.checkboxIcon);
var isCheckedBefore = checkboxIcon.classList.contains(classNames.checked);
var isFocusedBefore = li.classList.contains(classNames.focused);
this.handleCheckboxState(li, checkboxIcon, cbElement, isCheckedBefore, isFocusedBefore, eventArgs, false);
}
this.updateSelectedId();
}
};
ListView.prototype.keyActionHandler = function (e) {
switch (e.keyCode) {
case 36:
this.homeKeyHandler(e);
break;
case 35:
this.homeKeyHandler(e, true);
break;
case 40:
this.arrowKeyHandler(e);
break;
case 38:
this.arrowKeyHandler(e, true);
break;
case 13:
this.enterKeyHandler(e);
break;
case 8:
if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {
this.uncheckAllItems();
}
this.back();
break;
case 32:
if (isNullOrUndefined(this.targetElement) || !(this.targetElement.classList.contains('e-focused'))) {
this.spaceKeyHandler(e);
}
break;
}
};
ListView.prototype.swipeActionHandler = function (e) {
if (e.swipeDirection === 'Right' && e.velocity > swipeVelocity && e.originalEvent.type === 'touchend') {
if (this.showCheckBox && this.curDSLevel[this.curDSLevel.length - 1]) {
this.uncheckAllItems();
}
this.back();
}
};
ListView.prototype.focusout = function () {
if (Object.keys(this.dataSource).length && this.curUL) {
var focusedElement = this.curUL.querySelector('.' + classNames.focused);
if (focusedElement) {
focusedElement.classList.remove(classNames.focused);
if (!this.showCheckBox && !isNullOrUndefined(this.selectedLI)) {
this.selectedLI.classList.add(classNames.selected);
}
}
}
};
ListView.prototype.wireEvents = function () {
EventHandler.add(this.element, 'keydown', this.keyActionHandler, this);
EventHandler.add(this.element, 'click', this.clickHandler, this);
EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);
EventHandler.add(this.element, 'mouseout', this.leaveHandler, this);
EventHandler.add(this.element, 'focusout', this.focusout, this);
this.touchModule = new Touch(this.element, { swipe: this.swipeActionHandler.bind(this) });
if (!isNullOrUndefined(this.scroll)) {
EventHandler.add(this.element, 'scroll', this.onListScroll, this);
}
};
ListView.prototype.unWireEvents = function () {
EventHandler.remove(this.element, 'keydown', this.keyActionHandler);
EventHandler.remove(this.element, 'click', this.clickHandler);
EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
EventHandler.remove(this.element, 'mouseover', this.hoverHandler);
EventHandler.remove(this.element, 'mouseout', this.leaveHandler);
EventHandler.remove(this.element, 'focusout', this.focusout);
if (!isNullOrUndefined(this.scroll)) {
EventHandler.remove(this.element, 'scroll', this.onListScroll);
}
if (this.touchModule) {
this.touchModule.destroy();
}
this.touchModule = null;
};
ListView.prototype.removeFocus = function () {
var focusedLI = this.element.querySelectorAll('.' + classNames.focused);
for (var _i = 0, focusedLI_1 = focusedLI; _i < focusedLI_1.length; _i++) {
var ele = focusedLI_1[_i];
ele.classList.remove(classNames.focused);
}
};
ListView.prototype.removeHover = function () {
var hoverLI = this.element.querySelector('.' + classNames.hover);
if (hoverLI) {
hoverLI.classList.remove(classNames.hover);
}
};
ListView.prototype.removeSelect = function (li) {
if (isNullOrUndefined(li)) {
var selectedLI = this.element.querySelectorAll('.' + classNames.selected);
for (var _i = 0, selectedLI_1 = selectedLI; _i < selectedLI_1.length; _i++) {
var ele = selectedLI_1[_i];
if (this.showCheckBox && ele.querySelector('.' + classNames.checked)) {
continue;
}
else {
ele.classList.remove(classNames.selected);
}
}
}
else {
li.classList.remove(classNames.selected);
}
};
ListView.prototype.isValidLI = function (li) {
return (li && li.classList.contains(classNames.listItem)
&& !li.classList.contains(classNames.groupListItem)
&& !li.classList.contains(classNames.disable));
};
ListView.prototype.setCheckboxLI = function (li, e) {
if (this.isValidLI(li) && this.enable && this.showCheckBox) {
if (this.curUL.querySelector('.' + classNames.focused)) {
this.curUL.querySelector('.' + classNames.focused).classList.remove(classNames.focused);
}
var textAreaFocus = li.querySelector('textarea') || li.querySelector('input');
li.classList.add(classNames.focused);
if (!isNullOrUndefined(e)) {
if (e.target === textAreaFocus) {
textAreaFocus.classList.add('e-focused');
}
}
var checkboxElement = li.querySelector('.' + classNames.checkboxWrapper);
var checkIcon = checkboxElement.querySelector('.' + classNames.checkboxIcon + '.' + classNames.icon);
this.removeHover();
var isCheckedBefore = checkIcon.classList.contains(classNames.checked);
var isFocusedBefore = li.classList.contains(classNames.focused);
if (!isCheckedBefore) {
checkIcon.classList.add(classNames.checked);
li.classList.add(classNames.selected);
}
else {
checkIcon.classList.remove(classNames.checked);
li.classList.remove(classNames.selected);
}
checkboxElement.setAttribute('aria-checked', checkIcon.classList.contains(classNames.checked) ?
'true' : 'false');
var eventArgs = this.selectEventData(li, e);
merge(eventArgs, { isChecked: checkIcon.classList.contains(classNames.checked) });
if (this.enableVirtualization) {
this.virtualizationModule.setCheckboxLI(li, e);
}
this.handleCheckboxState(li, checkIcon, checkboxElement, isCheckedBefore, isFocusedBefore, eventArgs, true, textAreaFocus);
this.setSelectedItemData(li);
this.renderSubList(li);
}
};
ListView.prototype.selectEventData = function (li, e) {
var data = this.getItemData(li);
var fieldData = getFieldValues(data, this.listBaseOption.fields);
var selectedItem;
if (!isNullOrUndefined(data)
&& typeof this.dataSource[0] === 'string' || typeof this.dataSource[0] === 'number') {
selectedItem = { item: li, text: li && li.innerText.trim(), data: this.dataSource };
}
else {
selectedItem =
{
item: li, text: fieldData && fieldData[this.listBaseOption.fields.text],
data: data
};
}
var eventArgs = {};
merge(eventArgs, selectedItem);
if (e) {
merge(eventArgs, {
isInteracted: true,
event: e,
cancel: false,
index: this.curUL && Array.prototype.indexOf.call(this.curUL.children, li)
});
}
return eventArgs;
};
ListView.prototype.setSelectedItemData = function (li) {
var data = this.getItemData(li);
var fieldData = getFieldValues(data, this.listBaseOption.fields);