UNPKG

@syncfusion/ej2-filemanager

Version:
1,182 lines (1,181 loc) 65.8 kB
import { ListBase } from '@syncfusion/ej2-lists'; import { createElement, select, selectAll, EventHandler, KeyboardEvents, closest, Draggable } from '@syncfusion/ej2-base'; import { isNullOrUndefined as isNOU, addClass, removeClass, Touch, isVisible } from '@syncfusion/ej2-base'; import { getValue, setValue, remove } from '@syncfusion/ej2-base'; import { DataManager, Query, DataUtil } from '@syncfusion/ej2-data'; import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups'; import * as events from '../base/constant'; import * as CLS from '../base/classes'; import { createCheckBox } from '@syncfusion/ej2-buttons'; import { read, GetDetails, Delete } 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 } from '../common/utility'; import { createEmptyElement, hasReadAccess, hasEditAccess } from '../common/utility'; import { createDialog, createImageDialog } from '../pop-up/dialog'; /** * LargeIconsView module */ var LargeIconsView = /** @class */ (function () { /** * Constructor for the LargeIcons module. * * @param {IFileManager} parent - specifies the parent element. * @hidden */ function LargeIconsView(parent) { this.isInteraction = true; this.uploadOperation = false; this.count = 0; this.isRendered = true; this.tapCount = 0; this.isSelectAllCalled = false; this.isPasteOperation = false; this.isInteracted = true; this.parent = parent; this.element = 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' }; } LargeIconsView.prototype.render = function (args) { 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, {}); var iconsView = select('#' + this.parent.element.id + CLS.LARGEICON_ID, this.parent.element); var ul = select('ul', iconsView); 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', 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)); } 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, this.items, this.listObj); this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements)); this.element.appendChild(this.listElements); this.listElements.setAttribute('aria-label', 'listbox'); this.preventImgDrag(); this.createDragObj(); if (this.itemList.length === 0) { var emptyList = 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 = []; } } var activeEle = this.element.querySelectorAll('.' + CLS.ACTIVE); if (activeEle.length !== 0) { this.parent.activeModule = 'largeiconsview'; } for (var i = 0; i < activeEle.length; i++) { activeEle[i].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(); } } }; LargeIconsView.prototype.comparer = function (x, y) { if (this.parent.sortOrder === 'Descending') { var z = x; x = y; y = z; } return this.parent.sortComparer(x, y); }; LargeIconsView.prototype.preventImgDrag = function () { var i = 0; while (i < this.itemList.length) { if (this.itemList[i].querySelector('img')) { /* istanbul ignore next */ this.itemList[i].ondragstart = function () { return false; }; } i++; } }; LargeIconsView.prototype.createDragObj = function () { var _this = this; 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: function (args) { dragStartHandler(_this.parent, args, _this.dragObj); } }); } else if (this.dragObj && !this.parent.allowDragAndDrop) { this.dragObj.destroy(); } } }; LargeIconsView.prototype.dragHelper = function (args) { var dragTarget = args.sender.target; var dragLi = closest(dragTarget, '.e-list-item'); if (!dragLi) { return null; } if (dragLi && !dragLi.classList.contains('e-active')) { this.setFocus(dragLi); } var activeEle = this.element.querySelectorAll('.' + CLS.ACTIVE); this.parent.activeElements = []; this.parent.dragData = []; for (var i = 0; i < activeEle.length; i++) { this.parent.dragData.push(this.getItemObject(activeEle[parseInt(i.toString(), 10)])); this.parent.activeElements.push(activeEle[i]); } getModule(this.parent, dragLi); this.parent.dragPath = this.parent.path; createVirtualDragElement(this.parent); return this.parent.virtualDragElement; }; LargeIconsView.prototype.onDropInit = function (args) { if (this.parent.targetModule === this.getModuleName()) { var dropLi = closest(args.target, '.e-list-item'); var cwdData = getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent); if (dropLi) { var info = 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 */ LargeIconsView.prototype.getModuleName = function () { return 'largeiconsview'; }; LargeIconsView.prototype.onItemCreated = function (args) { args.item.removeAttribute('aria-level'); if (!this.parent.showFileExtension && getValue('isFile', args.curData)) { var textEle = args.item.querySelector('.' + CLS.LIST_TEXT); var txt = getValue('name', args.curData); var type = getValue('type', args.curData); if (txt.indexOf(type) !== -1) { textEle.innerHTML = txt.substr(0, txt.length - type.length); } } this.renderCheckbox(args); var eventArgs = { element: args.item, fileDetails: args.curData, module: 'LargeIconsView' }; this.parent.trigger('fileLoad', eventArgs); }; LargeIconsView.prototype.renderCheckbox = function (args) { if (!this.parent.showItemCheckBoxes) { return; } var checkElement = 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]); }; LargeIconsView.prototype.onLayoutChange = function (args) { 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) { var indexes = this.getIndexes(this.parent.selectedNodes); var length_1 = 0; while (length_1 < indexes.length) { addBlur(this.itemList[indexes[length_1]]); length_1++; } } var activeEle = this.element.querySelectorAll('.' + CLS.ACTIVE); if (activeEle.length !== 0) { this.element.focus(); } this.checkItem(); this.parent.isLayoutChange = false; } else { this.element.setAttribute('tabindex', '-1'); } }; LargeIconsView.prototype.checkItem = function () { var checkEle = this.element.querySelectorAll('.' + CLS.ACTIVE); if (checkEle) { var checkLength = 0; while (checkLength < checkEle.length) { this.checkState(checkEle[checkLength], true); checkLength++; } } }; LargeIconsView.prototype.renderList = function (args) { var i = 0; var items = JSON.parse(JSON.stringify(args.files)); while (i < items.length) { var icon = fileType(items[i]); var name_1 = getValue('name', items[i]); var selected = getItemName(this.parent, items[i]); var className = ((this.parent.selectedItems && this.parent.selectedItems.indexOf(selected) !== -1)) ? CLS.LARGE_ICON + ' e-active' : CLS.LARGE_ICON; if (!hasEditAccess(items[i])) { className += ' ' + getAccessClass(items[i]); } if (icon === CLS.ICON_IMAGE && this.parent.showThumbnail && hasReadAccess(items[i])) { var imgUrl = getImageUrl(this.parent, items[i]); setValue('_fm_imageUrl', imgUrl, items[i]); setValue('_fm_imageAttr', { alt: name_1 }, items[i]); } else { setValue('_fm_icon', icon, items[i]); } setValue('_fm_htmlAttr', { class: className, title: name_1 }, items[i]); i++; } return items; }; LargeIconsView.prototype.onFinalizeEnd = function (args) { this.render(args); }; LargeIconsView.prototype.onCreateEnd = function (args) { 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'; }; LargeIconsView.prototype.onSelectedData = function () { if (this.parent.activeModule === 'largeiconsview') { this.updateSelectedData(); } }; LargeIconsView.prototype.onDeleteInit = function () { if (this.parent.activeModule === 'largeiconsview') { Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete'); } }; /* istanbul ignore next */ LargeIconsView.prototype.onDeleteEnd = function (args) { if (this.parent.view !== 'LargeIcons') { return; } this.onLayoutChange(args); this.parent.setProperties({ selectedItems: [] }, true); this.clearSelect(); }; LargeIconsView.prototype.onRefreshEnd = function (args) { if (this.parent.view !== 'LargeIcons') { return; } this.onLayoutChange(args); }; LargeIconsView.prototype.onRenameInit = function () { if (this.parent.activeModule === 'largeiconsview' && this.parent.selectedItems.length === 1) { this.updateRenameData(); } }; LargeIconsView.prototype.onPathChanged = function (args) { 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); } } }; LargeIconsView.prototype.onOpenInit = function (args) { if (this.parent.activeModule === 'largeiconsview') { this.doOpenAction(args.target); } }; LargeIconsView.prototype.onHideLayout = function () { if (this.parent.view !== 'LargeIcons' && this.element) { this.element.classList.add(CLS.DISPLAY_NONE); } }; LargeIconsView.prototype.onSelectAllInit = function () { if (this.parent.view === 'LargeIcons') { this.startItem = this.getFirstItem(); var lastItem = this.getLastItem(); var eveArgs = { ctrlKey: true, shiftKey: true }; this.doSelection(lastItem, eveArgs); this.isInteraction = true; this.isInteracted = true; } }; LargeIconsView.prototype.onClearAllInit = function () { if (this.parent.view === 'LargeIcons') { this.clearSelection(); this.isInteraction = true; this.isInteracted = true; } }; LargeIconsView.prototype.onBeforeRequest = function () { this.isRendered = false; }; LargeIconsView.prototype.onAfterRequest = function () { this.isRendered = true; }; /* istanbul ignore next */ LargeIconsView.prototype.onSearch = function (args) { if (this.parent.view === 'LargeIcons') { this.parent.setProperties({ selectedItems: [] }, true); this.parent.notify(events.selectionChanged, {}); this.parent.searchedItems = args.files; this.onLayoutChange(args); } }; LargeIconsView.prototype.onLayoutRefresh = function () { if (this.parent.view !== 'LargeIcons') { return; } }; LargeIconsView.prototype.onUpdateSelectionData = function () { if (this.parent.view !== 'LargeIcons') { return; } this.updateSelectedData(); }; LargeIconsView.prototype.onPathColumn = function () { 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, {}); } }; LargeIconsView.prototype.removeEventListener = function () { 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); }; LargeIconsView.prototype.addEventListener = function () { 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); }; LargeIconsView.prototype.onActionFailure = function () { this.isInteraction = true; this.isInteracted = true; }; LargeIconsView.prototype.onMenuItemData = function (args) { if (this.parent.activeModule === this.getModuleName()) { var ele = closest(args.target, 'li'); this.parent.itemData = [this.getItemObject(ele)]; } }; LargeIconsView.prototype.onDetailsInit = function () { 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)]; } } }; LargeIconsView.prototype.onpasteInit = function () { if (this.parent.activeModule === this.getModuleName()) { this.parent.itemData = (this.parent.folderPath === '') ? [getPathObject(this.parent)] : [this.getItemObject(select('.e-active', this.element))]; } }; LargeIconsView.prototype.oncutCopyInit = function () { if (this.parent.activeModule === this.getModuleName()) { var activeEle = this.element.querySelectorAll('.' + CLS.ACTIVE); this.parent.activeRecords = []; this.parent.activeElements = []; for (var i = 0; i < activeEle.length; i++) { this.parent.activeElements.push(activeEle[i]); this.parent.activeRecords.push(this.getItemObject(activeEle[i])); } } }; LargeIconsView.prototype.onpasteEnd = function (args) { 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); } } }; LargeIconsView.prototype.onDropPath = function (args) { if (this.parent.view === 'LargeIcons') { this.isPasteOperation = true; this.onPathChanged(args); } }; LargeIconsView.prototype.onPropertyChanged = function (e) { var currentSelected; if (e.module !== this.getModuleName() && e.module !== 'common') { return; } for (var _i = 0, _a = Object.keys(e.newProp); _i < _a.length; _i++) { var prop = _a[_i]; 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; } } }; LargeIconsView.prototype.destroy = function () { if (this.parent.isDestroyed) { return; } this.removeEventListener(); if (this.listObj) { this.unWireEvents(); } this.startItem = null; this.listElements = null; }; LargeIconsView.prototype.wireEvents = function () { 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); }; LargeIconsView.prototype.unWireEvents = function () { this.wireClickEvent(false); EventHandler.remove(this.element, 'mouseover', this.onMouseOver); this.keyboardModule.destroy(); this.keyboardDownModule.destroy(); }; /* istanbul ignore next */ LargeIconsView.prototype.onMouseOver = function (e) { var targetEle = closest(e.target, '.e-list-item'); removeBlur(this.parent, 'hover'); if (targetEle !== null) { targetEle.classList.add(CLS.HOVER); } }; LargeIconsView.prototype.wireClickEvent = function (toBind) { var _this = this; if (toBind) { this.clickObj = new Touch(this.element, { tap: function (eve) { if (_this.parent.isDevice) { _this.tapCount = eve.tapCount; _this.tapEvent = eve; setTimeout(function () { 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: function (e) { 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(); } } }; LargeIconsView.prototype.doTapAction = function (eve) { var target = eve.originalEvent.target; var item = 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); } } }; LargeIconsView.prototype.clickHandler = function (e) { var target = 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 */ LargeIconsView.prototype.doSelection = function (target, e) { var ctrlKey = this.parent.isMac ? e.metaKey : e.ctrlKey; var isMacRightClick = this.parent.isMac && e.ctrlKey && e.shiftKey; var item = closest(target, '.' + CLS.LIST_ITEM); var cList = target.classList; this.parent.isFile = false; var action = '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; } var fileSelectionArgs = 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; } var startIndex = this.itemList.indexOf(this.startItem); var endIndex = this.itemList.indexOf(item); if (startIndex > endIndex) { for (var i = startIndex; i >= endIndex; i--) { this.addActive(this.itemList[i]); } } else { for (var i = startIndex; i <= endIndex; i++) { this.addActive(this.itemList[i]); } } this.addFocus(this.itemList[endIndex]); } 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); } }; LargeIconsView.prototype.dblClickHandler = function (e) { this.parent.activeModule = 'largeiconsview'; var target = e.originalEvent.target; this.doOpenAction(target); }; LargeIconsView.prototype.clearSelection = function () { this.clearSelect(); this.resetMultiSelect(); this.parent.notify(events.selectionChanged, {}); }; LargeIconsView.prototype.resetMultiSelect = function () { this.multiSelect = false; removeClass([this.parent.element], CLS.MULTI_SELECT); }; LargeIconsView.prototype.doOpenAction = function (target) { var _this = this; if (isNOU(target)) { return; } var item = closest(target, '.' + CLS.LIST_ITEM); this.parent.isFile = false; if (!isNOU(item)) { this.updateType(item); var details_1 = this.getItemObject(item); if (!hasReadAccess(details_1)) { createDeniedDialog(this.parent, details_1, events.permissionRead); return; } var eventArgs = { cancel: false, fileDetails: details_1, module: 'LargeIconsView' }; this.parent.trigger('fileOpen', eventArgs, function (fileOpenArgs) { if (!fileOpenArgs.cancel) { var text = getValue('name', details_1); if (!_this.parent.isFile) { var val = _this.parent.breadcrumbbarModule.searchObj.element.value; if (val === '' && !_this.parent.isFiltered) { var id = getValue('id', details_1); _this.parent.oldPath = _this.parent.path; var newPath = _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_1)); _this.parent.itemData = [details_1]; openAction(_this.parent); } else { openSearchFolder(_this.parent, details_1); } _this.parent.isFiltered = false; _this.parent.setProperties({ selectedItems: [] }, true); } else { var icon = fileType(details_1); if (icon === CLS.ICON_IMAGE) { var imgUrl = getImageUrl(_this.parent, details_1); createImageDialog(_this.parent, text, imgUrl); } } } }); } }; LargeIconsView.prototype.updateType = function (item) { var folder = select('.' + CLS.FOLDER, item); this.parent.isFile = isNOU(folder) ? true : false; }; /* istanbul ignore next */ LargeIconsView.prototype.keydownActionHandler = function (e) { 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 */ LargeIconsView.prototype.keyActionHandler = function (e) { var _this = this; if (!this.isRendered) { return; } var fItem = this.getFocusedItem(); var firstItem = this.getFirstItem(); var lastItem = this.getLastItem(); switch (e.action) { case 'end': if (this.parent.enableVirtualization) { this.clearSelect(); this.element.firstElementChild.scrollTo(0, this.element.firstElementChild.scrollHeight); setTimeout(function () { _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(function () { _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; } }; LargeIconsView.prototype.doDownload = function () { this.updateSelectedData(); doDownload(this.parent); }; LargeIconsView.prototype.performDelete = function () { if (this.parent.selectedItems && this.parent.selectedItems.length > 0) { this.updateSelectedData(); var data = this.parent.itemData; for (var i = 0; i < data.length; i++) { if (!hasEditAccess(data[i])) { createDeniedDialog(this.parent, data[i], events.permissionEdit); return; } } createDialog(this.parent, 'Delete'); } }; LargeIconsView.prototype.performRename = function () { if (this.parent.selectedItems.length === 1) { this.updateRenameData(); doRename(this.parent); } }; LargeIconsView.prototype.updateRenameData = function () { var item = select('.' + CLS.LIST_ITEM + '.' + CLS.ACTIVE, this.element); var data = this.getItemObject(item); updateRenamingData(this.parent, data); }; LargeIconsView.prototype.getVisitedItem = function () { var item = this.parent.selectedItems[this.parent.selectedItems.length - 1]; var indexes = this.getIndexes([item], this.parent.hasId); return this.itemList[indexes[0]]; }; LargeIconsView.prototype.getFocusedItem = function () { return select('.' + CLS.LIST_ITEM + '.' + CLS.FOCUS, this.element); }; LargeIconsView.prototype.getActiveItem = function () { return select('.' + CLS.LIST_ITEM + '.' + CLS.ACTIVE, this.element); }; LargeIconsView.prototype.getFirstItem = function () { return this.itemList[0]; }; LargeIconsView.prototype.getLastItem = function () { return this.itemList[this.itemList.length - 1]; }; LargeIconsView.prototype.navigateItem = function (item) { this.setFocus(item); }; LargeIconsView.prototype.navigateDown = function (fItem, isTowards) { var nItem = this.getNextItem(fItem, isTowards, this.perRow); this.setFocus(nItem); }; LargeIconsView.prototype.navigateRight = function (fItem, isTowards) { var nItem = this.getNextItem(fItem, isTowards); this.setFocus(nItem); }; LargeIconsView.prototype.getNextItem = function (li, isTowards, perRow) { if (isNOU(li)) { return this.getFocusedItem() || this.getActiveItem() || this.getFirstItem(); } var index = this.itemList.indexOf(li); var nextItem; do { if (isTowards) { index = perRow ? index + perRow : index + 1; } else { index = perRow ? index - perRow : index - 1; } nextItem = this.itemList[index]; if (this.parent.enableVirtualization && isNOU(nextItem)) { var marginValue = parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-top'), 10) + parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-bottom'), 10); var scrollHeight = 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; }; LargeIconsView.prototype.setFocus = function (nextItem) { if (!isNOU(nextItem)) { var fileSelectionArgs = 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); }