@syncfusion/ej2-filemanager 26.2.10 → 27.1.48

package/dist/es6/ej2-filemanager.es5.js

@@ -1708,6 +1708,9 @@ function pasteHandler(parent) {
     parent.isDragDrop = false;
     if (parent.selectedNodes.length !== 0 && parent.enablePaste) {
         var path = (parent.folderPath === '') ? parent.path : parent.folderPath;
+        if (parent.activeModule === 'navigationpane' && !parent.selectedNodes[0].includes('/')) {
+            parent.targetPath = getValue('filterPath', parent.actionRecords[0]).replace(/\\/g, '/');
+        }
         var subFolder = validateSubFolder(parent, parent.actionRecords, path, parent.path);
         if (!subFolder) {
             if ((parent.fileAction === 'move' && parent.targetPath !== path) || parent.fileAction === 'copy') {
@@ -2986,6 +2989,7 @@ function triggerSearchOperation(parent, data, eventArgs) {
         showHiddenItems: getValue('showHiddenItems', data)
     };
     parent.trigger('search', searchEventArgs, function (args) {
+        setValue('data', args.searchResults, data);
         if (args.cancel) {
             eventArgs.cancel = true;
         }
@@ -4805,9 +4809,6 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
             }
             iconsView.classList.remove(DISPLAY_NONE);
             if (this.parent.enableVirtualization && this.allItems.length > 0) {
-                if (!this.element.style.height) {
-                    this.adjustHeight();
-                }
                 this.parent.virtualizationModule.setUIVirtualization();
             }
             this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
@@ -4845,7 +4846,6 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
             for (var i = 0; i < activeEle.length; i++) {
                 activeEle[i].setAttribute('aria-selected', 'true');
             }
-            this.adjustHeight();
             this.element.style.maxHeight = '100%';
             this.getItemCount();
             this.addEventListener();
@@ -4952,11 +4952,6 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
     LargeIconsView.prototype.getModuleName = function () {
         return 'largeiconsview';
     };
-    LargeIconsView.prototype.adjustHeight = function () {
-        var pane = select('#' + this.parent.element.id + CONTENT_ID, this.parent.element);
-        var bar = select('#' + this.parent.element.id + BREADCRUMBBAR_ID, this.parent.element);
-        this.element.style.height = (pane.offsetHeight - bar.offsetHeight) + 'px';
-    };
     LargeIconsView.prototype.onItemCreated = function (args) {
         args.item.removeAttribute('aria-level');
         if (!this.parent.showFileExtension && getValue('isFile', args.curData)) {
@@ -5156,7 +5151,6 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
         if (this.parent.view !== 'LargeIcons') {
             return;
         }
-        this.adjustHeight();
     };
     LargeIconsView.prototype.onUpdateSelectionData = function () {
         if (this.parent.view !== 'LargeIcons') {
@@ -5284,7 +5278,8 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
     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)) {
+            if (this.parent.path === this.parent.destinationPath ||
+                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
                 this.onPathChanged(args);
             }
         }
@@ -5306,9 +5301,6 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
                 case 'allowDragAndDrop':
                     this.createDragObj();
                     break;
-                case 'height':
-                    this.adjustHeight();
-                    break;
                 case 'selectedItems':
                     this.isInteraction = false;
                     this.isInteracted = false;
@@ -5772,6 +5764,9 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
             case 'ctrlD':
                 this.doDownload();
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     };
     LargeIconsView.prototype.doDownload = function () {
@@ -6064,9 +6059,6 @@ var LargeIconsView = /** @__PURE__ @class */ (function () {
     };
     LargeIconsView.prototype.resizeHandler = function () {
         this.getItemCount();
-        if (!isNullOrUndefined(this.listObj)) {
-            this.adjustHeight();
-        }
     };
     LargeIconsView.prototype.splitterResizeHandler = function () {
         this.getItemCount();
@@ -6749,7 +6741,23 @@ var ContextMenu = /** @__PURE__ @class */ (function () {
             iconSpan.setAttribute('class', ICON_GRID + ' ' + MENU_ICON);
         }
     };
-    ContextMenu.prototype.onBeforeClose = function () {
+    ContextMenu.prototype.onBeforeClose = function (args) {
+        var eventArgs = {
+            cancel: false,
+            element: args.element,
+            event: args.event,
+            isFocused: args.isFocused,
+            fileDetails: [this.menuItemData],
+            items: args.items,
+            parentItem: args.parentItem,
+            menuType: this.menuType
+        };
+        this.parent.trigger('menuClose', eventArgs, function (menuCloseArgs) {
+            if (menuCloseArgs.cancel) {
+                args.cancel = menuCloseArgs.cancel;
+                return;
+            }
+        });
         this.menuTarget = null;
         if (!this.isMenuItemClicked && this.parent.pathId.length > 1 && this.parent.activeModule === 'navigationpane') {
             this.parent.pathId.pop();
@@ -7086,7 +7094,13 @@ var ContextMenu = /** @__PURE__ @class */ (function () {
                         break;
                     case 'paste':
                         if (_this.menuType === 'folder') {
-                            _this.parent.folderPath = getFullPath(_this.parent, _this.menuItemData, _this.parent.path);
+                            if (_this.parent.activeModule === 'navigationpane') {
+                                _this.parent.navigationpaneModule.openFileOnContextMenuClick(closest(_this.targetNodeElement, 'li'));
+                                _this.parent.folderPath = _this.parent.path;
+                            }
+                            else {
+                                _this.parent.folderPath = getFullPath(_this.parent, _this.menuItemData, _this.parent.path);
+                            }
                         }
                         else {
                             _this.parent.folderPath = '';
@@ -7528,6 +7542,7 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         _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;
     }
@@ -7652,6 +7667,9 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         this.setRtl(this.enableRtl);
         this.addEventListeners();
         read(this, (this.path !== this.originalPath) ? initialEnd : finalizeEnd, this.path);
+        if (this.fileView === 'Details') {
+            this.largeiconsviewModule.element.classList.add(DISPLAY_NONE);
+        }
         this.adjustHeight();
         if (isNullOrUndefined(this.navigationpaneModule)) {
             this.splitterObj.collapse(this.enableRtl ? 1 : 0);
@@ -8088,7 +8106,33 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
                 break;
         }
     };
+    FileManager.prototype.wireSelectOnDragEvent = function (isBind) {
+        if (isNullOrUndefined(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(layoutChange, this.onLayoutChange, this);
+                this.on(selectionChanged, this.onLayoutChange, this);
+            }
+        }
+        else {
+            EventHandler.remove(this.viewElem, 'mousedown', this.onDragStart);
+            this.off(layoutChange, this.onLayoutChange);
+            this.off(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),
@@ -8097,9 +8141,94 @@ var FileManager = /** @__PURE__ @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();
@@ -8146,6 +8275,12 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
                 case 'detailsViewSettings':
                     this.notify(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();
@@ -8326,6 +8461,9 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
         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.
@@ -8514,6 +8652,23 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
     FileManager.prototype.selectAll = function () {
         this.notify(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, pathChanged, this.path);
+            var treeNodeId = this.pathId[this.pathId.length - 1];
+            this.notify(updateTreeSelection, { module: 'treeview', selectedNode: treeNodeId });
+        }
+    };
     /**
      * Deselects the currently selected folders and files in current path.
      *
@@ -8650,6 +8805,9 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
     __decorate$8([
         Property(null)
     ], FileManager.prototype, "sortComparer", void 0);
+    __decorate$8([
+        Property(false)
+    ], FileManager.prototype, "enableRangeSelection", void 0);
     __decorate$8([
         Complex({}, ToolbarSettings)
     ], FileManager.prototype, "toolbarSettings", void 0);
@@ -8740,6 +8898,9 @@ var FileManager = /** @__PURE__ @class */ (function (_super) {
     __decorate$8([
         Event()
     ], FileManager.prototype, "menuOpen", void 0);
+    __decorate$8([
+        Event()
+    ], FileManager.prototype, "menuClose", void 0);
     __decorate$8([
         Event()
     ], FileManager.prototype, "failure", void 0);
@@ -10573,7 +10734,8 @@ var DetailsView = /** @__PURE__ @class */ (function () {
             ctrlD: 'ctrl+d',
             f2: 'f2',
             ctrlA: 'ctrl+a',
-            enter: 'enter'
+            enter: 'enter',
+            back: 'backspace'
         };
     }
     /* istanbul ignore next */
@@ -10748,6 +10910,10 @@ var DetailsView = /** @__PURE__ @class */ (function () {
         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 () {
@@ -11575,7 +11741,8 @@ var DetailsView = /** @__PURE__ @class */ (function () {
     DetailsView.prototype.onpasteEnd = function (args) {
         if (this.parent.view === 'Details') {
             this.isPasteOperation = true;
-            if (this.parent.path === this.parent.destinationPath || this.parent.path === getDirectoryPath(this.parent, args)) {
+            if (this.parent.path === this.parent.destinationPath ||
+                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
                 this.onPathChanged(args);
             }
         }
@@ -12012,6 +12179,9 @@ var DetailsView = /** @__PURE__ @class */ (function () {
                 this.parent.setProperties({ selectedItems: lastItem }, true);
                 this.selectRecords(lastItem);
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     };
     DetailsView.prototype.gridSelectNodes = function () {