@syncfusion/ej2-filemanager
Version:
Essential JS 2 FileManager Component
1,061 lines • 88.2 kB
JavaScript
import { Grid, Resize, ContextMenu, Sort, VirtualScroll } from '@syncfusion/ej2-grids';
import { select, KeyboardEvents, EventHandler, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
import { isNullOrUndefined as isNOU, Touch, setValue, addClass, removeClass } from '@syncfusion/ej2-base';
import { Internationalization, closest, Draggable, initializeCSPTemplate, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
import * as events from '../base/constant';
import * as CLS from '../base/classes';
import { createDialog, createImageDialog } from '../pop-up/dialog';
import { removeBlur, openAction, getImageUrl, fileType, getSortedData, getLocaleText, updateLayout } from '../common/utility';
import { createEmptyElement } from '../common/utility';
import { read, Download, GetDetails, Delete } from '../common/operations';
import { cutFiles, addBlur, openSearchFolder, copyFiles, removeActive, pasteHandler, getPathObject, getName } from '../common/index';
import { hasReadAccess, hasEditAccess, hasDownloadAccess, doRename, getAccessClass, createDeniedDialog, rename } from '../common/index';
import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getModule, getFullPath } from '../common/index';
import { getDirectoryPath, updateRenamingData, getItemName, doDeleteFiles, doDownloadFiles } from '../common/index';
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
* DetailsView module
*/
var DetailsView = /** @class */ (function () {
/**
* Constructor for the GridView module
*
* @param {FileManager} parent - specifies the parent.
* @hidden
*/
function DetailsView(parent) {
this.isInteracted = true;
this.interaction = true;
this.isPasteOperation = false;
this.isColumnRefresh = false;
this.dragObj = null;
this.startIndex = null;
this.firstItemIndex = null;
this.isSelectionUpdate = false;
this.currentSelectedItem = [];
this.count = 0;
this.isRendered = true;
this.isLoaded = false;
this.isNameWidth = false;
this.isMultiSelect = false;
this.pasteOperation = false;
this.uploadOperation = false;
Grid.Inject(Resize, ContextMenu, Sort, VirtualScroll);
this.parent = parent;
this.element = select('#' + this.parent.element.id + CLS.GRID_ID, this.parent.element);
this.addEventListener();
this.keyConfigs = {
altEnter: 'alt+enter',
esc: 'escape',
tab: 'tab',
moveDown: 'downarrow',
ctrlEnd: 'ctrl+end',
ctrlHome: 'ctrl+home',
ctrlDown: 'ctrl+downarrow',
ctrlLeft: 'ctrl+leftarrow',
ctrlRight: 'ctrl+rightarrow',
shiftEnd: 'shift+end',
shiftHome: 'shift+home',
shiftDown: 'shift+downarrow',
shiftUp: 'shift+uparrow',
ctrlUp: 'ctrl+uparrow',
csEnd: 'ctrl+shift+end',
csHome: 'ctrl+shift+home',
csDown: 'ctrl+shift+downarrow',
csUp: 'ctrl+shift+uparrow',
space: 'space',
ctrlSpace: 'ctrl+space',
shiftSpace: 'shift+space',
csSpace: 'ctrl+shift+space',
end: 'end',
home: 'home',
moveUp: 'uparrow',
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',
ctrlShiftN: 'ctrl+shift+n',
shiftdel: 'shift+delete',
ctrlD: 'ctrl+d',
f2: 'f2',
ctrlA: 'ctrl+a',
enter: 'enter',
back: 'backspace'
};
}
/* istanbul ignore next */
DetailsView.prototype.render = function (args) {
var _this = this;
if (this.parent.enablePersistence) {
var gridPersistenceValue = window.localStorage.getItem('grid' + this.parent.element.id + '_grid');
if (!isNOU(gridPersistenceValue)) {
var model = JSON.parse(gridPersistenceValue);
if (!isNOU(model) && Object.keys(model).length > 0 && 'sortSettings' in model) {
delete model.sortSettings;
window.localStorage.setItem('grid' + this.parent.element.id + '_grid', JSON.stringify(model));
}
}
}
showSpinner(this.parent.element);
if (this.parent.view === 'Details') {
removeClass([this.parent.element], CLS.MULTI_SELECT);
var items = getSortedData(this.parent, args.files);
this.checkNameWidth();
var columns = this.getColumns();
var sortSettings = void 0;
var isValidSortField = !isNullOrUndefined(columns) &&
columns.findIndex(function (col) { return col.field === _this.parent.sortBy; }) !== -1;
if (this.parent.isMobile || !isValidSortField) {
sortSettings = [];
}
else {
if (this.parent.sortOrder !== 'None') {
sortSettings = [{ direction: this.parent.sortOrder, field: this.parent.sortBy }];
}
}
this.gridObj = new Grid({
dataSource: items,
allowSorting: true,
rowSelecting: this.onSelection.bind(this, 'select'),
rowDeselecting: this.onSelection.bind(this, 'unselect'),
rowSelected: this.onSelected.bind(this),
rowDeselected: this.onDeSelection.bind(this),
allowResizing: this.parent.detailsViewSettings.columnResizing,
selectionSettings: {
type: this.parent.allowMultiSelection ? 'Multiple' : 'Single',
checkboxMode: 'ResetOnRowClick'
},
enableRtl: this.parent.enableRtl,
pageSettings: { pageSize: 20 },
enableVirtualization: this.parent.enableVirtualization,
enablePersistence: this.parent.enablePersistence,
enableVirtualMaskRow: true,
sortSettings: { allowUnsort: false, columns: sortSettings },
columns: columns,
recordDoubleClick: this.DblClickEvents.bind(this),
beforeDataBound: this.onBeforeDataBound.bind(this),
dataBound: this.onDataBound.bind(this),
rowDataBound: this.onRowDataBound.bind(this),
actionBegin: this.onActionBegin.bind(this),
headerCellInfo: this.onHeaderCellInfo.bind(this),
width: '100%',
height: (this.parent.enableVirtualization) ? this.getGridHeight() : 'auto',
beforeCopy: function (args) { args.cancel = true; },
load: function () {
this.focusModule.destroy();
},
locale: this.parent.locale
});
if (this.parent.isReact) {
this.gridObj.isReact = true;
this.gridObj.portals = [];
this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
}
this.gridObj.isStringTemplate = true;
this.gridObj.appendTo('#' + this.parent.element.id + CLS.GRID_ID);
if (this.parent.selectedItems.length !== 0 && this.parent.enableVirtualization && this.parent.enablePersistence) {
this.isLoaded = true;
}
this.wireEvents();
this.adjustHeight();
this.emptyArgs = args;
}
};
DetailsView.prototype.reactTemplateRender = function (args) {
this.parent['portals'] = args;
if (this.parent.portals && this.parent.toolbarModule && this.parent.toolbarModule.toolbarObj &&
this.parent.toolbarModule.toolbarObj.portals) {
this.parent['portals'] = this.parent['portals'].concat(this.parent.toolbarModule.toolbarObj.portals);
}
this.parent.notify('renderReactTemplate', this.parent['portals']);
this.parent['renderReactTemplates']();
};
/**
* Gets the grid height.
*
* @returns {number} - The grid height.
* @private
*/
DetailsView.prototype.getGridHeight = function () {
// Get the content pane and breadcrumb bar elements
var pane = select('#' + this.parent.element.id + CLS.CONTENT_ID, this.parent.element);
var bar = select('#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID, this.parent.element);
// The maximum height of the header is 36
var headerMaxHeight = 36;
// Calculate and return the grid height
return (pane.offsetHeight - bar.offsetHeight - headerMaxHeight);
};
DetailsView.prototype.checkNameWidth = function () {
var initialColumn = this.parent.detailsViewSettings.columns;
this.isNameWidth = false;
for (var i = 0; i < initialColumn.length; i++) {
if (initialColumn[i].field === 'name') {
this.isNameWidth = !isNOU(initialColumn[i].width);
return;
}
}
};
DetailsView.prototype.adjustWidth = function (columns, fieldName) {
if (this.isNameWidth && (fieldName === 'name')) {
return;
}
for (var i = 0; i < columns.length; i++) {
if (columns[i].field === fieldName) {
var nameWidth = void 0;
if (this.parent.breadcrumbbarModule.searchObj.element.value === '' && !this.parent.isFiltered) {
nameWidth = (this.element.clientWidth <= 500) ? '120px' : 'auto';
}
else {
nameWidth = (this.element.clientWidth <= 680) ? ((fieldName === 'name') ? '120px' : '180px') : 'auto';
}
columns[i].width = nameWidth;
}
}
};
DetailsView.prototype.getColumns = function () {
var columns;
var enableHtmlSanitizer = this.parent.enableHtmlSanitizer;
if (this.parent.isMobile) {
columns = [
{
field: 'name', headerText: getLocaleText(this.parent, 'Name'), width: 'auto', minWidth: 120, headerTextAlign: 'Left',
template: initializeCSPTemplate(function (data) {
var name = enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(data.name) : data.name;
return "<div class=\"e-fe-text\">" + name + "</div><div class=\"e-fe-date\">" + data._fm_modified + "</div><span class=\"e-fe-size\">" + data.size + "</span>";
})
}
];
}
else {
columns = extend([], this.parent.detailsViewSettings.columns, null, true);
this.adjustWidth(columns, 'name');
var _loop_1 = function (i, len) {
columns[i].headerText = getLocaleText(this_1.parent, columns[i].headerText);
if (columns[i].field === 'name' && !isNOU(columns[i].template) && !(typeof columns[i].template === 'function')) {
var template_1 = columns[i].template;
columns[i].template = initializeCSPTemplate(function (data) {
var name = enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(data.name) : data.name;
return template_1.replace(/\${name}/g, name);
});
}
};
var this_1 = this;
for (var i = 0, len = columns.length; i < len; i++) {
_loop_1(i, len);
}
}
var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
var icon = {
field: 'type', width: iWidth, minWidth: iWidth,
template: initializeCSPTemplate(function (data) {
return "<span class=\"e-fe-icon " + data._fm_iconClass + "\"></span>";
}), allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
headerTemplate: initializeCSPTemplate(function () {
return '<span class=\'e-fe-icon e-fe-folder\'></span>';
})
};
columns.unshift(icon);
if (this.parent.showItemCheckBoxes) {
var cWidth = (this.parent.isBigger ? '36' : '26');
var cBox = {
type: 'checkbox', width: cWidth, minWidth: cWidth, customAttributes: { class: 'e-fe-checkbox' },
allowResizing: false, allowSorting: false
};
if (this.parent.isMobile) {
columns.push(cBox);
}
else {
columns.unshift(cBox);
}
}
for (var i = 0, len = columns.length; i < len; i++) {
columns[i].disableHtmlEncode = !this.parent.enableHtmlSanitizer;
}
if (this.parent.enableRangeSelection) {
var HiddenName = { field: 'name', visible: false, customAttributes: { class: 'e-drag-text' } };
columns.push(HiddenName);
}
return columns;
};
DetailsView.prototype.adjustHeight = function () {
if (!this.gridObj) {
return;
}
var pane = select('#' + this.parent.element.id + CLS.CONTENT_ID, this.parent.element);
var bar = select('#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID, this.parent.element);
var gridHeader = select('.' + CLS.GRID_HEADER, this.parent.element);
var height = (pane.offsetHeight - bar.offsetHeight - gridHeader.offsetHeight);
this.gridObj.height = height;
this.gridObj.dataBind();
};
DetailsView.prototype.renderCheckBox = function () {
this.gridObj.columns = this.getColumns();
this.isColumnRefresh = true;
this.gridObj.refreshColumns();
};
DetailsView.prototype.onRowDataBound = function (args) {
var td = select('.e-fe-grid-name', args.row);
if (!td) {
var columns = this.parent.detailsViewSettings.columns;
for (var i = 0; i < columns.length; i++) {
if (columns[i].field === 'name') {
td = args.row.children[this.parent.allowMultiSelection ? (i + 2) : (i + 1)];
break;
}
}
}
if (td) {
td.setAttribute('title', getValue('name', args.data));
}
if (this.parent.isLayoutChange && this.parent.isCut && this.parent.fileAction === 'move' &&
this.parent.selectedNodes && this.parent.selectedNodes.length !== 0) {
if (this.parent.selectedNodes.indexOf(getValue('name', args.data)) !== -1) {
addBlur(args.row);
}
}
if (!this.parent.showFileExtension && getValue('isFile', args.data)) {
var text = getValue('name', args.data);
var textEle = args.row.querySelector('[title= "' + text + '"]');
if (textEle) {
var name_1 = getValue('name', args.data);
var type = getValue('type', args.data);
if (name_1.indexOf(type) !== -1) {
textEle.innerHTML = name_1.substr(0, name_1.length - type.length);
}
}
}
if (getValue('size', args.data) !== undefined && args.row.querySelector('.e-fe-size')) {
var sizeEle = args.row.querySelector('.e-fe-size');
var modifiedSize = void 0;
if (!getValue('isFile', args.data)) {
modifiedSize = '';
}
else {
var sizeValue = getValue('size', args.data);
var intl = new Internationalization(this.parent.locale);
var sizeFormat = void 0;
var columns = this.parent.detailsViewSettings.columns;
for (var i = 0; i < columns.length; i++) {
if (columns[i].field === 'size') {
sizeFormat = !isNullOrUndefined(columns[i].format) ? columns[i].format.toString() : 'n';
break;
}
}
var value = intl.formatNumber((sizeValue / 1024), { format: sizeFormat });
modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
}
sizeEle.innerHTML = modifiedSize;
}
if (this.parent.isMobile) {
if (getValue('_fm_modified', args.data) !== undefined && args.row.querySelector('.e-fe-date')) {
var dateEle = args.row.querySelector('.e-fe-date');
var intl = new Internationalization(this.parent.locale);
var columns = this.parent.detailsViewSettings.columns;
var format = void 0;
for (var i = 0; i < columns.length; i++) {
if (columns[i].field === 'dateModified') {
format = columns[i].format;
break;
}
}
var formattedString = intl.formatDate(new Date(getValue('_fm_modified', args.data)), format);
dateEle.innerHTML = formattedString;
}
}
var checkWrap = args.row.querySelector('.' + CLS.CB_WRAP);
if (checkWrap) {
checkWrap.classList.add('e-small');
}
if (!hasEditAccess(args.data)) {
args.row.className += ' ' + getAccessClass(args.data);
}
var eventArgs = {
element: args.row,
fileDetails: args.data,
module: 'DetailsView'
};
this.parent.trigger('fileLoad', eventArgs);
};
DetailsView.prototype.onActionBegin = function (args) {
if (args.requestType === 'sorting') {
this.parent.setProperties({ sortOrder: args.direction }, true);
this.parent.setProperties({ sortBy: args.columnName }, true);
if (this.parent.selectedItems.length !== 0) {
this.sortItem = true;
var rows = this.gridObj.getSelectedRowIndexes();
var len = rows.length;
this.sortSelectedNodes = [];
while (len > 0) {
var data = this.gridObj.getRowsObject()[rows[len - 1]].data;
this.sortSelectedNodes.push(getValue(this.parent.hasId ? 'id' : 'name', data));
len--;
}
}
this.parent.notify(events.sortByChange, {});
}
};
DetailsView.prototype.onHeaderCellInfo = function (args) {
var checkWrap = args.node.querySelector('.' + CLS.CB_WRAP);
if (checkWrap) {
checkWrap.classList.add('e-small');
}
};
DetailsView.prototype.onBeforeDataBound = function (args) {
var _this = this;
showSpinner(this.parent.element);
var nameColumn = this.parent.detailsViewSettings.columns.find(function (column) { return column.field === _this.parent.sortBy; });
if (nameColumn && !('sortComparer' in nameColumn)) {
var items = getSortedData(this.parent, (this.parent.enableVirtualization)
? args.result
: this.gridObj.dataSource);
args.result = items;
}
};
/* istanbul ignore next */
DetailsView.prototype.onDataBound = function () {
this.createDragObj();
if ((this.parent.selectedItems.length !== 0 && !this.parent.enableVirtualization) || this.isLoaded) {
this.selectRecords(this.parent.selectedItems);
}
if (this.isPasteOperation === true && (!isNullOrUndefined(this.gridObj.getDataRows()) && this.gridObj.getDataRows().length > 0)) {
if (!this.isColumnRefresh) {
this.selectRecords(this.parent.pasteNodes);
this.isPasteOperation = false;
}
else {
this.isColumnRefresh = false;
}
}
if (this.parent.createdItem) {
this.selectRecords([getValue(this.parent.hasId ? 'id' : 'name', this.parent.createdItem)]);
this.parent.createdItem = null;
}
if (this.parent.layoutSelectedItems.length) {
this.selectRecords(this.parent.layoutSelectedItems);
}
if (this.parent.renamedItem) {
this.addSelection(this.parent.renamedItem);
this.parent.renamedItem = null;
}
if (this.sortItem === true) {
this.selectRecords(this.sortSelectedNodes);
this.sortItem = false;
}
if (this.isSelectionUpdate) {
if (!this.isColumnRefresh) {
this.selectRecords(this.currentSelectedItem);
this.isSelectionUpdate = false;
}
else {
this.isColumnRefresh = false;
}
}
if (this.uploadOperation === true) {
this.count++;
this.selectRecords(this.parent.uploadItem);
if (this.count === this.parent.uploadItem.length) {
this.uploadOperation = false;
this.parent.uploadItem = [];
}
}
if (this.gridObj.currentViewData.length * this.gridObj.getRowHeight() < this.gridObj.height) {
var hdTable = this.gridObj.getHeaderContent();
hdTable.style.paddingRight = '';
hdTable.style.paddingLeft = '';
var hdContent = select('.e-headercontent', hdTable);
hdContent.style.borderRightWidth = '0';
var cnTable = this.gridObj.getContent().querySelector('.e-content');
cnTable.style.overflowY = '';
cnTable.classList.add('e-scrollShow');
}
else {
var hdTable = this.gridObj.getHeaderContent();
if (!this.parent.enableRtl) {
hdTable.style.paddingRight = '16px';
}
else {
hdTable.style.paddingLeft = '16px';
}
var cnTable = this.gridObj.getContent().querySelector('.e-content');
cnTable.classList.remove('e-scrollShow');
}
this.isRendered = true;
this.parent.isLayoutChange = false;
hideSpinner(this.parent.element);
this.checkEmptyDiv(this.emptyArgs);
this.isInteracted = this.isLoaded ? true : this.isInteracted;
this.isLoaded = false;
};
DetailsView.prototype.selectRecords = function (nodes) {
var gridRecords = this.gridObj.getCurrentViewRecords();
var sRecords = [];
for (var i = 0, len = gridRecords.length; i < len; i++) {
var node = this.parent.hasId ? getValue('id', gridRecords[i]) : getName(this.parent, gridRecords[i]);
if (nodes.indexOf(node) !== -1) {
sRecords.push(i);
}
else if (!this.parent.showFileExtension && !this.parent.hasId && node.includes('.')) {
var Str2 = node.split('.').slice(0, -1).join('.');
if (nodes.indexOf(Str2) !== -1) {
sRecords.push(i);
}
}
}
if (sRecords.length !== 0) {
this.gridObj.selectRows(sRecords);
this.addFocus(this.gridObj.selectedRowIndex);
}
};
DetailsView.prototype.addSelection = function (data) {
var items = this.gridObj.getCurrentViewRecords();
var rData = [];
if (this.parent.hasId) {
rData = new DataManager(items).
executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
}
else {
var nData = new DataManager(items).
executeLocal(new Query().where('name', 'equal', getValue('name', data), false));
if (nData.length > 0) {
rData = new DataManager(nData).
executeLocal(new Query().where('filterPath', 'equal', this.parent.filterPath, false));
}
}
if (rData.length > 0) {
var index = items.indexOf(rData[0]);
this.gridObj.selectRows([index]);
}
};
DetailsView.prototype.onSortColumn = function () {
if (this.parent.sortOrder !== 'None') {
this.gridObj.sortModule.sortColumn(this.parent.sortBy, this.parent.sortOrder);
}
else {
this.gridObj.dataSource = getSortedData(this.parent, this.gridObj.dataSource);
}
if (this.element.querySelector('.e-content').scrollTop !== 0) {
this.gridObj.freezeRefresh();
}
};
DetailsView.prototype.onPropertyChanged = function (e) {
if (e.module !== this.getModuleName() && e.module !== 'common') {
/* istanbul ignore next */
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 'height':
this.adjustHeight();
break;
case 'detailsViewSettings':
if (!isNullOrUndefined(this.gridObj)) {
this.checkNameWidth();
var columns = this.getColumns();
this.gridObj.columns = columns;
this.gridObj.allowResizing = this.parent.detailsViewSettings.columnResizing;
this.gridObj.dataBind();
this.gridObj.refreshColumns();
}
break;
case 'selectedItems':
this.interaction = false;
if (this.parent.selectedItems.length !== 0) {
if (!this.parent.allowMultiSelection) {
var slItems = this.parent.selectedItems.slice(this.parent.selectedItems.length - 1);
this.parent.setProperties({ selectedItems: slItems }, true);
}
this.selectRecords(this.parent.selectedItems);
this.parent.setProperties({ selectedItems: this.parent.selectedItems }, true);
}
else if (!isNOU(this.gridObj)) {
this.gridObj.clearSelection();
this.interaction = true;
}
break;
case 'showFileExtension':
read(this.parent, events.pathChanged, this.parent.path);
break;
case 'showHiddenItems':
read(this.parent, events.pathChanged, this.parent.path);
break;
case 'showItemCheckBoxes':
case 'allowMultiSelection':
if (!isNullOrUndefined(this.gridObj)) {
this.currentSelectedItem = this.parent.selectedItems;
this.gridObj.selectionSettings.type = e.newProp.allowMultiSelection ? 'Multiple' : 'Single';
this.isSelectionUpdate = true;
this.renderCheckBox();
}
break;
case 'view':
updateLayout(this.parent, 'Details');
break;
case 'width':
this.onDetailsResize();
}
}
};
DetailsView.prototype.onPathChanged = function (args) {
this.parent.isCut = false;
var pathField = this.parent.detailsViewSettings.columns.find(function (column) { return column.field === 'filterPath'; });
if ((this.parent.breadcrumbbarModule.searchObj.element.value.trim() === '' && this.gridObj) ||
(!isNullOrUndefined(pathField) && !isNullOrUndefined(pathField.hideAtMedia) && pathField.hideAtMedia !== '')) {
this.parent.searchedItems = [];
if (!this.parent.isFiltered) {
this.removePathColumn(false);
}
else {
this.updatePathColumn();
}
}
removeBlur(this.parent);
if (this.parent.view === 'Details') {
/* istanbul ignore next */
this.isInteracted = false;
showSpinner(this.parent.element);
this.parent.setProperties({ selectedItems: [] }, true);
this.gridObj.dataSource = getSortedData(this.parent, args.files);
this.gridObj.freezeRefresh();
if (this.parent.isReact) {
this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
}
this.wireClickEvent(true);
}
this.emptyArgs = args;
};
DetailsView.prototype.updatePathColumn = function () {
var len = this.gridObj.columns.length;
var columnData = JSON.parse(JSON.stringify(this.gridObj.columns));
if (columnData[len - 1].field && columnData[len - 1].field !== 'filterPath' && !this.parent.isMobile) {
var pathColumn = {
field: 'filterPath', headerText: getLocaleText(this.parent, 'Path'), minWidth: 180, width: 'auto'
};
this.gridObj.columns.push(pathColumn);
this.adjustWidth(this.gridObj.columns, 'filterPath');
this.adjustWidth(this.gridObj.columns, 'name');
this.isColumnRefresh = true;
this.gridObj.refreshColumns();
}
};
DetailsView.prototype.checkEmptyDiv = function (args) {
var items = getSortedData(this.parent, args.files);
if (items.length === 0 && !isNOU(this.element.querySelector('.' + CLS.GRID_VIEW))) {
createEmptyElement(this.parent, this.element, args);
}
else if (items.length !== 0 && this.element.querySelector('.' + CLS.EMPTY)) {
if (this.element.querySelector('.' + CLS.GRID_VIEW).querySelector('.' + CLS.EMPTY)) {
var emptyDiv = this.element.querySelector('.' + CLS.GRID_VIEW).querySelector('.' + CLS.EMPTY);
this.element.querySelector('.' + CLS.GRID_VIEW).removeChild(emptyDiv);
}
else {
this.element.removeChild(this.element.querySelector('.' + CLS.EMPTY));
}
}
};
DetailsView.prototype.onOpenInit = function () {
if (this.parent.activeModule === 'detailsview') {
var data = this.gridObj.getSelectedRecords()[0];
this.openContent(data);
}
};
DetailsView.prototype.DblClickEvents = function (args) {
this.gridObj.selectRows([args.rowIndex]);
var data;
if (args.rowData) {
data = JSON.parse(JSON.stringify(args.rowData));
this.openContent(data);
}
};
DetailsView.prototype.openContent = function (data) {
var _this = this;
if (!hasReadAccess(data)) {
createDeniedDialog(this.parent, data, events.permissionRead);
return;
}
var eventArgs = { cancel: false, fileDetails: data, module: 'DetailsView' };
this.parent.trigger('fileOpen', eventArgs, function (fileOpenArgs) {
if (!fileOpenArgs.cancel) {
var name_2 = getValue('name', data);
if (getValue('isFile', data)) {
var icon = fileType(data);
if (icon === CLS.ICON_IMAGE) {
var imgUrl = getImageUrl(_this.parent, data);
createImageDialog(_this.parent, name_2, imgUrl);
}
}
else {
var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
if (val === '' && !_this.parent.isFiltered) {
var id = getValue('id', data);
_this.parent.oldPath = _this.parent.path;
var newPath = _this.parent.path + (isNOU(id) ? name_2 : id) + '/';
_this.parent.setProperties({ path: newPath }, true);
_this.parent.pathNames.push(name_2);
_this.parent.pathId.push(getValue('_fm_id', data));
_this.parent.itemData = [data];
openAction(_this.parent);
}
else {
openSearchFolder(_this.parent, data);
}
_this.parent.isFiltered = false;
}
_this.element.focus();
if (_this.parent.enableVirtualization) {
_this.parent.element.querySelector('#' + _this.parent.element.id + CLS.IMG_DIALOG_ID).focus();
}
}
});
};
/* istanbul ignore next */
DetailsView.prototype.onLayoutChange = function (args) {
if (this.parent.view === 'Details') {
if (this.parent.enableVirtualization) {
this.parent.setProperties({ selectedItems: [] }, true);
}
if (!this.gridObj) {
this.render(args);
}
else {
this.isLoaded = true;
}
if (this.parent.isFiltered) {
this.updatePathColumn();
this.parent.setProperties({ selectedItems: [] }, true);
}
this.gridObj.dataSource = getSortedData(this.parent, args.files);
this.parent.notify(events.hideLayout, {});
this.gridObj.element.classList.remove(CLS.DISPLAY_NONE);
this.isInteracted = false;
this.gridObj.clearSelection();
if (this.parent.breadcrumbbarModule.searchObj.element.value.trim() !== '') {
this.onSearchFiles(args);
}
this.adjustHeight();
if (this.gridObj.sortSettings.columns.length > 0 && this.gridObj.sortSettings.columns[0].field !== this.parent.sortBy) {
if (this.parent.sortOrder !== 'None') {
this.gridObj.sortColumn(this.parent.sortBy, this.parent.sortOrder);
}
}
}
};
/* istanbul ignore next */
DetailsView.prototype.onSearchFiles = function (args) {
if (this.parent.view === 'Details') {
this.parent.setProperties({ selectedItems: [] }, true);
this.parent.notify(events.selectionChanged, {});
if (!this.parent.isLayoutChange) {
this.parent.layoutSelectedItems = [];
}
this.updatePathColumn();
this.parent.searchedItems = args.files;
this.onPathChanged(args);
}
};
DetailsView.prototype.removePathColumn = function (isRefresh) {
var len = this.gridObj.columns.length;
var columnData = JSON.parse(JSON.stringify(this.gridObj.columns));
var filterPathInSettings = this.parent.detailsViewSettings.columns.some(function (col) { return col.field === 'filterPath'; });
if (columnData[len - 1].field && (columnData[len - 1].field === 'filterPath') && !filterPathInSettings) {
/* istanbul ignore next */
if (!isNullOrUndefined(this.gridObj.sortSettings.columns[0]) && this.gridObj.sortSettings.columns[0].field === 'filterPath') {
if (this.parent.sortOrder !== 'None') {
this.gridObj.sortColumn('name', this.parent.sortOrder);
}
else {
this.gridObj.dataSource = getSortedData(this.parent, this.gridObj.dataSource);
}
this.parent.notify(events.sortByChange, {});
}
this.gridObj.columns.pop();
if (!isRefresh) {
this.isColumnRefresh = true;
this.gridObj.refreshColumns();
}
}
};
DetailsView.prototype.onFinalizeEnd = function (args) {
if (this.parent.view !== 'Details') {
return;
}
if (!this.gridObj) {
this.render(args);
}
else {
this.onPathChanged(args);
}
};
DetailsView.prototype.onCreateEnd = function (args) {
if (this.parent.view !== 'Details') {
return;
}
this.onPathChanged(args);
};
DetailsView.prototype.onRenameInit = function () {
if (this.parent.activeModule === 'detailsview' && this.parent.selectedItems.length === 1) {
this.updateRenameData();
}
};
DetailsView.prototype.onSelectedData = function () {
if (this.parent.activeModule === 'detailsview') {
this.parent.itemData = this.gridObj.getSelectedRecords();
}
};
DetailsView.prototype.onDeleteInit = function () {
if (this.parent.activeModule === 'detailsview') {
Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete');
}
};
/* istanbul ignore next */
DetailsView.prototype.onDeleteEnd = function (args) {
if (this.parent.view !== 'Details') {
return;
}
this.onPathChanged(args);
this.parent.setProperties({ selectedItems: [] }, true);
};
DetailsView.prototype.onRefreshEnd = function (args) {
if (this.parent.view !== 'Details') {
return;
}
this.isInteracted = false;
this.removePathColumn(false);
this.gridObj.dataSource = getSortedData(this.parent, args.files);
this.emptyArgs = args;
};
DetailsView.prototype.onHideLayout = function () {
if (this.parent.view !== 'Details' && this.gridObj) {
this.gridObj.element.classList.add(CLS.DISPLAY_NONE);
}
};
DetailsView.prototype.onSelectAllInit = function () {
if (this.parent.view === 'Details') {
this.isInteracted = false;
if (this.parent.allowMultiSelection) {
this.gridObj.selectionModule.selectRowsByRange(0, this.gridObj.getRows().length);
}
else {
this.gridObj.selectRow(this.gridObj.getRows().length - 1);
}
this.isInteracted = true;
this.interaction = true;
}
};
DetailsView.prototype.onClearAllInit = function () {
if (this.parent.view === 'Details') {
this.removeSelection();
this.interaction = true;
}
};
/* istanbul ignore next */
DetailsView.prototype.onSelectionChanged = function () {
removeClass([this.element], CLS.HEADER_CHECK);
if (this.parent.selectedItems.length > 0) {
addClass([this.element], CLS.HEADER_CHECK);
}
};
DetailsView.prototype.onLayoutRefresh = function () {
if (this.parent.view !== 'Details') {
return;
}
this.adjustHeight();
};
DetailsView.prototype.onBeforeRequest = function () {
this.isRendered = false;
};
DetailsView.prototype.onAfterRequest = function () {
this.isRendered = true;
};
DetailsView.prototype.onUpdateSelectionData = function () {
if (this.parent.view !== 'Details') {
return;
}
this.parent.itemData = this.gridObj.getSelectedRecords();
};
DetailsView.prototype.addEventListener = function () {
this.parent.on(events.finalizeEnd, this.onFinalizeEnd, this);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on(events.layoutChange, this.onLayoutChange, this);
this.parent.on(events.pathChanged, this.onPathChanged, this);
this.parent.on(events.createEnd, this.onCreateEnd, this);
this.parent.on(events.dropInit, this.onDropInit, this);
this.parent.on(events.detailsInit, this.onDetailsInit, this);
this.parent.on(events.refreshEnd, this.onRefreshEnd, this);
this.parent.on(events.search, this.onSearchFiles, this);
this.parent.on(events.methodCall, this.onMethodCall, this);
this.parent.on(events.actionFailure, this.onActionFailure, this);
this.parent.on(events.modelChanged, this.onPropertyChanged, this);
this.parent.on(events.deleteInit, this.onDeleteInit, this);
this.parent.on(events.deleteEnd, this.onDeleteEnd, this);
this.parent.on(events.selectedData, this.onSelectedData, this);
this.parent.on(events.renameInit, this.onRenameInit, this);
this.parent.on(events.renameEnd, this.onPathChanged, this);
this.parent.on(events.openInit, this.onOpenInit, this);
this.parent.on(events.sortColumn, this.onSortColumn, this);
this.parent.on(events.openEnd, this.onPathChanged, this);
this.parent.on(events.filterEnd, this.onPathChanged, this);
this.parent.on(events.pasteInit, this.onPasteInit, 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.pathColumn, this.onPathColumn, this);
this.parent.on(events.selectionChanged, this.onSelectionChanged, this);
this.parent.on(events.beforeRequest, this.onBeforeRequest, this);
this.parent.on(events.afterRequest, this.onAfterRequest, this);
this.parent.on(events.pasteEnd, this.onpasteEnd, this);
this.parent.on(events.cutCopyInit, this.oncutCopyInit, this);
this.parent.on(events.menuItemData, this.onMenuItemData, this);
this.parent.on(events.resizeEnd, this.onDetailsResizeHandler, this);
this.parent.on(events.splitterResize, this.onDetailsResize, 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);
};
DetailsView.prototype.removeEventListener = function () {
this.parent.off(events.finalizeEnd, this.onFinalizeEnd);
this.parent.off(events.destroy, this.destroy);
this.parent.off(events.layoutChange, this.onLayoutChange);
this.parent.off(events.pathChanged, this.onPathChanged);
this.parent.off(events.pasteInit, this.onPasteInit);
this.parent.off(events.createEnd, this.onCreateEnd);
this.parent.off(events.refreshEnd, this.onRefreshEnd);
this.parent.off(events.search, this.onSearchFiles);
this.parent.off(events.methodCall, this.onMethodCall);
this.parent.off(events.actionFailure, this.onActionFailure);
this.parent.off(events.modelChanged, this.onPropertyChanged);
this.parent.off(events.renameInit, this.onRenameInit);
this.parent.off(events.renameEnd, this.onPathChanged);
this.parent.off(events.filterEnd, this.onPathChanged);
this.parent.off(events.openInit, this.onOpenInit);
this.parent.off(events.sortColumn, this.onSortColumn);
this.parent.off(events.openEnd, 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.deleteInit, this.onDeleteInit);
this.parent.off(events.deleteEnd, this.onDeleteEnd);
this.parent.off(events.pathColumn, this.onPathColumn);
this.parent.off(events.selectionChanged, this.onSelectionChanged);
this.parent.off(events.beforeRequest, this.onBeforeRequest);
this.parent.off(events.afterRequest, this.onAfterRequest);
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.selectedData, this.onSelectedData);
this.parent.off(events.detailsInit, this.onDetailsInit);
this.parent.off(events.menuItemData, this.onMenuItemData);
this.parent.off(events.resizeEnd, this.onDetailsResizeHandler);
this.parent.off(events.splitterResize, this.onDetailsResize);
this.parent.off(events.layoutRefresh, this.onLayoutRefresh);
this.parent.off(events.dropPath, this.onDropPath);
this.parent.off(events.updateSelectionData, this.onUpdateSelectionData);
};
DetailsView.prototype.onActionFailure = function () { this.interaction = true; };
DetailsView.prototype.onMenuItemData = function (args) {
if (this.parent.activeModule === this.getModuleName()) {
this.parent.itemData = [this.gridObj.getRowInfo(args.target).rowData];
}
};
DetailsView.prototype.onPasteInit = function () {
if (this.parent.activeModule === this.getModuleName()) {
this.parent.itemData = (this.parent.folderPath !== '') ? this.gridObj.getSelectedRecords() :
[getPathObject(this.parent)];
}
};
DetailsView.prototype.onDetailsInit = function () {
if (this.parent.activeModule === this.getModuleName()) {
if (this.parent.selectedItems.length !== 0) {
this.parent.itemData = this.gridObj.getSelectedRecords();
}
else {
this.parent.itemData = [getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent)];
}
}
};
DetailsView.prototype.dragHelper = function (args) {
var dragTarget = args.sender.target;
var dragLi = dragTarget.closest('tr.e-row');
if (!dragLi) {
return null;
}
var name;
if (dragLi.getElementsByClassName('e-fe-text')[0]) {
name = this.parent.hasId ? this.gridObj.getRowInfo(dragLi).rowData.id : dragLi.getElementsByClassName('e-fe-text')[0].innerText;
}
else if (dragLi.getElementsByClassName('e-rowcell e-templatecell')[0].nextElementSibling) {
name = this.parent.hasId ? this.gridObj.getRowInfo(dragLi).rowData.id : dragLi.getElementsByClassName('e-rowcell e-templatecell')[0].nextElementSibling.innerText;
}
if (dragLi && !dragLi.querySelector('.e-active')) {
this.selectRecords([name]);
}
getModule(this.parent, dragLi);
this.parent.activeElements = [];
this.parent.dragData = [];
this.parent.dragData = this.gridObj.getSelectedRecords();
var dragRow;
if (this.parent.dragData.length === 0 && dragLi) {
dragRow = this.gridObj.getRowInfo(dragLi);
}
if (dragRow) {
this.parent.dragData.push(dragRow.rowData);
}
this.parent.dragPath = this.parent.path;
this.parent.activeElements = this.gridObj.getSelectedRows();
createVirtualDragElement(this.parent);
return this.parent.virtualDragElement;
};
/* istanbul ignore next */
DetailsView.prototype.onDetailsResize = function () {
if (this.parent.view === 'Details' && !this.parent.isMobile && !isNOU(this.gridObj)) {
var gridHeader = this.gridObj.getHeaderContent().querySelector('.e-headercontent');
var gridHeaderColGroup = gridHeader.firstChild.childNodes[0];
var gridContentColGroup = this.gridObj.getContent().querySelector('.e-content .e-table').children[0];
var gridHeaderColNames = this.gridObj.getColumns();
for (var i = 0; i < gridHeaderColNames.length; i++) {
if ((!this.isNameWidth && gridHeaderColNames[i].field === 'name') || gridHeaderColNames[i].field === 'filterPath') {
if (this.parent.breadcrumbbarModule.searchObj.element.value === '' && !this.parent.isFiltered) {
if (this.element.clientWidth <= 500) {
gridHeaderColGroup.children[i].style.width = '120px';
gridContentColGroup.children[i].style.width = '120px';
}
else if (this.element.clientWidth > 500) {
gridHeaderColGroup.children[i].style.width = 'auto';
gridContentColGroup.children[i].style.width = 'auto';
}
}
else {
if (this.element.clientWidth <= 680) {
if (gridHeaderColNames[i].field === 'name') {
gridHeaderColGroup.children[i].style.width = '120px';
gridContentColGroup.children[i].style.width = '120px';
}
else {
gridHeaderColGroup.children[i].style.width = '180px';
gridContentColGroup.children[i].style.width = '180px';
}
}
else if (this.element.clientWidth > 680) {
gridHeaderColGroup.children[i].style.width = 'auto';
gridContentColGroup.children[i].style.width = 'auto';
}
}
}
}
}
};
DetailsView.prototype.onDetailsResizeHandler = function () {
this.onDetailsResize();
if (this.parent.view === 'Details' && !this.parent.isMobile && !isNOU(this.gridObj)) {
this.adjustHeight();
}
};
DetailsView.prototype.createDragObj = function () {
var _this = this;
if (this.gridObj) {
if (this.parent.allowDragAndDrop && isNullOrUndefined(th