@syncfusion/ej2-filemanager 26.2.10 → 27.1.48

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

@@ -1559,6 +1559,9 @@ function pasteHandler(parent) {
     parent.isDragDrop = false;
     if (parent.selectedNodes.length !== 0 && parent.enablePaste) {
         const path = (parent.folderPath === '') ? parent.path : parent.folderPath;
+        if (parent.activeModule === 'navigationpane' && !parent.selectedNodes[0].includes('/')) {
+            parent.targetPath = getValue('filterPath', parent.actionRecords[0]).replace(/\\/g, '/');
+        }
         const subFolder = validateSubFolder(parent, parent.actionRecords, path, parent.path);
         if (!subFolder) {
             if ((parent.fileAction === 'move' && parent.targetPath !== path) || parent.fileAction === 'copy') {
@@ -2837,6 +2840,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;
         }
@@ -4653,9 +4657,6 @@ class LargeIconsView {
             }
             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);
@@ -4693,7 +4694,6 @@ class LargeIconsView {
             for (let i = 0; i < activeEle.length; i++) {
                 activeEle[i].setAttribute('aria-selected', 'true');
             }
-            this.adjustHeight();
             this.element.style.maxHeight = '100%';
             this.getItemCount();
             this.addEventListener();
@@ -4799,11 +4799,6 @@ class LargeIconsView {
     getModuleName() {
         return 'largeiconsview';
     }
-    adjustHeight() {
-        const pane = select('#' + this.parent.element.id + CONTENT_ID, this.parent.element);
-        const bar = select('#' + this.parent.element.id + BREADCRUMBBAR_ID, this.parent.element);
-        this.element.style.height = (pane.offsetHeight - bar.offsetHeight) + 'px';
-    }
     onItemCreated(args) {
         args.item.removeAttribute('aria-level');
         if (!this.parent.showFileExtension && getValue('isFile', args.curData)) {
@@ -5003,7 +4998,6 @@ class LargeIconsView {
         if (this.parent.view !== 'LargeIcons') {
             return;
         }
-        this.adjustHeight();
     }
     onUpdateSelectionData() {
         if (this.parent.view !== 'LargeIcons') {
@@ -5131,7 +5125,8 @@ class LargeIconsView {
     onpasteEnd(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);
             }
         }
@@ -5152,9 +5147,6 @@ class LargeIconsView {
                 case 'allowDragAndDrop':
                     this.createDragObj();
                     break;
-                case 'height':
-                    this.adjustHeight();
-                    break;
                 case 'selectedItems':
                     this.isInteraction = false;
                     this.isInteracted = false;
@@ -5615,6 +5607,9 @@ class LargeIconsView {
             case 'ctrlD':
                 this.doDownload();
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     }
     doDownload() {
@@ -5907,9 +5902,6 @@ class LargeIconsView {
     }
     resizeHandler() {
         this.getItemCount();
-        if (!isNullOrUndefined(this.listObj)) {
-            this.adjustHeight();
-        }
     }
     splitterResizeHandler() {
         this.getItemCount();
@@ -6588,7 +6580,23 @@ class ContextMenu {
             iconSpan.setAttribute('class', ICON_GRID + ' ' + MENU_ICON);
         }
     }
-    onBeforeClose() {
+    onBeforeClose(args) {
+        const 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, (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();
@@ -6922,7 +6930,13 @@ class ContextMenu {
                         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 = '';
@@ -7349,6 +7363,7 @@ let FileManager = FileManager_1 = class FileManager extends Component {
         this.uploadedCount = 0;
         //Specifies whether the operating system is MAC or not
         this.isMac = false;
+        this.dragSelectedItems = [];
         FileManager_1.Inject(BreadCrumbBar, LargeIconsView, ContextMenu);
     }
     /**
@@ -7471,6 +7486,9 @@ let FileManager = FileManager_1 = class FileManager extends Component {
         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);
@@ -7907,7 +7925,33 @@ let FileManager = FileManager_1 = class FileManager extends Component {
                 break;
         }
     }
+    wireSelectOnDragEvent(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);
+        }
+    }
     wireEvents() {
+        if (this.enableRangeSelection) {
+            this.wireSelectOnDragEvent(true);
+        }
         EventHandler.add(window, 'resize', this.resizeHandler, this);
         this.keyboardModule = new KeyboardEvents(this.element, {
             keyAction: this.keyActionHandler.bind(this),
@@ -7916,9 +7960,93 @@ let FileManager = FileManager_1 = class FileManager extends Component {
         });
     }
     unWireEvents() {
+        this.wireSelectOnDragEvent(false);
         EventHandler.remove(window, 'resize', this.resizeHandler);
         this.keyboardModule.destroy();
     }
+    onDragStart(event) {
+        if (this.viewElem) {
+            if (this.allowDragAndDrop) {
+                const 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);
+        }
+    }
+    onDrag(event) {
+        event.stopPropagation();
+        if (this.dragSelectElement) {
+            const diffX = event.pageX - this.dragX;
+            const 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);
+        }
+    }
+    onDragStop() {
+        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;
+        }
+    }
+    selectItems() {
+        this.dragSelectedItems = [];
+        const dragRect = this.dragSelectElement.getBoundingClientRect();
+        const 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 (const item of allItems) {
+            const 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');
+            }
+        }
+    }
+    onLayoutChange() {
+        if (this.enableRangeSelection) {
+            this.unWireEvents();
+            this.wireEvents();
+        }
+    }
     setPath() {
         this.setProperties({ selectedItems: [] }, true);
         this.ensurePath();
@@ -7964,6 +8092,12 @@ let FileManager = FileManager_1 = class FileManager extends Component {
                 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();
@@ -8144,6 +8278,9 @@ let FileManager = FileManager_1 = class FileManager extends Component {
         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.
@@ -8332,6 +8469,23 @@ let FileManager = FileManager_1 = class FileManager extends Component {
     selectAll() {
         this.notify(methodCall, { action: 'selectAll' });
     }
+    /**
+     * Specifies the method that must be invoked to traverse the path backwards in the file manager.
+     *
+     * @returns {void}
+     */
+    traverseBackward() {
+        if (this.pathNames.length > 1 && this.breadcrumbbarModule.searchObj.element.value === '' && !this.isFiltered) {
+            this.pathId.pop();
+            this.pathNames.pop();
+            let newPath = this.pathNames.slice(1).join('/');
+            newPath = newPath === '' ? '/' : '/' + newPath + '/';
+            this.setProperties({ path: newPath }, true);
+            read(this, pathChanged, this.path);
+            const treeNodeId = this.pathId[this.pathId.length - 1];
+            this.notify(updateTreeSelection, { module: 'treeview', selectedNode: treeNodeId });
+        }
+    }
     /**
      * Deselects the currently selected folders and files in current path.
      *
@@ -8468,6 +8622,9 @@ __decorate$8([
 __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);
@@ -8558,6 +8715,9 @@ __decorate$8([
 __decorate$8([
     Event()
 ], FileManager.prototype, "menuOpen", void 0);
+__decorate$8([
+    Event()
+], FileManager.prototype, "menuClose", void 0);
 __decorate$8([
     Event()
 ], FileManager.prototype, "failure", void 0);
@@ -10374,7 +10534,8 @@ class DetailsView {
             ctrlD: 'ctrl+d',
             f2: 'f2',
             ctrlA: 'ctrl+a',
-            enter: 'enter'
+            enter: 'enter',
+            back: 'backspace'
         };
     }
     /* istanbul ignore next */
@@ -10545,6 +10706,10 @@ class DetailsView {
         for (let i = 0, len = columns.length; i < len; i++) {
             columns[i].disableHtmlEncode = !this.parent.enableHtmlSanitizer;
         }
+        if (this.parent.enableRangeSelection) {
+            const HiddenName = { field: 'name', visible: false, customAttributes: { class: 'e-drag-text' } };
+            columns.push(HiddenName);
+        }
         return columns;
     }
     adjustHeight() {
@@ -11368,7 +11533,8 @@ class DetailsView {
     onpasteEnd(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);
             }
         }
@@ -11804,6 +11970,9 @@ class DetailsView {
                 this.parent.setProperties({ selectedItems: lastItem }, true);
                 this.selectRecords(lastItem);
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     }
     gridSelectNodes() {