From a2e5cfce24ec456390dc073d5d5a732dc7613b08 Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Tue, 14 Apr 2026 19:03:54 +0200 Subject: [PATCH 1/5] chore(biome): JS check: error on undeclared variables/function --- biome.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/biome.json b/biome.json index 7f0377a0..20ba54c3 100644 --- a/biome.json +++ b/biome.json @@ -14,7 +14,8 @@ "rules": { "recommended": true, "correctness": { - "noUnusedVariables": "warn" + "noUnusedVariables": "warn", + "noUndeclaredVariables": "error" }, "style": { "noDescendingSpecificity": "off" From 6f4abfcec44f19f4533137ea61fa9729f7ed6c60 Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Mon, 13 Apr 2026 15:09:10 +0200 Subject: [PATCH 2/5] refactor(js): avoid use of window.XXX and move to import/export - change worker: do not cache html pages (not necessary) - remove use of window.XXX and maximize import/export, this will provide more clarety, show circular dependencies + you will benefit IDE help --- static/admin.html | 6 +- static/device-verify.html | 3 +- static/index.html | 63 ++- static/js/app/authSession.js | 26 +- static/js/app/bootstrap.js | 11 +- static/js/app/filesView.js | 74 +-- static/js/app/main.js | 148 +++--- static/js/app/navigation.js | 140 +++--- static/js/app/searchView.js | 25 +- static/js/app/state.js | 4 +- static/js/app/trashView.js | 57 +-- static/js/app/ui.js | 227 ++++----- static/js/app/uiFileTypes.js | 6 +- static/js/app/uiNotifications.js | 8 +- static/js/app/userMenu.js | 19 +- static/js/core/csrf.js | 4 +- static/js/core/formatters.js | 7 +- static/js/core/i18n.js | 3 +- static/js/core/icons.js | 5 +- static/js/core/languageSelector.js | 9 +- static/js/core/modal.js | 21 +- static/js/core/notifications.js | 12 +- static/js/features/auth/auth.js | 24 +- static/js/features/files/contextMenus.js | 465 +++++++++--------- static/js/features/files/fileOperations.js | 227 +++++---- static/js/features/files/inlineViewer.js | 36 +- static/js/features/files/multiSelect.js | 67 +-- static/js/features/files/search.js | 32 +- static/js/features/files/wopiEditor.js | 12 +- static/js/features/library/favorites.js | 41 +- static/js/features/library/music.js | 170 +++---- static/js/features/library/photos.js | 20 +- static/js/features/library/photosLightbox.js | 29 +- static/js/features/library/recent.js | 32 +- static/js/features/sharing/fileSharing.js | 28 +- static/js/views/admin/admin.js | 10 +- .../js/views/device-verify/device-verify.js | 2 + static/js/views/profile/profile.js | 5 +- static/js/views/shared/sharedView.js | 27 +- static/login.html | 5 +- static/profile.html | 5 +- static/sw.js | 27 +- 42 files changed, 1104 insertions(+), 1038 deletions(-) diff --git a/static/admin.html b/static/admin.html index 2522c776..aa21b343 100644 --- a/static/admin.html +++ b/static/admin.html @@ -5,10 +5,6 @@ OxiCloud — Admin Panel - - - - @@ -608,6 +604,6 @@ - + diff --git a/static/device-verify.html b/static/device-verify.html index 3e227450..5fe3e6a3 100644 --- a/static/device-verify.html +++ b/static/device-verify.html @@ -48,7 +48,6 @@ - - + diff --git a/static/index.html b/static/index.html index 96227e2a..b6b034cc 100644 --- a/static/index.html +++ b/static/index.html @@ -19,38 +19,37 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/js/app/authSession.js b/static/js/app/authSession.js index f756c8b9..a1ef161e 100644 --- a/static/js/app/authSession.js +++ b/static/js/app/authSession.js @@ -2,6 +2,12 @@ * Authentication/session bootstrap and home-folder resolution */ +import { getCsrfHeaders } from '../core/csrf.js'; +import { loadFiles } from './filesView.js'; +import { updateStorageUsageDisplay } from './main.js'; +import { app } from './state.js'; +import { ui } from './ui.js'; + async function refreshUserData() { const USER_DATA_KEY = 'oxicloud_user'; @@ -24,7 +30,7 @@ async function refreshUserData() { console.log('Storage from server: used=', userData.storage_used_bytes, 'quota=', userData.storage_quota_bytes); localStorage.setItem(USER_DATA_KEY, JSON.stringify(userData)); - window.updateStorageUsageDisplay(userData); + updateStorageUsageDisplay(userData); return userData; } catch (error) { console.error('Error refreshing user data:', error); @@ -89,7 +95,7 @@ async function checkAuthentication() { if (menuName) menuName.textContent = userData.username; if (menuEmail) menuEmail.textContent = userData.email || ''; - window.updateStorageUsageDisplay(userData); + updateStorageUsageDisplay(userData); // Validate session BEFORE loading files to avoid 401 race condition const freshData = await refreshUserData(); @@ -133,8 +139,8 @@ async function checkAuthentication() { document.querySelectorAll('.user-avatar, .user-menu-avatar').forEach((el) => { el.textContent = userInitials; }); - window.updateStorageUsageDisplay(freshData); - resolveHomeFolder().then(() => window.loadFiles()); + updateStorageUsageDisplay(freshData); + resolveHomeFolder().then(() => loadFiles()); } else { console.warn('Could not retrieve user data, redirecting to login'); localStorage.removeItem(USER_DATA_KEY); @@ -154,8 +160,6 @@ async function checkAuthentication() { } async function resolveHomeFolder() { - const app = window.app; - if (app.userHomeFolderId) return; try { const response = await fetch('/api/folders', { @@ -173,22 +177,20 @@ async function resolveHomeFolder() { app.userHomeFolderName = home.name; app.currentPath = home.id; app.breadcrumbPath = []; - window.ui.updateBreadcrumb(); + ui.updateBreadcrumb(); console.log(`Home folder resolved: ${home.name} (${home.id})`); } else { console.warn('No root folders found for user'); app.currentPath = ''; app.breadcrumbPath = []; - window.ui.updateBreadcrumb(); + ui.updateBreadcrumb(); } } catch (error) { console.error('Error resolving home folder:', error); app.currentPath = ''; app.breadcrumbPath = []; - window.ui.updateBreadcrumb(); + ui.updateBreadcrumb(); } } -window.refreshUserData = refreshUserData; -window.checkAuthentication = checkAuthentication; -window.resolveHomeFolder = resolveHomeFolder; +export { checkAuthentication, refreshUserData, resolveHomeFolder }; diff --git a/static/js/app/bootstrap.js b/static/js/app/bootstrap.js index 54d45a16..fcdd327f 100644 --- a/static/js/app/bootstrap.js +++ b/static/js/app/bootstrap.js @@ -2,13 +2,10 @@ * OxiCloud - App bootstrap * Isolated startup trigger for the main application initializer. */ +import { initApp } from './main.js'; if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', () => { - if (typeof window.initApp === 'function') { - window.initApp(); - } - }); -} else if (typeof window.initApp === 'function') { - window.initApp(); + document.addEventListener('DOMContentLoaded', initApp); +} else { + initApp(); } diff --git a/static/js/app/filesView.js b/static/js/app/filesView.js index 4faa2221..81fff22e 100644 --- a/static/js/app/filesView.js +++ b/static/js/app/filesView.js @@ -1,5 +1,16 @@ // @ts-check +import { i18n } from '../core/i18n.js'; +import { inlineViewer } from '../features/files/inlineViewer.js'; +import { multiSelect } from '../features/files/multiSelect.js'; +import { resolveHomeFolder } from './authSession.js'; +import { updateHistory } from './main.js'; +import { app } from './state.js'; +import { ui } from './ui.js'; +import { uiNotifications } from './uiNotifications.js'; + +let isLoadingFiles = false; + // TODO move to features/files/fileOperations.js ? /** * @typedef {Object} FolderInfo @@ -48,8 +59,6 @@ async function getFolder(id) { * rebuild breadcrumb from selected folder (iterate up to root) */ async function rebuildBreadCrumb() { - const app = window.app; - /** * Store the leaf (this is the current displayed folder) * @type {FolderInfo | null} @@ -87,10 +96,7 @@ async function rebuildBreadCrumb() { } catch (_e) { console.log(`Error loading information from folder ${app.currentPath}, falling back to ${app.userHomeFolderId}`); // fallback of root - window.uiNotifications.show( - 'error: folder not found or permission denied', - 'the given folder is not available or you do not have sufficient rights' - ); + uiNotifications.show('error: folder not found or permission denied', 'the given folder is not available or you do not have sufficient rights'); app.breadcrumbPath = []; id = app.userHomeFolderId; app.currentPath = id; @@ -109,33 +115,31 @@ async function rebuildBreadCrumb() { * @param {boolean} [options.forceRefresh] force refresh of content */ async function loadFiles(options = { insertHistory: true }) { - const app = window.app; - try { console.log('Starting loadFiles() - loading files...', options); const forceRefresh = options.forceRefresh || false; - if (window.isLoadingFiles) { + if (isLoadingFiles) { console.log('A file load is already in progress, ignoring request'); return; } - window.isLoadingFiles = true; + isLoadingFiles = true; // This to avoid blinking page, a better solution would be to put loading on an overlay and remove timeout const loadingFiles = setTimeout(() => { // display loader after few delay (will be canceled if result take less time) - window.ui.showError(` + ui.showError(` `); }, 100); if (!app.userHomeFolderId) { - await window.resolveHomeFolder(); + await resolveHomeFolder(); } const timestamp = Math.floor(Date.now() / 1000); @@ -143,9 +147,9 @@ async function loadFiles(options = { insertHistory: true }) { await rebuildBreadCrumb(); // request a breadcrumb paint - window.ui.updateBreadcrumb(); + ui.updateBreadcrumb(); - window.updateHistory(options.insertHistory || false); + updateHistory(options.insertHistory || false); let url; @@ -154,7 +158,7 @@ async function loadFiles(options = { insertHistory: true }) { url = `/api/folders/${app.userHomeFolderId}/listing?t=${timestamp}`; app.currentPath = app.userHomeFolderId; app.breadcrumbPath = []; - window.ui.updateBreadcrumb(); + ui.updateBreadcrumb(); console.log(`Loading user folder: ${app.userHomeFolderName} (${app.userHomeFolderId})`); } else { url = `/api/folders?t=${timestamp}`; @@ -193,7 +197,7 @@ async function loadFiles(options = { insertHistory: true }) { if (response.status === 401 || response.status === 403) { console.warn('Auth error when loading files, showing empty list'); // FIXME: i18n - window.ui.showError(`

Could not load files

`); + ui.showError(`

Could not load files

`); return; } @@ -203,44 +207,44 @@ async function loadFiles(options = { insertHistory: true }) { const listing = await response.json(); - window.ui._items.clear(); - window.ui.resetFilesList(); - if (window.multiSelect) { - window.multiSelect.clear(); - window.multiSelect.init(); // this will wire buttons & select-all-checkbox + ui._items.clear(); + ui.resetFilesList(); + if (multiSelect) { + multiSelect.clear(); + multiSelect.init(); // this will wire buttons & select-all-checkbox } const folderList = Array.isArray(listing.folders) ? listing.folders : []; const fileList = Array.isArray(listing.files) ? listing.files : []; if (folderList.length === 0 && fileList.length === 0) { - window.ui.showEmptyList(); + ui.showEmptyList(); } else { - window.ui.renderFolders(folderList); - window.ui.renderFiles(fileList); + ui.renderFolders(folderList); + ui.renderFiles(fileList); // check if a file was provided - if (window.app.viewFile) { + if (app.viewFile) { let fileFound = null; // lookup for the given fle for (const file of fileList) { - if (file.id === window.app.viewFile) { + if (file.id === app.viewFile) { fileFound = file; break; } } if (fileFound) { - console.log(`file ${window.app.viewFile} found, calling viewer`); - await window.inlineViewer.openFile(fileFound); + console.log(`file ${app.viewFile} found, calling viewer`); + await inlineViewer.openFile(fileFound); } else { // remove file - console.log(`file ${window.app.viewFile} not found`); - window.app.viewFile = null; + console.log(`file ${app.viewFile} not found`); + app.viewFile = null; // correct url/history as file is not found - window.updateHistory(false); + updateHistory(false); } } } @@ -248,10 +252,10 @@ async function loadFiles(options = { insertHistory: true }) { console.log(`Loaded ${folderList.length} folders and ${fileList.length} files`); } catch (error) { console.error('Error loading folders:', error); - window.ui.showNotification('Error', 'Could not load files and folders'); + ui.showNotification('Error', 'Could not load files and folders'); } finally { - window.isLoadingFiles = false; + isLoadingFiles = false; } } -window.loadFiles = loadFiles; +export { loadFiles }; diff --git a/static/js/app/main.js b/static/js/app/main.js index d7ac93cb..fdba54f0 100644 --- a/static/js/app/main.js +++ b/static/js/app/main.js @@ -3,8 +3,31 @@ * This file contains the core functionality, initialization and state management */ -const app = window.app; -const elements = window.appElements; +import { formatFileSize, formatQuotaSize } from '../core/formatters.js'; +import { i18n } from '../core/i18n.js'; +import { Modal } from '../core/modal.js'; +import { fileOps } from '../features/files/fileOperations.js'; +import { multiSelect } from '../features/files/multiSelect.js'; +import { favorites } from '../features/library/favorites.js'; +import { recent } from '../features/library/recent.js'; +import { fileSharing } from '../features/sharing/fileSharing.js'; +import { sharedView } from '../views/shared/sharedView.js'; +import { checkAuthentication } from './authSession.js'; +import { loadFiles } from './filesView.js'; +import { + switchToFavoritesSection, + switchToFilesSection, + switchToMusicSection, + switchToPhotosSection, + switchToRecentFilesSection, + switchToSharedSection, + switchToTrashSection +} from './navigation.js'; +import { performSearch } from './searchView.js'; +import { app, appElements as elements } from './state.js'; +import { loadTrashItems } from './trashView.js'; +import { ui } from './ui.js'; +import { setupUserMenu } from './userMenu.js'; // Upload dropdown listener state (prevents accumulated listeners) /** @type { function | null } */ @@ -125,8 +148,8 @@ function setActionsBarMode(mode, force = false) { elements.gridViewBtn = document.getElementById('grid-view-btn'); elements.listViewBtn = document.getElementById('list-view-btn'); - if (window.i18n?.translateElement) { - window.i18n.translateElement(elements.actionsBar); + if (i18n?.translateElement) { + i18n.translateElement(elements.actionsBar); } if (mode === 'files') { @@ -159,7 +182,7 @@ function setupActionsBarDelegation() { break; } case 'new-folder-btn': { - const folderName = await window.Modal.promptNewFolder(); + const folderName = await Modal.promptNewFolder(); if (folderName) { fileOps.createFolder(folderName); } @@ -173,14 +196,14 @@ function setupActionsBarDelegation() { break; case 'empty-trash-btn': if (await fileOps.emptyTrash()) { - window.loadTrashItems(); + loadTrashItems(); } break; case 'clear-recent-btn': - if (window.recent) { - window.recent.clearRecentFiles(); - window.recent.displayRecentFiles(); - window.ui.showNotification('Cleanup completed', 'Recent files history has been cleared'); + if (recent) { + recent.clearRecentFiles(); + recent.displayRecentFiles(); + ui.showNotification('Cleanup completed', 'Recent files history has been cleared'); } break; default: @@ -245,8 +268,6 @@ function deserializeHash() { * @param {boolean} insertHistory true to change url and browser's history, false to change url only */ function updateHistory(insertHistory) { - const app = window.app; - const historyData = { section: app.currentSection, id: app.currentFolder, @@ -259,8 +280,8 @@ function updateHistory(insertHistory) { historyData.id = app.currentFolder; historyUrl = historyUrl.concat('/folder/', app.currentFolderInfo.id); - if (window.app.viewFile) { - historyUrl = historyUrl.concat('/file/', window.app.viewFile); + if (app.viewFile) { + historyUrl = historyUrl.concat('/file/', app.viewFile); } // update title document.title = `OxiCloud: ${app.currentFolderInfo.path}`; @@ -281,7 +302,7 @@ function updateHistory(insertHistory) { * @returns */ function switchSectionTo(section) { - if (window.app.currentSection === section) + if (app.currentSection === section) // no change ... return; @@ -324,8 +345,8 @@ function initApp() { cacheElements(); // Initialize file sharing module first - if (window.fileSharing?.init) { - window.fileSharing.init(); + if (fileSharing?.init) { + fileSharing.init(); } else { console.warn('fileSharing module not fully initialized'); } @@ -338,35 +359,26 @@ function initApp() { // Setup event listeners setupEventListeners(); - // Ensure inline viewer is initialized - if (!window.inlineViewer && typeof InlineViewer !== 'undefined') { - try { - window.inlineViewer = new InlineViewer(); - } catch (e) { - console.error('Error initializing inline viewer:', e); - } - } - // Initialize favorites module if available - if (window.favorites?.init) { + if (favorites?.init) { console.log('Initializing favorites module'); - window.favorites.init(); + favorites.init(); } else { console.warn('Favorites module not available or not initializable'); } // Initialize recent files module if available - if (window.recent?.init) { + if (recent?.init) { console.log('Initializing recent files module'); - window.recent.init(); + recent.init(); } else { console.warn('Recent files module not available or not initializable'); } // Initialize multi-select / batch actions - if (window.multiSelect?.init) { + if (multiSelect?.init) { console.log('Initializing multi-select module'); - window.multiSelect.init(); + multiSelect.init(); } window.addEventListener('authenticationDone', () => { @@ -376,33 +388,33 @@ function initApp() { if (hashContext.section === 'files') { if (hashContext.path) { console.log(`init: reusing folder from hash URL: ${hashContext.path}`); - window.app.currentPath = hashContext.path; + app.currentPath = hashContext.path; } if (hashContext.file !== null) { - window.app.viewFile = hashContext.file; + app.viewFile = hashContext.file; } - window.loadFiles(); + loadFiles(); } }); // Wait for translations to load before checking authentication - if (window.i18n?.isLoaded?.()) { + if (i18n?.isLoaded?.()) { // Translations already loaded, proceed with authentication - window.checkAuthentication(); + checkAuthentication(); } else { // Wait for translations to be loaded before proceeding console.log('Waiting for translations to load...'); window.addEventListener('translationsLoaded', () => { console.log('Translations loaded, proceeding with authentication'); - window.checkAuthentication(); + checkAuthentication(); }); // Set a timeout as a fallback in case translations take too long setTimeout(() => { - if (!window.i18n?.isLoaded?.()) { + if (!i18n?.isLoaded?.()) { console.warn('Translations loading timeout, proceeding with authentication anyway'); - window.checkAuthentication(); + checkAuthentication(); } }, 3000); // 3 second timeout } @@ -493,14 +505,14 @@ function setupEventListeners() { const hashContext = deserializeHash(); switchSectionTo(hashContext.section); if (hashContext.path) { - window.app.currentPath = hashContext.path; - window.loadFiles({ insertHistory: false }); + app.currentPath = hashContext.path; + loadFiles({ insertHistory: false }); } } else { // change is from history, data provided in event switchSectionTo(e.state.section); - window.app.currentPath = e.state.id; - window.loadFiles({ insertHistory: false }); + app.currentPath = e.state.id; + loadFiles({ insertHistory: false }); } }); @@ -512,19 +524,19 @@ function setupEventListeners() { const query = elements.searchInput.value.trim(); // In shared view, filter locally - if (app.isSharedView && window.sharedView) { - window.sharedView.filterAndSortItems(); + if (app.isSharedView && sharedView) { + sharedView.filterAndSortItems(); return; } if (query) { - window.performSearch(query); + performSearch(query); } else if (app.isSearchMode) { // If search is empty and we're in search mode, return to normal view app.isSearchMode = false; app.currentPath = ''; ui.updateBreadcrumb(''); - window.loadFiles(); + loadFiles(); } } }); @@ -536,7 +548,7 @@ function setupEventListeners() { if (query.length >= SEARCH_MIN_CHARS) { searchDebounceTimer = setTimeout(() => { - window.performSearch(query); + performSearch(query); }, SEARCH_DEBOUNCE_MS); } else if (query.length === 0 && app.isSearchMode) { // User cleared the search input — return to normal view @@ -544,7 +556,7 @@ function setupEventListeners() { app.isSearchMode = false; app.currentPath = ''; ui.updateBreadcrumb(''); - window.loadFiles(); + loadFiles(); }, SEARCH_DEBOUNCE_MS); } }); @@ -554,7 +566,7 @@ function setupEventListeners() { if (searchDebounceTimer) clearTimeout(searchDebounceTimer); const query = elements.searchInput.value.trim(); if (query) { - window.performSearch(query); + performSearch(query); } }); @@ -627,12 +639,12 @@ function setupEventListeners() { default: // Use the proper switchToFilesView function which handles all UI restoration - window.switchToFilesSection(); + switchToFilesSection(); // FIXME: because fileview handles it: need to converge code _updateHistory = false; } - document.title = `OxiCloud: ${window.i18n.t(itemI18nKey)}`; + document.title = `OxiCloud: ${i18n.t(itemI18nKey)}`; if (_updateHistory) { updateHistory(true); @@ -649,7 +661,7 @@ function setupEventListeners() { } // User menu - window.setupUserMenu(); + setupUserMenu(); // Global events to close context menus and deselect cards document.addEventListener('click', (e) => { @@ -666,18 +678,19 @@ function setupEventListeners() { }); } -// Expose needed functions to global scope -window.setActionsBarMode = setActionsBarMode; +// View-switching actions moved to app/navigation.js -// Set up global selectFolder function for navigation -window.selectFolder = (id, name) => { +/** + * Navigate into a folder and refresh the file list. + * @param {string} id + * @param {string} name + */ +export function selectFolder(id, name) { app.breadcrumbPath.push({ id, name }); app.currentPath = id; ui.updateBreadcrumb(); - window.loadFiles(); -}; - -// View-switching actions moved to app/navigation.js + loadFiles(); +} /** * Update the storage usage display with the user's actual storage usage @@ -719,8 +732,8 @@ function updateStorageUsageDisplay(userData) { storageInfo.removeAttribute('data-i18n'); // Use i18n if available - if (window.i18n?.t) { - storageInfo.textContent = window.i18n.t('storage.used', { + if (i18n?.t) { + storageInfo.textContent = i18n.t('storage.used', { percentage: usagePercentage, used: usedFormatted, total: quotaFormatted @@ -733,9 +746,4 @@ function updateStorageUsageDisplay(userData) { console.log(`Updated storage display: ${usagePercentage}% (${usedFormatted} / ${quotaFormatted})`); } -window.updateStorageUsageDisplay = updateStorageUsageDisplay; - -// Initialize app when DOM is ready -window.initApp = initApp; -window.updateHistory = updateHistory; -window.deserializeHash = deserializeHash; +export { deserializeHash, initApp, setActionsBarMode, updateHistory, updateStorageUsageDisplay }; diff --git a/static/js/app/navigation.js b/static/js/app/navigation.js index 14269646..6884eff3 100644 --- a/static/js/app/navigation.js +++ b/static/js/app/navigation.js @@ -3,6 +3,19 @@ * Extracted from main.js to keep navigation concerns isolated. */ +import { i18n } from '../core/i18n.js'; +import { multiSelect } from '../features/files/multiSelect.js'; +import { favorites } from '../features/library/favorites.js'; +import { musicView } from '../features/library/music.js'; +import { photosView } from '../features/library/photos.js'; +import { recent } from '../features/library/recent.js'; +import { sharedView } from '../views/shared/sharedView.js'; +import { loadFiles } from './filesView.js'; +import { setActionsBarMode } from './main.js'; +import { app, appElements } from './state.js'; +import { loadTrashItems } from './trashView.js'; +import { ui } from './ui.js'; + /** * Sync the hidden class and inline display for the grid/list containers * based on the current view preference. @@ -12,7 +25,7 @@ function syncViewContainers() { const gridViewBtn = document.getElementById('grid-view-btn'); const listViewBtn = document.getElementById('list-view-btn'); - const isGrid = window.app.currentView === 'grid'; + const isGrid = app.currentView === 'grid'; if (isGrid) { filesList.classList.remove('files-list-view'); filesList.classList.add('files-grid-view'); @@ -89,13 +102,6 @@ function initSidebarToggle() { } }); }); - - // Expose functions globally - window.sidebarToggle = { - open: openSidebar, - close: closeSidebar, - toggle: toggleSidebar - }; } // Initialize sidebar toggle when DOM is ready @@ -128,17 +134,17 @@ function getSectionFromNavItem(navItem) { * @returns {boolean} true if the section changed */ function setCurrentSection(section) { - if (window.app.currentSection === section) return false; + if (app.currentSection === section) return false; // Set all view flags - true for active section, false for others Object.entries(VIEW_FLAGS).forEach(([key, flag]) => { - window.app[flag] = key === section; + app[flag] = key === section; }); - window.app.currentSection = section; + app.currentSection = section; // Update nav item active classes by finding matching item from DOM - window.appElements.navItems.forEach((item) => { + appElements.navItems.forEach((item) => { const itemSection = getSectionFromNavItem(item); item.classList.toggle('active', itemSection === section); }); @@ -146,22 +152,22 @@ function setCurrentSection(section) { // Update page title const titleKey = `nav.${section}`; const defaultTitle = section.charAt(0).toUpperCase() + section.slice(1); - window.appElements.pageTitle.textContent = window.i18n ? window.i18n.t(titleKey) : defaultTitle; - window.appElements.pageTitle.setAttribute('data-i18n', titleKey); + appElements.pageTitle.textContent = i18n ? i18n.t(titleKey) : defaultTitle; + appElements.pageTitle.setAttribute('data-i18n', titleKey); // Hide sharedView when switching to any other section - if (section !== 'shared' && window.sharedView) { - window.sharedView.hide(); + if (section !== 'shared' && sharedView) { + sharedView.hide(); } // Hide photosView when switching to any other section - if (section !== 'photos' && window.photosView) { - window.photosView.hide(); + if (section !== 'photos' && photosView) { + photosView.hide(); } // Hide musicView when switching to any other section - if (section !== 'music' && window.musicView) { - window.musicView.hide(); + if (section !== 'music' && musicView) { + musicView.hide(); } return true; @@ -175,27 +181,27 @@ function switchToSharedSection() { breadcrumb?.classList.add('hidden'); // Hide actions-bar for shared view - window.setActionsBarMode('hidden'); + setActionsBarMode('hidden'); //reset files view + remove any error - window.ui.resetFilesList(); + ui.resetFilesList(); // Hide file containers toggleFileContainer(false); // Show shared view - if (window.sharedView) { - window.sharedView.init(); - window.sharedView.show(); + if (sharedView) { + sharedView.init(); + sharedView.show(); } - if (window.multiSelect) window.multiSelect.clear(); + if (multiSelect) multiSelect.clear(); } function switchToFilesSection() { if (!setCurrentSection('files')) return; // Set actions bar mode - window.setActionsBarMode('files', true); + setActionsBarMode('files', true); // Show breadcrumb (only in Files view) const breadcrumb = document.querySelector('.breadcrumb'); @@ -208,22 +214,22 @@ function switchToFilesSection() { syncViewContainers(); //reset files view + remove any error - window.ui.resetFilesList(); + ui.resetFilesList(); // Reset to home folder and update breadcrumb - window.app.currentPath = window.app.userHomeFolderId || ''; - window.app.breadcrumbPath = []; - window.ui.updateBreadcrumb(); - if (window.multiSelect) window.multiSelect.clear(); + app.currentPath = app.userHomeFolderId || ''; + app.breadcrumbPath = []; + ui.updateBreadcrumb(); + if (multiSelect) multiSelect.clear(); - window.loadFiles(); + loadFiles(); } function switchToFavoritesSection() { if (!setCurrentSection('favorites')) return; // Set actions bar mode - window.setActionsBarMode('favorites'); + setActionsBarMode('favorites'); // Hide breadcrumb (only shown in Files view) const breadcrumb = document.querySelector('.breadcrumb'); @@ -236,26 +242,26 @@ function switchToFavoritesSection() { syncViewContainers(); //reset files view + remove any error - window.ui.resetFilesList(); + ui.resetFilesList(); - if (window.favorites) { - window.favorites.displayFavorites(); + if (favorites) { + favorites.displayFavorites(); } else { console.error('Favorites module not loaded or initialized'); - window.ui.showError(` + ui.showError(`

Error loading the favorites module

`); } - if (window.multiSelect) window.multiSelect.clear(); + if (multiSelect) multiSelect.clear(); } function switchToRecentFilesSection() { if (!setCurrentSection('recent')) return; // Set actions bar mode - window.setActionsBarMode('recent'); + setActionsBarMode('recent'); // Hide breadcrumb (only shown in Files view) const breadcrumb = document.querySelector('.breadcrumb'); @@ -268,18 +274,18 @@ function switchToRecentFilesSection() { syncViewContainers(); //reset files view + remove any error - window.ui.resetFilesList(); + ui.resetFilesList(); - if (window.recent) { - window.recent.displayRecentFiles(); + if (recent) { + recent.displayRecentFiles(); } else { console.error('Recent files module not loaded or initialized'); - window.ui.showError(` + ui.showError(`

Error loading the recent module

`); } - if (window.multiSelect) window.multiSelect.clear(); + if (multiSelect) multiSelect.clear(); } function switchToPhotosSection() { @@ -290,19 +296,19 @@ function switchToPhotosSection() { breadcrumb?.classList.add('hidden'); // Hide actions-bar (photos has its own upload via selection bar) - window.setActionsBarMode('hidden'); + setActionsBarMode('hidden'); //reset files view + remove any error - window.ui.resetFilesList(); + ui.resetFilesList(); // Hide file containers toggleFileContainer(false); // Show photos view - if (window.photosView) { - window.photosView.show(); + if (photosView) { + photosView.show(); } - if (window.multiSelect) window.multiSelect.clear(); + if (multiSelect) multiSelect.clear(); } function switchToTrashSection() { @@ -319,15 +325,15 @@ function switchToTrashSection() { setActionsBarMode('trash'); //reset files view + remove any error - window.ui.resetFilesList(); + ui.resetFilesList(); //ensure buttons match the current view syncViewContainers(); // Load trash items - window.loadTrashItems(); + loadTrashItems(); - if (window.multiSelect) window.multiSelect.clear(); + if (multiSelect) multiSelect.clear(); } function switchToMusicSection() { @@ -341,27 +347,29 @@ function switchToMusicSection() { toggleFileContainer(false); // Hide actions-bar - window.setActionsBarMode('hidden'); + setActionsBarMode('hidden'); // Reset files view + remove any error - window.ui.resetFilesList(); + ui.resetFilesList(); // Hide list header (created by resetFilesList) const listHeader = document.querySelector('.list-header'); listHeader?.classList.add('hidden'); // Show music view - if (window.musicView) { - window.musicView.show(); + if (musicView) { + musicView.show(); } - if (window.multiSelect) window.multiSelect.clear(); + if (multiSelect) multiSelect.clear(); } -window.switchToFilesSection = switchToFilesSection; -window.switchToSharedSection = switchToSharedSection; -window.switchToFavoritesSection = switchToFavoritesSection; -window.switchToRecentFilesSection = switchToRecentFilesSection; -window.switchToPhotosSection = switchToPhotosSection; -window.switchToTrashSection = switchToTrashSection; -window.switchToMusicSection = switchToMusicSection; -window.syncViewContainers = syncViewContainers; +export { + switchToFavoritesSection, + switchToFilesSection, + switchToMusicSection, + switchToPhotosSection, + switchToRecentFilesSection, + switchToSharedSection, + switchToTrashSection, + syncViewContainers +}; diff --git a/static/js/app/searchView.js b/static/js/app/searchView.js index 2dfcfc85..2ace946f 100644 --- a/static/js/app/searchView.js +++ b/static/js/app/searchView.js @@ -2,16 +2,23 @@ * Search view orchestration logic */ -async function performSearch(query, sortBy) { - const app = window.app; +import { search } from '../features/files/search.js'; +import { resolveHomeFolder } from './authSession.js'; +import { app } from './state.js'; +import { ui } from './ui.js'; +/** + * @param {string} query + * @param {string} [sortBy] + */ +async function performSearch(query, sortBy) { console.log(`Performing search for: "${query}" (sort: ${sortBy || 'relevance'})`); try { app.isSearchMode = true; - window.ui.updateBreadcrumb(`Search: "${query}"`); + ui.updateBreadcrumb(`Search: "${query}"`); - window.ui.showError(`

Searching for "${query}"...

`); + ui.showError(`

Searching for "${query}"...

`); const options = { recursive: true, @@ -22,7 +29,7 @@ async function performSearch(query, sortBy) { if (!app.isTrashView) { // Ensure we have a valid folder_id before searching if (!app.currentPath || app.currentPath === '') { - await window.resolveHomeFolder(); + await resolveHomeFolder(); } // Only set folder_id if we have a valid value @@ -32,11 +39,11 @@ async function performSearch(query, sortBy) { // If still no valid folder_id, search will be global (without folder_id) } - const searchResults = await window.search.searchFiles(query, options); - window.search.displaySearchResults(searchResults); + const searchResults = await search.searchFiles(query, options); + search.displaySearchResults(searchResults); } catch (error) { console.error('Search error:', error); - window.ui.showNotification('Error', 'Error performing search'); + ui.showNotification('Error', 'Error performing search'); } } @@ -47,4 +54,4 @@ document.addEventListener('search-resort', (e) => { } }); -window.performSearch = performSearch; +export { performSearch }; diff --git a/static/js/app/state.js b/static/js/app/state.js index 1e2bfa7a..9397fcdc 100644 --- a/static/js/app/state.js +++ b/static/js/app/state.js @@ -3,7 +3,7 @@ * Centralized mutable state for app and cached DOM references. */ -window.app = { +export const app = { currentView: 'grid', currentPath: '', currentFolder: null, @@ -29,4 +29,4 @@ window.app = { viewFile: null // current file in inline view }; -window.appElements = {}; +export const appElements = {}; diff --git a/static/js/app/trashView.js b/static/js/app/trashView.js index 9ad63788..102d8e56 100644 --- a/static/js/app/trashView.js +++ b/static/js/app/trashView.js @@ -2,13 +2,20 @@ * Trash view loading and rendering logic */ +import { escapeHtml, formatDateTime } from '../core/formatters.js'; +import { i18n } from '../core/i18n.js'; +import { fileOps } from '../features/files/fileOperations.js'; +import { multiSelect } from '../features/files/multiSelect.js'; +import { appElements } from './state.js'; +import { ui } from './ui.js'; + async function loadTrashItems() { - const elements = window.appElements; + const elements = appElements; try { - if (window.multiSelect) window.multiSelect.clear(); - window.ui.resetFilesList(); // ensure also list visible & error hidden - const _tt = window.i18n?.t ? window.i18n.t : (k) => k.split('.').pop(); + if (multiSelect) multiSelect.clear(); + ui.resetFilesList(); // ensure also list visible & error hidden + const _tt = i18n?.t ? i18n.t : (k) => k.split('.').pop(); elements.filesList.innerHTML = `
${_tt('files.name')}
@@ -19,14 +26,14 @@ async function loadTrashItems() {
`; - window.ui.updateBreadcrumb(''); + ui.updateBreadcrumb(''); - const trashItems = await window.fileOps.getTrashItems(); + const trashItems = await fileOps.getTrashItems(); if (trashItems.length === 0) { - window.ui.showError(` + ui.showError(` -

${window.i18n ? window.i18n.t('trash.empty_state') : 'The trash is empty'}

+

${i18n ? i18n.t('trash.empty_state') : 'The trash is empty'}

`); return; } @@ -36,33 +43,27 @@ async function loadTrashItems() { }); } catch (error) { console.error('Error loading trash items:', error); - window.ui.showNotification('Error', 'Error loading trash items'); + ui.showNotification('Error', 'Error loading trash items'); } } function addTrashItemToView(item) { - const elements = window.appElements; + const elements = appElements; const isFile = item.item_type === 'file'; - const formattedDate = window.formatDateTime(item.trashed_at); + const formattedDate = formatDateTime(item.trashed_at); let iconClass; let typeLabel; let iconSpecialClass = ''; if (!isFile) { iconClass = item.icon_class || 'fas fa-folder'; - typeLabel = window.i18n ? window.i18n.t('files.file_types.folder') : 'Folder'; + typeLabel = i18n ? i18n.t('files.file_types.folder') : 'Folder'; } else { - iconClass = item.icon_class || (window.ui?.getIconClass ? window.ui.getIconClass(item.name) : 'fas fa-file'); - iconSpecialClass = window.ui?.getIconSpecialClass ? window.ui.getIconSpecialClass(item.name) : ''; + iconClass = item.icon_class || (ui?.getIconClass ? ui.getIconClass(item.name) : 'fas fa-file'); + iconSpecialClass = ui?.getIconSpecialClass ? ui.getIconSpecialClass(item.name) : ''; const cat = item.category || ''; - typeLabel = cat - ? window.i18n - ? window.i18n.t(`files.file_types.${cat.toLowerCase()}`) || cat - : cat - : window.i18n - ? window.i18n.t('files.file_types.document') - : 'Document'; + typeLabel = cat ? (i18n ? i18n.t(`files.file_types.${cat.toLowerCase()}`) || cat : cat) : i18n ? i18n.t('files.file_types.document') : 'Document'; } const isFolder = !isFile; @@ -85,10 +86,10 @@ function addTrashItemToView(item) {
${escapeHtml(item.original_path || '--')}
${escapeHtml(formattedDate)}
- -
@@ -96,19 +97,19 @@ function addTrashItemToView(item) { listElement.querySelector('.btn-restore').addEventListener('click', async (e) => { e.stopPropagation(); - if (await window.fileOps.restoreFromTrash(item.id)) { - window.loadTrashItems(); + if (await fileOps.restoreFromTrash(item.id)) { + loadTrashItems(); } }); listElement.querySelector('.btn-delete').addEventListener('click', async (e) => { e.stopPropagation(); - if (await window.fileOps.deletePermanently(item.id)) { - window.loadTrashItems(); + if (await fileOps.deletePermanently(item.id)) { + loadTrashItems(); } }); elements.filesList.appendChild(listElement); } -window.loadTrashItems = loadTrashItems; +export { loadTrashItems }; diff --git a/static/js/app/ui.js b/static/js/app/ui.js index 1323207c..1c3e7f83 100644 --- a/static/js/app/ui.js +++ b/static/js/app/ui.js @@ -5,6 +5,26 @@ // @ts-check +import { escapeHtml, formatDateTime, formatFileSize } from '../core/formatters.js'; +import { i18n } from '../core/i18n.js'; +import { OxiIcons, replaceIconsInElement } from '../core/icons.js'; +import { contextMenus } from '../features/files/contextMenus.js'; +import { fileOps } from '../features/files/fileOperations.js'; +import { inlineViewer } from '../features/files/inlineViewer.js'; +import { multiSelect } from '../features/files/multiSelect.js'; +import { wopiEditor } from '../features/files/wopiEditor.js'; +import { favorites } from '../features/library/favorites.js'; +import { recent } from '../features/library/recent.js'; +import { fileSharing } from '../features/sharing/fileSharing.js'; +import { loadFiles } from './filesView.js'; +import { updateHistory } from './main.js'; +import { syncViewContainers } from './navigation.js'; +import { app } from './state.js'; +import { uiFileTypes } from './uiFileTypes.js'; +import { uiNotifications } from './uiNotifications.js'; + +let __rubberBandJustFinished = false; + // UI Module const ui = { /** @type {HTMLDListElement | null} */ @@ -297,13 +317,13 @@ const ui = { document.body.appendChild(playlistDialog); document.getElementById('playlist-cancel-btn').addEventListener('click', () => { - if (window.contextMenus) window.contextMenus.closePlaylistDialog(); + if (contextMenus) contextMenus.closePlaylistDialog(); }); } // Assign events to menu items - if (window.contextMenus) { - window.contextMenus.assignMenuEvents(); + if (contextMenus) { + contextMenus.assignMenuEvents(); } else { console.warn('contextMenus module not loaded'); } @@ -478,10 +498,10 @@ const ui = { switchToGridView() { this._hydrateViewIfNeeded(); - window.app.currentView = 'grid'; + app.currentView = 'grid'; localStorage.setItem('oxicloud-view', 'grid'); - window.syncViewContainers(); + syncViewContainers(); }, /** @@ -490,10 +510,10 @@ const ui = { switchToListView() { this._hydrateViewIfNeeded(); - window.app.currentView = 'list'; + app.currentView = 'list'; localStorage.setItem('oxicloud-view', 'list'); - window.syncViewContainers(); + syncViewContainers(); }, /** @@ -504,12 +524,12 @@ const ui = { updateBreadcrumb() { const breadcrumb = document.querySelector('.breadcrumb'); breadcrumb.innerHTML = ''; - const path = window.app.breadcrumbPath; // [{id, name}, ...] + const path = app.breadcrumbPath; // [{id, name}, ...] // Helper function to safely get translation text const getTranslatedText = (key, defaultValue) => { - if (!window.i18n?.t) return defaultValue; - return window.i18n.t(key); + if (!i18n?.t) return defaultValue; + return i18n.t(key); }; // -- Home icon (always present, clickable to go to root) -- @@ -519,24 +539,24 @@ const ui = { homeIcon.title = getTranslatedText('breadcrumb.home', 'Home'); // Home is always clickable if we have a home folder - if (window.app.userHomeFolderId) { + if (app.userHomeFolderId) { homeIcon.classList.add('breadcrumb-link'); homeIcon.addEventListener('click', () => { - window.app.breadcrumbPath = []; - window.app.currentPath = window.app.userHomeFolderId; + app.breadcrumbPath = []; + app.currentPath = app.userHomeFolderId; this.updateBreadcrumb(); - window.loadFiles(); + loadFiles(); }); } breadcrumb.appendChild(homeIcon); // -- Root/Home folder name (if available) is always the first element of the breadcrumb -- // TODO clarify the difference between homeIcon & this first element - if (window.app.userHomeFolderName) { - if (path.length === 0 || path[0].id !== window.app.userHomeFolderId) { + if (app.userHomeFolderName) { + if (path.length === 0 || path[0].id !== app.userHomeFolderId) { path.unshift({ - name: window.app.userHomeFolderName, - id: window.app.userHomeFolderId + name: app.userHomeFolderName, + id: app.userHomeFolderId }); } } @@ -561,10 +581,10 @@ const ui = { // Intermediate segment: clickable – truncate path to this level item.classList.add('breadcrumb-link'); item.addEventListener('click', () => { - window.app.breadcrumbPath = path.slice(0, index + 1); - window.app.currentPath = segment.id; + app.breadcrumbPath = path.slice(0, index + 1); + app.currentPath = segment.id; this.updateBreadcrumb(); - window.loadFiles(); + loadFiles(); }); // can drag files on this folder @@ -611,7 +631,7 @@ const ui = { * @returns {boolean} */ isViewableFile(file) { - return window.uiFileTypes.isViewableFile(file); + return uiFileTypes.isViewableFile(file); }, /** @@ -620,7 +640,7 @@ const ui = { * (e.g. trash items). */ getIconClass(fileName) { - return window.uiFileTypes.getIconClass(fileName); + return uiFileTypes.getIconClass(fileName); }, /** @@ -628,7 +648,7 @@ const ui = { * Used as fallback when the backend DTO doesn't include icon_special_class. */ getIconSpecialClass(fileName) { - return window.uiFileTypes.getIconSpecialClass(fileName); + return uiFileTypes.getIconSpecialClass(fileName); }, /** @@ -637,7 +657,7 @@ const ui = { * @param {string} message - Notification message */ showNotification(title, message) { - window.uiNotifications.show(title, message); + uiNotifications.show(title, message); }, /** @@ -647,7 +667,7 @@ const ui = { const menu = document.getElementById('folder-context-menu'); if (menu) { menu.style.display = 'none'; - window.app.contextMenuTargetFolder = null; + app.contextMenuTargetFolder = null; } }, @@ -658,7 +678,7 @@ const ui = { const menu = document.getElementById('file-context-menu'); if (menu) { menu.style.display = 'none'; - window.app.contextMenuTargetFile = null; + app.contextMenuTargetFile = null; } }, @@ -679,8 +699,8 @@ const ui = { _delegationReady: false, _getActiveView() { - if (window.app && window.app.currentView === 'list') return 'list'; - if (window.app && window.app.currentView === 'grid') return 'grid'; + if (app && app.currentView === 'list') return 'list'; + if (app && app.currentView === 'grid') return 'grid'; const stored = localStorage.getItem('oxicloud-view'); return stored === 'list' ? 'list' : 'grid'; @@ -737,9 +757,9 @@ const ui = { * @param {any} dataTransfer fallback if nothing is selected */ async _dropToFolder(action, targetFolderId, dataTransfer) { - const selection = window.multiSelect.getSelection(targetFolderId); + const selection = multiSelect.getSelection(targetFolderId); - window.multiSelect.clear(); + multiSelect.clear(); if (selection.fileIds.length === 0 && selection.folderIds.length === 0) { // try to use dataTransfer (direct move without selection) @@ -770,20 +790,20 @@ const ui = { let result; switch (action) { case 'copy': - result = await window.fileOps.batchCopy(selection.fileIds, selection.folderIds, targetFolderId); + result = await fileOps.batchCopy(selection.fileIds, selection.folderIds, targetFolderId); break; case 'move': - result = await window.fileOps.batchMove(selection.fileIds, selection.folderIds, targetFolderId); + result = await fileOps.batchMove(selection.fileIds, selection.folderIds, targetFolderId); // redraw directory - if (result.success > 0) window.loadFiles(); + if (result.success > 0) loadFiles(); break; default: console.error(`drag and drop: action ${action} unknown`); return; } - window.multiSelect.showBatchResult(action, result); + multiSelect.showBatchResult(action, result); console.log(result); }, @@ -837,7 +857,7 @@ const ui = { const openFile = async (file) => { if (!file) return; - if (window.recent) { + if (recent) { document.dispatchEvent(new CustomEvent('file-accessed', { detail: { file } })); } // WOPI editor intercept: open Office documents in the WOPI editor @@ -846,8 +866,8 @@ const ui = { const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico', 'heic', 'heif', 'avif', 'tiff']; const isImage = file.mime_type?.startsWith('image/') || imageExts.includes(ext); try { - if (!isImage && window.wopiEditor && (await window.wopiEditor.canEdit(file.name))) { - await window.wopiEditor.openInModal(file.id, file.name, 'edit'); + if (!isImage && wopiEditor && (await wopiEditor.canEdit(file.name))) { + await wopiEditor.openInModal(file.id, file.name, 'edit'); return; } } catch (e) { @@ -855,38 +875,38 @@ const ui = { } if (this.isViewableFile(file) || isImage) { - if (window.inlineViewer) { - window.inlineViewer.openFile(file); + if (inlineViewer) { + inlineViewer.openFile(file); // update history - window.app.viewFile = file.id; - window.updateHistory(false); + app.viewFile = file.id; + updateHistory(false); } else { - window.fileOps.downloadFile(file.id, file.name); + fileOps.downloadFile(file.id, file.name); } } else { - window.fileOps.downloadFile(file.id, file.name); + fileOps.downloadFile(file.id, file.name); } }; const navigateFolder = (card) => { const folderId = card.dataset.folderId; const folderName = card.dataset.folderName; - window.app.breadcrumbPath.push({ id: folderId, name: folderName }); - window.app.currentPath = folderId; + app.breadcrumbPath.push({ id: folderId, name: folderName }); + app.currentPath = folderId; this.updateBreadcrumb(); - window.loadFiles(); + loadFiles(); }; const setContextTarget = (card, info) => { if (info.type === 'folder') { - window.app.contextMenuTargetFolder = { + app.contextMenuTargetFolder = { id: info.id, name: card.dataset.folderName, parent_id: card.dataset.parentId || '' }; } else { const fileData = info.data || self._items.get(info.id); - window.app.contextMenuTargetFile = { + app.contextMenuTargetFile = { id: info.id, name: card.dataset.fileName, folder_id: card.dataset.folderId || '', @@ -932,8 +952,8 @@ const ui = { } // shiftkey is used to complete selection - if (e.shiftKey && window.multiSelect) { - window.multiSelect.handleToggleItem(card, e); + if (e.shiftKey && multiSelect) { + multiSelect.handleToggleItem(card, e); return; } @@ -962,14 +982,14 @@ const ui = { setContextTarget(card, info); const menuId = info.type === 'folder' ? 'folder-context-menu' : 'file-context-menu'; const menu = document.getElementById(menuId); - if (window.contextMenus && typeof window.contextMenus.syncFavoriteOptionLabels === 'function') { - window.contextMenus.syncFavoriteOptionLabels(); + if (contextMenus && typeof contextMenus.syncFavoriteOptionLabels === 'function') { + contextMenus.syncFavoriteOptionLabels(); } - if (window.contextMenus && typeof window.contextMenus.syncWopiOptionVisibility === 'function') { - window.contextMenus.syncWopiOptionVisibility().catch(() => {}); + if (contextMenus && typeof contextMenus.syncWopiOptionVisibility === 'function') { + contextMenus.syncWopiOptionVisibility().catch(() => {}); } - if (window.contextMenus && typeof window.contextMenus.syncAddToPlaylistOption === 'function') { - window.contextMenus.syncAddToPlaylistOption(); + if (contextMenus && typeof contextMenus.syncAddToPlaylistOption === 'function') { + contextMenus.syncAddToPlaylistOption(); } menu.style.left = `${e.pageX}px`; menu.style.top = `${e.pageY}px`; @@ -1105,7 +1125,7 @@ const ui = { e.stopImmediatePropagation(); e.preventDefault(); - if (!window.favorites) return; + if (!favorites) return; const itemId = star.dataset.itemId; const itemType = star.dataset.itemType; @@ -1115,15 +1135,15 @@ const ui = { if (isActive) { this.setFavoriteVisualState(itemId, itemType, false); - window.favorites.removeFromFavorites(itemId, itemType); + favorites.removeFromFavorites(itemId, itemType); } else { this.setFavoriteVisualState(itemId, itemType, true); - window.favorites.addToFavorites(itemId, itemName, itemType); + favorites.addToFavorites(itemId, itemName, itemType); } // Keep context-menu label in sync if available - if (window.contextMenus && typeof window.contextMenus.syncFavoriteOptionLabels === 'function') { - window.contextMenus.syncFavoriteOptionLabels(); + if (contextMenus && typeof contextMenus.syncFavoriteOptionLabels === 'function') { + contextMenus.syncFavoriteOptionLabels(); } }); }, @@ -1142,8 +1162,8 @@ const ui = { // SVG icon path (after icons.js replacement) const svg = starBtn.querySelector('svg'); - const filledPath = window.OxiIcons?.star; - const outlinePath = window.OxiIcons?.['star-outline']; + const filledPath = OxiIcons?.star; + const outlinePath = OxiIcons?.['star-outline']; const targetPath = isFavorite ? filledPath : outlinePath; if (svg && targetPath) { const p = svg.querySelector('path'); @@ -1168,9 +1188,7 @@ const ui = { inlineStar = document.createElement('i'); inlineStar.className = 'fas fa-star favorite-star-inline'; nameCell.appendChild(inlineStar); - if (window.OxiIcons && typeof window.OxiIcons.replaceIconsInElement === 'function') { - window.OxiIcons.replaceIconsInElement(nameCell); - } + replaceIconsInElement(nameCell); } else if (!isFavorite && inlineStar) { inlineStar.remove(); } @@ -1190,8 +1208,8 @@ const ui = { el.dataset.folderName = folder.name; el.dataset.parentId = folder.parent_id || ''; - const isFav = window.favorites?.isFavorite(folder.id, 'folder'); - const formattedDate = window.formatDateTime(folder.modified_at); + const isFav = favorites?.isFavorite(folder.id, 'folder'); + const formattedDate = formatDateTime(folder.modified_at); el.innerHTML = `
@@ -1202,7 +1220,7 @@ const ui = { ${escapeHtml(folder.name)} ${isFav ? '' : ''} -
${window.i18n ? window.i18n.t('files.file_types.folder') : 'Folder'}
+
${i18n ? i18n.t('files.file_types.folder') : 'Folder'}
--
${formattedDate}
@@ -1213,7 +1231,7 @@ const ui = {
`; - if (window.app.currentPath !== '') { + if (app.currentPath !== '') { el.setAttribute('draggable', 'true'); } this._bindStarClick(el); @@ -1225,16 +1243,10 @@ const ui = { const iconClass = file.icon_class || this.getIconClass(file.name); const iconSpecialClass = file.icon_special_class || this.getIconSpecialClass(file.name); const cat = file.category || ''; - const typeLabel = cat - ? window.i18n - ? window.i18n.t(`files.file_types.${cat.toLowerCase()}`) || cat - : cat - : window.i18n - ? window.i18n.t('files.file_types.document') - : 'Document'; - const fileSize = file.size_formatted || window.formatFileSize(file.size); - const formattedDate = window.formatDateTime(file.modified_at); - const isFav = window.favorites?.isFavorite(file.id, 'file'); + const typeLabel = cat ? (i18n ? i18n.t(`files.file_types.${cat.toLowerCase()}`) || cat : cat) : i18n ? i18n.t('files.file_types.document') : 'Document'; + const fileSize = file.size_formatted || formatFileSize(file.size); + const formattedDate = formatDateTime(file.modified_at); + const isFav = favorites?.isFavorite(file.id, 'file'); const el = document.createElement('div'); el.className = 'file-item'; @@ -1293,7 +1305,7 @@ const ui = {
`; - if (window.i18n?.translateElement) window.i18n.translateElement(filesList); + if (i18n?.translateElement) i18n.translateElement(filesList); filesList.classList.remove('hidden'); filesContainerError?.classList.add('hidden'); @@ -1317,7 +1329,7 @@ const ui = { const filesList = document.getElementById('files-list'); if (filesContainerError) filesContainerError.innerHTML = content; - if (window.i18n?.translateElement) window.i18n.translateElement(filesContainerError); + if (i18n?.translateElement) i18n.translateElement(filesContainerError); filesContainerError?.classList.remove('hidden'); filesList?.classList.add('hidden'); @@ -1403,8 +1415,8 @@ const ui = { * Routes through the multiSelect module so batch actions know about selected items. */ function toggleCardSelection(card, event) { - if (window.multiSelect) { - window.multiSelect.handleToggleItem(card, event); + if (multiSelect) { + multiSelect.handleToggleItem(card, event); } else { card.classList.toggle('selected'); } @@ -1435,14 +1447,14 @@ function showContextMenuAtElement(triggerElement, menuId) { top = rect.top - 4 + window.scrollY; // flip above if no room } - if (window.contextMenus && typeof window.contextMenus.syncFavoriteOptionLabels === 'function') { - window.contextMenus.syncFavoriteOptionLabels(); + if (contextMenus && typeof contextMenus.syncFavoriteOptionLabels === 'function') { + contextMenus.syncFavoriteOptionLabels(); } - if (window.contextMenus && typeof window.contextMenus.syncWopiOptionVisibility === 'function') { - window.contextMenus.syncWopiOptionVisibility().catch(() => {}); + if (contextMenus && typeof contextMenus.syncWopiOptionVisibility === 'function') { + contextMenus.syncWopiOptionVisibility().catch(() => {}); } - if (window.contextMenus && typeof window.contextMenus.syncAddToPlaylistOption === 'function') { - window.contextMenus.syncAddToPlaylistOption(); + if (contextMenus && typeof contextMenus.syncAddToPlaylistOption === 'function') { + contextMenus.syncAddToPlaylistOption(); } menu.style.left = `${left}px`; @@ -1532,16 +1544,16 @@ function initRubberBandSelection() { card.classList.add('selected'); // Sync with multiSelect module - if (window.multiSelect) { - const info = window.multiSelect._extractInfo(card); - if (info) window.multiSelect.select(info.id, info.name, info.type, info.parentId); + if (multiSelect) { + const info = multiSelect._extractInfo(card); + if (info) multiSelect.select(info.id, info.name, info.type, info.parentId); } } else { card.classList.remove('selected'); // Deselect from multiSelect module - if (window.multiSelect) { - const info = window.multiSelect._extractInfo(card); - if (info) window.multiSelect.deselect(info.id); + if (multiSelect) { + const info = multiSelect._extractInfo(card); + if (info) multiSelect.deselect(info.id); } } }); @@ -1553,13 +1565,13 @@ function initRubberBandSelection() { const hadSelection = selRect.style.display === 'block'; selRect.style.display = 'none'; // Update the batch bar after rubber band selection completes - if (window.multiSelect) window.multiSelect._syncUI(); + if (multiSelect) multiSelect._syncUI(); // Suppress the click event that follows mouseup so the global // deselect handler doesn't immediately clear the selection. if (hadSelection) { - window.__rubberBandJustFinished = true; + __rubberBandJustFinished = true; requestAnimationFrame(() => { - window.__rubberBandJustFinished = false; + __rubberBandJustFinished = false; }); } }); @@ -1572,11 +1584,6 @@ if (document.readyState === 'loading') { initRubberBandSelection(); } -// Expose helpers globally -window.toggleCardSelection = toggleCardSelection; -window.showContextMenuAtElement = showContextMenuAtElement; -window.initRubberBandSelection = initRubberBandSelection; - /** * Show a modern confirm dialog (replaces native confirm()) * @param {Object} options @@ -1588,9 +1595,9 @@ window.initRubberBandSelection = initRubberBandSelection; * @returns {Promise} true if confirmed, false if cancelled */ function showConfirmDialog({ title, message, confirmText, cancelText, danger = true } = {}) { - const ct = confirmText || (window.i18n ? window.i18n.t('actions.delete') : 'Delete'); - const cc = cancelText || (window.i18n ? window.i18n.t('actions.cancel') : 'Cancel'); - const t = title || (window.i18n ? window.i18n.t('dialogs.confirm_title') : 'Confirm action'); + const ct = confirmText || (i18n ? i18n.t('actions.delete') : 'Delete'); + const cc = cancelText || (i18n ? i18n.t('actions.cancel') : 'Cancel'); + const t = title || (i18n ? i18n.t('dialogs.confirm_title') : 'Confirm action'); return new Promise((resolve) => { // Remove any previous confirm dialog @@ -1633,7 +1640,5 @@ function showConfirmDialog({ title, message, confirmText, cancelText, danger = t }); }); } -window.showConfirmDialog = showConfirmDialog; -// Expose UI module globally -window.ui = ui; +export { initRubberBandSelection, showConfirmDialog, showContextMenuAtElement, toggleCardSelection, ui }; diff --git a/static/js/app/uiFileTypes.js b/static/js/app/uiFileTypes.js index dd1f5761..d547df46 100644 --- a/static/js/app/uiFileTypes.js +++ b/static/js/app/uiFileTypes.js @@ -3,6 +3,8 @@ * Isolated icon and preview classification helpers used by ui.js. */ +import { isTextViewable } from '../core/formatters.js'; + const uiFileTypes = { // TODO: 'd better to use a canViw() method in inlineViewer isViewableFile(file) { @@ -11,7 +13,7 @@ const uiFileTypes = { if (file.mime_type === 'application/pdf') return true; if (file.mime_type.startsWith('audio/')) return true; if (file.mime_type.startsWith('video/')) return true; - return window.isTextViewable ? window.isTextViewable(file.mime_type) : false; + return isTextViewable(file.mime_type); }, getIconClass(fileName) { @@ -170,4 +172,4 @@ const uiFileTypes = { } }; -window.uiFileTypes = uiFileTypes; +export { uiFileTypes }; diff --git a/static/js/app/uiNotifications.js b/static/js/app/uiNotifications.js index 76244219..70473ddc 100644 --- a/static/js/app/uiNotifications.js +++ b/static/js/app/uiNotifications.js @@ -3,9 +3,11 @@ * Isolates notification rendering policy from ui.js. */ +import { notifications } from '../core/notifications.js'; + const uiNotifications = { show(title, message) { - if (window.notifications && typeof window.notifications.addNotification === 'function') { + if (notifications && typeof notifications.addNotification === 'function') { const normalizedTitle = String(title || '').toLowerCase(); let icon = 'fa-info-circle'; let iconClass = 'upload'; @@ -27,7 +29,7 @@ const uiNotifications = { iconClass = 'success'; } - window.notifications.addNotification({ + notifications.addNotification({ icon, iconClass, title: title || '', @@ -58,4 +60,4 @@ const uiNotifications = { } }; -window.uiNotifications = uiNotifications; +export { uiNotifications }; diff --git a/static/js/app/userMenu.js b/static/js/app/userMenu.js index 9096c26f..84dadeb9 100644 --- a/static/js/app/userMenu.js +++ b/static/js/app/userMenu.js @@ -2,6 +2,11 @@ * User menu, profile modal and logout logic */ +import { getCsrfHeaders } from '../core/csrf.js'; +import { formatFileSize, formatQuotaSize } from '../core/formatters.js'; +import { i18n } from '../core/i18n.js'; +import { ui } from './ui.js'; + function setupUserMenu() { const wrapper = document.getElementById('user-menu-wrapper'); const avatarBtn = document.getElementById('user-avatar-btn'); @@ -102,7 +107,7 @@ function setupUserMenu() { } } - window.ui.showNotification(newIsDark ? '🌙' : '☀️', newIsDark ? 'Dark mode enabled' : 'Light mode enabled'); + ui.showNotification(newIsDark ? '🌙' : '☀️', newIsDark ? 'Dark mode enabled' : 'Light mode enabled'); }); } @@ -173,8 +178,8 @@ function updateUserMenuData() { if (storageFill) storageFill.style.width = `${percentage}%`; if (storageText) { - const used = window.formatFileSize(usedBytes); - const total = window.formatQuotaSize(quotaBytes); + const used = formatFileSize(usedBytes); + const total = formatQuotaSize(quotaBytes); storageText.textContent = `${quotaBytes > 0 ? `${percentage}% · ` : ''}${used} / ${total}`; } } @@ -206,7 +211,7 @@ function showUserProfileModal() { const percentage = quotaBytes > 0 ? Math.min(Math.round((usedBytes / quotaBytes) * 100), 100) : 0; const barColor = percentage > 90 ? '#ef4444' : percentage > 70 ? '#f59e0b' : '#22c55e'; - const t = (key, fallback) => (window.i18n?.t ? window.i18n.t(key) || fallback : fallback); + const t = (key, fallback) => (i18n?.t ? i18n.t(key) || fallback : fallback); const existing = document.getElementById('profile-modal-overlay'); if (existing) existing.remove(); @@ -229,7 +234,7 @@ function showUserProfileModal() {
-
${percentage}% · ${window.formatFileSize(usedBytes)} / ${window.formatQuotaSize(quotaBytes)}
+
${percentage}% · ${formatFileSize(usedBytes)} / ${formatQuotaSize(quotaBytes)}
@@ -283,6 +288,4 @@ async function logout() { window.location.href = '/login'; } -window.setupUserMenu = setupUserMenu; -window.showUserProfileModal = showUserProfileModal; -window.logout = logout; +export { logout, setupUserMenu, showUserProfileModal }; diff --git a/static/js/core/csrf.js b/static/js/core/csrf.js index c8c3159e..b449c277 100644 --- a/static/js/core/csrf.js +++ b/static/js/core/csrf.js @@ -13,14 +13,14 @@ * HttpOnly cookies. */ -// eslint-disable-next-line no-unused-vars function getCsrfToken() { const match = document.cookie.split('; ').find((row) => row.startsWith('oxicloud_csrf=')); return match ? match.split('=')[1] : ''; } -// biome-ignore lint/correctness/noUnusedVariables: global function function getCsrfHeaders() { const token = getCsrfToken(); return token ? { 'X-CSRF-Token': token } : {}; } + +export { getCsrfHeaders, getCsrfToken }; diff --git a/static/js/core/formatters.js b/static/js/core/formatters.js index 774a65cf..72671db6 100644 --- a/static/js/core/formatters.js +++ b/static/js/core/formatters.js @@ -65,9 +65,4 @@ function isTextViewable(mimeType) { return textTypes.includes(mimeType); } -window.escapeHtml = escapeHtml; -window.formatFileSize = formatFileSize; -window.formatQuotaSize = formatQuotaSize; -window.formatDateTime = formatDateTime; -window.formatDateShort = formatDateShort; -window.isTextViewable = isTextViewable; +export { escapeHtml, formatDateShort, formatDateTime, formatFileSize, formatQuotaSize, isTextViewable }; diff --git a/static/js/core/i18n.js b/static/js/core/i18n.js index 01c9d28f..c46ad23a 100644 --- a/static/js/core/i18n.js +++ b/static/js/core/i18n.js @@ -314,8 +314,7 @@ function safeT(key, params = {}) { return interpolate(value, params); } -// Export functions for use in other modules -window.i18n = { +export const i18n = { t: safeT, setLocale, getCurrentLocale, diff --git a/static/js/core/icons.js b/static/js/core/icons.js index fcae309c..41efa5a4 100644 --- a/static/js/core/icons.js +++ b/static/js/core/icons.js @@ -483,9 +483,8 @@ function replaceIconsInElement(container) { } // ── Expose globally ──────────────────────────────────────────── -window.oxiIcon = oxiIcon; -window.replaceIconsInElement = replaceIconsInElement; -window.OxiIcons = _ICONS; +export { oxiIcon, replaceIconsInElement }; +export const OxiIcons = _ICONS; // ── Auto-replace: MutationObserver bridge ────────────────────── // Watches the DOM for new elements and converts them diff --git a/static/js/core/languageSelector.js b/static/js/core/languageSelector.js index cad1bfd4..df012709 100644 --- a/static/js/core/languageSelector.js +++ b/static/js/core/languageSelector.js @@ -1,3 +1,6 @@ +import { ALL_LANGUAGES } from '../features/auth/auth.js'; +import { i18n } from './i18n.js'; + /** * Language Selector Component for OxiCloud * Custom styled dropdown with flags @@ -63,7 +66,7 @@ function createLanguageSelector(containerId = 'language-selector') { // Get current language const languages = getAvailableLanguages(); - const currentLocale = window.i18n ? window.i18n.getCurrentLocale() : 'en'; + const currentLocale = i18n ? i18n.getCurrentLocale() : 'en'; const currentLang = languages.find((l) => l.code === currentLocale) || languages[0]; // Set initial HTML attributes @@ -183,8 +186,8 @@ function closeDropdown(container) { */ async function selectLanguage(langCode, container) { // Update i18n if available - if (window.i18n) { - await window.i18n.setLocale(langCode); + if (i18n) { + await i18n.setLocale(langCode); } // Update HTML lang attribute and dir for RTL languages diff --git a/static/js/core/modal.js b/static/js/core/modal.js index f5682336..4c454c5f 100644 --- a/static/js/core/modal.js +++ b/static/js/core/modal.js @@ -1,3 +1,6 @@ +import { i18n } from './i18n.js'; +import { replaceIconsInElement } from './icons.js'; + /** * Modal System for OxiCloud * Provides modern, styled modals to replace browser prompts/alerts @@ -86,8 +89,8 @@ const Modal = { iconContainer.innerHTML = ``; this.icon = document.getElementById('modal-icon'); // Let icons.js convert it to SVG - if (window.replaceIconsInElement) { - window.replaceIconsInElement(iconContainer); + if (replaceIconsInElement) { + replaceIconsInElement(iconContainer); this.icon = document.getElementById('modal-icon'); } } @@ -99,14 +102,14 @@ const Modal = { // Set button text (use i18n if available) if (confirmText) { this.confirmBtn.textContent = confirmText; - } else if (window.i18n) { - this.confirmBtn.textContent = window.i18n.t('actions.confirm'); + } else if (i18n) { + this.confirmBtn.textContent = i18n.t('actions.confirm'); } if (cancelText) { this.cancelBtn.textContent = cancelText; - } else if (window.i18n) { - this.cancelBtn.textContent = window.i18n.t('actions.cancel'); + } else if (i18n) { + this.cancelBtn.textContent = i18n.t('actions.cancel'); } // Set callbacks @@ -126,7 +129,7 @@ const Modal = { * @returns {Promise} */ promptNewFolder() { - const t = window.i18n ? window.i18n.t.bind(window.i18n) : (k) => k; + const t = i18n ? i18n.t.bind(i18n) : (k) => k; return this.prompt({ title: t('dialogs.new_folder_title') || 'New folder', @@ -144,7 +147,7 @@ const Modal = { * @returns {Promise} */ promptRename(currentName, isFolder = false) { - const t = window.i18n ? window.i18n.t.bind(window.i18n) : (k) => k; + const t = i18n ? i18n.t.bind(i18n) : (k) => k; // For files, we want to select only the name part (without extension) this._selectNameOnly = !isFolder; @@ -232,4 +235,4 @@ document.addEventListener('DOMContentLoaded', () => { }); // Export for use in other modules -window.Modal = Modal; +export { Modal }; diff --git a/static/js/core/notifications.js b/static/js/core/notifications.js index 86315ccc..59878ee6 100644 --- a/static/js/core/notifications.js +++ b/static/js/core/notifications.js @@ -1,3 +1,5 @@ +import { i18n } from './i18n.js'; + /** * OxiCloud – Notification Bell Module * @@ -5,7 +7,7 @@ * in the top-bar. Upload progress, quota errors, and general messages all * go through this module. * - * Public API (on window.notifications): + * Public API (exported as `notifications`): * addUploadBatch(totalFiles) → batchId * updateFile(batchId, fileName, pct, status) * finishBatch(batchId, successCount, totalFiles) @@ -147,7 +149,7 @@ const notifications = (() => { item.className = 'notif-item'; item.id = batchId; - const t = window.i18n?.t || ((k) => k); + const t = i18n?.t || ((k) => k); const uploadingText = folderName ? `📁 ${t('upload.uploading')} ${_esc(folderName)}…` : t('upload.uploading'); const filesLabel = t('upload.files'); @@ -252,7 +254,7 @@ const notifications = (() => { const pctEl = $(`${batchId}-pct`); const statsEl = $(`${batchId}-stats`); - const t = window.i18n?.t || ((k) => k); + const t = i18n?.t || ((k) => k); const filesLabel = t('upload.files'); if (fillEl) fillEl.style.width = `${pctVal}%`; @@ -280,7 +282,7 @@ const notifications = (() => { const curEl = $(`${batchId}-current`); if (curEl) curEl.textContent = ''; - const t = window.i18n?.t || ((k) => k); + const t = i18n?.t || ((k) => k); const completeText = t('upload.complete', { count: successCount, total: totalFiles @@ -351,4 +353,4 @@ const notifications = (() => { }; })(); -window.notifications = notifications; +export { notifications }; diff --git a/static/js/features/auth/auth.js b/static/js/features/auth/auth.js index 13b007cf..30c424f8 100644 --- a/static/js/features/auth/auth.js +++ b/static/js/features/auth/auth.js @@ -3,6 +3,9 @@ * Handles login, registration, and admin setup */ +import { getCsrfHeaders } from '../../core/csrf.js'; +import { i18n } from '../../core/i18n.js'; + // API endpoints const API_URL = '/api/auth'; const LOGIN_ENDPOINT = `${API_URL}/login`; @@ -112,7 +115,7 @@ const LANGUAGE_TEXTS = { // Complete language registry — add new languages here, they'll appear automatically // `popular: true` languages show as cards on the main screen, the rest in the modal -const ALL_LANGUAGES = [ +export const ALL_LANGUAGES = [ { code: 'en', name: 'English', @@ -509,8 +512,8 @@ function initLanguageSelector() { localStorage.setItem(FIRST_RUN_KEY, 'true'); // Update i18n if available - if (window.i18n?.setLocale) { - await window.i18n.setLocale(selectedLanguage); + if (i18n?.setLocale) { + await i18n.setLocale(selectedLanguage); } // Hide language panel @@ -632,7 +635,7 @@ async function configureOidcLoginUI() { // Update button text with provider name const btnTextEl = oidcBtn.querySelector('span'); if (btnTextEl && oidcInfo.provider_name) { - const template = window.i18n?.t ? window.i18n.t('auth.sso_login_provider') : 'Sign in with {{provider}}'; + const template = i18n?.t ? i18n.t('auth.sso_login_provider') : 'Sign in with {{provider}}'; btnTextEl.textContent = template.replace('{{provider}}', oidcInfo.provider_name); } @@ -669,7 +672,6 @@ function initLoginElements() { return false; } - languagePanel = document.getElementById('language-panel'); loginPanel = document.getElementById('login-panel'); registerPanel = document.getElementById('register-panel'); adminSetupPanel = document.getElementById('admin-setup-panel'); @@ -940,7 +942,7 @@ if (isLoginPage && registerForm) { // Validate passwords match if (password !== confirmPassword) { - const errorMsg = window.i18n ? window.i18n.t('auth.passwords_mismatch') : 'Passwords do not match'; + const errorMsg = i18n ? i18n.t('auth.passwords_mismatch') : 'Passwords do not match'; registerError.textContent = errorMsg; registerError.style.display = 'block'; return; @@ -950,7 +952,7 @@ if (isLoginPage && registerForm) { await register(username, email, password); // Show success message - const successMsg = window.i18n ? window.i18n.t('auth.account_success') : 'Account created successfully! You can now log in.'; + const successMsg = i18n ? i18n.t('auth.account_success') : 'Account created successfully! You can now log in.'; registerSuccess.textContent = successMsg; registerSuccess.style.display = 'block'; @@ -963,7 +965,7 @@ if (isLoginPage && registerForm) { hidePanel(registerPanel); }, 2000); } catch (error) { - const errorMsg = window.i18n ? window.i18n.t('auth.admin_create_error') : 'Error registering account'; + const errorMsg = i18n ? i18n.t('auth.admin_create_error') : 'Error registering account'; registerError.textContent = error.message || errorMsg; registerError.style.display = 'block'; } @@ -986,7 +988,7 @@ if (isLoginPage && adminSetupForm) { // Validate passwords match if (password !== confirmPassword) { - const errorMsg = window.i18n ? window.i18n.t('auth.passwords_mismatch') : 'Passwords do not match'; + const errorMsg = i18n ? i18n.t('auth.passwords_mismatch') : 'Passwords do not match'; adminSetupError.textContent = errorMsg; adminSetupError.style.display = 'block'; return; @@ -1011,7 +1013,7 @@ if (isLoginPage && adminSetupForm) { await response.json(); // Show success message in the GUI instead of alert - const successMsg = window.i18n ? window.i18n.t('auth.admin_success') : 'Admin account created successfully! You can now log in.'; + const successMsg = i18n ? i18n.t('auth.admin_success') : 'Admin account created successfully! You can now log in.'; if (adminSetupSuccess) { adminSetupSuccess.textContent = successMsg; @@ -1025,7 +1027,7 @@ if (isLoginPage && adminSetupForm) { if (adminSetupSuccess) adminSetupSuccess.style.display = 'none'; }, 2000); } catch (error) { - const errorMsg = window.i18n ? window.i18n.t('auth.admin_create_error') : 'Error creating admin account'; + const errorMsg = i18n ? i18n.t('auth.admin_create_error') : 'Error creating admin account'; adminSetupError.textContent = error.message || errorMsg; adminSetupError.style.display = 'block'; } diff --git a/static/js/features/files/contextMenus.js b/static/js/features/files/contextMenus.js index 15422b50..e73e28fa 100644 --- a/static/js/features/files/contextMenus.js +++ b/static/js/features/files/contextMenus.js @@ -3,6 +3,23 @@ * This file handles context menus and dialog functionality */ +import { resolveHomeFolder } from '../../app/authSession.js'; +import { loadFiles } from '../../app/filesView.js'; +import { app } from '../../app/state.js'; +import { showConfirmDialog, ui } from '../../app/ui.js'; +import { getCsrfHeaders } from '../../core/csrf.js'; +import { escapeHtml } from '../../core/formatters.js'; +import { i18n } from '../../core/i18n.js'; +import { favorites } from '../library/favorites.js'; +import { musicView } from '../library/music.js'; +import { fileSharing } from '../sharing/fileSharing.js'; +import { fileOps } from './fileOperations.js'; +import { inlineViewer } from './inlineViewer.js'; +import { multiSelect } from './multiSelect.js'; +import { wopiEditor } from './wopiEditor.js'; + +let _moveDialogEscapeHandler = null; + // Context Menus Module const contextMenus = { _setFavoriteOptionLabel(optionId, isFavorite) { @@ -10,11 +27,7 @@ const contextMenus = { if (!option) return; const label = option.querySelector('span'); if (!label) return; - label.textContent = window.i18n - ? window.i18n.t(isFavorite ? 'actions.unfavorite' : 'actions.favorite') - : isFavorite - ? 'Remove from favorites' - : 'Add to favorites'; + label.textContent = i18n ? i18n.t(isFavorite ? 'actions.unfavorite' : 'actions.favorite') : isFavorite ? 'Remove from favorites' : 'Add to favorites'; }, /** @@ -25,28 +38,28 @@ const contextMenus = { const wopiEditTab = document.getElementById('wopi-edit-file-tab-option'); if (!wopiEdit || !wopiEditTab) return; - const targetFile = window.app?.contextMenuTargetFile; + const targetFile = app?.contextMenuTargetFile; // Don't show WOPI editor for image files - they should use inline preview const isImage = targetFile?.mime_type?.startsWith('image/'); - const show = targetFile && !isImage && window.wopiEditor && (await window.wopiEditor.canEdit(targetFile.name)); + const show = targetFile && !isImage && wopiEditor && (await wopiEditor.canEdit(targetFile.name)); wopiEdit.classList.toggle('hidden', !show); wopiEditTab.classList.toggle('hidden', !show); }, syncFavoriteOptionLabels() { - if (!window.favorites) return; + if (!favorites) return; - const targetFile = window.app?.contextMenuTargetFile; - const targetFolder = window.app?.contextMenuTargetFolder; + const targetFile = app?.contextMenuTargetFile; + const targetFolder = app?.contextMenuTargetFolder; if (targetFile) { - const isFav = window.favorites.isFavorite(targetFile.id, 'file'); + const isFav = favorites.isFavorite(targetFile.id, 'file'); this._setFavoriteOptionLabel('favorite-file-option', isFav); } if (targetFolder) { - const isFav = window.favorites.isFavorite(targetFolder.id, 'folder'); + const isFav = favorites.isFavorite(targetFolder.id, 'folder'); this._setFavoriteOptionLabel('favorite-folder-option', isFav); } }, @@ -55,7 +68,7 @@ const contextMenus = { const option = document.getElementById('add-to-playlist-option'); if (!option) return; - const targetFile = window.app?.contextMenuTargetFile; + const targetFile = app?.contextMenuTargetFile; if (targetFile) { const isAudio = targetFile.mime_type?.startsWith('audio/'); option.classList.toggle('hidden', !isAudio); @@ -70,172 +83,172 @@ const contextMenus = { assignMenuEvents() { // Folder context menu options document.getElementById('download-folder-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFolder) { - window.fileOps.downloadFolder(window.app.contextMenuTargetFolder.id, window.app.contextMenuTargetFolder.name); + if (app.contextMenuTargetFolder) { + fileOps.downloadFolder(app.contextMenuTargetFolder.id, app.contextMenuTargetFolder.name); } - window.ui.closeContextMenu(); + ui.closeContextMenu(); }); document.getElementById('favorite-folder-option').addEventListener('click', async () => { - if (window.app.contextMenuTargetFolder) { - const folder = window.app.contextMenuTargetFolder; + if (app.contextMenuTargetFolder) { + const folder = app.contextMenuTargetFolder; // Check if folder is already in favorites to toggle - if (window.favorites?.isFavorite(folder.id, 'folder')) { + if (favorites?.isFavorite(folder.id, 'folder')) { // Remove from favorites - const ok = await window.favorites.removeFromFavorites(folder.id, 'folder'); - if (ok && window.ui && typeof window.ui.setFavoriteVisualState === 'function') { - window.ui.setFavoriteVisualState(folder.id, 'folder', false); + const ok = await favorites.removeFromFavorites(folder.id, 'folder'); + if (ok && ui && typeof ui.setFavoriteVisualState === 'function') { + ui.setFavoriteVisualState(folder.id, 'folder', false); } } else { // Add to favorites - const ok = await window.favorites.addToFavorites(folder.id, folder.name, 'folder', folder.parent_id); - if (ok && window.ui && typeof window.ui.setFavoriteVisualState === 'function') { - window.ui.setFavoriteVisualState(folder.id, 'folder', true); + const ok = await favorites.addToFavorites(folder.id, folder.name, 'folder', folder.parent_id); + if (ok && ui && typeof ui.setFavoriteVisualState === 'function') { + ui.setFavoriteVisualState(folder.id, 'folder', true); } } this.syncFavoriteOptionLabels(); } - window.ui.closeContextMenu(); + ui.closeContextMenu(); }); document.getElementById('rename-folder-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFolder) { - this.showRenameDialog(window.app.contextMenuTargetFolder); + if (app.contextMenuTargetFolder) { + this.showRenameDialog(app.contextMenuTargetFolder); } - window.ui.closeContextMenu(); + ui.closeContextMenu(); }); document.getElementById('move-folder-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFolder) { - this.showMoveDialog(window.app.contextMenuTargetFolder, 'folder'); + if (app.contextMenuTargetFolder) { + this.showMoveDialog(app.contextMenuTargetFolder, 'folder'); } - window.ui.closeContextMenu(); + ui.closeContextMenu(); }); document.getElementById('share-folder-option').addEventListener('click', () => { - const folder = window.app.contextMenuTargetFolder; + const folder = app.contextMenuTargetFolder; if (folder) { this.showShareDialog(folder, 'folder'); } - window.ui.closeContextMenu(); + ui.closeContextMenu(); }); document.getElementById('delete-folder-option').addEventListener('click', async () => { - const folder = window.app.contextMenuTargetFolder; - window.ui.closeContextMenu(); + const folder = app.contextMenuTargetFolder; + ui.closeContextMenu(); if (folder) { - await window.fileOps.deleteFolder(folder.id, folder.name); + await fileOps.deleteFolder(folder.id, folder.name); } }); // File context menu options document.getElementById('view-file-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFile) { + if (app.contextMenuTargetFile) { // Capture reference before context menu cleanup nullifies it - const file = window.app.contextMenuTargetFile; + const file = app.contextMenuTargetFile; fetch(`/api/files/${file.id}?metadata=true`, { credentials: 'same-origin' }) .then((response) => response.json()) .then((fileDetails) => { // Check if viewable file type (images, PDFs, text files) - if (window.ui?.isViewableFile(fileDetails)) { + if (ui?.isViewableFile(fileDetails)) { // Open with inline viewer - if (window.inlineViewer) { - window.inlineViewer.openFile(fileDetails); + if (inlineViewer) { + inlineViewer.openFile(fileDetails); } else { // If no viewer is available, download directly - window.fileOps.downloadFile(file.id, file.name); + fileOps.downloadFile(file.id, file.name); } } else { // For non-viewable files, download - window.fileOps.downloadFile(file.id, file.name); + fileOps.downloadFile(file.id, file.name); } }) .catch((error) => { console.error('Error fetching file details:', error); // On error, fallback to download - window.fileOps.downloadFile(file.id, file.name); + fileOps.downloadFile(file.id, file.name); }); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('wopi-edit-file-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFile) { - const file = window.app.contextMenuTargetFile; - window.wopiEditor.openInModal(file.id, file.name, 'edit'); + if (app.contextMenuTargetFile) { + const file = app.contextMenuTargetFile; + wopiEditor.openInModal(file.id, file.name, 'edit'); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('wopi-edit-file-tab-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFile) { - const file = window.app.contextMenuTargetFile; - window.wopiEditor.openInTab(file.id, file.name, 'edit'); + if (app.contextMenuTargetFile) { + const file = app.contextMenuTargetFile; + wopiEditor.openInTab(file.id, file.name, 'edit'); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('download-file-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFile) { - window.fileOps.downloadFile(window.app.contextMenuTargetFile.id, window.app.contextMenuTargetFile.name); + if (app.contextMenuTargetFile) { + fileOps.downloadFile(app.contextMenuTargetFile.id, app.contextMenuTargetFile.name); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('favorite-file-option').addEventListener('click', async () => { - if (window.app.contextMenuTargetFile) { - const file = window.app.contextMenuTargetFile; + if (app.contextMenuTargetFile) { + const file = app.contextMenuTargetFile; // Check if file is already in favorites to toggle - if (window.favorites?.isFavorite(file.id, 'file')) { + if (favorites?.isFavorite(file.id, 'file')) { // Remove from favorites - const ok = await window.favorites.removeFromFavorites(file.id, 'file'); - if (ok && window.ui && typeof window.ui.setFavoriteVisualState === 'function') { - window.ui.setFavoriteVisualState(file.id, 'file', false); + const ok = await favorites.removeFromFavorites(file.id, 'file'); + if (ok && ui && typeof ui.setFavoriteVisualState === 'function') { + ui.setFavoriteVisualState(file.id, 'file', false); } } else { // Add to favorites - const ok = await window.favorites.addToFavorites(file.id, file.name, 'file', file.folder_id); - if (ok && window.ui && typeof window.ui.setFavoriteVisualState === 'function') { - window.ui.setFavoriteVisualState(file.id, 'file', true); + const ok = await favorites.addToFavorites(file.id, file.name, 'file', file.folder_id); + if (ok && ui && typeof ui.setFavoriteVisualState === 'function') { + ui.setFavoriteVisualState(file.id, 'file', true); } } this.syncFavoriteOptionLabels(); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('rename-file-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFile) { - this.showRenameFileDialog(window.app.contextMenuTargetFile); + if (app.contextMenuTargetFile) { + this.showRenameFileDialog(app.contextMenuTargetFile); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('move-file-option').addEventListener('click', () => { - if (window.app.contextMenuTargetFile) { - this.showMoveDialog(window.app.contextMenuTargetFile, 'file'); + if (app.contextMenuTargetFile) { + this.showMoveDialog(app.contextMenuTargetFile, 'file'); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('share-file-option').addEventListener('click', () => { - const file = window.app.contextMenuTargetFile; + const file = app.contextMenuTargetFile; if (file) { this.showShareDialog(file, 'file'); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('add-to-playlist-option').addEventListener('click', () => { - const file = window.app.contextMenuTargetFile; + const file = app.contextMenuTargetFile; if (file) { this.showPlaylistDialog(file); } - window.ui.closeFileContextMenu(); + ui.closeFileContextMenu(); }); document.getElementById('playlist-add-btn').addEventListener('click', () => { @@ -243,10 +256,10 @@ const contextMenus = { }); document.getElementById('delete-file-option').addEventListener('click', async () => { - const file = window.app.contextMenuTargetFile; - window.ui.closeFileContextMenu(); + const file = app.contextMenuTargetFile; + ui.closeFileContextMenu(); if (file) { - await window.fileOps.deleteFile(file.id, file.name); + await fileOps.deleteFile(file.id, file.name); } }); @@ -279,43 +292,43 @@ const contextMenus = { // Store handler reference to avoid duplicate listeners // Note: We don't use stopPropagation because all Escape handlers are on document level // Each handler checks its own state, so multiple dialogs can be closed with multiple Escape presses - if (!window._moveDialogEscapeHandler) { - window._moveDialogEscapeHandler = (e) => { + if (!_moveDialogEscapeHandler) { + _moveDialogEscapeHandler = (e) => { if (e.key === 'Escape' && moveFileDialog.style.display === 'flex') { this.closeMoveDialog(); } }; - document.addEventListener('keydown', window._moveDialogEscapeHandler); + document.addEventListener('keydown', _moveDialogEscapeHandler); } // Copy button handler copyConfirmBtn.addEventListener('click', async () => { // Batch copy mode (from multiSelect) - if (window.app.moveDialogMode === 'batch' && window.multiSelect) { - const targetId = window.app.selectedTargetFolderId; - const items = window.app.batchMoveItems || []; + if (app.moveDialogMode === 'batch' && multiSelect) { + const targetId = app.selectedTargetFolderId; + const items = app.batchMoveItems || []; const fileIds = items.filter((i) => i.type === 'file').map((i) => i.id); const folderIds = items.filter((i) => i.type === 'folder').map((i) => i.id); - const result = await window.fileOps.batchCopy(fileIds, folderIds, targetId); + const result = await fileOps.batchCopy(fileIds, folderIds, targetId); this.closeMoveDialog(); - window.multiSelect.clear(); - window.loadFiles(); + multiSelect.clear(); + loadFiles(); - window.multiSelect.showBatchResult('copy', result); + multiSelect.showBatchResult('copy', result); return; } // Single item copy - if (window.app.moveDialogMode === 'file' && window.app.contextMenuTargetFile) { - const success = await window.fileOps.copyFile(window.app.contextMenuTargetFile.id, window.app.selectedTargetFolderId); + if (app.moveDialogMode === 'file' && app.contextMenuTargetFile) { + const success = await fileOps.copyFile(app.contextMenuTargetFile.id, app.selectedTargetFolderId); if (success) { this.closeMoveDialog(); } - } else if (window.app.moveDialogMode === 'folder' && window.app.contextMenuTargetFolder) { - const success = await window.fileOps.copyFolder(window.app.contextMenuTargetFolder.id, window.app.selectedTargetFolderId); + } else if (app.moveDialogMode === 'folder' && app.contextMenuTargetFolder) { + const success = await fileOps.copyFolder(app.contextMenuTargetFolder.id, app.selectedTargetFolderId); if (success) { this.closeMoveDialog(); } @@ -324,30 +337,30 @@ const contextMenus = { moveConfirmBtn.addEventListener('click', async () => { // Batch move mode (from multiSelect) - if (window.app.moveDialogMode === 'batch' && window.multiSelect) { - const targetId = window.app.selectedTargetFolderId; - const items = window.app.batchMoveItems || []; + if (app.moveDialogMode === 'batch' && multiSelect) { + const targetId = app.selectedTargetFolderId; + const items = app.batchMoveItems || []; const fileIds = items.filter((i) => i.type === 'file').map((i) => i.id); const folderIds = items.filter((i) => i.type === 'folder' && i.id !== targetId).map((i) => i.id); - const result = await window.fileOps.batchMove(fileIds, folderIds, targetId); + const result = await fileOps.batchMove(fileIds, folderIds, targetId); this.closeMoveDialog(); - window.multiSelect.clear(); - window.loadFiles(); - window.multiSelect.showBatchResult('move', result); + multiSelect.clear(); + loadFiles(); + multiSelect.showBatchResult('move', result); return; } - if (window.app.moveDialogMode === 'file' && window.app.contextMenuTargetFile) { - const success = await window.fileOps.moveFile(window.app.contextMenuTargetFile.id, window.app.selectedTargetFolderId); + if (app.moveDialogMode === 'file' && app.contextMenuTargetFile) { + const success = await fileOps.moveFile(app.contextMenuTargetFile.id, app.selectedTargetFolderId); if (success) { this.closeMoveDialog(); } - } else if (window.app.moveDialogMode === 'folder' && window.app.contextMenuTargetFolder) { - const success = await window.fileOps.moveFolder(window.app.contextMenuTargetFolder.id, window.app.selectedTargetFolderId); + } else if (app.moveDialogMode === 'folder' && app.contextMenuTargetFolder) { + const success = await fileOps.moveFolder(app.contextMenuTargetFolder.id, app.selectedTargetFolderId); if (success) { this.closeMoveDialog(); } @@ -363,13 +376,13 @@ const contextMenus = { const renameInput = document.getElementById('rename-input'); const renameDialog = document.getElementById('rename-dialog'); - window.app.renameMode = 'folder'; + app.renameMode = 'folder'; // Store the folder reference so it survives context menu cleanup - window.app.renameTarget = folder; + app.renameTarget = folder; renameInput.value = folder.name; // Update header text const headerSpan = renameDialog.querySelector('.rename-dialog-header span'); - if (headerSpan) headerSpan.textContent = window.i18n ? window.i18n.t('dialogs.rename_folder') : 'Rename folder'; + if (headerSpan) headerSpan.textContent = i18n ? i18n.t('dialogs.rename_folder') : 'Rename folder'; renameDialog.style.display = 'flex'; renameInput.focus(); renameInput.select(); @@ -383,13 +396,13 @@ const contextMenus = { const renameInput = document.getElementById('rename-input'); const renameDialog = document.getElementById('rename-dialog'); - window.app.renameMode = 'file'; + app.renameMode = 'file'; // Store the file reference so it survives context menu cleanup - window.app.renameTarget = file; + app.renameTarget = file; renameInput.value = file.name; // Update header text const headerSpan = renameDialog.querySelector('.rename-dialog-header span'); - if (headerSpan) headerSpan.textContent = window.i18n ? window.i18n.t('dialogs.rename_file') : 'Rename file'; + if (headerSpan) headerSpan.textContent = i18n ? i18n.t('dialogs.rename_file') : 'Rename file'; renameDialog.style.display = 'flex'; renameInput.focus(); renameInput.select(); @@ -400,8 +413,8 @@ const contextMenus = { */ closeRenameDialog() { document.getElementById('rename-dialog').style.display = 'none'; - window.app.contextMenuTargetFolder = null; - window.app.renameTarget = null; + app.contextMenuTargetFolder = null; + app.renameTarget = null; }, /** @@ -411,15 +424,15 @@ const contextMenus = { */ async showMoveDialog(item, mode) { // Set mode - window.app.moveDialogMode = mode; + app.moveDialogMode = mode; // Reset selection - window.app.selectedTargetFolderId = ''; + app.selectedTargetFolderId = ''; // Ensure we have the home folder ID BEFORE calculating startFolderId - if (!window.app.userHomeFolderId) { + if (!app.userHomeFolderId) { console.log('[Move Dialog] Home folder ID not set, resolving...'); - await window.resolveHomeFolder(); + await resolveHomeFolder(); } // Initialize dialog navigation state @@ -437,44 +450,28 @@ const contextMenus = { startFolderId = item.parent_id; } else { // If item is at root level, start at user's home folder - startFolderId = window.app.userHomeFolderId || null; + startFolderId = app.userHomeFolderId || null; } - console.log( - '[Move Dialog] showMoveDialog - item:', - item, - 'mode:', - mode, - 'startFolderId:', - startFolderId, - 'userHomeFolderId:', - window.app.userHomeFolderId - ); + console.log('[Move Dialog] showMoveDialog - item:', item, 'mode:', mode, 'startFolderId:', startFolderId, 'userHomeFolderId:', app.userHomeFolderId); // Store the item being moved and navigation state - window.app.moveDialogItemId = item.id; - window.app.moveDialogItemMode = mode; - window.app.moveDialogCurrentFolderId = startFolderId; + app.moveDialogItemId = item.id; + app.moveDialogItemMode = mode; + app.moveDialogCurrentFolderId = startFolderId; // Build initial breadcrumb if starting at a non-home folder // This allows proper navigation back to home const breadcrumb = []; - if (startFolderId && startFolderId !== window.app.userHomeFolderId && startFolderName) { + if (startFolderId && startFolderId !== app.userHomeFolderId && startFolderName) { // We have the folder name, add it to breadcrumb breadcrumb.push({ id: startFolderId, name: startFolderName }); } - window.app.moveDialogBreadcrumb = breadcrumb; + app.moveDialogBreadcrumb = breadcrumb; // Update dialog title (preserve icon) const dialogHeader = document.getElementById('move-file-dialog').querySelector('.rename-dialog-header'); - const titleText = - mode === 'file' - ? window.i18n - ? window.i18n.t('dialogs.move_file') - : 'Move file' - : window.i18n - ? window.i18n.t('dialogs.move_folder') - : 'Move folder'; + const titleText = mode === 'file' ? (i18n ? i18n.t('dialogs.move_file') : 'Move file') : i18n ? i18n.t('dialogs.move_folder') : 'Move folder'; dialogHeader.innerHTML = ` ${titleText}`; // Load folders for the starting location @@ -489,8 +486,8 @@ const contextMenus = { */ closeMoveDialog() { document.getElementById('move-file-dialog').style.display = 'none'; - window.app.contextMenuTargetFile = null; - window.app.contextMenuTargetFolder = null; + app.contextMenuTargetFile = null; + app.contextMenuTargetFolder = null; }, /** @@ -499,28 +496,28 @@ const contextMenus = { async renameItem() { const newName = document.getElementById('rename-input').value.trim(); if (!newName) { - alert(window.i18n ? window.i18n.t('errors.empty_name') : 'Name cannot be empty'); + alert(i18n ? i18n.t('errors.empty_name') : 'Name cannot be empty'); return; } // Use renameTarget which was saved before the context menu was closed - const target = window.app.renameTarget; + const target = app.renameTarget; if (!target) { console.error('No rename target available'); return; } - if (window.app.renameMode === 'file') { - const success = await window.fileOps.renameFile(target.id, newName); + if (app.renameMode === 'file') { + const success = await fileOps.renameFile(target.id, newName); if (success) { contextMenus.closeRenameDialog(); - window.loadFiles(); + loadFiles(); } - } else if (window.app.renameMode === 'folder') { - const success = await window.fileOps.renameFolder(target.id, newName); + } else if (app.renameMode === 'folder') { + const success = await fileOps.renameFolder(target.id, newName); if (success) { contextMenus.closeRenameDialog(); - window.loadFiles(); + loadFiles(); } } }, @@ -538,12 +535,12 @@ const contextMenus = { async loadMoveDialogFolders(parentFolderId) { try { // Ensure we have the home folder ID before proceeding - if (!window.app.userHomeFolderId) { - await window.resolveHomeFolder(); + if (!app.userHomeFolderId) { + await resolveHomeFolder(); } // Get the effective folder ID - const effectiveParentId = parentFolderId || window.app.userHomeFolderId; + const effectiveParentId = parentFolderId || app.userHomeFolderId; // Must have a folder ID to proceed if (!effectiveParentId) { @@ -576,9 +573,9 @@ const contextMenus = { folderSelectContainer.innerHTML = ''; // Get current navigation state - const itemId = window.app.moveDialogItemId; - const mode = window.app.moveDialogItemMode; - const breadcrumb = window.app.moveDialogBreadcrumb || []; + const itemId = app.moveDialogItemId; + const mode = app.moveDialogItemMode; + const breadcrumb = app.moveDialogBreadcrumb || []; // Always show breadcrumb to allow navigation back to home this._renderMoveDialogBreadcrumb(breadcrumbContainer, breadcrumb, effectiveParentId); @@ -590,42 +587,42 @@ const contextMenus = { currentFolderOption.className = 'folder-select-item folder-select-current'; currentFolderOption.innerHTML = ` - ${window.i18n ? window.i18n.t('dialogs.select_this_folder') : 'Select this folder'} + ${i18n ? i18n.t('dialogs.select_this_folder') : 'Select this folder'} `; currentFolderOption.addEventListener('click', () => { document.querySelectorAll('.folder-select-item').forEach((item) => { item.classList.remove('selected'); }); currentFolderOption.classList.add('selected'); - window.app.selectedTargetFolderId = effectiveParentId; + app.selectedTargetFolderId = effectiveParentId; }); folderSelectContainer.appendChild(currentFolderOption); } // Add "Go to parent" option if not at home folder - const isAtHomeFolder = effectiveParentId === window.app.userHomeFolderId; + const isAtHomeFolder = effectiveParentId === app.userHomeFolderId; if (!isAtHomeFolder || breadcrumb.length > 0) { const parentOption = document.createElement('div'); parentOption.className = 'folder-select-item folder-navigate-up'; parentOption.innerHTML = ` - ${window.i18n ? window.i18n.t('dialogs.go_to_parent') : '.. (parent folder)'} + ${i18n ? i18n.t('dialogs.go_to_parent') : '.. (parent folder)'} `; parentOption.addEventListener('click', () => { // Navigate to parent folder - const currentBreadcrumb = window.app.moveDialogBreadcrumb || []; + const currentBreadcrumb = app.moveDialogBreadcrumb || []; if (currentBreadcrumb.length > 0) { // Remove current folder from breadcrumb currentBreadcrumb.pop(); const parentFolder = currentBreadcrumb.length > 0 ? currentBreadcrumb[currentBreadcrumb.length - 1] : null; - window.app.moveDialogBreadcrumb = currentBreadcrumb; - window.app.moveDialogCurrentFolderId = parentFolder ? parentFolder.id : null; + app.moveDialogBreadcrumb = currentBreadcrumb; + app.moveDialogCurrentFolderId = parentFolder ? parentFolder.id : null; this.loadMoveDialogFolders(parentFolder ? parentFolder.id : null); } else { // Go to root (home folder) - window.app.moveDialogBreadcrumb = []; - window.app.moveDialogCurrentFolderId = window.app.userHomeFolderId || null; - this.loadMoveDialogFolders(window.app.userHomeFolderId || null); + app.moveDialogBreadcrumb = []; + app.moveDialogCurrentFolderId = app.userHomeFolderId || null; + this.loadMoveDialogFolders(app.userHomeFolderId || null); } }); folderSelectContainer.appendChild(parentOption); @@ -650,10 +647,10 @@ const contextMenus = { // Click navigates INTO this folder folderItem.addEventListener('click', () => { // Add to breadcrumb - const breadcrumb = window.app.moveDialogBreadcrumb || []; + const breadcrumb = app.moveDialogBreadcrumb || []; breadcrumb.push({ id: folder.id, name: folder.name }); - window.app.moveDialogBreadcrumb = breadcrumb; - window.app.moveDialogCurrentFolderId = folder.id; + app.moveDialogBreadcrumb = breadcrumb; + app.moveDialogCurrentFolderId = folder.id; this.loadMoveDialogFolders(folder.id); }); @@ -667,30 +664,30 @@ const contextMenus = { homeOption.className = 'folder-select-item folder-select-current'; homeOption.innerHTML = ` - ${window.i18n ? window.i18n.t('dialogs.move_to_home') : 'Move to Home folder'} + ${i18n ? i18n.t('dialogs.move_to_home') : 'Move to Home folder'} `; homeOption.addEventListener('click', () => { document.querySelectorAll('.folder-select-item').forEach((item) => { item.classList.remove('selected'); }); homeOption.classList.add('selected'); - window.app.selectedTargetFolderId = ''; // Empty means root/home + app.selectedTargetFolderId = ''; // Empty means root/home }); folderSelectContainer.appendChild(homeOption); } else if (folders.length === 0) { // Inside a subfolder with no children - show empty message const emptyMsg = document.createElement('div'); emptyMsg.className = 'folder-select-empty'; - emptyMsg.innerHTML = ` ${window.i18n ? window.i18n.t('dialogs.no_subfolders') : 'No subfolders to navigate'}`; + emptyMsg.innerHTML = ` ${i18n ? i18n.t('dialogs.no_subfolders') : 'No subfolders to navigate'}`; folderSelectContainer.appendChild(emptyMsg); } // Set default selection to current folder - window.app.selectedTargetFolderId = parentFolderId || ''; + app.selectedTargetFolderId = parentFolderId || ''; // Translate new elements - if (window.i18n?.translateElement) { - window.i18n.translateElement(folderSelectContainer); + if (i18n?.translateElement) { + i18n.translateElement(folderSelectContainer); } } catch (error) { console.error('Error loading folders:', error); @@ -704,16 +701,16 @@ const contextMenus = { if (!container) return; container.innerHTML = ''; - const homeFolderId = window.app.userHomeFolderId; - const homeFolderName = window.app.userHomeFolderName || 'Home'; + const homeFolderId = app.userHomeFolderId; + const homeFolderName = app.userHomeFolderName || 'Home'; // Home icon (click to go to home folder) const homeItem = document.createElement('span'); homeItem.className = 'move-breadcrumb-item'; homeItem.innerHTML = ''; homeItem.addEventListener('click', () => { - window.app.moveDialogBreadcrumb = []; - window.app.moveDialogCurrentFolderId = homeFolderId || null; + app.moveDialogBreadcrumb = []; + app.moveDialogCurrentFolderId = homeFolderId || null; this.loadMoveDialogFolders(homeFolderId || null); }); container.appendChild(homeItem); @@ -733,8 +730,8 @@ const contextMenus = { homeNameItem.textContent = homeFolderName; if (breadcrumb.length > 0) { homeNameItem.addEventListener('click', () => { - window.app.moveDialogBreadcrumb = []; - window.app.moveDialogCurrentFolderId = homeFolderId || null; + app.moveDialogBreadcrumb = []; + app.moveDialogCurrentFolderId = homeFolderId || null; this.loadMoveDialogFolders(homeFolderId || null); }); } @@ -758,8 +755,8 @@ const contextMenus = { // Click to navigate back to this level if (index < breadcrumb.length - 1) { item.addEventListener('click', () => { - window.app.moveDialogBreadcrumb = breadcrumb.slice(0, index + 1); - window.app.moveDialogCurrentFolderId = segment.id; + app.moveDialogBreadcrumb = breadcrumb.slice(0, index + 1); + app.moveDialogCurrentFolderId = segment.id; this.loadMoveDialogFolders(segment.id); }); } @@ -776,11 +773,11 @@ const contextMenus = { async loadAllFolders(_itemId, _mode) { // For batch mode, use the same navigation as regular move dialog // Initialize navigation state starting at home folder - window.app.moveDialogBreadcrumb = []; - window.app.moveDialogCurrentFolderId = window.app.userHomeFolderId || null; + app.moveDialogBreadcrumb = []; + app.moveDialogCurrentFolderId = app.userHomeFolderId || null; // Use loadMoveDialogFolders which uses /api/folders/{id}/contents - await this.loadMoveDialogFolders(window.app.userHomeFolderId || null); + await this.loadMoveDialogFolders(app.userHomeFolderId || null); }, /** @@ -793,7 +790,7 @@ const contextMenus = { const shareDialog = document.getElementById('share-dialog'); if (!shareDialog) { console.error('Share dialog element not found in DOM'); - window.ui.showNotification('Error', 'Share dialog not available'); + ui.showNotification('Error', 'Share dialog not available'); return; } @@ -802,13 +799,7 @@ const contextMenus = { if (dialogHeader) { const headerSpan = dialogHeader.querySelector('span'); const titleText = - itemType === 'file' - ? window.i18n - ? window.i18n.t('dialogs.share_file') - : 'Share file' - : window.i18n - ? window.i18n.t('dialogs.share_folder') - : 'Share folder'; + itemType === 'file' ? (i18n ? i18n.t('dialogs.share_file') : 'Share file') : i18n ? i18n.t('dialogs.share_folder') : 'Share folder'; if (headerSpan) { headerSpan.textContent = titleText; } else { @@ -832,11 +823,11 @@ const contextMenus = { if (permReshare) permReshare.checked = false; // Store the current item and type for use when creating the share - window.app.shareDialogItem = item; - window.app.shareDialogItemType = itemType; + app.shareDialogItem = item; + app.shareDialogItemType = itemType; // Check if item already has shares (async API call) - const existingShares = await window.fileSharing.getSharedLinksForItem(item.id, itemType); + const existingShares = await fileSharing.getSharedLinksForItem(item.id, itemType); const existingSharesContainer = document.getElementById('existing-shares-container'); // Clear existing shares container @@ -850,7 +841,7 @@ const contextMenus = { const shareEl = document.createElement('div'); shareEl.className = 'existing-share-item'; - const expiresText = share.expires_at ? `Expires: ${window.fileSharing.formatExpirationDate(share.expires_at)}` : 'No expiration'; + const expiresText = share.expires_at ? `Expires: ${fileSharing.formatExpirationDate(share.expires_at)}` : 'No expiration'; // Share URL const urlDiv = document.createElement('div'); @@ -899,7 +890,7 @@ const contextMenus = { btn.addEventListener('click', (e) => { e.preventDefault(); const url = btn.getAttribute('data-share-url'); - window.fileSharing.copyLinkToClipboard(url); + fileSharing.copyLinkToClipboard(url); }); }); @@ -909,12 +900,12 @@ const contextMenus = { const shareId = btn.getAttribute('data-share-id'); showConfirmDialog({ - title: window.i18n ? window.i18n.t('dialogs.confirm_delete_share') : 'Delete link', - message: window.i18n ? window.i18n.t('dialogs.confirm_delete_share_msg') : 'Are you sure you want to delete this shared link?', - confirmText: window.i18n ? window.i18n.t('actions.delete') : 'Delete' + title: i18n ? i18n.t('dialogs.confirm_delete_share') : 'Delete link', + message: i18n ? i18n.t('dialogs.confirm_delete_share_msg') : 'Are you sure you want to delete this shared link?', + confirmText: i18n ? i18n.t('actions.delete') : 'Delete' }).then(async (confirmed) => { if (confirmed) { - await window.fileSharing.removeSharedLink(shareId); + await fileSharing.removeSharedLink(shareId); btn.closest('.existing-share-item').remove(); if (existingSharesContainer.children.length === 0) { document.getElementById('existing-shares-section').classList.add('hidden'); @@ -936,7 +927,7 @@ const contextMenus = { console.log('Share dialog opened for', itemType, item.name); } catch (error) { console.error('Error opening share dialog:', error); - window.ui.showNotification('Error', 'Could not open share dialog'); + ui.showNotification('Error', 'Could not open share dialog'); } }, @@ -944,8 +935,8 @@ const contextMenus = { * Create a shared link with the configured options */ async createSharedLink() { - if (!window.app.shareDialogItem || !window.app.shareDialogItemType) { - window.ui.showNotification('Error', 'Could not share the item'); + if (!app.shareDialogItem || !app.shareDialogItemType) { + ui.showNotification('Error', 'Could not share the item'); return; } @@ -956,8 +947,8 @@ const contextMenus = { const permissionWrite = document.getElementById('share-permission-write').checked; const permissionReshare = document.getElementById('share-permission-reshare').checked; - const item = window.app.shareDialogItem; - const itemType = window.app.shareDialogItemType; + const item = app.shareDialogItem; + const itemType = app.shareDialogItemType; // Build DTO for backend API const createDto = { @@ -1002,13 +993,13 @@ const contextMenus = { } // Show success message - window.ui.showNotification( - window.i18n ? window.i18n.t('notifications.link_created') : 'Link created', - window.i18n ? window.i18n.t('notifications.share_success') : 'Shared link created successfully' + ui.showNotification( + i18n ? i18n.t('notifications.link_created') : 'Link created', + i18n ? i18n.t('notifications.share_success') : 'Shared link created successfully' ); } catch (error) { console.error('Error creating shared link:', error); - window.ui.showNotification('Error', error.message || 'Could not create shared link'); + ui.showNotification('Error', error.message || 'Could not create shared link'); } }, @@ -1023,7 +1014,7 @@ const contextMenus = { document.getElementById('notification-message').value = ''; // Store the URL for later use - window.app.notificationShareUrl = shareUrl; + app.notificationShareUrl = shareUrl; // Show dialog document.getElementById('notification-dialog').style.display = 'flex'; @@ -1035,26 +1026,26 @@ const contextMenus = { sendShareNotification() { const email = document.getElementById('notification-email').value.trim(); const message = document.getElementById('notification-message').value.trim(); - const shareUrl = window.app.notificationShareUrl; + const shareUrl = app.notificationShareUrl; if (!email || !shareUrl) { - window.ui.showNotification('Error', 'Please enter a valid email address'); + ui.showNotification('Error', 'Please enter a valid email address'); return; } // Validate email format const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { - window.ui.showNotification('Error', 'Please enter a valid email address'); + ui.showNotification('Error', 'Please enter a valid email address'); return; } try { - window.fileSharing.sendShareNotification(shareUrl, email, message); + fileSharing.sendShareNotification(shareUrl, email, message); document.getElementById('notification-dialog').style.display = 'none'; } catch (error) { console.error('Error sending notification:', error); - window.ui.showNotification('Error', 'Could not send notification'); + ui.showNotification('Error', 'Could not send notification'); } }, @@ -1064,8 +1055,8 @@ const contextMenus = { closeShareDialog() { const dialog = document.getElementById('share-dialog'); if (dialog) dialog.style.display = 'none'; - window.app.shareDialogItem = null; - window.app.shareDialogItemType = null; + app.shareDialogItem = null; + app.shareDialogItemType = null; }, /** @@ -1073,7 +1064,7 @@ const contextMenus = { */ closeNotificationDialog() { document.getElementById('notification-dialog').style.display = 'none'; - window.app.notificationShareUrl = null; + app.notificationShareUrl = null; }, _selectedPlaylistId: null, @@ -1089,11 +1080,11 @@ const contextMenus = { } // Store the file(s) to add - window.app.playlistDialogFiles = [file]; + app.playlistDialogFiles = [file]; // Update files info if (filesInfo) { - filesInfo.innerHTML = `${window.i18n ? window.i18n.t('music.selected_files', 'Selected:') : 'Selected:'} ${file.name}`; + filesInfo.innerHTML = `${i18n ? i18n.t('music.selected_files', 'Selected:') : 'Selected:'} ${file.name}`; } // Reset selection @@ -1117,12 +1108,12 @@ const contextMenus = { this._renderPlaylistSelect(container, playlists); } catch (err) { console.error('Error loading playlists:', err); - container.innerHTML = `
${window.i18n ? window.i18n.t('music.load_error', 'Error loading playlists') : 'Error loading playlists'}
`; + container.innerHTML = `
${i18n ? i18n.t('music.load_error', 'Error loading playlists') : 'Error loading playlists'}
`; } }, _renderPlaylistSelect(container, playlists) { - const t = (key, fallback) => (window.i18n ? window.i18n.t(key, fallback) : fallback); + const t = (key, fallback) => (i18n ? i18n.t(key, fallback) : fallback); container.innerHTML = ''; @@ -1157,7 +1148,7 @@ const contextMenus = { async addSelectedFilesToPlaylist() { const playlistId = this._selectedPlaylistId; - const files = window.app.playlistDialogFiles || []; + const files = app.playlistDialogFiles || []; if (!playlistId || files.length === 0) return; @@ -1181,23 +1172,20 @@ const contextMenus = { } await resp.json(); - window.ui.showNotification( - window.i18n ? window.i18n.t('music.added', 'Added!') : 'Added!', - `${files.length} ${files.length === 1 ? 'track' : 'tracks'} ${window.i18n ? window.i18n.t('music.added_to_playlist', 'added to playlist') : 'added to playlist'}` + ui.showNotification( + i18n ? i18n.t('music.added', 'Added!') : 'Added!', + `${files.length} ${files.length === 1 ? 'track' : 'tracks'} ${i18n ? i18n.t('music.added_to_playlist', 'added to playlist') : 'added to playlist'}` ); this.closePlaylistDialog(); // Refresh music view if open - if (window.musicView?.playlists) { - window.musicView._loadPlaylists(); + if (musicView?.playlists) { + musicView._loadPlaylists(); } } catch (err) { console.error('Error adding to playlist:', err); - window.ui.showNotification( - window.i18n ? window.i18n.t('music.error', 'Error') : 'Error', - err.message || window.i18n.t('music.add_error', 'Could not add tracks to playlist') - ); + ui.showNotification(i18n ? i18n.t('music.error', 'Error') : 'Error', err.message || i18n.t('music.add_error', 'Could not add tracks to playlist')); if (addBtn) addBtn.disabled = false; } }, @@ -1210,7 +1198,7 @@ const contextMenus = { dialog.style.display = 'none'; }, 200); } - window.app.playlistDialogFiles = null; + app.playlistDialogFiles = null; this._selectedPlaylistId = null; }, @@ -1220,5 +1208,4 @@ const contextMenus = { } }; -// Expose context menus module globally -window.contextMenus = contextMenus; +export { contextMenus }; diff --git a/static/js/features/files/fileOperations.js b/static/js/features/files/fileOperations.js index aef21479..868d73f3 100644 --- a/static/js/features/files/fileOperations.js +++ b/static/js/features/files/fileOperations.js @@ -3,6 +3,14 @@ * This file handles file and folder operations (create, move, delete, rename, upload) */ +import { refreshUserData } from '../../app/authSession.js'; +import { loadFiles } from '../../app/filesView.js'; +import { app } from '../../app/state.js'; +import { showConfirmDialog, ui } from '../../app/ui.js'; +import { getCsrfHeaders, getCsrfToken } from '../../core/csrf.js'; +import { i18n } from '../../core/i18n.js'; +import { notifications } from '../../core/notifications.js'; + /** * Get authorization headers for API requests. * Tokens are now in HttpOnly cookies — no explicit Authorization header needed. @@ -22,13 +30,13 @@ const fileOps = { /** Start a new upload batch in the notification bell */ _initUploadToast(totalFiles, folderName) { - this._currentBatchId = window.notifications ? window.notifications.addUploadBatch(totalFiles, folderName) : null; + this._currentBatchId = notifications ? notifications.addUploadBatch(totalFiles, folderName) : null; }, /** Finalise the batch in the notification bell */ _finishUploadToast(successCount, totalFiles) { - if (window.notifications && this._currentBatchId) { - window.notifications.finishBatch(this._currentBatchId, successCount, totalFiles); + if (notifications && this._currentBatchId) { + notifications.finishBatch(this._currentBatchId, successCount, totalFiles); } }, @@ -58,7 +66,7 @@ const fileOps = { _uploadFileXHR(formData, batchId, fileName, timeoutMs = 120000) { return new Promise((resolve) => { const xhr = new XMLHttpRequest(); - const notif = window.notifications; + const notif = notifications; // Do NOT set xhr.timeout — it is a TOTAL deadline from send() to // response and would kill large uploads even while data is flowing. // Instead we rely on the stall timer (no progress for N seconds) @@ -299,13 +307,13 @@ const fileOps = { const totalFiles = readableFiles.length; - if (skippedEntries.length > 0 && window.notifications) { - const locale = window.i18n?.getCurrentLocale?.() || 'en'; + if (skippedEntries.length > 0 && notifications) { + const locale = i18n?.getCurrentLocale?.() || 'en'; const title = locale.startsWith('es') ? 'Entradas omitidas' : 'Entries skipped'; const text = locale.startsWith('es') ? `Se omitieron ${skippedEntries.length} carpeta(s)/entrada(s) no legibles. Usa "Subir carpeta".` : `${skippedEntries.length} unreadable folder/entry items were skipped. Use "Upload folder".`; - window.notifications.addNotification({ + notifications.addNotification({ icon: 'fa-folder-open', iconClass: 'upload', title, @@ -331,7 +339,7 @@ const fileOps = { const formData = new FormData(); - const targetFolderId = window.app.currentPath || window.app.userHomeFolderId; + const targetFolderId = app.currentPath || app.userHomeFolderId; if (targetFolderId) formData.append('folder_id', targetFolderId); formData.append('file', file); @@ -353,9 +361,9 @@ const fileOps = { progressBar.style.width = `${(uploadedCount / totalFiles) * 100}%`; } // Notify bell of per-file completion - if (window.notifications && batchId) { + if (notifications && batchId) { try { - window.notifications.fileCompleted(batchId, result.ok); + notifications.fileCompleted(batchId, result.ok); } catch (e) { console.warn('Batch progress update failed:', e); } @@ -366,8 +374,8 @@ const fileOps = { console.log(`Successfully uploaded ${file.name}`, result.data); } else { console.error(`Upload error for ${file.name}`); - if (result.isTimeout && window.notifications) { - window.notifications.addNotification({ + if (result.isTimeout && notifications) { + notifications.addNotification({ icon: 'fa-clock', iconClass: 'error', title: file.name, @@ -375,9 +383,9 @@ const fileOps = { }); } if (result.isQuotaError) { - const msg = result.errorMsg || window.i18n?.t('storage_quota_exceeded') || 'Storage quota exceeded'; - if (window.notifications) { - window.notifications.addNotification({ + const msg = result.errorMsg || i18n?.t('storage_quota_exceeded') || 'Storage quota exceeded'; + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-triangle', iconClass: 'error', title: file.name, @@ -393,14 +401,12 @@ const fileOps = { this._finishUploadToast(successCount, totalFiles); // Refresh storage usage display - if (typeof window.refreshUserData === 'function') { - try { - await window.refreshUserData(); - } catch (_) {} - } + try { + await refreshUserData(); + } catch (_) {} try { - await window.loadFiles({ forceRefresh: true }); + await loadFiles({ forceRefresh: true }); } catch (reloadError) { console.error('Error reloading files:', reloadError); } @@ -466,7 +472,7 @@ const fileOps = { return; } - const currentFolderId = window.app.currentPath || window.app.userHomeFolderId; + const currentFolderId = app.currentPath || app.userHomeFolderId; // Build folder structure from relative paths const folderMap = new Map(); @@ -528,7 +534,7 @@ const fileOps = { .filter(Boolean) ) ]; - const locale = window.i18n?.getCurrentLocale?.() || 'en'; + const locale = i18n?.getCurrentLocale?.() || 'en'; const rootFolderLabel = rootFolderNames.length <= 1 ? rootFolderNames[0] || '' @@ -585,9 +591,9 @@ const fileOps = { console.warn(`[SKIP] #${idx} ${rel} — cannot read 0-byte file (FIFO/pipe?), skipping`); uploadedCount++; successCount++; - if (window.notifications && batchId) { + if (notifications && batchId) { try { - window.notifications.fileCompleted(batchId, true); + notifications.fileCompleted(batchId, true); } catch (_) {} } return; @@ -617,9 +623,9 @@ const fileOps = { uploadedCount++; - if (window.notifications && batchId) { + if (notifications && batchId) { try { - window.notifications.fileCompleted(batchId, result.ok); + notifications.fileCompleted(batchId, result.ok); } catch (_) {} } if (progressBar && uploadedCount % 10 === 0) { @@ -633,8 +639,8 @@ const fileOps = { successCount++; } else if (result.isQuotaError) { quotaStop = true; - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-triangle', iconClass: 'error', title: file.name, @@ -661,14 +667,12 @@ const fileOps = { this._finishUploadToast(successCount, totalFiles); - if (typeof window.refreshUserData === 'function') { - try { - await window.refreshUserData(); - } catch (_) {} - } + try { + await refreshUserData(); + } catch (_) {} try { - await window.loadFiles({ forceRefresh: true }); + await loadFiles({ forceRefresh: true }); } catch (reloadError) { console.error('Error reloading files:', reloadError); } @@ -699,7 +703,7 @@ const fileOps = { }, body: JSON.stringify({ name: name, - parent_id: window.app.currentPath || window.app.userHomeFolderId || null + parent_id: app.currentPath || app.userHomeFolderId || null }) }); @@ -710,17 +714,17 @@ const fileOps = { // Optimistic UI: add folder card directly from server response // — no reload needed since the backend already confirmed creation. - window.ui.addFolderToView(folder); + ui.addFolderToView(folder); - window.ui.showNotification('Folder created', `"${name}" created successfully`); + ui.showNotification('Folder created', `"${name}" created successfully`); } else { const errorData = await response.text(); console.error('Create folder error:', errorData); - window.ui.showNotification('Error', 'Error creating the folder'); + ui.showNotification('Error', 'Error creating the folder'); } } catch (error) { console.error('Error creating folder:', error); - window.ui.showNotification('Error', 'Error creating the folder'); + ui.showNotification('Error', 'Error creating the folder'); } }, @@ -745,8 +749,8 @@ const fileOps = { if (response.ok) { // Reload files after moving - await window.loadFiles(); - window.ui.showNotification('File moved', 'File moved successfully'); + await loadFiles(); + ui.showNotification('File moved', 'File moved successfully'); return true; } else { let errorMessage = 'Unknown error'; @@ -756,12 +760,12 @@ const fileOps = { } catch (_e) { errorMessage = 'Error processing server response'; } - window.ui.showNotification('Error', `Error moving the file: ${errorMessage}`); + ui.showNotification('Error', `Error moving the file: ${errorMessage}`); return false; } } catch (error) { console.error('Error moving file:', error); - window.ui.showNotification('Error', 'Error moving the file'); + ui.showNotification('Error', 'Error moving the file'); return false; } }, @@ -787,8 +791,8 @@ const fileOps = { if (response.ok) { // Reload files after moving - await window.loadFiles(); - window.ui.showNotification('Folder moved', 'Folder moved successfully'); + await loadFiles(); + ui.showNotification('Folder moved', 'Folder moved successfully'); return true; } else { let errorMessage = 'Unknown error'; @@ -798,12 +802,12 @@ const fileOps = { } catch (_e) { errorMessage = 'Error processing server response'; } - window.ui.showNotification('Error', `Error moving the folder: ${errorMessage}`); + ui.showNotification('Error', `Error moving the folder: ${errorMessage}`); return false; } } catch (error) { console.error('Error moving folder:', error); - window.ui.showNotification('Error', 'Error moving the folder'); + ui.showNotification('Error', 'Error moving the folder'); return false; } }, @@ -890,8 +894,8 @@ const fileOps = { if (response.ok) { await response.json(); // Reload files after copying - await window.loadFiles(); - window.ui.showNotification('File copied', 'File copied successfully'); + await loadFiles(); + ui.showNotification('File copied', 'File copied successfully'); return true; } else { let errorMessage = 'Unknown error'; @@ -901,12 +905,12 @@ const fileOps = { } catch (_e) { errorMessage = 'Error processing server response'; } - window.ui.showNotification('Error', `Error copying the file: ${errorMessage}`); + ui.showNotification('Error', `Error copying the file: ${errorMessage}`); return false; } } catch (error) { console.error('Error copying file:', error); - window.ui.showNotification('Error', 'Error copying the file'); + ui.showNotification('Error', 'Error copying the file'); return false; } }, @@ -920,7 +924,7 @@ const fileOps = { */ async copyFolder(_folderId, _targetFolderId) { // Folder copy is not yet implemented in the backend - window.ui.showNotification('Not implemented', 'Folder copy is not yet supported'); + ui.showNotification('Not implemented', 'Folder copy is not yet supported'); return false; }, @@ -954,7 +958,7 @@ const fileOps = { // Note: Folder copy is not yet implemented in batch API if (folderIds.length > 0) { - window.ui.showNotification('Info', 'Folder copy is not yet supported in batch mode'); + ui.showNotification('Info', 'Folder copy is not yet supported in batch mode'); errors += folderIds.lenngth; } } catch (err) { @@ -990,9 +994,9 @@ const fileOps = { console.log('Response status:', response.status); if (response.ok) { - window.ui.showNotification( - window.i18n ? window.i18n.t('notifications.file_renamed') : 'File renamed', - window.i18n ? window.i18n.t('notifications.file_renamed_to', { name: newName }) : `File renamed to "${newName}"` + ui.showNotification( + i18n ? i18n.t('notifications.file_renamed') : 'File renamed', + i18n ? i18n.t('notifications.file_renamed_to', { name: newName }) : `File renamed to "${newName}"` ); return true; } else { @@ -1005,12 +1009,12 @@ const fileOps = { } catch (_e) { errorMessage = errorText || response.statusText; } - window.ui.showNotification('Error', `Error renaming the file: ${errorMessage}`); + ui.showNotification('Error', `Error renaming the file: ${errorMessage}`); return false; } } catch (error) { console.error('Error renaming file:', error); - window.ui.showNotification('Error', 'Error renaming the file'); + ui.showNotification('Error', 'Error renaming the file'); return false; } }, @@ -1037,7 +1041,7 @@ const fileOps = { console.log('Response status:', response.status); if (response.ok) { - window.ui.showNotification('Folder renamed', `Folder renamed to "${newName}"`); + ui.showNotification('Folder renamed', `Folder renamed to "${newName}"`); return true; } else { const errorText = await response.text(); @@ -1053,12 +1057,12 @@ const fileOps = { errorMessage = errorText || response.statusText; } - window.ui.showNotification('Error', `Error renaming the folder: ${errorMessage}`); + ui.showNotification('Error', `Error renaming the folder: ${errorMessage}`); return false; } } catch (error) { console.error('Error renaming folder:', error); - window.ui.showNotification('Error', 'Error renaming the folder'); + ui.showNotification('Error', 'Error renaming the folder'); return false; } }, @@ -1071,11 +1075,9 @@ const fileOps = { */ async deleteFile(fileId, fileName) { const confirmed = await showConfirmDialog({ - title: window.i18n ? window.i18n.t('dialogs.confirm_delete') : 'Move to trash', - message: window.i18n - ? window.i18n.t('dialogs.confirm_delete_file', { name: fileName }) - : `Are you sure you want to move the file "${fileName}" to trash?`, - confirmText: window.i18n ? window.i18n.t('actions.delete') : 'Delete' + title: i18n ? i18n.t('dialogs.confirm_delete') : 'Move to trash', + message: i18n ? i18n.t('dialogs.confirm_delete_file', { name: fileName }) : `Are you sure you want to move the file "${fileName}" to trash?`, + confirmText: i18n ? i18n.t('actions.delete') : 'Delete' }); if (!confirmed) return false; @@ -1087,8 +1089,8 @@ const fileOps = { }); if (response.ok) { - window.loadFiles(); - window.ui.showNotification('File moved to trash', `"${fileName}" moved to trash`); + loadFiles(); + ui.showNotification('File moved to trash', `"${fileName}" moved to trash`); return true; } else { // Fallback to direct deletion if trash fails @@ -1098,17 +1100,17 @@ const fileOps = { }); if (fallbackResponse.ok) { - window.loadFiles(); - window.ui.showNotification('File deleted', `"${fileName}" deleted successfully`); + loadFiles(); + ui.showNotification('File deleted', `"${fileName}" deleted successfully`); return true; } else { - window.ui.showNotification('Error', 'Error deleting the file'); + ui.showNotification('Error', 'Error deleting the file'); return false; } } } catch (error) { console.error('Error deleting file:', error); - window.ui.showNotification('Error', 'Error deleting the file'); + ui.showNotification('Error', 'Error deleting the file'); return false; } }, @@ -1121,11 +1123,11 @@ const fileOps = { */ async deleteFolder(folderId, folderName) { const confirmed = await showConfirmDialog({ - title: window.i18n ? window.i18n.t('dialogs.confirm_delete') : 'Move to trash', - message: window.i18n - ? window.i18n.t('dialogs.confirm_delete_folder', { name: folderName }) + title: i18n ? i18n.t('dialogs.confirm_delete') : 'Move to trash', + message: i18n + ? i18n.t('dialogs.confirm_delete_folder', { name: folderName }) : `Are you sure you want to move the folder "${folderName}" and all its contents to trash?`, - confirmText: window.i18n ? window.i18n.t('actions.delete') : 'Delete' + confirmText: i18n ? i18n.t('actions.delete') : 'Delete' }); if (!confirmed) return false; @@ -1138,12 +1140,12 @@ const fileOps = { if (response.ok) { // If we're inside the folder we just deleted, go back up - if (window.app.currentPath === folderId) { - window.app.currentPath = ''; - window.ui.updateBreadcrumb(''); + if (app.currentPath === folderId) { + app.currentPath = ''; + ui.updateBreadcrumb(''); } - window.loadFiles(); - window.ui.showNotification('Folder moved to trash', `"${folderName}" moved to trash`); + loadFiles(); + ui.showNotification('Folder moved to trash', `"${folderName}" moved to trash`); return true; } else { // Fallback to direct deletion if trash fails @@ -1154,21 +1156,21 @@ const fileOps = { if (fallbackResponse.ok) { // If we're inside the folder we just deleted, go back up - if (window.app.currentPath === folderId) { - window.app.currentPath = ''; - window.ui.updateBreadcrumb(''); + if (app.currentPath === folderId) { + app.currentPath = ''; + ui.updateBreadcrumb(''); } - window.loadFiles(); - window.ui.showNotification('Folder deleted', `"${folderName}" deleted successfully`); + loadFiles(); + ui.showNotification('Folder deleted', `"${folderName}" deleted successfully`); return true; } else { - window.ui.showNotification('Error', 'Error deleting the folder'); + ui.showNotification('Error', 'Error deleting the folder'); return false; } } } catch (error) { console.error('Error deleting folder:', error); - window.ui.showNotification('Error', 'Error deleting the folder'); + ui.showNotification('Error', 'Error deleting the folder'); return false; } }, @@ -1212,15 +1214,15 @@ const fileOps = { }); if (response.ok) { - window.ui.showNotification('Item restored', 'Item restored successfully'); + ui.showNotification('Item restored', 'Item restored successfully'); return true; } else { - window.ui.showNotification('Error', 'Error restoring the item'); + ui.showNotification('Error', 'Error restoring the item'); return false; } } catch (error) { console.error('Error restoring item from trash:', error); - window.ui.showNotification('Error', 'Error restoring the item'); + ui.showNotification('Error', 'Error restoring the item'); return false; } }, @@ -1232,11 +1234,11 @@ const fileOps = { */ async deletePermanently(trashId) { const confirmed = await showConfirmDialog({ - title: window.i18n ? window.i18n.t('dialogs.confirm_permanent_delete') : 'Delete permanently', - message: window.i18n - ? window.i18n.t('dialogs.confirm_permanent_delete_msg') + title: i18n ? i18n.t('dialogs.confirm_permanent_delete') : 'Delete permanently', + message: i18n + ? i18n.t('dialogs.confirm_permanent_delete_msg') : 'Are you sure you want to permanently delete this item? This action cannot be undone.', - confirmText: window.i18n ? window.i18n.t('actions.delete_permanently') : 'Delete permanently' + confirmText: i18n ? i18n.t('actions.delete_permanently') : 'Delete permanently' }); if (!confirmed) return false; @@ -1247,15 +1249,15 @@ const fileOps = { }); if (response.ok) { - window.ui.showNotification('Item deleted', 'Item permanently deleted'); + ui.showNotification('Item deleted', 'Item permanently deleted'); return true; } else { - window.ui.showNotification('Error', 'Error deleting the item'); + ui.showNotification('Error', 'Error deleting the item'); return false; } } catch (error) { console.error('Error deleting item permanently:', error); - window.ui.showNotification('Error', 'Error deleting the item'); + ui.showNotification('Error', 'Error deleting the item'); return false; } }, @@ -1266,11 +1268,9 @@ const fileOps = { */ async emptyTrash() { const confirmed = await showConfirmDialog({ - title: window.i18n ? window.i18n.t('dialogs.confirm_empty_trash') : 'Empty trash', - message: window.i18n - ? window.i18n.t('trash.empty_confirm') - : 'Are you sure you want to empty the trash? This action will permanently delete all items.', - confirmText: window.i18n ? window.i18n.t('actions.empty_trash') : 'Empty trash' + title: i18n ? i18n.t('dialogs.confirm_empty_trash') : 'Empty trash', + message: i18n ? i18n.t('trash.empty_confirm') : 'Are you sure you want to empty the trash? This action will permanently delete all items.', + confirmText: i18n ? i18n.t('actions.empty_trash') : 'Empty trash' }); if (!confirmed) return false; @@ -1281,15 +1281,15 @@ const fileOps = { }); if (response.ok) { - window.ui.showNotification('Trash emptied', 'The trash has been emptied successfully'); + ui.showNotification('Trash emptied', 'The trash has been emptied successfully'); return true; } else { - window.ui.showNotification('Error', 'Error emptying the trash'); + ui.showNotification('Error', 'Error emptying the trash'); return false; } } catch (error) { console.error('Error emptying trash:', error); - window.ui.showNotification('Error', 'Error emptying the trash'); + ui.showNotification('Error', 'Error emptying the trash'); return false; } }, @@ -1315,11 +1315,11 @@ const fileOps = { document.body.removeChild(link); URL.revokeObjectURL(url); } else { - window.ui.showNotification('Error', 'Error downloading the file'); + ui.showNotification('Error', 'Error downloading the file'); } } catch (error) { console.error('Error downloading file:', error); - window.ui.showNotification('Error', 'Error downloading the file'); + ui.showNotification('Error', 'Error downloading the file'); } }, @@ -1331,7 +1331,7 @@ const fileOps = { async downloadFolder(folderId, folderName) { try { // Show notification to user - window.ui.showNotification('Preparing download', 'Preparing the folder for download...'); + ui.showNotification('Preparing download', 'Preparing the folder for download...'); const response = await fetch(`/api/folders/${folderId}/download?format=zip`, { headers: getAuthHeaders() @@ -1347,14 +1347,13 @@ const fileOps = { document.body.removeChild(link); URL.revokeObjectURL(url); } else { - window.ui.showNotification('Error', 'Error downloading the folder'); + ui.showNotification('Error', 'Error downloading the folder'); } } catch (error) { console.error('Error downloading folder:', error); - window.ui.showNotification('Error', 'Error downloading the folder'); + ui.showNotification('Error', 'Error downloading the folder'); } } }; -// Expose file operations module globally -window.fileOps = fileOps; +export { fileOps, getAuthHeaders }; diff --git a/static/js/features/files/inlineViewer.js b/static/js/features/files/inlineViewer.js index e1ce5fb8..1f44e9fe 100644 --- a/static/js/features/files/inlineViewer.js +++ b/static/js/features/files/inlineViewer.js @@ -3,6 +3,11 @@ * A simpler approach to viewing files that doesn't rely on complex DOM manipulation */ +import { updateHistory } from '../../app/main.js'; +import { app } from '../../app/state.js'; +import { isTextViewable } from '../../core/formatters.js'; +import { wopiEditor } from './wopiEditor.js'; + class InlineViewer { constructor() { this.setupViewer(); @@ -97,9 +102,9 @@ class InlineViewer { const ext = (file.name || '').split('.').pop().toLowerCase(); const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'ico', 'heic', 'heif', 'avif', 'tiff']; const isImage = file.mime_type?.startsWith('image/') || imageExts.includes(ext); - if (!isImage && window.wopiEditor && (await window.wopiEditor.canEdit(file.name))) { + if (!isImage && wopiEditor && (await wopiEditor.canEdit(file.name))) { try { - window.wopiEditor.openInModal(file.id, file.name, 'edit'); + wopiEditor.openInModal(file.id, file.name, 'edit'); return; } catch (e) { console.warn('WOPI editor failed, falling back to inline viewer:', e); @@ -204,9 +209,9 @@ class InlineViewer { modal.classList.add('active'); } - // Check if a MIME type is text-viewable — delegates to window.isTextViewable + // Check if a MIME type is text-viewable isTextViewable(mimeType) { - return window.isTextViewable ? window.isTextViewable(mimeType) : false; + return isTextViewable(mimeType); } // Creates a text viewer using authenticated fetch @@ -513,8 +518,8 @@ class InlineViewer { } // clear - window.app.viewFile = null; - window.updateHistory(false); + app.viewFile = null; + updateHistory(false); // Clear references this.currentFile = null; @@ -573,21 +578,4 @@ class InlineViewer { } } -// Initialize viewer when document is ready -document.addEventListener('DOMContentLoaded', () => { - // Check if it's already initialized - if (!window.inlineViewer) { - console.log('Initializing inline viewer on DOMContentLoaded'); - window.inlineViewer = new InlineViewer(); - } -}); - -// Fallback initialization for cases where DOMContentLoaded already fired -if (document.readyState === 'complete' || document.readyState === 'interactive') { - if (!window.inlineViewer) { - console.log('Fallback initialization for inline viewer'); - setTimeout(() => { - window.inlineViewer = new InlineViewer(); - }, 100); - } -} +export const inlineViewer = new InlineViewer(); diff --git a/static/js/features/files/multiSelect.js b/static/js/features/files/multiSelect.js index 5cae4d1d..2f98c1fc 100644 --- a/static/js/features/files/multiSelect.js +++ b/static/js/features/files/multiSelect.js @@ -11,6 +11,14 @@ // @ts-check +import { loadFiles } from '../../app/filesView.js'; +import { app } from '../../app/state.js'; +import { showConfirmDialog, ui } from '../../app/ui.js'; +import { i18n } from '../../core/i18n.js'; +import { favorites } from '../library/favorites.js'; +import { contextMenus } from './contextMenus.js'; +import { getAuthHeaders } from './fileOperations.js'; + const multiSelect = { /** Currently selected items: Map */ _selected: new Map(), @@ -42,8 +50,8 @@ const multiSelect = { // ── Helpers for i18n ──────────────────────────────────── _t(key, vars) { - if (window.i18n && typeof window.i18n.t === 'function') { - const val = window.i18n.t(key, vars); + if (i18n && typeof i18n.t === 'function') { + const val = i18n.t(key, vars); // If i18n returned the key itself, it's missing → fall back if (val && val !== key) return val; } @@ -133,15 +141,15 @@ const multiSelect = { showBatchResult(action, result) { if (action === 'copy') { if (result.errors > 0) { - window.ui.showNotification('Batch copy', `${result.success} copied, ${result.errors} failed`); + ui.showNotification('Batch copy', `${result.success} copied, ${result.errors} failed`); } else { - window.ui.showNotification('Items copied', `${result.success} item${result.success !== 1 ? 's' : ''} copied successfully`); + ui.showNotification('Items copied', `${result.success} item${result.success !== 1 ? 's' : ''} copied successfully`); } } else { if (result.errors > 0) { - window.ui.showNotification('Batch move', `${result.success} moved, ${result.errors} failed`); + ui.showNotification('Batch move', `${result.success} moved, ${result.errors} failed`); } else { - window.ui.showNotification('Items moved', `${result.success} item${result.success !== 1 ? 's' : ''} moved successfully`); + ui.showNotification('Items moved', `${result.success} item${result.success !== 1 ? 's' : ''} moved successfully`); } } }, @@ -366,18 +374,18 @@ const multiSelect = { const errors = data.stats?.failed || 0; this.clear(); - window.loadFiles(); + loadFiles(); if (errors > 0) { - window.ui.showNotification('Batch delete', `${success} moved to trash, ${errors} failed`); + ui.showNotification('Batch delete', `${success} moved to trash, ${errors} failed`); } else { - window.ui.showNotification('Moved to trash', `${success} item${success !== 1 ? 's' : ''} moved to trash`); + ui.showNotification('Moved to trash', `${success} item${success !== 1 ? 's' : ''} moved to trash`); } } catch (e) { console.error('Batch trash error:', e); - window.ui.showNotification('Error', 'Could not move items to trash'); + ui.showNotification('Error', 'Could not move items to trash'); this.clear(); - window.loadFiles(); + loadFiles(); } }, @@ -386,9 +394,9 @@ const multiSelect = { const items = this.items; if (items.length === 0) return; - window.app.moveDialogMode = 'batch'; - window.app.batchMoveItems = items; - window.app.selectedTargetFolderId = ''; + app.moveDialogMode = 'batch'; + app.batchMoveItems = items; + app.selectedTargetFolderId = ''; const dialog = document.getElementById('move-file-dialog'); const dialogHeader = dialog.querySelector('.rename-dialog-header'); @@ -406,7 +414,7 @@ const multiSelect = { const items = this.items; if (items.length === 0) return; - window.ui.showNotification('Preparing download', 'Creating ZIP archive...'); + ui.showNotification('Preparing download', 'Creating ZIP archive...'); try { const fileIds = items.filter((i) => i.type === 'file').map((i) => i.id); @@ -431,20 +439,20 @@ const multiSelect = { URL.revokeObjectURL(url); } catch (e) { console.error('Batch download error:', e); - window.ui.showNotification('Error', 'Could not download selected items'); + ui.showNotification('Error', 'Could not download selected items'); } }, /** Batch add to favorites — single API call */ async batchFavorites() { const items = this.items; - if (items.length === 0 || !window.favorites) return; + if (items.length === 0 || !favorites) return; // Filter out items already in favourites - const toAdd = items.filter((i) => !window.favorites.isFavorite(i.id, i.type)); + const toAdd = items.filter((i) => !favorites.isFavorite(i.id, i.type)); if (toAdd.length === 0) { this.clear(); - window.ui.showNotification(this._t('favorites.add') || 'Favorites', 'All selected items are already favorites'); + ui.showNotification(this._t('favorites.add') || 'Favorites', 'All selected items are already favorites'); return; } @@ -463,23 +471,23 @@ const multiSelect = { const inserted = data.stats?.inserted || 0; // Replace cache directly from response (no extra GET) - if (data.favorites && window.favorites._replaceCacheFromResponse) { - window.favorites._replaceCacheFromResponse(data.favorites); + if (data.favorites && favorites._replaceCacheFromResponse) { + favorites._replaceCacheFromResponse(data.favorites); } else { - await window.favorites._fetchFromServer(); + await favorites._fetchFromServer(); } this.clear(); - if (typeof window.loadFiles === 'function') window.loadFiles(); + loadFiles(); if (inserted > 0) { - window.ui.showNotification(this._t('favorites.add') || 'Added to favorites', `${inserted} item${inserted !== 1 ? 's' : ''} added to favorites`); + ui.showNotification(this._t('favorites.add') || 'Added to favorites', `${inserted} item${inserted !== 1 ? 's' : ''} added to favorites`); } else { - window.ui.showNotification(this._t('favorites.add') || 'Favorites', 'All selected items are already favorites'); + ui.showNotification(this._t('favorites.add') || 'Favorites', 'All selected items are already favorites'); } } catch (e) { console.error('Batch favorites error:', e); - window.ui.showNotification('Error', 'Could not add items to favorites'); + ui.showNotification('Error', 'Could not add items to favorites'); } }, @@ -510,8 +518,8 @@ const multiSelect = { const batchSelectionBar = document.getElementById('batch-selection-bar'); batchSelectionBar.innerHTML = this._buildSelectionBarHTML(); - if (window.i18n?.translateElement) { - window.i18n.translateElement(batchSelectionBar); + if (i18n?.translateElement) { + i18n.translateElement(batchSelectionBar); } this._wireBarButtons(); }, @@ -524,5 +532,4 @@ const multiSelect = { } }; -// Expose globally -window.multiSelect = multiSelect; +export { multiSelect }; diff --git a/static/js/features/files/search.js b/static/js/features/files/search.js index a52e161b..e47ad8da 100644 --- a/static/js/features/files/search.js +++ b/static/js/features/files/search.js @@ -7,6 +7,11 @@ * displays the enriched results returned by the server. */ +import { loadFiles } from '../../app/filesView.js'; +import { app } from '../../app/state.js'; +import { ui } from '../../app/ui.js'; +import { getAuthHeaders } from './fileOperations.js'; + const search = { /** * Perform a search using query parameters. @@ -55,7 +60,7 @@ const search = { } } catch (error) { console.error('Error performing search:', error); - window.ui.showNotification('Error', 'Error performing search'); + ui.showNotification('Error', 'Error performing search'); return { files: [], folders: [], @@ -109,7 +114,7 @@ const search = { * @param {Object} results - Enriched search results from backend */ displaySearchResults(results) { - window.ui.resetFilesList(); // ensure also list visible & error hidden + ui.resetFilesList(); // ensure also list visible & error hidden //FIXME: move into action rather bage sticky header + hide bread crumb ? + note also that search result does not consider section const pageStickyHeader = document.getElementById('page-sticky-header'); @@ -163,17 +168,17 @@ const search = { if (clearSearchBtn) { clearSearchBtn.addEventListener('click', () => { document.querySelector('.search-container input').value = ''; - window.app.currentPath = ''; - window.app.isSearchMode = false; + app.currentPath = ''; + app.isSearchMode = false; document.querySelector('.search-results-header')?.remove(); - window.ui.updateBreadcrumb(''); - window.loadFiles(); + ui.updateBreadcrumb(''); + loadFiles(); }); } // Empty state if (results.files.length === 0 && results.folders.length === 0) { - window.ui.showError(` + ui.showError(`

No results found for this search

`); @@ -182,12 +187,12 @@ const search = { // Render folders (server-provided enriched data) results.folders.forEach((folder) => { - window.ui.addFolderToView(folder); + ui.addFolderToView(folder); }); // Render files (server-provided enriched data) results.files.forEach((file) => { - window.ui.addFileToView(file); + ui.addFileToView(file); }); }, @@ -203,19 +208,18 @@ const search = { }); if (response.ok) { - window.ui.showNotification('Cache cleared', 'Search cache cleared successfully'); + ui.showNotification('Cache cleared', 'Search cache cleared successfully'); return true; } else { - window.ui.showNotification('Error', 'Error clearing search cache'); + ui.showNotification('Error', 'Error clearing search cache'); return false; } } catch (error) { console.error('Error clearing search cache:', error); - window.ui.showNotification('Error', 'Error clearing search cache'); + ui.showNotification('Error', 'Error clearing search cache'); return false; } } }; -// Expose the search module globally -window.search = search; +export { search }; diff --git a/static/js/features/files/wopiEditor.js b/static/js/features/files/wopiEditor.js index 435f4001..7c3f487d 100644 --- a/static/js/features/files/wopiEditor.js +++ b/static/js/features/files/wopiEditor.js @@ -4,6 +4,9 @@ * Opens document files in Collabora Online / OnlyOffice via WOPI protocol. * Supports two modes: in-app modal (default) and new browser tab. */ + +import { loadFiles } from '../../app/filesView.js'; + class WopiEditor { constructor() { this.editorModal = null; @@ -203,10 +206,9 @@ class WopiEditor { this._messageHandler = null; } this.editorModal = null; + // Refresh file list to pick up any saves - if (typeof loadFiles === 'function') { - loadFiles(); - } + loadFiles(); } /** @@ -243,7 +245,7 @@ class WopiEditor { } // Global instance -window.wopiEditor = new WopiEditor(); +export const wopiEditor = new WopiEditor(); // Prefetch supported extensions so canEdit() is fast on first use -window.wopiEditor._fetchSupportedExtensions(); +wopiEditor._fetchSupportedExtensions(); diff --git a/static/js/features/library/favorites.js b/static/js/features/library/favorites.js index 91e24eb8..579e8a43 100644 --- a/static/js/features/library/favorites.js +++ b/static/js/features/library/favorites.js @@ -6,6 +6,10 @@ * rendering path so star icons can be painted without a round-trip. */ +import { ui } from '../../app/ui.js'; +import { getCsrfHeaders } from '../../core/csrf.js'; +import { i18n } from '../../core/i18n.js'; + const favorites = { /** @type {Map} key = "file:" | "folder:" */ _cache: new Map(), @@ -104,10 +108,10 @@ const favorites = { await this._fetchFromServer(); // Notify user - if (window.ui?.showNotification) { - window.ui.showNotification( - window.i18n ? window.i18n.t('favorites.added_title') : 'Added to favorites', - `"${name}" ${window.i18n ? window.i18n.t('favorites.added_msg') : 'added to favorites'}` + if (ui?.showNotification) { + ui.showNotification( + i18n ? i18n.t('favorites.added_title') : 'Added to favorites', + `"${name}" ${i18n ? i18n.t('favorites.added_msg') : 'added to favorites'}` ); } @@ -139,10 +143,10 @@ const favorites = { // Remove from local cache this._cache.delete(this._cacheKey(id, type)); - if (window.ui?.showNotification) { - window.ui.showNotification( - window.i18n ? window.i18n.t('favorites.removed_title') : 'Removed from favorites', - `"${itemName}" ${window.i18n ? window.i18n.t('favorites.removed_msg') : 'removed from favorites'}` + if (ui?.showNotification) { + ui.showNotification( + i18n ? i18n.t('favorites.removed_title') : 'Removed from favorites', + `"${itemName}" ${i18n ? i18n.t('favorites.removed_msg') : 'removed from favorites'}` ); } @@ -167,14 +171,14 @@ const favorites = { await this._fetchFromServer(); } - window.ui.resetFilesList(); // ensure also list visible & error hidden - window.ui.updateBreadcrumb(''); + ui.resetFilesList(); // ensure also list visible & error hidden + ui.updateBreadcrumb(''); if (this._cache.size === 0) { - window.ui.showError(` + ui.showError(` -

${window.i18n ? window.i18n.t('favorites.empty_state') : 'No favorite items'}

-

${window.i18n ? window.i18n.t('favorites.empty_hint') : 'To mark as favorite, right-click on any file or folder'}

+

${i18n ? i18n.t('favorites.empty_state') : 'No favorite items'}

+

${i18n ? i18n.t('favorites.empty_hint') : 'To mark as favorite, right-click on any file or folder'}

`); return; } @@ -204,16 +208,15 @@ const favorites = { }); } } - if (folders.length) window.ui.renderFolders(folders); - if (files.length) window.ui.renderFiles(files); + if (folders.length) ui.renderFolders(folders); + if (files.length) ui.renderFiles(files); } catch (error) { console.error('Error displaying favorites:', error); - if (window.ui?.showNotification) { - window.ui.showNotification('Error', 'Error loading favorite items'); + if (ui?.showNotification) { + ui.showNotification('Error', 'Error loading favorite items'); } } } }; -// Expose globally -window.favorites = favorites; +export { favorites }; diff --git a/static/js/features/library/music.js b/static/js/features/library/music.js index 0a77dd3f..456ec605 100644 --- a/static/js/features/library/music.js +++ b/static/js/features/library/music.js @@ -1,3 +1,11 @@ +import { app } from '../../app/state.js'; +import { getCsrfHeaders } from '../../core/csrf.js'; +import { formatFileSize } from '../../core/formatters.js'; +import { i18n } from '../../core/i18n.js'; +import { oxiIcon } from '../../core/icons.js'; +import { Modal } from '../../core/modal.js'; +import { notifications } from '../../core/notifications.js'; + /** * OxiCloud - Music Library View * Playlist management with track listings and audio player @@ -13,7 +21,7 @@ const musicView = { selected: new Set(), _headers(json = false) { - const h = typeof getCsrfHeaders === 'function' ? { ...getCsrfHeaders() } : {}; + const h = { ...getCsrfHeaders() }; if (json) h['Content-Type'] = 'application/json'; return h; }, @@ -78,8 +86,9 @@ const musicView = { _renderPlaylists() { if (!this._container) return; - const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + // FIXME should call directly + const t = (key, _fallback = '') => { + return i18n.t(key); }; // Empty state: no playlists at all — show full-width centered onboarding @@ -178,7 +187,7 @@ const musicView = { if (!listEl) return; const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; if (this.playlists.length === 0) { @@ -283,7 +292,7 @@ const musicView = { if (nameEl) nameEl.textContent = playlist.name; if (metaEl) { const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; metaEl.textContent = `${playlist.track_count || 0} ${t('music.tracks', 'tracks')}`; } @@ -305,7 +314,7 @@ const musicView = { } const togglePublicBtn = document.getElementById('music-toggle-public-btn'); if (togglePublicBtn) { - const t2 = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t2 = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); togglePublicBtn.title = playlist.is_public ? t2('music.make_private', 'Make private') : t2('music.make_public', 'Make public'); togglePublicBtn.classList.toggle('active', playlist.is_public); } @@ -344,7 +353,7 @@ const musicView = { if (!trackListEl) return; const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; if (this.currentTracks.length === 0) { @@ -459,7 +468,7 @@ const musicView = { if (!this.currentTracks[idx]) return; const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; musicPlayer.setQueue(this.currentTracks, this.currentPlaylist?.name || t('music.playlists', 'Playlist')); musicPlayer.playTrack(idx); @@ -479,7 +488,7 @@ const musicView = { [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; } const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; musicPlayer.setQueue(shuffled, this.currentPlaylist?.name || t('music.shuffle', 'Shuffle')); musicPlayer.playTrack(0); @@ -488,11 +497,10 @@ const musicView = { async _showCreatePlaylistDialog() { const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; - if (!window.Modal) return; - const name = await window.Modal.prompt({ + const name = await Modal.prompt({ title: t('music.create_playlist', 'Create Playlist'), label: t('music.playlist_name', 'Playlist name'), placeholder: t('music.playlist_name', 'Playlist name'), @@ -506,7 +514,7 @@ const musicView = { async _createPlaylist(name) { const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; const createBtn = document.getElementById('music-create-playlist-btn'); if (createBtn) createBtn.disabled = true; @@ -524,8 +532,8 @@ const musicView = { this.playlists.unshift(playlist); this._renderPlaylists(); this._selectPlaylist(playlist.id); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.create_playlist', 'Create Playlist'), @@ -534,8 +542,8 @@ const musicView = { } } catch (err) { console.error('Create playlist error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -549,17 +557,13 @@ const musicView = { async _deletePlaylist() { const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; if (!this.currentPlaylist) return; const confirmed = await new Promise((resolve) => { - if (!window.Modal) { - resolve(confirm(t('music.confirm_delete', 'Delete this playlist?'))); - return; - } - window.Modal.prompt({ + Modal.prompt({ title: t('music.delete', 'Delete'), label: t('music.confirm_delete', 'Delete this playlist?'), placeholder: '', @@ -586,13 +590,13 @@ const musicView = { this.currentPlaylist = null; this.currentTracks = []; this._renderPlaylists(); - if (window.notifications) { - window.notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.delete', 'Delete'), text: deletedName }); + if (notifications) { + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.delete', 'Delete'), text: deletedName }); } } catch (err) { console.error('Delete playlist error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -641,11 +645,10 @@ const musicView = { async _showEditPlaylistDialog() { if (!this.currentPlaylist) return; const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; - if (!window.Modal) return; - const newName = await window.Modal.prompt({ + const newName = await Modal.prompt({ title: t('music.edit', 'Edit'), label: t('music.playlist_name', 'Playlist name'), placeholder: t('music.playlist_name', 'Playlist name'), @@ -674,8 +677,8 @@ const musicView = { this._renderPlaylistList(); } catch (err) { console.error('Edit playlist error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -688,11 +691,10 @@ const musicView = { async _showSharePlaylistDialog() { if (!this.currentPlaylist) return; const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; - if (!window.Modal) return; - const userId = await window.Modal.prompt({ + const userId = await Modal.prompt({ title: t('music.share', 'Share'), label: t('music.share_with_user', 'User ID or email'), placeholder: t('music.share_with_user', 'User ID or email'), @@ -711,8 +713,8 @@ const musicView = { if (!resp.ok) throw new Error('Failed to share playlist'); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.share', 'Share'), @@ -721,8 +723,8 @@ const musicView = { } } catch (err) { console.error('Share playlist error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -735,7 +737,7 @@ const musicView = { async _showAddTracksDialog() { if (!this.currentPlaylist) return; const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; // ── Build modal overlay ── @@ -813,7 +815,7 @@ const musicView = { for (const file of files) { const row = document.createElement('label'); row.className = `music-picker-item${selectedIds.has(file.id) ? ' selected' : ''}`; - const sizeStr = file.size != null && window.formatFileSize ? window.formatFileSize(file.size) : ''; + const sizeStr = file.size != null && formatFileSize ? formatFileSize(file.size) : ''; row.innerHTML = ` @@ -858,8 +860,8 @@ const musicView = { }); if (!resp.ok) throw new Error('Failed to add tracks'); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.add_tracks', 'Add Tracks'), @@ -878,8 +880,8 @@ const musicView = { } } catch (err) { console.error('Add tracks error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -898,7 +900,7 @@ const musicView = { async _removeTrackFromPlaylist(_trackId, fileId) { if (!this.currentPlaylist) return; - const t = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); try { const resp = await fetch(`/api/playlists/${this.currentPlaylist.id}/tracks/${encodeURIComponent(fileId)}`, { @@ -908,8 +910,8 @@ const musicView = { }); if (!resp.ok) throw new Error('Failed to remove track'); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.remove', 'Remove'), @@ -927,8 +929,8 @@ const musicView = { } } catch (err) { console.error('Remove track error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -940,7 +942,7 @@ const musicView = { async _reorderTrack(fromIdx, toIdx) { if (!this.currentPlaylist) return; - const t = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); const tracks = [...this.currentTracks]; const [moved] = tracks.splice(fromIdx, 1); @@ -959,8 +961,8 @@ const musicView = { if (!resp.ok) throw new Error('Failed to reorder tracks'); } catch (err) { console.error('Reorder error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -973,7 +975,7 @@ const musicView = { async _showManageSharesDialog() { if (!this.currentPlaylist) return; - const t = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); const existing = document.getElementById('music-shares-dialog'); if (existing) existing.remove(); @@ -1025,8 +1027,8 @@ const musicView = { userInput.value = ''; writeInput.checked = false; this._loadSharesList(dialog); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.share', 'Share'), @@ -1034,8 +1036,8 @@ const musicView = { }); } } catch (err) { - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -1050,7 +1052,7 @@ const musicView = { async _loadSharesList(dialog) { if (!this.currentPlaylist) return; - const t = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); const body = dialog.querySelector('.music-shares-body'); if (!body) return; @@ -1095,7 +1097,7 @@ const musicView = { async _removeShare(userId, dialog) { if (!this.currentPlaylist) return; - const t = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); try { const resp = await fetch(`/api/playlists/${this.currentPlaylist.id}/share/${encodeURIComponent(userId)}`, { @@ -1106,8 +1108,8 @@ const musicView = { if (!resp.ok) throw new Error('Failed to remove share'); this._loadSharesList(dialog); } catch (err) { - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -1119,7 +1121,7 @@ const musicView = { async _togglePublic() { if (!this.currentPlaylist) return; - const t = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); const newValue = !this.currentPlaylist.is_public; try { @@ -1144,9 +1146,9 @@ const musicView = { btn.classList.toggle('active', newValue); } - if (window.notifications) { + if (notifications) { const status = newValue ? t('music.public', 'Public') : t('music.private', 'Private'); - window.notifications.addNotification({ + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.toggle_public', 'Visibility'), @@ -1155,8 +1157,8 @@ const musicView = { } } catch (err) { console.error('Toggle public error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -1168,7 +1170,7 @@ const musicView = { async _showCoverPicker() { if (!this.currentPlaylist) return; - const t = (key, fallback = '') => (typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key); + const t = (key, fallback = '') => (i18n?.t ? i18n.t(key) : fallback || key); const input = document.createElement('input'); input.type = 'file'; @@ -1184,13 +1186,13 @@ const musicView = { try { const formData = new FormData(); formData.append('file', file); - const folderId = window.app?.currentPath || window.app?.userHomeFolderId || ''; + const folderId = app?.currentPath || app?.userHomeFolderId || ''; formData.append('folder_id', folderId); const uploadResp = await fetch('/api/files/upload', { method: 'POST', credentials: 'include', - headers: typeof getCsrfHeaders === 'function' ? getCsrfHeaders() : {}, + headers: getCsrfHeaders(), body: formData }); if (!uploadResp.ok) throw new Error('Upload failed'); @@ -1214,8 +1216,8 @@ const musicView = { coverEl.innerHTML = `
`; } - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-check-circle', iconClass: 'upload', title: t('music.set_cover', 'Set cover'), @@ -1224,8 +1226,8 @@ const musicView = { } } catch (err) { console.error('Cover upload error:', err); - if (window.notifications) { - window.notifications.addNotification({ + if (notifications) { + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -1647,11 +1649,11 @@ const musicPlayer = { this.isPlaying = false; this._updateUI(); const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; - if (window.notifications) { + if (notifications) { const trackName = this.currentTrack?.title || this.currentTrack?.file_name || t('music.unknown_title', 'Unknown'); - window.notifications.addNotification({ + notifications.addNotification({ icon: 'fa-exclamation-circle', iconClass: 'error', title: t('music.error', 'Error'), @@ -1670,8 +1672,8 @@ const musicPlayer = { if (icon) { const iconName = this.isPlaying ? 'pause' : 'play'; const extraClass = 'player-btn-main'; - if (window.oxiIcon) { - icon.outerHTML = window.oxiIcon(iconName, extraClass); + if (oxiIcon) { + icon.outerHTML = oxiIcon(iconName, extraClass); } else { icon.className = `fas fa-${iconName} ${extraClass}`; } @@ -1680,7 +1682,7 @@ const musicPlayer = { if (trackName) { const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; trackName.textContent = this.currentTrack ? this.currentTrack.title || this.currentTrack.file_name || t('music.unknown_title', 'Unknown') @@ -1704,8 +1706,8 @@ const musicPlayer = { if (playIcon) playIcon.classList.remove('hidden'); if (playIcon) { const iconName = this.isPlaying ? 'pause' : 'play'; - if (window.oxiIcon) { - playIcon.outerHTML = window.oxiIcon(iconName, 'track-play-icon'); + if (oxiIcon) { + playIcon.outerHTML = oxiIcon(iconName, 'track-play-icon'); } else { playIcon.className = `fas fa-${iconName} track-play-icon`; } @@ -1735,7 +1737,7 @@ const musicPlayer = { if (!queueList) return; const t = (key, fallback = '') => { - return typeof i18n !== 'undefined' && i18n.t ? i18n.t(key) : fallback || key; + return i18n?.t ? i18n.t(key) : fallback || key; }; if (this.queue.length === 0) { @@ -1838,4 +1840,4 @@ const musicPlayer = { } }; -window.musicView = musicView; +export { musicView }; diff --git a/static/js/features/library/photos.js b/static/js/features/library/photos.js index 410b2920..2c5e89b3 100644 --- a/static/js/features/library/photos.js +++ b/static/js/features/library/photos.js @@ -3,6 +3,10 @@ * Photo grid grouped by day/month/year, with infinite scroll and multi-select. */ +import { getCsrfHeaders } from '../../core/csrf.js'; +import { i18n } from '../../core/i18n.js'; +import { photosLightbox } from './photosLightbox.js'; + const photosView = { /** @type {Array} All loaded photo items */ items: [], @@ -37,7 +41,7 @@ const photosView = { /** Auth headers (HttpOnly cookies) */ _headers(json = false) { - const h = typeof getCsrfHeaders === 'function' ? { ...getCsrfHeaders() } : {}; + const h = getCsrfHeaders(); if (json) h['Content-Type'] = 'application/json'; return h; }, @@ -406,7 +410,7 @@ const photosView = { /** Render the group mode toolbar */ _renderToolbar() { - const t = (k, d) => (window.i18n ? window.i18n.t(k) : d); + const t = (k, d) => (i18n ? i18n.t(k) : d); const modes = [ ['daily', t('photos.view_daily', 'Day')], ['monthly', t('photos.view_monthly', 'Month')], @@ -423,7 +427,7 @@ const photosView = { /** Render empty state */ _renderEmpty() { - const t = (k, d) => (window.i18n ? window.i18n.t(k) : d); + const t = (k, d) => (i18n ? i18n.t(k) : d); this._container.innerHTML = `
@@ -483,8 +487,8 @@ const photosView = { // Otherwise open lightbox const idx = this.items.findIndex((f) => f.id === id); - if (idx >= 0 && window.photosLightbox) { - window.photosLightbox.open(this.items, idx); + if (idx >= 0) { + photosLightbox.open(this.items, idx); } }, @@ -516,7 +520,7 @@ const photosView = { document.body.appendChild(bar); } - const t = (k, d) => (window.i18n ? window.i18n.t(k) : d); + const t = (k, d) => (i18n ? i18n.t(k) : d); const count = this.selected.size; bar.innerHTML = ` ${count} ${t('photos.items_selected', 'selected')} @@ -605,4 +609,6 @@ const photosView = { } }; -window.photosView = photosView; +photosLightbox.setPhotosView(photosView); + +export { photosView }; diff --git a/static/js/features/library/photosLightbox.js b/static/js/features/library/photosLightbox.js index bb661ca1..c21e73d9 100644 --- a/static/js/features/library/photosLightbox.js +++ b/static/js/features/library/photosLightbox.js @@ -3,7 +3,10 @@ * Full-screen image/video viewer with prev/next navigation. */ -const photosLightbox = { +import { getCsrfHeaders } from '../../core/csrf.js'; +import { favorites } from '../library/favorites.js'; + +export const photosLightbox = { /** @type {Array} Items array reference */ items: [], /** @type {number} Current index */ @@ -14,10 +17,20 @@ const photosLightbox = { _blobUrl: null, /** @type {Function|null} */ _keyHandler: null, + /** @type {Object|null} Reference to photosView, set after both modules load */ + _photosView: null, + + /** + * Register the photosView reference (called from photos.js to avoid circular imports). + * @param {Object} pv + */ + setPhotosView(pv) { + this._photosView = pv; + }, /** Auth headers */ _headers() { - return typeof getCsrfHeaders === 'function' ? { ...getCsrfHeaders() } : {}; + return getCsrfHeaders(); }, /** Open lightbox at given index */ @@ -202,7 +215,7 @@ const photosLightbox = { /** Toggle favorite on current item */ async _toggleFavorite() { const item = this.items[this.index]; - if (!item || !window.favorites) return; + if (!item || !favorites) return; try { await fetch(`/api/favorites/file/${item.id}`, { method: 'POST', @@ -235,17 +248,17 @@ const photosLightbox = { headers: this._headers() }); // Remove from photosView items too - if (window.photosView) { - window.photosView.items = window.photosView.items.filter((f) => f.id !== item.id); + if (this._photosView) { + this._photosView.items = this._photosView.items.filter((f) => f.id !== item.id); } this.items.splice(this.index, 1); if (this.items.length === 0) { this.close(); - if (window.photosView) window.photosView._render(); + if (this._photosView) this._photosView._render(); } else { if (this.index >= this.items.length) this.index = this.items.length - 1; this._show(); - if (window.photosView) window.photosView._render(); + if (this._photosView) this._photosView._render(); } } catch (err) { console.error('Delete failed:', err); @@ -282,5 +295,3 @@ const photosLightbox = { .replace(/ `; - if (window.multiSelect) { - window.multiSelect.clear(); - window.multiSelect.init(); // this will wire buttons & select-all-checkbox + if (multiSelect) { + multiSelect.clear(); + multiSelect.init(); // this will wire buttons & select-all-checkbox } - window.ui.updateBreadcrumb(''); + ui.updateBreadcrumb(''); if (recentItems.length === 0) { - window.ui.showError(` + ui.showError(` -

${window.i18n ? window.i18n.t('recent.empty_state') : 'No recent files'}

-

${window.i18n ? window.i18n.t('recent.empty_hint') : 'Files you open will appear here'}

+

${i18n ? i18n.t('recent.empty_state') : 'No recent files'}

+

${i18n ? i18n.t('recent.empty_hint') : 'Files you open will appear here'}

`); } @@ -140,16 +145,15 @@ const recent = { }); } } - if (folders.length) window.ui.renderFolders(folders); - if (files.length) window.ui.renderFiles(files); + if (folders.length) ui.renderFolders(folders); + if (files.length) ui.renderFiles(files); } catch (error) { console.error('Error displaying recent files:', error); - if (window.ui?.showNotification) { - window.ui.showNotification('Error', 'Error loading recent files'); + if (ui?.showNotification) { + ui.showNotification('Error', 'Error loading recent files'); } } } }; -// Expose globally -window.recent = recent; +export { recent }; diff --git a/static/js/features/sharing/fileSharing.js b/static/js/features/sharing/fileSharing.js index 12fe4baf..54f72a45 100644 --- a/static/js/features/sharing/fileSharing.js +++ b/static/js/features/sharing/fileSharing.js @@ -4,6 +4,11 @@ * No localStorage is used for share data. */ +import { switchToSharedSection } from '../../app/navigation.js'; +import { ui } from '../../app/ui.js'; +import { getCsrfHeaders } from '../../core/csrf.js'; +import { formatDateTime } from '../../core/formatters.js'; + const fileSharing = { /** Auth header helper — tokens are in HttpOnly cookies now */ _headers(json = true) { @@ -149,11 +154,11 @@ const fileSharing = { async copyLinkToClipboard(url) { try { await navigator.clipboard.writeText(url); - window.ui.showNotification('Link copied', 'Link copied to clipboard'); + ui.showNotification('Link copied', 'Link copied to clipboard'); return true; } catch (error) { console.error('Error copying to clipboard:', error); - window.ui.showNotification('Error', 'Could not copy link'); + ui.showNotification('Error', 'Could not copy link'); return false; } }, @@ -165,7 +170,7 @@ const fileSharing = { */ formatExpirationDate(value) { if (!value) return 'No expiration'; - return window.formatDateTime(value); + return formatDateTime(value); }, /** @@ -178,9 +183,7 @@ const fileSharing = { async sendShareNotification(shareUrl, recipientEmail, _message = '') { // TODO: implement backend endpoint for email notifications console.log(`Share notification for ${shareUrl} sent to ${recipientEmail}`); - if (window.ui) { - window.ui.showNotification('Notification sent', `Notification sent to ${recipientEmail}`); - } + ui.showNotification('Notification sent', `Notification sent to ${recipientEmail}`); return true; }, @@ -193,20 +196,11 @@ const fileSharing = { const span = item.querySelector('span'); if (span && span.getAttribute('data-i18n') === 'nav.shared') { item.addEventListener('click', () => { - if (window.switchToSharedSection) { - window.switchToSharedSection(); - } + switchToSharedSection(); }); } }); } }; -// Expose module globally -window.fileSharing = fileSharing; - -// Global convenience functions that delegate to the module -window.getSharedLinks = () => fileSharing.getSharedLinks(); -window.updateSharedLink = (id, data) => fileSharing.updateSharedLink(id, data); -window.removeSharedLink = (id) => fileSharing.removeSharedLink(id); -window.sendShareNotification = (url, email, msg) => fileSharing.sendShareNotification(url, email, msg); +export { fileSharing }; diff --git a/static/js/views/admin/admin.js b/static/js/views/admin/admin.js index c8478428..23f0dca5 100644 --- a/static/js/views/admin/admin.js +++ b/static/js/views/admin/admin.js @@ -1,3 +1,7 @@ +import { getCsrfHeaders } from '../../core/csrf.js'; +import { escapeHtml } from '../../core/formatters.js'; +import { i18n } from '../../core/i18n.js'; + const API = '/api'; let currentAdminId = ''; let usersPage = 0; @@ -6,7 +10,7 @@ let totalUsers = 0; /* ── i18n helper — falls back to key if i18n not ready ── */ function t(key, params) { - if (window.i18n && typeof window.i18n.t === 'function') return window.i18n.t(key, params); + if (i18n && typeof i18n.t === 'function') return i18n.t(key, params); // fallback: strip prefix and humanise return key.split('.').pop().replace(/_/g, ' '); } @@ -748,13 +752,13 @@ function showAccessDenied() { /* ── Apply i18n when translations load / change ── */ document.addEventListener('translationsLoaded', () => { - if (window.i18n?.translatePage) window.i18n.translatePage(); + if (i18n?.translatePage) i18n.translatePage(); // Re-render dynamic content that uses t() loadDashboard(); if (activeTabName === 'users') loadUsers(); }); document.addEventListener('localeChanged', () => { - if (window.i18n?.translatePage) window.i18n.translatePage(); + if (i18n?.translatePage) i18n.translatePage(); loadDashboard(); if (activeTabName === 'users') loadUsers(); }); diff --git a/static/js/views/device-verify/device-verify.js b/static/js/views/device-verify/device-verify.js index c62af2ab..8983f1ac 100644 --- a/static/js/views/device-verify/device-verify.js +++ b/static/js/views/device-verify/device-verify.js @@ -1,4 +1,6 @@ // device-verify.js — Extracted from inline - - - +
diff --git a/static/profile.html b/static/profile.html index 01c80320..a8f42edb 100644 --- a/static/profile.html +++ b/static/profile.html @@ -5,9 +5,6 @@ OxiCloud — My Profile - - - @@ -164,6 +161,6 @@
- + diff --git a/static/sw.js b/static/sw.js index ed5d41ce..d7053aab 100644 --- a/static/sw.js +++ b/static/sw.js @@ -1,12 +1,14 @@ // OxiCloud Service Worker -const CACHE_NAME = 'oxicloud-cache-v16'; +const CACHE_NAME = 'oxicloud-cache-v17'; + +// Only cache static assets — NOT HTML files. +// HTML files are served network-first so browsers always get the latest +// script/link references. Caching HTML causes stale entry points. const ASSETS_TO_CACHE = [ - '/', - '/index.html', - '/js/icons.js', - '/js/i18n.js', - '/js/languageSelector.js', - '/js/notifications.js', + '/js/core/icons.js', + '/js/core/i18n.js', + '/js/core/languageSelector.js', + '/js/core/notifications.js', '/locales/en.json', '/locales/es.json', '/locales/fa.json', @@ -15,6 +17,9 @@ const ASSETS_TO_CACHE = [ '/favicon.ico' ]; +// HTML paths that should always be fetched from the network +const HTML_PATHS = ['/', '/index.html', '/login', '/login.html', '/admin', '/admin.html', '/profile', '/profile.html']; + // Install event - cache assets self.addEventListener('install', (event) => { event.waitUntil( @@ -55,6 +60,14 @@ self.addEventListener('fetch', (event) => { return; } + // HTML pages: always network-first so entry points are never stale + const pathname = new URL(event.request.url).pathname; + const isHtml = HTML_PATHS.includes(pathname) || pathname.endsWith('.html') || event.request.headers.get('accept')?.includes('text/html'); + if (isHtml) { + event.respondWith(fetch(event.request).catch(() => caches.match(event.request))); + return; + } + event.respondWith( caches.match(event.request).then((response) => { // Cache hit - return the response from the cached version From c139ba3e3bf8e6dd4085480c34e25ec4244d15bb Mon Sep 17 00:00:00 2001 From: Edouard Vanbelle Date: Tue, 14 Apr 2026 09:59:06 +0200 Subject: [PATCH 3/5] refactor(build.rs): support of module + minimify each .js files (temp solution) --- build.rs | 100 +++++++++++-------------------------------------------- 1 file changed, 20 insertions(+), 80 deletions(-) diff --git a/build.rs b/build.rs index 6dfbb442..67772430 100644 --- a/build.rs +++ b/build.rs @@ -113,39 +113,30 @@ fn process_release(manifest_dir: &Path, static_dir: &Path, out_dir: &Path) { // ── 4. Minify ALL individual CSS in static-dist/ ───────────────────────── minify_tree_css(&dist_dir.join("css")); - // ── 5. Build JS bundle for index.html ──────────────────────────────────── - let index_html = fs::read_to_string(static_dir.join("index.html")).expect("read index.html"); - let defer_scripts = extract_defer_scripts(&index_html); - let js_bundle = build_js_bundle(static_dir, &defer_scripts); - let js_hash = fnv_hash(js_bundle.as_bytes()); - let js_name = format!("app.{js_hash}.js"); - fs::write(dist_dir.join("js").join(&js_name), &js_bundle).expect("write js bundle"); - - // ── 6. Minify ALL individual JS in static-dist/ ────────────────────────── + // ── 5. Minify ALL individual JS in static-dist/ ────────────────────────── + // ES modules cannot be safely concatenated into a flat bundle — each file is + // minified in-place instead. The HTML keeps its individual ")); - defer_done = true; - } - continue; - } - - // ── Drop "Service Worker Registration" comment ────────────────────── - if t.contains("Service Worker Registration") { - continue; - } - - // ── Drop "Styles" / "Scripts" section comments ────────────────────── - if t.starts_with("