@syncfusion/ej2-filemanager 20.1.47 → 20.1.52-10459

package/src/file-manager/base/file-manager.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, isNullOrUndefined, L10n, closest } from '@syncfusion/ej2-base';
+import { Component, isNullOrUndefined, L10n, closest, Collection, detach, selectAll, setStyleAttribute } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';
 import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents } from '@syncfusion/ej2-base';
@@ -26,6 +26,7 @@ import { Splitter } from '@syncfusion/ej2-layouts';
 import { Dialog, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { createDialog, createExtDialog } from '../pop-up/dialog';
 import { ToolbarSettings, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';
+import { ToolbarItem } from '../models/index';
 import { SearchSettings } from '../models/index';
 import { LargeIconsView } from '../layout/large-icons-view';
 import { Uploader } from '@syncfusion/ej2-inputs';
@@ -34,7 +35,7 @@ import * as events from './constant';
 import * as CLS from './classes';
 import { read, filter, createFolder } from '../common/operations';
 import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';
-import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';
+import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem, closePopup } from '../common/utility';
 import { ContextMenuSettings } from '../models/contextMenu-settings';
 import { BreadCrumbBar } from '../actions/breadcrumb-bar';
 import { ContextMenu } from '../pop-up/context-menu';
@@ -55,14 +56,13 @@ var FileManager = /** @class */ (function (_super) {
     __extends(FileManager, _super);
     function FileManager(options, element) {
         var _this = _super.call(this, options, element) || this;
-        // eslint-disable-next-line
         _this.filterData = null;
         _this.selectedNodes = [];
         _this.duplicateItems = [];
-        // eslint-disable-next-line
         _this.duplicateRecords = [];
         _this.previousPath = [];
         _this.nextPath = [];
+        _this.existingFileCount = 0;
         _this.isLayoutChange = false;
         _this.layoutSelectedItems = [];
         _this.renamedId = null;
@@ -84,11 +84,9 @@ var FileManager = /** @class */ (function (_super) {
         _this.isOpened = false;
         _this.isRetryOpened = false;
         _this.isPathDrag = false;
-        // eslint-disable-next-line
         _this.searchedItems = [];
         _this.retryFiles = [];
         _this.isApplySame = false;
-        // eslint-disable-next-line
         _this.dragData = [];
         _this.dragNodes = [];
         _this.dragPath = '';
@@ -98,10 +96,12 @@ var FileManager = /** @class */ (function (_super) {
         _this.dragCursorPosition = { left: 44, top: 18 };
         _this.isDropEnd = false;
         _this.dragCount = 0;
-        // eslint-disable-next-line
         _this.droppedObjects = [];
         _this.uploadingCount = 0;
         _this.uploadedCount = 0;
+        //Specifies whether the operating system is MAC or not
+        _this.isMac = false;
+        _this.dragSelectedItems = [];
         FileManager_1.Inject(BreadCrumbBar, LargeIconsView, ContextMenu);
         return _this;
     }
@@ -176,25 +176,36 @@ var FileManager = /** @class */ (function (_super) {
         if (this.toolbarSettings.visible) {
             modules.push({
                 member: 'toolbar',
-                args: [this]
+                args: [this],
+                name: 'Toolbar'
             });
         }
         if (this.navigationPaneSettings.visible) {
             modules.push({
                 member: 'navigationpane',
-                args: [this]
+                args: [this],
+                name: 'NavigationPane'
             });
         }
         if (this.view) {
             modules.push({
                 member: 'detailsview',
-                args: [this]
+                args: [this],
+                name: 'DetailsView'
             });
         }
         if (this.contextMenuSettings.visible && !this.isDevice) {
             modules.push({
                 member: 'contextmenu',
-                args: [this]
+                args: [this],
+                name: 'ContextMenu'
+            });
+        }
+        if (this.enableVirtualization) {
+            modules.push({
+                member: 'virtualization',
+                args: [this],
+                name: 'Virtualization'
             });
         }
         return modules;
@@ -211,9 +222,13 @@ var FileManager = /** @class */ (function (_super) {
             this.allowMultiSelection ? this.selectedItems : this.selectedItems.slice(this.selectedItems.length - 1);
         this.setProperties({ selectedItems: slItems }, true);
         this.fileView = this.view;
+        this.isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
         this.setRtl(this.enableRtl);
         this.addEventListeners();
         read(this, (this.path !== this.originalPath) ? events.initialEnd : events.finalizeEnd, this.path);
+        if (this.fileView === 'Details') {
+            this.largeiconsviewModule.element.classList.add(CLS.DISPLAY_NONE);
+        }
         this.adjustHeight();
         if (isNOU(this.navigationpaneModule)) {
             this.splitterObj.collapse(this.enableRtl ? 1 : 0);
@@ -417,6 +432,7 @@ var FileManager = /** @class */ (function (_super) {
             minFileSize: this.uploadSettings.minFileSize,
             maxFileSize: this.uploadSettings.maxFileSize,
             allowedExtensions: this.uploadSettings.allowedExtensions,
+            directoryUpload: this.uploadSettings.directoryUpload,
             fileListRendering: this.onFileListRender.bind(this)
         });
         this.uploadObj.appendTo('#' + this.element.id + CLS.UPLOAD_ID);
@@ -429,6 +445,7 @@ var FileManager = /** @class */ (function (_super) {
         this.uploadObj.minFileSize = this.uploadSettings.minFileSize;
         this.uploadObj.maxFileSize = this.uploadSettings.maxFileSize;
         this.uploadObj.allowedExtensions = this.uploadSettings.allowedExtensions;
+        this.uploadObj.directoryUpload = this.uploadSettings.directoryUpload;
         this.uploadObj.dataBind();
     };
     FileManager.prototype.onBeforeOpen = function (args) {
@@ -478,9 +495,8 @@ var FileManager = /** @class */ (function (_super) {
             }
         }
         var data = JSON.stringify(getValue(this.pathId[this.pathId.length - 1], this.feParent));
-        args.customFormData = [{ 'path': this.path }, { 'action': action }, { 'data': data }];
+        args.customFormData = [{ 'path': this.path }, { 'action': action }, { 'data': data }, { 'filename': args.fileData.name }];
         var uploadUrl = this.ajaxSettings.uploadUrl ? this.ajaxSettings.uploadUrl : this.ajaxSettings.url;
-        // eslint-disable-next-line
         var ajaxSettings = {
             url: uploadUrl,
             type: 'POST',
@@ -496,7 +512,6 @@ var FileManager = /** @class */ (function (_super) {
         this.trigger('beforeSend', this.uploadEventArgs, function (uploadEventArgs) {
             args.customFormData = JSON.parse(getValue('data', uploadEventArgs.ajaxSettings));
             args.cancel = uploadEventArgs.cancel;
-            // eslint-disable-next-line
             var eventArgs = {
                 cancel: false,
                 httpRequest: args.currentRequest
@@ -533,7 +548,6 @@ var FileManager = /** @class */ (function (_super) {
         }
         this.uploadingCount = args.filesData.length;
         this.uploadedCount = 0;
-        // eslint-disable-next-line
         var details = getPathObject(this);
         if (!hasUploadAccess(details)) {
             args.cancel = true;
@@ -542,7 +556,6 @@ var FileManager = /** @class */ (function (_super) {
         }
         this.uploadDialogObj.show();
     };
-    // eslint-disable-next-line
     FileManager.prototype.onFileUploadSuccess = function (args) {
         this.uploadedCount = this.uploadedCount + args.count;
         if (this.uploadSettings.autoClose && (this.uploadingCount === this.uploadedCount)) {
@@ -550,7 +563,6 @@ var FileManager = /** @class */ (function (_super) {
         }
     };
     /* istanbul ignore next */
-    // eslint-disable-next-line
     FileManager.prototype.onUploadSuccess = function (files) {
         var args = { action: 'Upload', result: files };
         this.trigger('success', args);
@@ -562,9 +574,7 @@ var FileManager = /** @class */ (function (_super) {
         }
     };
     /* istanbul ignore next */
-    // eslint-disable-next-line
     FileManager.prototype.onUploadFailure = function (files) {
-        // eslint-disable-next-line
         var response = getValue('response', files);
         var statusText = getValue('statusText', response);
         if (statusText !== '') {
@@ -648,12 +658,40 @@ var FileManager = /** @class */ (function (_super) {
                 break;
             case 'ctrlU':
                 e.preventDefault();
-                uploadEle = select('#' + this.element.id + CLS.UPLOAD_ID, this.element);
-                uploadEle.click();
+                if (this.toolbarSettings.items.indexOf('Upload') !== -1) {
+                    uploadEle = select('#' + this.element.id + CLS.UPLOAD_ID, this.element);
+                    uploadEle.click();
+                }
                 break;
         }
     };
+    FileManager.prototype.wireSelectOnDragEvent = function (isBind) {
+        if (isNOU(this.view)) {
+            return;
+        }
+        if (isBind) {
+            this.viewElem = this.view === 'LargeIcons' ? this.largeiconsviewModule.element : this.element.querySelector('.e-gridcontent');
+        }
+        if (!this.viewElem) {
+            return;
+        }
+        if (isBind) {
+            if (this.allowMultiSelection) {
+                EventHandler.add(this.viewElem, 'mousedown', this.onDragStart, this);
+                this.on(events.layoutChange, this.onLayoutChange, this);
+                this.on(events.selectionChanged, this.onLayoutChange, this);
+            }
+        }
+        else {
+            EventHandler.remove(this.viewElem, 'mousedown', this.onDragStart);
+            this.off(events.layoutChange, this.onLayoutChange);
+            this.off(events.selectionChanged, this.onLayoutChange);
+        }
+    };
     FileManager.prototype.wireEvents = function () {
+        if (this.enableRangeSelection) {
+            this.wireSelectOnDragEvent(true);
+        }
         EventHandler.add(window, 'resize', this.resizeHandler, this);
         this.keyboardModule = new KeyboardEvents(this.element, {
             keyAction: this.keyActionHandler.bind(this),
@@ -662,9 +700,94 @@ var FileManager = /** @class */ (function (_super) {
         });
     };
     FileManager.prototype.unWireEvents = function () {
+        this.wireSelectOnDragEvent(false);
         EventHandler.remove(window, 'resize', this.resizeHandler);
         this.keyboardModule.destroy();
     };
+    FileManager.prototype.onDragStart = function (event) {
+        if (this.viewElem) {
+            if (this.allowDragAndDrop) {
+                var targetElement = closest(event.target, this.viewElem.classList.contains('e-large-icons') ? '.e-list-item' : '.e-fe-text');
+                if (targetElement) {
+                    return;
+                }
+            }
+            event.preventDefault();
+            this.dragX = event.pageX;
+            this.dragY = event.pageY;
+            if (!this.dragSelectElement) {
+                this.dragSelectElement = createElement('div', {
+                    id: this.element.id + '_drag',
+                    className: 'e-filemanager e-drag-select',
+                    styles: 'left: ' + this.dragX + 'px;top: ' + this.dragY + 'px;'
+                });
+                document.body.append(this.dragSelectElement);
+            }
+            EventHandler.add(document, 'mouseup', this.onDragStop, this);
+            EventHandler.add(this.viewElem, 'mousemove', this.onDrag, this);
+            EventHandler.add(this.dragSelectElement, 'mousemove', this.onDrag, this);
+        }
+    };
+    FileManager.prototype.onDrag = function (event) {
+        event.stopPropagation();
+        if (this.dragSelectElement) {
+            var diffX = event.pageX - this.dragX;
+            var diffY = event.pageY - this.dragY;
+            setStyleAttribute(this.dragSelectElement, {
+                'left': diffX < 0 ? this.dragX + diffX + 'px' : this.dragX + 'px', 'top': diffY < 0 ? this.dragY + diffY + 'px' : this.dragY + 'px',
+                'height': Math.abs(diffY) + 'px', 'width': Math.abs(diffX) + 'px'
+            });
+            this.selectItems();
+        }
+        else {
+            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        }
+    };
+    FileManager.prototype.onDragStop = function () {
+        if (this.viewElem) {
+            EventHandler.remove(document, 'mouseup', this.onDragStop);
+            EventHandler.remove(this.viewElem, 'mousemove', this.onDrag);
+        }
+        if (this.dragSelectElement) {
+            EventHandler.remove(this.dragSelectElement, 'mousemove', this.onDrag);
+            if (this.dragSelectElement.clientHeight > 0 && this.dragSelectElement.clientWidth > 0) {
+                this.setProperties({ selectedItems: this.dragSelectedItems });
+            }
+            this.dragSelectedItems = [];
+            detach(this.dragSelectElement);
+            this.dragSelectElement = null;
+        }
+    };
+    FileManager.prototype.selectItems = function () {
+        this.dragSelectedItems = [];
+        var dragRect = this.dragSelectElement.getBoundingClientRect();
+        var allItems = selectAll(this.viewElem.classList.contains('e-large-icons') ? '.e-list-item' : '.e-row', this.viewElem);
+        removeClass(selectAll('.e-active', this.viewElem), ['e-active', 'e-focus']);
+        removeClass(selectAll('.e-check', this.viewElem), ['e-check']);
+        for (var _i = 0, allItems_1 = allItems; _i < allItems_1.length; _i++) {
+            var item = allItems_1[_i];
+            var itemRect = item.getBoundingClientRect();
+            if (!(dragRect.right < itemRect.left || dragRect.left > itemRect.right
+                || dragRect.bottom < itemRect.top || dragRect.top > itemRect.bottom)
+                && (this.dragSelectElement.clientHeight > 0 && this.dragSelectElement.clientWidth > 0)) {
+                if (this.viewElem.classList.contains('e-large-icons')) {
+                    item.classList.add('e-active');
+                    this.dragSelectedItems.push(item.getAttribute('title'));
+                }
+                else {
+                    addClass(selectAll('.e-rowcell', item), ['e-active']);
+                    this.dragSelectedItems.push(item.querySelector('.e-drag-text').textContent);
+                }
+                item.querySelector('.e-frame').classList.add('e-check');
+            }
+        }
+    };
+    FileManager.prototype.onLayoutChange = function () {
+        if (this.enableRangeSelection) {
+            this.unWireEvents();
+            this.wireEvents();
+        }
+    };
     FileManager.prototype.setPath = function () {
         this.setProperties({ selectedItems: [] }, true);
         this.ensurePath();
@@ -680,7 +803,6 @@ var FileManager = /** @class */ (function (_super) {
      * @private
      */
     /* istanbul ignore next */
-    // eslint:disable-next-line
     FileManager.prototype.onPropertyChanged = function (newProp, oldProp) {
         var height;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -712,6 +834,12 @@ var FileManager = /** @class */ (function (_super) {
                 case 'detailsViewSettings':
                     this.notify(events.modelChanged, { module: 'detailsview', newProp: newProp, oldProp: oldProp });
                     break;
+                case 'enableRangeSelection':
+                    this.wireSelectOnDragEvent(false);
+                    if (newProp.enableRangeSelection) {
+                        this.wireSelectOnDragEvent(true);
+                    }
+                    break;
                 case 'enableRtl':
                     this.enableRtl = newProp.enableRtl;
                     this.refresh();
@@ -769,6 +897,7 @@ var FileManager = /** @class */ (function (_super) {
                     this.notify(events.modelChanged, { module: 'largeiconsview', newProp: newProp, oldProp: oldProp });
                     break;
                 case 'toolbarSettings':
+                case 'toolbarItems':
                     this.adjustHeight();
                     this.notify(events.modelChanged, { module: 'toolbar', newProp: newProp, oldProp: oldProp });
                     break;
@@ -812,6 +941,10 @@ var FileManager = /** @class */ (function (_super) {
                         this.viewerObj.target = newProp.popupTarget;
                     }
                     break;
+                case 'fileSystemData':
+                    this.fileSystemData = newProp.fileSystemData;
+                    this.refresh();
+                    break;
             }
         }
     };
@@ -875,7 +1008,21 @@ var FileManager = /** @class */ (function (_super) {
         this.addCssClass(this.cssClass, null);
         removeClass([this.element], [CLS.RTL, CLS.MOBILE, CLS.CHECK_SELECT]);
         this.element.innerHTML = '';
+        this.breadCrumbBarNavigation = null;
+        this.activeElements = null;
+        this.virtualDragElement = null;
+        this.visitedItem = null;
         _super.prototype.destroy.call(this);
+        this.virtualizationModule = null;
+        this.navigationpaneModule = null;
+        this.toolbarModule = null;
+        this.contextmenuModule = null;
+        this.largeiconsviewModule = null;
+        this.detailsviewModule = null;
+        this.breadcrumbbarModule = null;
+        this.viewElem = null;
+        this.dragSelectElement = null;
+        this.dragSelectedItems = null;
     };
     /**
      * Creates a new folder in file manager.
@@ -886,7 +1033,6 @@ var FileManager = /** @class */ (function (_super) {
      */
     FileManager.prototype.createFolder = function (name) {
         this.notify(events.methodCall, { action: 'createFolder' });
-        // eslint-disable-next-line
         var details = [getPathObject(this)];
         this.itemData = details;
         if (name) {
@@ -934,7 +1080,7 @@ var FileManager = /** @class */ (function (_super) {
      * @returns {void}
      */
     FileManager.prototype.disableToolbarItems = function (items) {
-        if (!isNOU(items)) {
+        if (!isNOU(items) && this.toolbarModule) {
             this.toolbarModule.enableItems(items, false);
         }
     };
@@ -958,7 +1104,7 @@ var FileManager = /** @class */ (function (_super) {
      * @returns {void}
      */
     FileManager.prototype.enableToolbarItems = function (items) {
-        if (!isNOU(items)) {
+        if (!isNOU(items) && this.toolbarModule) {
             this.toolbarModule.enableItems(items, true);
         }
     };
@@ -1009,7 +1155,6 @@ var FileManager = /** @class */ (function (_super) {
      *
      * @returns {void}
      */
-    // eslint-disable-next-line
     FileManager.prototype.filterFiles = function (filterData) {
         this.filterData = filterData ? filterData : null;
         this.setProperties({ selectedItems: [] }, true);
@@ -1025,7 +1170,6 @@ var FileManager = /** @class */ (function (_super) {
      *
      * @returns {Object[]} - returns selected files.
      */
-    // eslint-disable-next-line
     FileManager.prototype.getSelectedFiles = function () {
         this.notify(events.updateSelectionData, {});
         return this.itemData;
@@ -1067,6 +1211,23 @@ var FileManager = /** @class */ (function (_super) {
     FileManager.prototype.selectAll = function () {
         this.notify(events.methodCall, { action: 'selectAll' });
     };
+    /**
+     * Specifies the method that must be invoked to traverse the path backwards in the file manager.
+     *
+     * @returns {void}
+     */
+    FileManager.prototype.traverseBackward = function () {
+        if (this.pathNames.length > 1 && this.breadcrumbbarModule.searchObj.element.value === '' && !this.isFiltered) {
+            this.pathId.pop();
+            this.pathNames.pop();
+            var newPath = this.pathNames.slice(1).join('/');
+            newPath = newPath === '' ? '/' : '/' + newPath + '/';
+            this.setProperties({ path: newPath }, true);
+            read(this, events.pathChanged, this.path);
+            var treeNodeId = this.pathId[this.pathId.length - 1];
+            this.notify(events.updateTreeSelection, { module: 'treeview', selectedNode: treeNodeId });
+        }
+    };
     /**
      * Deselects the currently selected folders and files in current path.
      *
@@ -1097,11 +1258,18 @@ var FileManager = /** @class */ (function (_super) {
      * @returns {void}
      */
     FileManager.prototype.uploadFiles = function () {
-        // eslint-disable-next-line
         var details = [getPathObject(this)];
         this.itemData = details;
         uploadItem(this);
     };
+    /**
+     * Specifies the method which must be invoked to programmatically close the dialog popup in the file manager.
+     *
+     * @returns {void}
+     */
+    FileManager.prototype.closeDialog = function () {
+        closePopup(this);
+    };
     /**
      * Specifies the direction of FileManager
      *
@@ -1124,12 +1292,18 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Complex({}, AjaxSettings)
     ], FileManager.prototype, "ajaxSettings", void 0);
+    __decorate([
+        Property([])
+    ], FileManager.prototype, "fileSystemData", void 0);
     __decorate([
         Property(false)
     ], FileManager.prototype, "allowDragAndDrop", void 0);
     __decorate([
         Property(true)
     ], FileManager.prototype, "allowMultiSelection", void 0);
+    __decorate([
+        Property(true)
+    ], FileManager.prototype, "showItemCheckBoxes", void 0);
     __decorate([
         Complex({}, ContextMenuSettings)
     ], FileManager.prototype, "contextMenuSettings", void 0);
@@ -1145,6 +1319,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], FileManager.prototype, "enablePersistence", void 0);
+    __decorate([
+        Property(false)
+    ], FileManager.prototype, "enableVirtualization", void 0);
     __decorate([
         Property('400px')
     ], FileManager.prototype, "height", void 0);
@@ -1184,9 +1361,18 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Property('name')
     ], FileManager.prototype, "sortBy", void 0);
+    __decorate([
+        Property(null)
+    ], FileManager.prototype, "sortComparer", void 0);
+    __decorate([
+        Property(false)
+    ], FileManager.prototype, "enableRangeSelection", void 0);
     __decorate([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);
+    __decorate([
+        Collection([], ToolbarItem)
+    ], FileManager.prototype, "toolbarItems", void 0);
     __decorate([
         Complex({}, UploadSettings)
     ], FileManager.prototype, "uploadSettings", void 0);
@@ -1217,9 +1403,36 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], FileManager.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeFolderCreate", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "folderCreate", void 0);
     __decorate([
         Event()
     ], FileManager.prototype, "destroyed", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeDelete", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "delete", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeRename", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "rename", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "beforeMove", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "move", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "search", void 0);
     __decorate([
         Event()
     ], FileManager.prototype, "fileDragStart", void 0);
@@ -1244,6 +1457,9 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], FileManager.prototype, "menuOpen", void 0);
+    __decorate([
+        Event()
+    ], FileManager.prototype, "menuClose", void 0);
     __decorate([
         Event()
     ], FileManager.prototype, "failure", void 0);