@syncfusion/ej2-filemanager 26.2.11 → 27.1.50

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

@@ -2840,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;
         }
@@ -4656,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);
@@ -4696,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();
@@ -4802,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)) {
@@ -5006,7 +4998,6 @@ class LargeIconsView {
         if (this.parent.view !== 'LargeIcons') {
             return;
         }
-        this.adjustHeight();
     }
     onUpdateSelectionData() {
         if (this.parent.view !== 'LargeIcons') {
@@ -5134,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) || this.parent.hasId) {
+            if (this.parent.path === this.parent.destinationPath ||
+                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
                 this.onPathChanged(args);
             }
         }
@@ -5155,9 +5147,6 @@ class LargeIconsView {
                 case 'allowDragAndDrop':
                     this.createDragObj();
                     break;
-                case 'height':
-                    this.adjustHeight();
-                    break;
                 case 'selectedItems':
                     this.isInteraction = false;
                     this.isInteracted = false;
@@ -5618,6 +5607,9 @@ class LargeIconsView {
             case 'ctrlD':
                 this.doDownload();
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     }
     doDownload() {
@@ -5910,9 +5902,6 @@ class LargeIconsView {
     }
     resizeHandler() {
         this.getItemCount();
-        if (!isNullOrUndefined(this.listObj)) {
-            this.adjustHeight();
-        }
     }
     splitterResizeHandler() {
         this.getItemCount();
@@ -6943,8 +6932,11 @@ class ContextMenu {
                         if (this.menuType === 'folder') {
                             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);
                             }
-                            this.parent.folderPath = getFullPath(this.parent, this.menuItemData, this.parent.path);
                         }
                         else {
                             this.parent.folderPath = '';
@@ -7371,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);
     }
     /**
@@ -7493,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);
@@ -7929,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),
@@ -7938,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();
@@ -7986,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();
@@ -8166,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.
@@ -8354,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.
      *
@@ -8490,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);
@@ -10399,7 +10534,8 @@ class DetailsView {
             ctrlD: 'ctrl+d',
             f2: 'f2',
             ctrlA: 'ctrl+a',
-            enter: 'enter'
+            enter: 'enter',
+            back: 'backspace'
         };
     }
     /* istanbul ignore next */
@@ -10570,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() {
@@ -11393,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) || this.parent.hasId) {
+            if (this.parent.path === this.parent.destinationPath ||
+                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
                 this.onPathChanged(args);
             }
         }
@@ -11829,6 +11970,9 @@ class DetailsView {
                 this.parent.setProperties({ selectedItems: lastItem }, true);
                 this.selectRecords(lastItem);
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     }
     gridSelectNodes() {