From f7bc17951b9d03d9383ee4a7fd3473f31bc559ce Mon Sep 17 00:00:00 2001 From: Will Miao <13051207myq@gmail.com> Date: Sun, 16 Feb 2025 09:09:20 +0800 Subject: [PATCH] Refactor folder selection handling in DownloadManager; add cleanup logic for folder browser and enhance modal close behavior --- static/js/managers/DownloadManager.js | 55 ++++++++++++++++++++------- static/js/managers/ModalManager.js | 15 ++++++-- 2 files changed, 53 insertions(+), 17 deletions(-) diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js index 25850880..ba158ae8 100644 --- a/static/js/managers/DownloadManager.js +++ b/static/js/managers/DownloadManager.js @@ -17,6 +17,7 @@ export class DownloadManager { // Add LoadingManager instance this.loadingManager = new LoadingManager(); + this.folderClickHandler = null; // Add this line } showDownloadModal() { @@ -31,7 +32,10 @@ export class DownloadManager { this.initialized = true; } - modalManager.showModal('downloadModal'); + modalManager.showModal('downloadModal', null, () => { + // Cleanup handler when modal closes + this.cleanupFolderBrowser(); + }); this.resetSteps(); } @@ -44,8 +48,14 @@ export class DownloadManager { this.versions = []; this.modelInfo = null; this.modelVersionId = null; - // Add this line to reset selectedFolder - this.selectedFolder = ''; // Reset selectedFolder when starting new download + + // Clear selected folder and remove selection from UI + this.selectedFolder = ''; + const folderBrowser = document.getElementById('folderBrowser'); + if (folderBrowser) { + folderBrowser.querySelectorAll('.folder-item').forEach(f => + f.classList.remove('selected')); + } } async validateAndFetchVersions() { @@ -244,22 +254,39 @@ export class DownloadManager { // Add new method to handle folder selection initializeFolderBrowser() { - // Update folder selection handling const folderBrowser = document.getElementById('folderBrowser'); if (!folderBrowser) return; - // Update folder selection event handling - folderBrowser.addEventListener('click', (event) => { + // Cleanup existing handler if any + this.cleanupFolderBrowser(); + + // Create new handler + this.folderClickHandler = (event) => { const folderItem = event.target.closest('.folder-item'); if (!folderItem) return; - // Remove previous selection - folderBrowser.querySelectorAll('.folder-item').forEach(f => - f.classList.remove('selected')); - - // Add selection to clicked folder - folderItem.classList.add('selected'); - this.selectedFolder = folderItem.dataset.folder; - }); + if (folderItem.classList.contains('selected')) { + folderItem.classList.remove('selected'); + this.selectedFolder = ''; + } else { + folderBrowser.querySelectorAll('.folder-item').forEach(f => + f.classList.remove('selected')); + folderItem.classList.add('selected'); + this.selectedFolder = folderItem.dataset.folder; + } + }; + + // Add the new handler + folderBrowser.addEventListener('click', this.folderClickHandler); + } + + cleanupFolderBrowser() { + if (this.folderClickHandler) { + const folderBrowser = document.getElementById('folderBrowser'); + if (folderBrowser) { + folderBrowser.removeEventListener('click', this.folderClickHandler); + this.folderClickHandler = null; + } + } } } diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js index 0d285389..93d639eb 100644 --- a/static/js/managers/ModalManager.js +++ b/static/js/managers/ModalManager.js @@ -68,7 +68,7 @@ export class ModalManager { return this.modals.get(id); } - showModal(id, content = null) { + showModal(id, content = null, onCloseCallback = null) { const modal = this.getModal(id); if (!modal) return; @@ -76,11 +76,14 @@ export class ModalManager { modal.element.innerHTML = content; } - // Update to handle different modal types + // Store callback + if (onCloseCallback) { + modal.onCloseCallback = onCloseCallback; + } + if (id === 'deleteModal') { modal.element.classList.add('show'); } else { - // For loraModal and downloadModal modal.element.style.display = 'block'; } @@ -94,6 +97,12 @@ export class ModalManager { modal.onClose(); modal.isOpen = false; + + // Execute onClose callback if exists + if (modal.onCloseCallback) { + modal.onCloseCallback(); + modal.onCloseCallback = null; + } } handleEscape(e) {