@syncfusion/ej2-filemanager 30.1.37 → 30.1.39

package/dist/ts/file-manager/layout/large-icons-view.ts

@@ -1,1684 +0,0 @@
-import { ListBase, ListBaseOptions, ItemCreatedArgs } from '@syncfusion/ej2-lists';
-import { createElement, select, selectAll, EventHandler, KeyboardEvents, closest, DragEventArgs, Draggable, Fetch } from '@syncfusion/ej2-base';
-import { isNullOrUndefined as isNOU, addClass, removeClass, Touch, TapEventArgs, isVisible } from '@syncfusion/ej2-base';
-import { TouchEventArgs, MouseEventArgs, KeyboardEventArgs, getValue, setValue, remove } from '@syncfusion/ej2-base';
-import { IFileManager, FileOpenEventArgs, FileLoadEventArgs } from '../base/interface';
-import { FileSelectEventArgs, NotifyArgs, FileSelectionEventArgs } from '../base/interface';
-import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data';
-import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
-import * as events from '../base/constant';
-import { ReadArgs, MouseArgs, BeforeImageLoadEventArgs } from '../../index';
-import * as CLS from '../base/classes';
-import { createCheckBox } from '@syncfusion/ej2-buttons';
-import { read, GetDetails, Delete, triggerFetchFailure, triggerFetchSuccess } from '../common/operations';
-import { doRename, getAccessClass, getPathObject, getFullPath, getDirectoryPath, rename, doDownload, getItemName } from '../common/index';
-import { removeBlur, cutFiles, copyFiles, addBlur, openSearchFolder, removeActive, pasteHandler } from '../common/index';
-import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getModule } from '../common/index';
-import { updateRenamingData, doDeleteFiles, doDownloadFiles } from '../common/index';
-import { openAction, fileType, refresh, getImageUrl, getSortedData, createDeniedDialog, updateLayout, getLocaleText } from '../common/utility';
-import { createEmptyElement, hasReadAccess, hasEditAccess } from '../common/utility';
-import { createDialog, createImageDialog } from '../pop-up/dialog';
-
-/**
- * LargeIconsView module
- */
-export class LargeIconsView {
-
-    /* Internal variables */
-    private parent: IFileManager;
-    public element: HTMLElement;
-    public listObj: ListBaseOptions;
-    private keyboardModule: KeyboardEvents;
-    private keyboardDownModule: KeyboardEvents;
-    private keyConfigs: { [key: string]: string };
-    private isInteraction: boolean = true;
-    public itemList: HTMLElement[];
-    // specifies the current view items in large icon
-    public items: Object[];
-    public allItems: Object[];
-    private clickObj: Touch;
-    private perRow: number;
-    private startItem: Element;
-    private multiSelect: boolean;
-    public listElements: HTMLElement;
-    public uploadOperation: boolean = false;
-    private count: number = 0;
-    private isRendered: boolean = true;
-    private tapCount: number = 0;
-    private isSelectAllCalled: boolean = false;
-    private tapEvent: TapEventArgs;
-    private isPasteOperation: boolean = false;
-    private dragObj: Draggable;
-    private isInteracted: boolean = true;
-    private imageEventArgsMap: Map<string, BeforeImageLoadEventArgs> = new Map<string, BeforeImageLoadEventArgs>();
-    private imageUrlCache: Map<string, string> = new Map<string, string>();
-
-    /**
-     * Constructor for the LargeIcons module.
-     *
-     * @param {IFileManager} parent - specifies the parent element.
-     * @hidden
-     */
-    constructor(parent?: IFileManager) {
-        this.parent = parent;
-        this.element = <HTMLElement>select('#' + this.parent.element.id + CLS.LARGEICON_ID, this.parent.element);
-        addClass([this.element], CLS.LARGE_ICONS);
-        this.addEventListener();
-        this.keyConfigs = {
-            end: 'end',
-            home: 'home',
-            tab: 'tab',
-            moveDown: 'downarrow',
-            moveLeft: 'leftarrow',
-            moveRight: 'rightarrow',
-            moveUp: 'uparrow',
-            ctrlEnd: 'ctrl+end',
-            ctrlHome: 'ctrl+home',
-            ctrlDown: 'ctrl+downarrow',
-            ctrlLeft: 'ctrl+leftarrow',
-            ctrlRight: 'ctrl+rightarrow',
-            ctrlUp: 'ctrl+uparrow',
-            shiftEnd: 'shift+end',
-            shiftHome: 'shift+home',
-            shiftDown: 'shift+downarrow',
-            shiftLeft: 'shift+leftarrow',
-            shiftRight: 'shift+rightarrow',
-            shiftUp: 'shift+uparrow',
-            csEnd: 'ctrl+shift+end',
-            csHome: 'ctrl+shift+home',
-            csDown: 'ctrl+shift+downarrow',
-            csLeft: 'ctrl+shift+leftarrow',
-            csRight: 'ctrl+shift+rightarrow',
-            csUp: 'ctrl+shift+uparrow',
-            space: 'space',
-            ctrlSpace: 'ctrl+space',
-            shiftSpace: 'shift+space',
-            csSpace: 'ctrl+shift+space',
-            ctrlA: 'ctrl+a',
-            enter: 'enter',
-            altEnter: 'alt+enter',
-            esc: 'escape',
-            del: 'delete',
-            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
-            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
-            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
-            f2: 'f2',
-            shiftdel: 'shift+delete',
-            back: 'backspace',
-            ctrlD: 'ctrl+d'
-        };
-    }
-
-    private render(args: ReadArgs): void {
-        this.parent.visitedItem = null;
-        this.startItem = null;
-        showSpinner(this.parent.element);
-        if (this.parent.view === 'LargeIcons') {
-            this.resetMultiSelect();
-            this.element.setAttribute('tabindex', '0');
-            if (this.listObj) {
-                this.unWireEvents();
-                this.removeEventListener();
-            }
-            this.parent.notify(events.hideLayout, {});
-            const iconsView: Element = select('#' + this.parent.element.id + CLS.LARGEICON_ID, this.parent.element);
-            const ul: HTMLUListElement = select('ul', iconsView) as HTMLUListElement;
-            if (ul) {
-                remove(ul);
-            }
-            this.listObj = {
-                ariaAttributes: {
-                    itemRole: 'option', listRole: 'listbox', itemText: '',
-                    groupItemRole: 'group', wrapperRole: ''
-                },
-                showIcon: true,
-                fields: { text: 'name', iconCss: '_fm_icon', imageUrl: '_fm_imageUrl', imageAttributes: '_fm_imageAttr', htmlAttributes: '_fm_htmlAttr' },
-                sortOrder: this.parent.sortOrder,
-                itemCreated: this.onItemCreated.bind(this),
-                enableHtmlSanitizer: this.parent.enableHtmlSanitizer
-            };
-            this.items = [];
-            this.items = this.renderList(args);
-            if (this.parent.sortComparer && this.parent.sortBy !== 'None'){
-                this.items = this.allItems = DataUtil.sort(this.items, this.parent.sortBy, this.comparer.bind(this) as Function);
-            } else { this.items = this.allItems = getSortedData(this.parent, this.items); }
-            iconsView.classList.remove(CLS.DISPLAY_NONE);
-            if (this.parent.enableVirtualization && this.allItems.length > 0 && !isNOU(this.parent.virtualizationModule)) {
-                this.parent.virtualizationModule.setUIVirtualization();
-            }
-            this.listElements = ListBase.createListFromJson(createElement, <{ [key: string]: Object; }[]>this.items, this.listObj);
-            this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
-            this.element.appendChild(this.listElements);
-            if (this.imageEventArgsMap.size > 0) {
-                this.loadImages();
-            }
-            this.listElements.setAttribute('aria-label', 'listbox');
-            this.preventImgDrag();
-            this.createDragObj();
-            if (this.itemList.length === 0) {
-                const emptyList: Element = this.element.querySelector('.' + CLS.LIST_PARENT);
-                this.element.removeChild(emptyList);
-                createEmptyElement(this.parent, this.element, args);
-            } else if (this.itemList.length !== 0 && this.element.querySelector('.' + CLS.EMPTY)) {
-                this.element.removeChild(this.element.querySelector('.' + CLS.EMPTY));
-            }
-            if (this.isPasteOperation === true) {
-                this.selectItems(this.parent.pasteNodes);
-                this.isPasteOperation = false;
-            }
-            /* istanbul ignore next */
-            if (this.uploadOperation === true) {
-                this.selectItems(this.parent.uploadItem);
-                this.parent.setProperties({ selectedItems: [] }, true);
-                this.count++;
-                if (this.count === this.parent.uploadItem.length) {
-                    this.uploadOperation = false;
-                    this.parent.uploadItem = [];
-                }
-            }
-            const activeEle: NodeListOf<Element> = this.element.querySelectorAll('.' + CLS.ACTIVE);
-            if (activeEle.length !== 0) {
-                this.parent.activeModule = 'largeiconsview';
-            }
-            for (let i: number = 0; i < activeEle.length; i++) {
-                activeEle[i as number].setAttribute('aria-selected', 'true');
-            }
-            this.element.style.maxHeight = '100%';
-            this.getItemCount();
-            this.addEventListener();
-            this.wireEvents();
-            if (this.parent.enableVirtualization && this.allItems.length > 0 && !isNOU(this.parent.virtualizationModule)) {
-                this.parent.virtualizationModule.setUlElementHeight();
-                this.parent.virtualizationModule.wireScrollEvent(false);
-            }
-            this.isRendered = true;
-            hideSpinner(this.parent.element);
-            if (this.parent.selectedItems.length) { this.checkItem(); }
-        }
-    }
-    private loadImages(): void {
-        const imageEle: NodeListOf<Element> = this.parent.element.querySelectorAll('.e-list-img');
-        imageEle.forEach((imgElement: HTMLElement) => {
-            const imageKey: string = imgElement.getAttribute('data-image-key');
-            if (!imageKey) {return; }
-            if (this.imageUrlCache.has(imageKey)) {
-                imgElement.setAttribute('src', this.imageUrlCache.get(imageKey));
-                imgElement.classList.remove('image-blur');
-                return;
-            }
-            const imageDetails: BeforeImageLoadEventArgs = this.imageEventArgsMap.get(imageKey);
-            if (!imageDetails) {return; }
-            const fetch: Fetch = new Fetch({
-                url: getValue('url', imageDetails.ajaxSettings),
-                type: getValue('type', imageDetails.ajaxSettings),
-                contentType: getValue('contentType', imageDetails.ajaxSettings),
-                responseType: getValue('responseType', imageDetails.ajaxSettings),
-                beforeSend: getValue('beforeSend', imageDetails.ajaxSettings),
-                onSuccess: (blob: Blob) => {
-                    const blobUrl: string = URL.createObjectURL(blob);
-                    this.imageUrlCache.set(imageKey, blobUrl);
-                    imgElement.setAttribute('src', blobUrl);
-                    imgElement.classList.remove('image-blur');
-                    triggerFetchSuccess(this.parent, imageDetails.ajaxSettings);
-                },
-                onFailure: (response: Response) => {
-                    const result: ReadArgs = {
-                        files: null,
-                        error: {
-                            code: response.status ? response.status.toString() : '404',
-                            message: getLocaleText(this.parent, 'Network-Error') + ' ' + getValue('url', imageDetails.ajaxSettings),
-                            fileExists: null
-                        }
-                    };
-                    triggerFetchFailure(this.parent, imageDetails.ajaxSettings, result);
-                }
-            });
-            fetch.send(getValue('data', imageDetails.ajaxSettings));
-        });
-    }
-    private comparer (x: number | string, y: number | string): number | string {
-        if (this.parent.sortOrder === 'Descending') {
-            const z: number | string = x;
-            x = y;
-            y = z;
-        }
-        return (this.parent.sortComparer as Function)(x, y);
-    }
-
-    private preventImgDrag(): void {
-        let i: number = 0;
-        while (i < this.itemList.length) {
-            if (this.itemList[i as number].querySelector('img')) {
-                /* istanbul ignore next */
-                this.itemList[i as number].ondragstart = () => { return false; };
-            }
-            i++;
-        }
-    }
-
-    private createDragObj(): void {
-        if (this.listObj) {
-            if (this.parent.allowDragAndDrop) {
-                if (this.dragObj) { this.dragObj.destroy(); }
-                this.dragObj = new Draggable(this.listElements, {
-                    enableTailMode: true,
-                    distance: 5,
-                    enableAutoScroll: false,
-                    dragTarget: '.' + CLS.LARGE_ICON,
-                    helper: this.dragHelper.bind(this),
-                    cursorAt: this.parent.dragCursorPosition,
-                    dragArea: this.parent.element,
-                    dragStop: dragStopHandler.bind(this, this.parent),
-                    drag: draggingHandler.bind(this, this.parent),
-                    clone: true,
-                    dragStart: (args: DragEventArgs) => {
-                        dragStartHandler(this.parent, args, this.dragObj);
-                    }
-                });
-            } else if (this.dragObj && !this.parent.allowDragAndDrop) {
-                this.dragObj.destroy();
-            }
-        }
-    }
-
-    public dragHelper(args: { element: HTMLElement, sender: MouseEvent & TouchEvent }): HTMLElement {
-        const dragTarget: Element = <Element>args.sender.target;
-        const dragLi: Element = closest(dragTarget, '.e-list-item');
-        if (!dragLi) { return null; }
-        if (dragLi && !dragLi.classList.contains('e-active')) {
-            this.setFocus(dragLi);
-        }
-        const activeEle: NodeListOf<Element> = this.element.querySelectorAll('.' + CLS.ACTIVE);
-        this.parent.activeElements = [];
-        this.parent.dragData = [];
-        for (let i: number = 0; i < activeEle.length; i++) {
-            this.parent.dragData.push(<{ [key: string]: Object; }>this.getItemObject(activeEle[parseInt(i.toString(), 10)]));
-            this.parent.activeElements.push(activeEle[i as number]);
-        }
-        getModule(this.parent, dragLi);
-        this.parent.dragPath = this.parent.path;
-        createVirtualDragElement(this.parent);
-        return this.parent.virtualDragElement;
-    }
-
-    private onDropInit(args: DragEventArgs): void {
-        if (this.parent.targetModule === this.getModuleName()) {
-            const dropLi: Element = closest(args.target, '.e-list-item');
-            const cwdData: Object = getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent);
-            if (dropLi) {
-                const info: { [key: string]: Object; } = <{ [key: string]: Object; }>this.getItemObject(dropLi);
-                this.parent.dropPath = info.isFile ? this.parent.path : getFullPath(this.parent, info, this.parent.path);
-                this.parent.dropData = info.isFile ? cwdData : info;
-            } else {
-                this.parent.dropPath = this.parent.path;
-                this.parent.dropData = cwdData;
-            }
-        }
-    }
-
-    /**
-     * For internal use only - Get the module name.
-     *
-     * @returns {string} - returns the module name.
-     * @private
-     */
-    private getModuleName(): string {
-        return 'largeiconsview';
-    }
-
-    private onItemCreated(args: ItemCreatedArgs): void {
-        args.item.removeAttribute('aria-level');
-        if (!this.parent.showFileExtension && getValue('isFile', args.curData)) {
-            const textEle: Element = args.item.querySelector('.' + CLS.LIST_TEXT);
-            const txt: string = getValue('name', args.curData);
-            const type: string = getValue('type', args.curData);
-            if (txt.indexOf(type) !== -1) {
-                textEle.innerHTML = txt.substr(0, txt.length - type.length);
-            }
-        }
-        this.renderCheckbox(args);
-        const eventArgs: FileLoadEventArgs = {
-            element: args.item,
-            fileDetails: args.curData,
-            module: 'LargeIconsView'
-        };
-        this.parent.trigger('fileLoad', eventArgs);
-    }
-
-    private renderCheckbox(args: ItemCreatedArgs): void {
-        if (!this.parent.showItemCheckBoxes) { return; }
-        const checkElement: Element = createCheckBox(createElement, false, {
-            checked: false,
-            cssClass: 'e-small'
-        });
-        checkElement.setAttribute('role', 'checkbox');
-        checkElement.setAttribute('aria-checked', 'false');
-        checkElement.setAttribute('aria-label', 'checkbox');
-        args.item.firstElementChild.insertBefore(checkElement, args.item.firstElementChild.childNodes[0]);
-    }
-
-    private onLayoutChange(args: ReadArgs): void {
-        if (this.parent.view === 'LargeIcons') {
-            this.destroy();
-            if (this.parent.enableVirtualization) { this.parent.setProperties({ selectedItems: [] }, true); }
-            this.render(args);
-            /* istanbul ignore next */
-            if (getValue('name', args) === 'layout-change' && this.parent.fileAction === 'move' &&
-                this.parent.isCut && this.parent.selectedNodes && this.parent.selectedNodes.length !== 0) {
-                const indexes: number[] = this.getIndexes(this.parent.selectedNodes);
-                let length: number = 0;
-                while (length < indexes.length) {
-                    addBlur(this.itemList[indexes[length as number]]);
-                    length++;
-                }
-            }
-            const activeEle: NodeListOf<Element> = this.element.querySelectorAll('.' + CLS.ACTIVE);
-            if (activeEle.length !== 0) {
-                this.element.focus();
-            }
-            this.checkItem();
-            this.parent.isLayoutChange = false;
-        } else {
-            this.element.setAttribute('tabindex', '-1');
-        }
-    }
-
-    private checkItem(): void {
-        const checkEle: NodeListOf<Element> = this.element.querySelectorAll('.' + CLS.ACTIVE);
-        if (checkEle) {
-            let checkLength: number = 0;
-            while (checkLength < checkEle.length) {
-                this.checkState(checkEle[checkLength as number], true);
-                checkLength++;
-            }
-        }
-    }
-
-    private renderList(args?: ReadArgs): Object[] {
-        let i: number = 0;
-        const items: Object[] = JSON.parse(JSON.stringify(args.files));
-        while (i < items.length) {
-            const icon: string = fileType(items[i as number]);
-            const name: string = getValue('name', items[i as number]);
-            const selected: string = getItemName(this.parent, items[i as number]);
-            let className: string = ((this.parent.selectedItems &&
-                this.parent.selectedItems.indexOf(selected) !== -1)) ?
-                CLS.LARGE_ICON + ' e-active' : CLS.LARGE_ICON;
-            if (!hasEditAccess(items[i as number])) {
-                className += ' ' + getAccessClass(items[i as number]);
-            }
-            if (icon === CLS.ICON_IMAGE && this.parent.showThumbnail && hasReadAccess(items[i as number])) {
-                const imageData: BeforeImageLoadEventArgs = getImageUrl(this.parent, items[i as number]);
-                if (imageData.useImageAsUrl) {
-                    setValue('_fm_imageUrl', imageData.imageUrl, items[i as number]);
-                    setValue('_fm_imageAttr', { alt: name }, items[i as number]);
-                }
-                else {
-                    const uniqueKey: string = `img_${name}_${i}`;
-                    this.imageEventArgsMap.set(uniqueKey, imageData);
-                    setValue('_fm_imageUrl', '', items[i as number]);
-                    setValue('_fm_imageAttr', {alt: name, class: 'e-list-img image-blur', 'data-image-key': uniqueKey }, items[i as number]);
-
-                }
-            } else {
-                setValue('_fm_icon', icon, items[i as number]);
-            }
-            setValue('_fm_htmlAttr', { class: className, title: name }, items[i as number]);
-            i++;
-        }
-        return items;
-    }
-
-    private onFinalizeEnd(args: ReadArgs): void {
-        this.render(args);
-    }
-
-    private onCreateEnd(args: ReadArgs): void {
-        if (this.parent.view !== 'LargeIcons') { return; }
-        this.onLayoutChange(args);
-        this.clearSelect();
-        this.selectItems([getValue(this.parent.hasId ? 'id' : 'name', this.parent.createdItem)]);
-        this.parent.createdItem = null;
-        this.parent.largeiconsviewModule.element.focus();
-        this.parent.activeModule = 'largeiconsview';
-    }
-
-    private onSelectedData(): void {
-        if (this.parent.activeModule === 'largeiconsview') {
-            this.updateSelectedData();
-        }
-    }
-
-    private onDeleteInit(): void {
-        if (this.parent.activeModule === 'largeiconsview') {
-            Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete');
-        }
-    }
-
-    /* istanbul ignore next */
-    private onDeleteEnd(args: ReadArgs): void {
-        if (this.parent.view !== 'LargeIcons') { return; }
-        this.onLayoutChange(args);
-        this.parent.setProperties({ selectedItems: [] }, true);
-        this.clearSelect();
-    }
-
-    private onRefreshEnd(args: ReadArgs): void {
-        if (this.parent.view !== 'LargeIcons') { return; }
-        this.onLayoutChange(args);
-    }
-
-    private onRenameInit(): void {
-        if (this.parent.activeModule === 'largeiconsview' && this.parent.selectedItems.length === 1) {
-            this.updateRenameData();
-        }
-    }
-
-    private onPathChanged(args: ReadArgs): void {
-        this.parent.isCut = false;
-        /* istanbul ignore next */
-        if (this.parent.breadcrumbbarModule.searchObj.element.value === '') {
-            this.parent.searchedItems = [];
-        }
-        if (this.parent.view === 'LargeIcons') {
-            removeBlur(this.parent);
-            this.parent.setProperties({ selectedItems: [] }, true);
-            this.onLayoutChange(args);
-            if (this.parent.renamedItem && this.parent.activeModule === 'largeiconsview') {
-                this.clearSelect();
-                this.addSelection(this.parent.renamedItem);
-            }
-        }
-    }
-
-    private onOpenInit(args: NotifyArgs): void {
-        if (this.parent.activeModule === 'largeiconsview') {
-            this.doOpenAction(args.target);
-        }
-    }
-
-    private onHideLayout(): void {
-        if (this.parent.view !== 'LargeIcons' && this.element) {
-            this.element.classList.add(CLS.DISPLAY_NONE);
-        }
-    }
-
-    private onSelectAllInit(): void {
-        if (this.parent.view === 'LargeIcons') {
-            this.startItem = this.getFirstItem();
-            const lastItem: Element = this.getLastItem();
-            const eveArgs: KeyboardEventArgs = { ctrlKey: true, shiftKey: true } as KeyboardEventArgs;
-            this.doSelection(lastItem, eveArgs);
-            this.isInteraction = true;
-            this.isInteracted = true;
-        }
-    }
-
-    private onClearAllInit(): void {
-        if (this.parent.view === 'LargeIcons') {
-            this.clearSelection();
-            this.isInteraction = true;
-            this.isInteracted = true;
-        }
-    }
-
-    private onBeforeRequest(): void {
-        this.isRendered = false;
-    }
-
-    private onAfterRequest(): void {
-        this.isRendered = true;
-    }
-
-    /* istanbul ignore next */
-    private onSearch(args: ReadArgs): void {
-        if (this.parent.view === 'LargeIcons') {
-            this.parent.setProperties({ selectedItems: [] }, true);
-            this.parent.notify(events.selectionChanged, {});
-            this.parent.searchedItems = args.files;
-            this.onLayoutChange(args);
-        }
-    }
-
-    private onLayoutRefresh(): void {
-        if (this.parent.view !== 'LargeIcons') { return; }
-    }
-
-    private onUpdateSelectionData(): void {
-        if (this.parent.view !== 'LargeIcons') { return; }
-        this.updateSelectedData();
-    }
-
-    private onPathColumn(): void {
-        if (this.parent.view === 'LargeIcons' && !isNOU(this.listObj) &&
-            this.parent.breadcrumbbarModule.searchObj.element.value === '' && !this.parent.isFiltered
-            && this.parent.sortBy === 'filterPath') {
-            this.parent.sortBy = 'name';
-            this.parent.notify(events.sortByChange, {});
-
-        }
-    }
-
-    private removeEventListener(): void {
-        if (this.parent.isDestroyed) { return; }
-        this.parent.off(events.pathColumn, this.onPathColumn);
-        this.parent.off(events.finalizeEnd, this.onFinalizeEnd);
-        this.parent.off(events.createEnd, this.onCreateEnd);
-        this.parent.off(events.selectedData, this.onSelectedData);
-        this.parent.off(events.deleteInit, this.onDeleteInit);
-        this.parent.off(events.deleteEnd, this.onDeleteEnd);
-        this.parent.off(events.refreshEnd, this.onRefreshEnd);
-        this.parent.off(events.pathChanged, this.onPathChanged);
-        this.parent.off(events.layoutChange, this.onLayoutChange);
-        this.parent.off(events.search, this.onSearch);
-        this.parent.off(events.openInit, this.onOpenInit);
-        this.parent.off(events.openEnd, this.onPathChanged);
-        this.parent.off(events.modelChanged, this.onPropertyChanged);
-        this.parent.off(events.methodCall, this.onMethodCall);
-        this.parent.off(events.actionFailure, this.onActionFailure);
-        this.parent.off(events.renameInit, this.onRenameInit);
-        this.parent.off(events.renameEnd, this.onPathChanged);
-        this.parent.off(events.hideLayout, this.onHideLayout);
-        this.parent.off(events.selectAllInit, this.onSelectAllInit);
-        this.parent.off(events.clearAllInit, this.onClearAllInit);
-        this.parent.off(events.menuItemData, this.onMenuItemData);
-        this.parent.off(events.beforeRequest, this.onBeforeRequest);
-        this.parent.off(events.afterRequest, this.onAfterRequest);
-        this.parent.off(events.splitterResize, this.splitterResizeHandler);
-        this.parent.off(events.resizeEnd, this.resizeHandler);
-        this.parent.off(events.pasteInit, this.onpasteInit);
-        this.parent.off(events.pasteEnd, this.onpasteEnd);
-        this.parent.off(events.cutCopyInit, this.oncutCopyInit);
-        this.parent.off(events.dropInit, this.onDropInit);
-        this.parent.off(events.detailsInit, this.onDetailsInit);
-        this.parent.off(events.layoutRefresh, this.onLayoutRefresh);
-        this.parent.off(events.dropPath, this.onDropPath);
-        this.parent.off(events.updateSelectionData, this.onUpdateSelectionData);
-        this.parent.off(events.filterEnd, this.onPathChanged);
-    }
-
-    private addEventListener(): void {
-        this.parent.on(events.pathColumn, this.onPathColumn, this);
-        this.parent.on(events.finalizeEnd, this.onFinalizeEnd, this);
-        this.parent.on(events.createEnd, this.onCreateEnd, this);
-        this.parent.on(events.refreshEnd, this.onRefreshEnd, this);
-        this.parent.on(events.selectedData, this.onSelectedData, this);
-        this.parent.on(events.pathChanged, this.onPathChanged, this);
-        this.parent.on(events.deleteInit, this.onDeleteInit, this);
-        this.parent.on(events.pasteInit, this.onpasteInit, this);
-        this.parent.on(events.deleteEnd, this.onDeleteEnd, this);
-        this.parent.on(events.layoutChange, this.onLayoutChange, this);
-        this.parent.on(events.search, this.onSearch, this);
-        this.parent.on(events.openInit, this.onOpenInit, this);
-        this.parent.on(events.renameInit, this.onRenameInit, this);
-        this.parent.on(events.renameEnd, this.onPathChanged, this);
-        this.parent.on(events.openEnd, this.onPathChanged, this);
-        this.parent.on(events.modelChanged, this.onPropertyChanged, this);
-        this.parent.on(events.methodCall, this.onMethodCall, this);
-        this.parent.on(events.actionFailure, this.onActionFailure, this);
-        this.parent.on(events.hideLayout, this.onHideLayout, this);
-        this.parent.on(events.selectAllInit, this.onSelectAllInit, this);
-        this.parent.on(events.clearAllInit, this.onClearAllInit, this);
-        this.parent.on(events.menuItemData, this.onMenuItemData, this);
-        this.parent.on(events.beforeRequest, this.onBeforeRequest, this);
-        this.parent.on(events.afterRequest, this.onAfterRequest, this);
-        this.parent.on(events.dropInit, this.onDropInit, this);
-        this.parent.on(events.detailsInit, this.onDetailsInit, this);
-        this.parent.on(events.splitterResize, this.splitterResizeHandler, this);
-        this.parent.on(events.resizeEnd, this.resizeHandler, this);
-        this.parent.on(events.pasteEnd, this.onpasteEnd, this);
-        this.parent.on(events.cutCopyInit, this.oncutCopyInit, this);
-        this.parent.on(events.layoutRefresh, this.onLayoutRefresh, this);
-        this.parent.on(events.dropPath, this.onDropPath, this);
-        this.parent.on(events.updateSelectionData, this.onUpdateSelectionData, this);
-        this.parent.on(events.filterEnd, this.onPathChanged, this);
-    }
-
-    private onActionFailure(): void { this.isInteraction = true; this.isInteracted = true; }
-
-    private onMenuItemData(args: { [key: string]: Object; }): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            const ele: Element = closest(<Element>args.target, 'li');
-            this.parent.itemData = [this.getItemObject(ele)];
-        }
-    }
-
-    private onDetailsInit(): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            if (this.parent.selectedItems.length !== 0) {
-                this.updateSelectedData();
-            } else {
-                this.parent.itemData = [getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent)];
-            }
-        }
-    }
-
-    private onpasteInit(): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            this.parent.itemData = (this.parent.folderPath === '') ? [getPathObject(this.parent)] :
-                [this.getItemObject(select('.e-active', this.element))];
-        }
-    }
-
-    private oncutCopyInit(): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            const activeEle: NodeListOf<Element> = this.element.querySelectorAll('.' + CLS.ACTIVE);
-            this.parent.activeRecords = [];
-            this.parent.activeElements = [];
-            for (let i: number = 0; i < activeEle.length; i++) {
-                this.parent.activeElements.push(activeEle[i as number]);
-                this.parent.activeRecords.push(this.getItemObject(activeEle[i as number]));
-            }
-        }
-    }
-
-    private onpasteEnd(args: ReadArgs): void {
-        if (this.parent.view === 'LargeIcons') {
-            this.isPasteOperation = true;
-            if (this.parent.path === this.parent.destinationPath ||
-                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
-                this.onPathChanged(args);
-            }
-        }
-    }
-
-    private onDropPath(args: ReadArgs): void {
-        if (this.parent.view === 'LargeIcons') {
-            this.isPasteOperation = true;
-            this.onPathChanged(args);
-        }
-    }
-
-    private onPropertyChanged(e: NotifyArgs): void {
-        let currentSelected: string[];
-        if (e.module !== this.getModuleName() && e.module !== 'common') {
-            return;
-        }
-        for (const prop of Object.keys(e.newProp)) {
-            switch (prop) {
-            case 'allowDragAndDrop':
-                this.createDragObj();
-                break;
-            case 'selectedItems':
-                this.isInteraction = false;
-                this.isInteracted = false;
-                currentSelected = isNOU(this.parent.selectedItems) ? [] : this.parent.selectedItems.slice(0);
-                currentSelected = this.parent.allowMultiSelection ? currentSelected :
-                    currentSelected.slice(currentSelected.length - 1);
-                this.parent.setProperties({ selectedItems: [] }, true);
-                this.onClearAllInit();
-                if (currentSelected.length) {
-                    this.selectItems(currentSelected);
-                }
-                this.parent.setProperties({ selectedItems: this.parent.selectedItems }, true);
-                this.isInteraction = true;
-                this.isInteracted = true;
-                break;
-            case 'showThumbnail':
-                refresh(this.parent);
-                break;
-            case 'showFileExtension':
-                read(this.parent, events.pathChanged, this.parent.path);
-                break;
-            case 'showHiddenItems':
-                read(this.parent, events.pathChanged, this.parent.path);
-                break;
-            case 'allowMultiSelection':
-            case 'showItemCheckBoxes':
-                if (this.parent.view !== 'LargeIcons') { break; }
-                refresh(this.parent);
-                break;
-            case 'view':
-                updateLayout(this.parent, 'LargeIcons');
-                break;
-            }
-        }
-    }
-
-    public destroy(): void {
-        if (this.parent.isDestroyed) { return; }
-        this.removeEventListener();
-        if (this.listObj) {
-            this.unWireEvents();
-        }
-        this.startItem = null;
-        this.listElements = null;
-    }
-
-    private wireEvents(): void {
-        this.wireClickEvent(true);
-        this.keyboardModule = new KeyboardEvents(
-            this.element,
-            {
-                keyAction: this.keyActionHandler.bind(this),
-                keyConfigs: this.keyConfigs,
-                eventName: 'keyup'
-            }
-        );
-        this.keyboardDownModule = new KeyboardEvents(
-            this.element,
-            {
-                keyAction: this.keydownActionHandler.bind(this),
-                keyConfigs: this.keyConfigs,
-                eventName: 'keydown'
-            }
-        );
-        EventHandler.add(this.element, 'mouseover', this.onMouseOver, this);
-    }
-
-    private unWireEvents(): void {
-        this.wireClickEvent(false);
-        EventHandler.remove(this.element, 'mouseover', this.onMouseOver);
-        this.keyboardModule.destroy();
-        this.keyboardDownModule.destroy();
-    }
-
-    /* istanbul ignore next */
-    private onMouseOver(e: MouseArgs): void {
-        const targetEle: Element = closest(e.target, '.e-list-item');
-        removeBlur(this.parent, 'hover');
-        if (targetEle !== null) {
-            targetEle.classList.add(CLS.HOVER);
-        }
-    }
-
-    private wireClickEvent(toBind: boolean): void {
-        if (toBind) {
-            this.clickObj = new Touch(this.element, {
-                tap: (eve: TapEventArgs) => {
-                    if (this.parent.isDevice) {
-                        this.tapCount = eve.tapCount;
-                        this.tapEvent = eve;
-                        setTimeout(
-                            () => {
-                                if (this.tapCount > 0) {
-                                    this.doTapAction(this.tapEvent);
-                                }
-                                this.tapCount = 0;
-                            },
-                            350);
-                    } else {
-                        if (eve.tapCount === 2 && eve.originalEvent.which !== 3) {
-                            this.dblClickHandler(eve);
-                        } else {
-                            this.clickHandler(eve);
-                        }
-                    }
-                },
-                tapHold: (e: TapEventArgs) => {
-                    if (this.parent.isDevice) {
-                        this.multiSelect = this.parent.allowMultiSelection ? true : false;
-                        if (this.parent.allowMultiSelection) {
-                            addClass([this.parent.element], CLS.MULTI_SELECT);
-                        }
-                        this.clickHandler(e);
-                    }
-                }
-            });
-        } else {
-            if (this.clickObj) {
-                this.clickObj.destroy();
-            }
-        }
-    }
-
-    private doTapAction(eve: TapEventArgs): void {
-        const target: Element = <Element>eve.originalEvent.target;
-        const item: Element = closest(target, '.' + CLS.LIST_ITEM);
-        if (this.multiSelect || target.classList.contains(CLS.LIST_PARENT) || isNOU(item)) {
-            this.clickHandler(eve);
-        } else {
-            this.parent.isFile = false;
-            this.updateType(item);
-            if (!this.parent.isFile) {
-                this.dblClickHandler(eve);
-            } else if (eve.tapCount === 2) {
-                this.clickHandler(eve);
-                this.dblClickHandler(eve);
-            } else {
-                this.clickHandler(eve);
-            }
-        }
-    }
-
-    private clickHandler(e: TapEventArgs): void {
-        const target: Element = <Element>e.originalEvent.target;
-        removeBlur(this.parent, 'hover');
-        this.doSelection(target, e.originalEvent);
-        this.parent.activeModule = 'largeiconsview';
-    }
-    /**
-     *
-     * @param {Element} target - specifies the target element.
-     * @param {TouchEventArgs | MouseEventArgs | KeyboardEventArgs} e - specifies event arguements.
-     * @returns {void}
-     * @hidden
-     */
-    public doSelection(target: Element, e: TouchEventArgs | MouseEventArgs | KeyboardEventArgs): void {
-        const ctrlKey: boolean = this.parent.isMac ? e.metaKey : e.ctrlKey;
-        const isMacRightClick: boolean = this.parent.isMac && e.ctrlKey && e.shiftKey;
-        const item: Element = closest(target, '.' + CLS.LIST_ITEM);
-        const cList: DOMTokenList = target.classList;
-        this.parent.isFile = false;
-        let action: string = 'select';
-        if ((e.which === 3 || isMacRightClick) && !isNOU(item) && item.classList.contains(CLS.ACTIVE)) {
-            this.addActive(item);
-            this.updateType(item);
-            return;
-        } else if (!isNOU(item)) {
-            if (this.parent.allowMultiSelection && item.classList.contains(CLS.ACTIVE)
-                && (ctrlKey || target.classList.contains(CLS.CHECK))) {
-                action = 'unselect';
-            }
-            if (ctrlKey && e.shiftKey && !isMacRightClick) {
-                this.isSelectAllCalled = true;
-            }
-            const fileSelectionArgs: FileSelectionEventArgs = this.triggerSelection(action, item);
-            if (fileSelectionArgs.cancel !== true) {
-                if ((!this.parent.allowMultiSelection || (!this.multiSelect && (e && !ctrlKey)))
-                    && !cList.contains(CLS.FRAME)) {
-                    this.updateType(item);
-                    this.clearSelect();
-                }
-                if (this.parent.allowMultiSelection && e.shiftKey && !isMacRightClick) {
-                    if (!(e && ctrlKey)) { this.clearSelect(); }
-                    if (!this.startItem) {
-                        this.startItem = item;
-                    }
-                    const startIndex: number = this.itemList.indexOf(<HTMLElement>this.startItem);
-                    const endIndex: number = this.itemList.indexOf(<HTMLElement>item);
-                    if (startIndex > endIndex) {
-                        for (let i: number = startIndex; i >= endIndex; i--) {
-                            this.addActive(this.itemList[i as number]);
-                        }
-                    } else {
-                        for (let i: number = startIndex; i <= endIndex; i++) {
-                            this.addActive(this.itemList[i as number]);
-                        }
-                    }
-                    this.addFocus(this.itemList[endIndex as number]);
-                } else {
-                    this.startItem = item;
-                    if (this.parent.allowMultiSelection && item.classList.contains(CLS.ACTIVE)) {
-                        this.removeActive(item);
-                    } else {
-                        this.addActive(item);
-                    }
-                    this.addFocus(item);
-                }
-                if (this.parent.selectedItems.length === 0) {
-                    this.resetMultiSelect();
-                }
-                this.parent.notify(events.selectionChanged, {});
-                this.triggerSelect(action, item);
-            }
-        } else {
-            if (this.parent.selectedItems.length === this.itemList.length) {
-                this.isSelectAllCalled = true;
-            }
-            this.clearSelection();
-        }
-        if (!isNOU(item)) {
-            this.isSelectAllCalled = false;
-            this.updateType(item);
-        }
-    }
-
-    private dblClickHandler(e: TapEventArgs): void {
-        this.parent.activeModule = 'largeiconsview';
-        const target: Element = <Element>e.originalEvent.target;
-        this.doOpenAction(target);
-    }
-
-    private clearSelection(): void {
-        this.clearSelect();
-        this.resetMultiSelect();
-        this.parent.notify(events.selectionChanged, {});
-    }
-
-    private resetMultiSelect(): void {
-        this.multiSelect = false;
-        removeClass([this.parent.element], CLS.MULTI_SELECT);
-    }
-
-    private doOpenAction(target: Element): void {
-        if (isNOU(target)) { return; }
-        const item: Element = closest(target, '.' + CLS.LIST_ITEM);
-        this.parent.isFile = false;
-        if (!isNOU(item)) {
-            this.updateType(item);
-            const details: Object = this.getItemObject(item);
-            if (!hasReadAccess(details)) {
-                createDeniedDialog(this.parent, details, events.permissionRead);
-                return;
-            }
-            const eventArgs: FileOpenEventArgs = { cancel: false, fileDetails: details, module: 'LargeIconsView' };
-            this.parent.trigger('fileOpen', eventArgs, (fileOpenArgs: FileOpenEventArgs) => {
-                if (!fileOpenArgs.cancel) {
-                    const text: string = getValue('name', details);
-                    if (!this.parent.isFile) {
-                        const val: string = this.parent.breadcrumbbarModule.searchObj.element.value;
-                        if (val === '' && !this.parent.isFiltered) {
-                            const id: string = getValue('id', details);
-                            this.parent.oldPath = this.parent.path;
-                            const newPath: string = this.parent.path + (isNOU(id) ? text : id) + '/';
-                            this.parent.setProperties({ path: newPath }, true);
-                            this.parent.pathNames.push(text);
-                            this.parent.pathId.push(getValue('_fm_id', details));
-                            this.parent.itemData = [details];
-                            openAction(this.parent);
-                        } else {
-                            openSearchFolder(this.parent, details);
-                        }
-                        this.parent.isFiltered = false;
-                        this.parent.setProperties({ selectedItems: [] }, true);
-                    } else {
-                        const icon: string = fileType(details);
-                        if (icon === CLS.ICON_IMAGE) {
-                            const imageData: BeforeImageLoadEventArgs = getImageUrl(this.parent, details);
-                            createImageDialog(this.parent, text, imageData);
-                        }
-                    }
-                }
-            });
-        }
-    }
-
-    private updateType(item: Element): void {
-        const folder: Element = select('.' + CLS.FOLDER, item);
-        this.parent.isFile = isNOU(folder) ? true : false;
-    }
-
-    /* istanbul ignore next */
-    private keydownActionHandler(e: KeyboardEventArgs): void {
-        if (!this.isRendered) { return; }
-        switch (e.action) {
-        case 'end':
-        case 'home':
-        case 'moveDown':
-        case 'moveLeft':
-        case 'moveRight':
-        case 'moveUp':
-        case 'ctrlEnd':
-        case 'shiftEnd':
-        case 'csEnd':
-        case 'ctrlHome':
-        case 'shiftHome':
-        case 'csHome':
-        case 'ctrlDown':
-        case 'shiftDown':
-        case 'csDown':
-        case 'ctrlLeft':
-        case 'shiftLeft':
-        case 'csLeft':
-        case 'ctrlRight':
-        case 'shiftRight':
-        case 'csRight':
-        case 'space':
-        case 'ctrlSpace':
-        case 'shiftSpace':
-        case 'csSpace':
-        case 'ctrlA':
-        case 'enter':
-        case 'altEnter':
-        case 'esc':
-        case 'del':
-        case 'shiftdel':
-        case 'ctrlC':
-        case 'ctrlV':
-        case 'ctrlX':
-        case 'f2':
-        case 'ctrlD':
-            e.preventDefault();
-            break;
-        default:
-            break;
-        }
-    }
-
-    /* istanbul ignore next */
-    private keyActionHandler(e: KeyboardEventArgs): void {
-        if (!this.isRendered) { return; }
-        const fItem: Element = this.getFocusedItem();
-        const firstItem: Element = this.getFirstItem();
-        const lastItem: Element = this.getLastItem();
-        switch (e.action) {
-        case 'end':
-            if (this.parent.enableVirtualization) {
-                this.clearSelect();
-                this.element.firstElementChild.scrollTo(0, this.element.firstElementChild.scrollHeight);
-                setTimeout(() => {
-                    this.navigateItem(this.itemList[this.itemList.length - 1]);
-                }, 10);
-            } else {
-                this.navigateItem(lastItem);
-            }
-            break;
-        case 'home':
-            if (this.parent.enableVirtualization) {
-                this.clearSelect();
-                this.element.firstElementChild.scrollTop = 0;
-                setTimeout(() => {
-                    this.navigateItem(this.itemList[0]);
-                }, 10);
-            } else {
-                this.navigateItem(firstItem);
-            }
-            break;
-        case 'tab':
-            if (!isNOU(fItem)) {
-                this.addFocus(fItem);
-            } else if (!isNOU(firstItem)) {
-                this.addFocus(firstItem);
-            }
-            break;
-        case 'moveDown':
-            this.navigateDown(fItem, true);
-            break;
-        case 'moveLeft':
-            this.navigateRight(fItem, false);
-            break;
-        case 'moveRight':
-            this.navigateRight(fItem, true);
-            break;
-        case 'moveUp':
-            this.navigateDown(fItem, false);
-            break;
-        case 'ctrlEnd':
-        case 'shiftEnd':
-        case 'csEnd':
-            this.csEndKey(lastItem, e);
-            break;
-        case 'ctrlHome':
-        case 'shiftHome':
-        case 'csHome':
-            this.csHomeKey(firstItem, e);
-            break;
-        case 'ctrlDown':
-        case 'shiftDown':
-        case 'csDown':
-            this.csDownKey(fItem, e);
-            break;
-        case 'ctrlLeft':
-        case 'shiftLeft':
-        case 'csLeft':
-            this.csLeftKey(fItem, e);
-            break;
-        case 'ctrlRight':
-        case 'shiftRight':
-        case 'csRight':
-            this.csRightKey(fItem, e);
-            break;
-        case 'ctrlUp':
-        case 'shiftUp':
-        case 'csUp':
-            this.csUpKey(fItem, e);
-            break;
-        case 'space':
-            this.spaceKey(fItem);
-            break;
-        case 'ctrlSpace':
-        case 'shiftSpace':
-        case 'csSpace':
-            if (!isNOU(fItem)) { this.doSelection(fItem, e); }
-            break;
-        case 'ctrlA':
-            this.ctrlAKey(firstItem, lastItem);
-            break;
-        case 'enter':
-            this.doOpenAction(this.parent.visitedItem ? this.parent.visitedItem : this.getVisitedItem());
-            break;
-        case 'altEnter':
-            this.parent.notify(events.detailsInit, {});
-            GetDetails(this.parent, this.parent.selectedItems, this.parent.path, 'details');
-            break;
-        case 'esc':
-            removeActive(this.parent);
-            break;
-        case 'del':
-        case 'shiftdel':
-            this.performDelete();
-            break;
-        case 'ctrlC':
-            copyFiles(this.parent);
-            break;
-        case 'ctrlV':
-            this.parent.folderPath = '';
-            pasteHandler(this.parent);
-            break;
-        case 'ctrlX':
-            cutFiles(this.parent);
-            break;
-        case 'f2':
-            this.performRename();
-            break;
-        case 'ctrlD':
-            this.doDownload();
-            break;
-        case 'back':
-            this.parent.traverseBackward();
-            break;
-        }
-    }
-
-    private doDownload(): void {
-        this.updateSelectedData();
-        doDownload(this.parent);
-    }
-
-    private performDelete(): void {
-        if (this.parent.selectedItems && this.parent.selectedItems.length > 0) {
-            this.updateSelectedData();
-            const data: Object[] = this.parent.itemData;
-            for (let i: number = 0; i < data.length; i++) {
-                if (!hasEditAccess(data[i as number])) {
-                    createDeniedDialog(this.parent, data[i as number], events.permissionEdit);
-                    return;
-                }
-            }
-            createDialog(this.parent, 'Delete');
-        }
-    }
-
-    private performRename(): void {
-        if (this.parent.selectedItems.length === 1) {
-            this.updateRenameData();
-            doRename(this.parent);
-        }
-    }
-
-    private updateRenameData(): void {
-        const item: Element = select('.' + CLS.LIST_ITEM + '.' + CLS.ACTIVE, this.element);
-        const data: Object = this.getItemObject(item);
-        updateRenamingData(this.parent, data);
-    }
-
-    private getVisitedItem(): Element {
-        const item: string = this.parent.selectedItems[this.parent.selectedItems.length - 1];
-        const indexes: number[] = this.getIndexes([item], this.parent.hasId);
-        return this.itemList[indexes[0]];
-    }
-
-    private getFocusedItem(): Element {
-        return select('.' + CLS.LIST_ITEM + '.' + CLS.FOCUS, this.element);
-    }
-
-    private getActiveItem(): Element {
-        return select('.' + CLS.LIST_ITEM + '.' + CLS.ACTIVE, this.element);
-    }
-
-    private getFirstItem(): Element {
-        return this.itemList[0];
-    }
-
-    private getLastItem(): Element {
-        return this.itemList[this.itemList.length - 1];
-    }
-
-    private navigateItem(item: Element): void {
-        this.setFocus(item);
-    }
-
-    private navigateDown(fItem: Element, isTowards: boolean): void {
-        const nItem: Element = this.getNextItem(fItem, isTowards, this.perRow);
-        this.setFocus(nItem);
-    }
-
-    private navigateRight(fItem: Element, isTowards: boolean): void {
-        const nItem: Element = this.getNextItem(fItem, isTowards);
-        this.setFocus(nItem);
-    }
-
-    private getNextItem(li: Element, isTowards: boolean, perRow?: number): Element {
-        if (isNOU(li)) { return this.getFocusedItem() || this.getActiveItem() || this.getFirstItem(); }
-        let index: number = this.itemList.indexOf(<HTMLElement>li);
-        let nextItem: Element;
-        do {
-            if (isTowards) {
-                index = perRow ? index + perRow : index + 1;
-            } else {
-                index = perRow ? index - perRow : index - 1;
-            }
-            nextItem = this.itemList[index as number];
-            if (this.parent.enableVirtualization && isNOU(nextItem)) {
-                const marginValue: number = parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-top'), 10) +
-                    parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-bottom'), 10);
-                const scrollHeight: number = this.itemList[0].getBoundingClientRect().height + marginValue ;
-                this.element.firstElementChild.scrollTo(
-                    this.element.firstElementChild.scrollTop, this.element.firstElementChild.scrollTop + scrollHeight);
-            }
-            if (isNOU(nextItem)) {
-                return li;
-            }
-        }
-        while (!isVisible(nextItem));
-        return nextItem;
-    }
-
-    private setFocus(nextItem: Element): void {
-        if (!isNOU(nextItem)) {
-            const fileSelectionArgs: FileSelectionEventArgs = this.triggerSelection('select', nextItem);
-            if (fileSelectionArgs.cancel !== true) {
-                this.startItem = nextItem;
-                this.clearSelect();
-                this.addActive(nextItem);
-                this.addFocus(nextItem);
-                this.parent.notify(events.selectionChanged, {});
-                this.triggerSelect('select', nextItem);
-            }
-        }
-    }
-
-    private spaceKey(fItem: Element): void {
-        if (!isNOU(fItem) && !fItem.classList.contains(CLS.ACTIVE)) {
-            const fileSelectionArgs: FileSelectionEventArgs = this.triggerSelection('select', fItem);
-            if (fileSelectionArgs.cancel !== true) {
-                this.addActive(fItem);
-                this.parent.notify(events.selectionChanged, {});
-                this.triggerSelect('select', fItem);
-            }
-        }
-    }
-
-    private ctrlAKey(firstItem: Element, lastItem: Element): void {
-        if (this.parent.allowMultiSelection && !isNOU(firstItem)) {
-            this.startItem = firstItem;
-            const eveArgs: KeyboardEventArgs = { ctrlKey: true, shiftKey: true } as KeyboardEventArgs;
-            const liParent: HTMLElement = this.element.querySelector('.' + CLS.LIST_PARENT);
-            const liScrPos: number = liParent.scrollTop;
-            const getCurFocusedItem: Element = this.getFocusedItem();
-            this.doSelection(lastItem, eveArgs);
-            liParent.scrollTop = liScrPos;
-            if (!isNOU(getCurFocusedItem)) {
-                this.addFocus(getCurFocusedItem);
-            }
-        }
-    }
-
-    private csEndKey(lastItem: Element, e: KeyboardEventArgs): void {
-        if (!this.parent.allowMultiSelection) {
-            this.navigateItem(lastItem);
-        } else if (!isNOU(lastItem)) {
-            if (e.action === 'ctrlEnd') { this.addFocus(lastItem); } else { this.doSelection(lastItem, e); }
-        }
-    }
-
-    private csHomeKey(firstItem: Element, e: KeyboardEventArgs): void {
-        if (!this.parent.allowMultiSelection) {
-            this.navigateItem(firstItem);
-        } else if (!isNOU(firstItem)) {
-            if (e.action === 'ctrlHome') {
-                this.addFocus(firstItem);
-            } else{
-                this.doSelection(firstItem, e);
-            }
-        }
-    }
-
-    private csDownKey(fItem: Element, e: KeyboardEventArgs): void {
-        if (!this.parent.allowMultiSelection) {
-            this.navigateDown(fItem, true);
-        } else {
-            const dItem: Element = this.getNextItem(fItem, true, this.perRow);
-            if (!isNOU(dItem)) {
-                if (e.action === 'ctrlDown') {
-                    this.addFocus(dItem);
-                } else {
-                    this.doSelection(dItem, e);
-                }
-            }
-        }
-    }
-
-    private csLeftKey(fItem: Element, e: KeyboardEventArgs): void {
-        if (!this.parent.allowMultiSelection) {
-            this.navigateRight(fItem, false);
-        } else {
-            const lItem: Element = this.getNextItem(fItem, false);
-            if (!isNOU(lItem)) {
-                if (e.action === 'ctrlLeft') {
-                    this.addFocus(lItem);
-                } else {
-                    this.doSelection(lItem, e);
-                }
-            }
-        }
-    }
-
-    private csRightKey(fItem: Element, e: KeyboardEventArgs): void {
-        if (!this.parent.allowMultiSelection) {
-            this.navigateRight(fItem, true);
-        } else {
-            const rItem: Element = this.getNextItem(fItem, true);
-            if (!isNOU(rItem)) {
-                if (e.action === 'ctrlRight'){
-                    this.addFocus(rItem);
-                } else{
-                    this.doSelection(rItem, e);
-                }
-            }
-        }
-    }
-
-    private csUpKey(fItem: Element, e: KeyboardEventArgs): void {
-        if (!this.parent.allowMultiSelection) {
-            this.navigateDown(fItem, false);
-        } else {
-            const uItem: Element = this.getNextItem(fItem, false, this.perRow);
-            if (!isNOU(uItem)) {
-                if (e.action === 'ctrlUp') {
-                    this.addFocus(uItem);
-                } else{
-                    this.doSelection(uItem, e);
-                }
-            }
-        }
-    }
-
-    private addActive(nextItem: Element): void {
-        if (!isNOU(nextItem)) {
-            if (!nextItem.classList.contains(CLS.ACTIVE)) {
-                this.parent.selectedItems.push(this.getDataName(nextItem));
-                this.parent.setProperties({ selectedItems: this.parent.selectedItems }, true);
-                addClass([nextItem], [CLS.ACTIVE]);
-                nextItem.setAttribute('aria-selected', 'true');
-                this.checkState(nextItem, true);
-            }
-            this.parent.visitedItem = nextItem;
-        }
-    }
-
-    private removeActive(preItem: Element): void {
-        if (!isNOU(preItem)) {
-            removeClass([preItem], [CLS.ACTIVE]);
-            if (this.parent.allowMultiSelection) {
-                preItem.setAttribute('aria-selected', 'false');
-            } else {
-                preItem.removeAttribute('aria-selected');
-            }
-            this.checkState(preItem, false);
-            const index: number = this.parent.selectedItems.indexOf(this.getDataName(preItem));
-            if (index > -1) {
-                this.parent.selectedItems.splice(index, 1);
-                this.parent.setProperties({ selectedItems: this.parent.selectedItems }, true);
-            }
-            this.parent.visitedItem = null;
-        }
-    }
-
-    private getDataName(item: Element): string {
-        const data: Object = this.getItemObject(item);
-        return getItemName(this.parent, data);
-    }
-
-    private addFocus(item: Element): void {
-        this.element.setAttribute('tabindex', '-1');
-        const fItem: Element = this.getFocusedItem();
-        if (fItem) {
-            fItem.removeAttribute('tabindex');
-            removeClass([fItem], [CLS.FOCUS]);
-        }
-        addClass([item], [CLS.FOCUS]);
-        item.setAttribute('tabindex', '0');
-        (item as HTMLElement).focus();
-    }
-
-    private checkState(item: Element, toCheck: boolean): void {
-        if (!this.parent.showItemCheckBoxes) { return; }
-        const checkEle: Element = select('.' + CLS.FRAME, item);
-        if (isNOU(checkEle)) { return; }
-        if (toCheck) {
-            if (!checkEle.classList.contains(CLS.CHECK)) {
-                addClass([checkEle], CLS.CHECK);
-                closest(checkEle, '.' + CLS.CB_WRAP).setAttribute('aria-checked', 'true');
-            }
-        } else {
-            if (checkEle.classList.contains(CLS.CHECK)) {
-                removeClass([checkEle], CLS.CHECK);
-                closest(checkEle, '.' + CLS.CB_WRAP).setAttribute('aria-checked', 'false');
-            }
-        }
-    }
-
-    private clearSelect(): void {
-        const eles: Element[] = Array.prototype.slice.call(selectAll('.' + CLS.ACTIVE, this.listElements));
-        let fileSelectionArgs: FileSelectionEventArgs;
-        if (eles.length !== 0) {
-            fileSelectionArgs = this.triggerSelection('unselect', eles[0]);
-            if (fileSelectionArgs.cancel !== true) {
-                for (let i: number = 0, len: number = eles.length; i < len; i++) {
-                    this.removeActive(eles[i as number]);
-                }
-            }
-            this.triggerSelect('unselect', eles[0]);
-        }
-    }
-
-    private resizeHandler(): void {
-        this.getItemCount();
-    }
-
-    private splitterResizeHandler(): void {
-        this.getItemCount();
-    }
-
-    private getItemCount(): void {
-        let perRow: number = 1;
-        if (this.itemList) {
-            for (let i: number = 0, len: number = this.itemList.length - 1; i < len; i++) {
-                if (this.itemList[i as number].getBoundingClientRect().top === this.itemList[i + 1].getBoundingClientRect().top) {
-                    perRow++;
-                } else {
-                    break;
-                }
-            }
-        }
-        this.perRow = perRow;
-    }
-    private triggerSelection(action: string, item: Element): FileSelectionEventArgs {
-        const data: object[] = [];
-        if (this.isSelectAllCalled){
-            for (let i: number = 0, len: number = this.itemList.length; i < len; i++ ) {
-                data[i as number] = this.getItemObject(this.itemList[i as number]);
-            }
-        }else{
-            data[0] = this.getItemObject(item);
-        }
-        const eventArgs: FileSelectionEventArgs = { action: action, fileDetails: data.length > 1
-            ? data : data[0], isInteracted: this.isInteraction, cancel: false, target: this.isSelectAllCalled ? null
-            : item
-        };
-        this.parent.trigger('fileSelection', eventArgs);
-        this.isInteraction = true;
-        return eventArgs;
-    }
-
-    private triggerSelect(action: string, item: Element): void {
-        const data: object[] = [];
-        if (this.isSelectAllCalled){
-            for (let i: number = 0, len: number = this.itemList.length; i < len; i++ ) {
-                data[i as number] = this.getItemObject(this.itemList[i as number]);
-            }
-            this.isSelectAllCalled = false;
-        }else{
-            data[0] = this.getItemObject(item);
-        }
-        this.parent.visitedData = data.length > 1 ? data[data.length - 1] : data[0];
-        const eventArgs: FileSelectEventArgs = { action: action, fileDetails: data.length > 1
-            ? data
-            : data[0], isInteracted: this.isInteracted };
-        this.parent.trigger('fileSelect', eventArgs);
-        this.isInteracted = true;
-    }
-
-    private selectItems(items: string[]): void {
-        const indexes: number[] = this.getIndexes(items, this.parent.hasId);
-        for (let j: number = 0, len: number = indexes.length; j < len; j++) {
-            const eveArgs: KeyboardEventArgs = { ctrlKey: true, shiftKey: false } as KeyboardEventArgs;
-            this.doSelection(this.itemList[indexes[j as number]], eveArgs);
-        }
-    }
-
-    private getIndexes(items: string[], byId?: boolean): number[] {
-        const indexes: number[] = [];
-        const filter: string = byId ? 'id' : 'name';
-        for (let i: number = 0, len: number = this.items.length; i < len; i++) {
-            if (items.indexOf(getValue(filter, this.items[i as number])) !== -1) {
-                indexes.push(i);
-            }
-        }
-        return indexes;
-    }
-
-    private getItemObject(item: Element): Object {
-        const index: number = this.itemList.indexOf(<HTMLElement>item);
-        return this.items[index as number];
-    }
-
-    private addSelection(data: Object): void {
-        let resultData: Object[] = [];
-        if (this.parent.hasId) {
-            resultData = new DataManager(this.items).
-                executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
-        } else {
-            const newData: Object[] = new DataManager(this.items).
-                executeLocal(new Query().where('name', 'equal', getValue('name', data), false));
-            if (newData.length > 0) {
-                resultData = new DataManager(newData).
-                    executeLocal(new Query().where('filterPath', 'equal', this.parent.filterPath, false));
-            }
-        }
-        if (resultData.length > 0) {
-            const index: number = this.items.indexOf(resultData[0]);
-            const eveArgs: KeyboardEventArgs = { ctrlKey: true, shiftKey: false } as KeyboardEventArgs;
-            this.doSelection(this.itemList[index as number], eveArgs);
-        }
-    }
-
-    private updateSelectedData(): void {
-        const data: object[] = [];
-        const items: Element[] = selectAll('.' + CLS.LIST_ITEM + '.' + CLS.ACTIVE, this.element);
-        for (let i: number = 0; i < items.length; i++) {
-            data[i as number] = this.getItemObject(items[i as number]);
-        }
-        this.parent.itemData = data;
-    }
-
-    private onMethodCall(args: Object): void {
-        if (this.parent.view !== 'LargeIcons') { return; }
-        const action: string = getValue('action', args);
-        switch (action) {
-        case 'deleteFiles':
-            this.deleteFiles(getValue('ids', args));
-            break;
-        case 'downloadFiles':
-            this.downloadFiles(getValue('ids', args));
-            break;
-        case 'openFile':
-            this.openFile(getValue('id', args));
-            break;
-        case 'renameFile':
-            this.isInteraction = false;
-            this.isInteracted = false;
-            this.renameFile(getValue('id', args), getValue('newName', args));
-            break;
-        case 'createFolder':
-            this.isInteraction = false;
-            this.isInteracted = false;
-            break;
-        case 'clearSelection':
-            this.isInteraction = false;
-            this.isInteracted = false;
-            this.onClearAllInit();
-            break;
-        case 'selectAll':
-            this.isInteraction = false;
-            this.isInteracted = false;
-            this.onSelectAllInit();
-            break;
-        }
-    }
-
-    private getItemsIndex(items: string[]): number[] {
-        const indexes: number[] = [];
-        const isFilter: boolean = (this.parent.breadcrumbbarModule.searchObj.element.value !== '' || this.parent.isFiltered) ? true : false;
-        const filterName: string = this.parent.hasId ? 'id' : 'name';
-        if (this.parent.hasId || !isFilter) {
-            for (let i: number = 0, len: number = this.items.length; i < len; i++) {
-                if (items.indexOf(getValue(filterName, this.items[i as number])) !== -1) {
-                    indexes.push(i);
-                }
-            }
-        } else {
-            for (let i: number = 0, len: number = this.items.length; i < len; i++) {
-                const name: string = getValue('filterPath', this.items[i as number]) + getValue('name', this.items[i as number]);
-                if ((items.indexOf(name) !== -1) || (items.indexOf(getValue(filterName, this.items[i as number])) !== -1))  {
-                    indexes.push(i);
-                }
-            }
-        }
-        return indexes;
-    }
-
-    private deleteFiles(ids: string[]): void {
-        this.parent.activeModule = 'largeiconsview';
-        if (isNOU(ids)) {
-            this.performDelete();
-            return;
-        }
-        const indexes: number[] = this.getItemsIndex(ids);
-        if (indexes.length === 0) { return; }
-        const data: Object[] = [];
-        const newIds: string[] = [];
-        for (let i: number = 0; i < indexes.length; i++) {
-            data[i as number] = this.items[indexes[i as number]];
-            newIds[i as number] = getItemName(this.parent, data[i as number]);
-        }
-        doDeleteFiles(this.parent, data, newIds);
-    }
-
-    private downloadFiles(ids: string[]): void {
-        if (isNOU(ids)) {
-            this.doDownload();
-            return;
-        }
-        const index: number[] = this.getItemsIndex(ids);
-        if (index.length === 0) { return; }
-        const data: Object[] = [];
-        const newIds: string[] = [];
-        for (let i: number = 0; i < index.length; i++) {
-            data[i as number] = this.items[index[i as number]];
-            newIds[i as number] = getItemName(this.parent, data[i as number]);
-        }
-        doDownloadFiles(this.parent, data, newIds);
-    }
-
-    private openFile(id: string): void {
-        if (isNOU(id)) { return; }
-        const indexes: number[] = this.getItemsIndex([id]);
-        if (indexes.length > 0) {
-            this.doOpenAction(this.itemList[indexes[0]]);
-        }
-    }
-
-    private renameFile(id: string, name: string): void {
-        this.parent.activeModule = 'largeiconsview';
-        if (isNOU(id)) {
-            this.performRename();
-            return;
-        }
-        const indexes: number[] = this.getItemsIndex([id]);
-        if (indexes.length > 0) {
-            updateRenamingData(this.parent, this.items[indexes[0]]);
-            if (isNOU(name)) {
-                doRename(this.parent);
-            } else {
-                if (!hasEditAccess(this.parent.itemData[0])) {
-                    createDeniedDialog(this.parent, this.parent.itemData[0], events.permissionEdit);
-                } else {
-                    rename(this.parent, this.parent.path, name);
-                }
-            }
-        }
-    }
-}