@syncfusion/ej2-filemanager 29.2.4 → 30.1.37

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

@@ -0,0 +1,1684 @@
+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);
+                }
+            }
+        }
+    }
+}