/** * OxiCloud - UI Module * This file handles UI-related functions, view toggling, and interface interactions */ // @ts-check import { escapeHtml, formatDateTime, formatFileSize } from '../core/formatters.js'; import { i18n } from '../core/i18n.js'; import { OxiIcons } 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 { thumbnail } from '../features/thumbnail.js'; import { sharedView } from '../views/shared/sharedView.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'; // UI Module const ui = { /** @type {HTMLDListElement | null} */ //dragPreview, /** * Initialize context menus and dialogs */ initializeContextMenus() { // Folder context menu if (!document.getElementById('folder-context-menu')) { const folderMenu = document.createElement('div'); folderMenu.classList.add('context-menu', 'hidden'); folderMenu.id = 'folder-context-menu'; folderMenu.innerHTML = ` `; document.body.appendChild(folderMenu); } // File context menu if (!document.getElementById('file-context-menu')) { const fileMenu = document.createElement('div'); fileMenu.classList.add('context-menu', 'hidden'); fileMenu.id = 'file-context-menu'; fileMenu.innerHTML = ` `; document.body.appendChild(fileMenu); } // Rename dialog — modern if (!document.getElementById('rename-dialog')) { const renameDialog = document.createElement('div'); renameDialog.classList.add('rename-dialog', 'hidden'); renameDialog.id = 'rename-dialog'; renameDialog.innerHTML = `

`; document.body.appendChild(renameDialog); } // Move dialog — modern with navigation if (!document.getElementById('move-file-dialog')) { const moveDialog = document.createElement('div'); moveDialog.classList.add('rename-dialog', 'hidden'); moveDialog.id = 'move-file-dialog'; moveDialog.innerHTML = `

Select destination folder:

`; document.body.appendChild(moveDialog); } // Share dialog if (!document.getElementById('share-dialog')) { const shareDialog = document.createElement('div'); shareDialog.classList.add('share-dialog', 'hidden'); shareDialog.id = 'share-dialog'; shareDialog.innerHTML = ` `; i18n.translateElement(shareDialog); document.body.appendChild(shareDialog); // Add event listeners for share dialog document.getElementById('share-close-btn')?.addEventListener('click', () => { contextMenus.closeShareDialog(); }); document.getElementById('share-confirm-btn')?.addEventListener('click', async () => { await contextMenus.createSharedLink(); }); document.getElementById('copy-share-btn')?.addEventListener('click', async () => { const shareUrl = /** @type {HTMLInputElement | null} */ (document.getElementById('generated-share-url'))?.value; if (shareUrl) await fileSharing.copyLinkToClipboard(shareUrl); }); document.getElementById('notify-share-btn')?.addEventListener('click', () => { const shareUrl = /** @type {HTMLInputElement | null} */ (document.getElementById('generated-share-url'))?.value; if (shareUrl) contextMenus.showEmailNotificationDialog(shareUrl); }); // FIXME make generic function (close all dialog / etc) document.addEventListener('keydown', (e) => { const dialog = document.getElementById('share-dialog'); if (e.key === 'Escape' && !dialog?.classList.contains('hidden')) { contextMenus.closeShareDialog(); } }); shareDialog.addEventListener('click', (e) => { if (e.target === shareDialog) { contextMenus.closeShareDialog(); } }); } // Notification dialog if (!document.getElementById('notification-dialog')) { const notificationDialog = document.createElement('div'); notificationDialog.classList.add('share-dialog', 'hidden'); notificationDialog.id = 'notification-dialog'; notificationDialog.innerHTML = ` `; document.body.appendChild(notificationDialog); // Add event listeners for notification dialog document.getElementById('notification-cancel-btn')?.addEventListener('click', () => { contextMenus.closeNotificationDialog(); }); document.getElementById('notification-send-btn')?.addEventListener('click', () => { contextMenus.sendShareNotification(); }); } // Playlist selection dialog if (!document.getElementById('playlist-dialog')) { const playlistDialog = document.createElement('div'); playlistDialog.classList.add('share-dialog', 'hidden'); playlistDialog.id = 'playlist-dialog'; playlistDialog.innerHTML = ` `; document.body.appendChild(playlistDialog); document.getElementById('playlist-cancel-btn')?.addEventListener('click', () => { if (contextMenus) contextMenus.closePlaylistDialog(); }); } // Assign events to menu items if (contextMenus) { contextMenus.assignMenuEvents(); } else { console.warn('contextMenus module not loaded'); } }, /** * Set up drag and drop functionality */ setupDragAndDrop() { // prepare area to build dragged elements this.dragPreview = document.createElement('div'); this.dragPreview.className = 'drag-preview'; document.body.appendChild(this.dragPreview); this.draggedItems = null; const dropzone = document.getElementById('dropzone'); const collectDroppedEntries = async (dataTransfer) => { const items = Array.from(dataTransfer?.items || []); const rootEntries = items.map((it) => (typeof it.webkitGetAsEntry === 'function' ? it.webkitGetAsEntry() : null)).filter(Boolean); if (rootEntries.length === 0) return null; const out = []; const walkEntry = async (entry, prefix = '') => { if (!entry) return; if (entry.isFile) { await new Promise((resolve) => { entry.file( (file) => { out.push({ file, relativePath: `${prefix}${file.name}` }); resolve(undefined); }, () => resolve(undefined) ); }); return; } if (entry.isDirectory) { const dirPrefix = `${prefix}${entry.name}/`; const reader = entry.createReader(); while (true) { const children = await new Promise((resolve) => { reader.readEntries(resolve, () => resolve([])); }); if (!children || children.length === 0) break; for (const child of children) { // eslint-disable-next-line no-await-in-loop await walkEntry(child, dirPrefix); } } } }; for (const root of rootEntries) { // eslint-disable-next-line no-await-in-loop await walkEntry(root, ''); } return out; }; // Dropzone events dropzone?.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('active'); }); dropzone?.addEventListener('dragleave', () => { dropzone.classList.remove('active'); }); // remove previous hack e._oxiHandled // WeakSet will automatically garbage collect entry const handledDropEvents = new WeakSet(); dropzone?.addEventListener('drop', async (e) => { e.preventDefault(); e.stopPropagation(); // Prevent bubbling to document's drop handler (avoids double upload) handledDropEvents.add(e); // Mark as handled for document-level fallback dropzone.classList.remove('active'); if (!e.dataTransfer) return; if (e.dataTransfer.files.length > 0) { // First try directory-aware extraction (Finder folder drag & drop) const droppedEntries = await collectDroppedEntries(e.dataTransfer); if (droppedEntries && droppedEntries.length > 0) { const hasFolderStructure = droppedEntries.some((x) => x.relativePath?.includes('/')); if (hasFolderStructure) { fileOps.uploadFolderEntries(droppedEntries); } else { fileOps.uploadFiles(droppedEntries.map((x) => x.file)); } setTimeout(() => { dropzone?.classList.add('hidden'); }, 500); return; } // Detect folder drops: files from folder drops have webkitRelativePath set const hasRelativePaths = Array.from(e.dataTransfer.files).some((f) => f.webkitRelativePath?.includes('/')); if (hasRelativePaths) { fileOps.uploadFolderFiles(e.dataTransfer.files); } else { fileOps.uploadFiles(e.dataTransfer.files); } } setTimeout(() => { dropzone?.classList.add('hidden'); }, 500); }); // Document-wide drag and drop document.addEventListener('dragover', (e) => { e.preventDefault(); if (!e.dataTransfer) return; if (e.dataTransfer.types.includes('Files')) { dropzone?.classList.remove('hidden'); dropzone?.classList.add('active'); } }); document.addEventListener('dragleave', (e) => { if (e.clientX <= 0 || e.clientY <= 0 || e.clientX >= window.innerWidth || e.clientY >= window.innerHeight) { dropzone?.classList.remove('active'); setTimeout(() => { if (!dropzone?.classList.contains('active')) { dropzone?.classList.add('hidden'); } }, 100); } }); document.addEventListener('drop', async (e) => { e.preventDefault(); dropzone?.classList.remove('active'); // Skip if already handled by the dropzone handler (defensive against bubble leaks) if (handledDropEvents.has(e)) return; if (!e.dataTransfer) return; if (e.dataTransfer.files.length > 0) { // First try directory-aware extraction (Finder folder drag & drop) const droppedEntries = await collectDroppedEntries(e.dataTransfer); if (droppedEntries && droppedEntries.length > 0) { const hasFolderStructure = droppedEntries.some((x) => x.relativePath?.includes('/')); if (hasFolderStructure) { fileOps.uploadFolderEntries(droppedEntries); } else { fileOps.uploadFiles(droppedEntries.map((x) => x.file)); } setTimeout(() => { dropzone?.classList.add('hidden'); }, 500); return; } // Detect folder drops: files from folder drops have webkitRelativePath set const hasRelativePaths = Array.from(e.dataTransfer.files).some((f) => f.webkitRelativePath?.includes('/')); if (hasRelativePaths) { fileOps.uploadFolderFiles(e.dataTransfer.files); } else { fileOps.uploadFiles(e.dataTransfer.files); } } setTimeout(() => { dropzone?.classList.add('hidden'); }, 500); }); }, /** * Switch to grid view */ switchToGridView() { this._hydrateViewIfNeeded(); app.currentView = 'grid'; localStorage.setItem('oxicloud-view', 'grid'); syncViewContainers(); }, /** * Switch to list view */ switchToListView() { this._hydrateViewIfNeeded(); app.currentView = 'list'; localStorage.setItem('oxicloud-view', 'list'); syncViewContainers(); }, /** * Update breadcrumb navigation from the breadcrumbPath array. * Renders: Home > folder1 > folder2 > ... * Each segment is clickable to navigate back to that level. */ updateBreadcrumb() { const breadcrumb = document.querySelector('.breadcrumb'); if (breadcrumb) { breadcrumb.innerHTML = ''; } const path = app.breadcrumbPath; // [{id, name}, ...] // -- Home icon (always present, clickable to go to root) -- const homeIcon = document.createElement('span'); homeIcon.className = 'breadcrumb-item breadcrumb-home'; homeIcon.innerHTML = ''; homeIcon.title = i18n.t('breadcrumb.home'); // Home is always clickable if we have a home folder if (app.userHomeFolderId) { homeIcon.classList.add('breadcrumb-link'); homeIcon.addEventListener('click', () => { app.breadcrumbPath = []; app.currentPath = app.userHomeFolderId; this.updateBreadcrumb(); 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 (app.userHomeFolderName) { if (path.length === 0 || path[0].id !== app.userHomeFolderId) { path.unshift({ name: app.userHomeFolderName, id: app.userHomeFolderId }); } } // -- Root/Home + Intermediate + current segments -- path.forEach((segment, index) => { const isLast = index === path.length - 1; // Separator const separator = document.createElement('span'); separator.className = 'breadcrumb-separator'; separator.textContent = '>'; breadcrumb?.appendChild(separator); // Segment item const item = document.createElement('span'); item.className = 'breadcrumb-item'; item.textContent = segment.name; item.dataset.folderId = segment.id; if (!isLast) { // Intermediate segment: clickable – truncate path to this level item.classList.add('breadcrumb-link'); item.addEventListener('click', () => { app.breadcrumbPath = path.slice(0, index + 1); app.currentPath = segment.id; this.updateBreadcrumb(); loadFiles(); }); // can drag files on this folder // dragover – only folders are valid drop targets item.addEventListener('dragover', (e) => { const card = /** @type {HTMLElement} */ (e.target).closest('span'); if (!card?.dataset.folderId) return; e.preventDefault(); card.classList.add('drop-target'); }); // dragleave item.addEventListener('dragleave', (e) => { console.log('dragleave ', e); const card = /** @type {HTMLElement} */ (e.target).closest('span'); if (!card?.dataset.folderId) return; card.classList.remove('drop-target'); }); // drop – only folders accept drops item.addEventListener('drop', async (e) => { const card = /** @type {HTMLElement} */ (e.target).closest('span'); if (!card) return; const targetFolderId = card.dataset.folderId; if (!targetFolderId) return; e.preventDefault(); card.classList.remove('drop-target'); const action = e.dataTransfer?.dropEffect; if (action) { await this._dropToFolder(action, targetFolderId, e.dataTransfer); } }); } else { // Last segment: current location, not clickable item.classList.add('breadcrumb-current'); } breadcrumb?.appendChild(item); }); }, /** * Check if a file can be previewed in the viewer * @param {Object} file - File object with mime_type property * @returns {boolean} */ isViewableFile(file) { return uiFileTypes.isViewableFile(file); }, /** * Get FontAwesome icon class for a filename based on its extension. * Used as fallback when the backend DTO doesn't include icon_class * (e.g. trash items). */ getIconClass(fileName) { return uiFileTypes.getIconClass(fileName); }, /** * Get CSS special class for icon styling based on filename extension. * Used as fallback when the backend DTO doesn't include icon_special_class. */ getIconSpecialClass(fileName) { return uiFileTypes.getIconSpecialClass(fileName); }, /** * Show notification * @param {string} title - Notification title * @param {string} message - Notification message */ showNotification(title, message) { uiNotifications.show(title, message); }, /** * Close folder context menu */ closeContextMenu() { const menu = document.getElementById('folder-context-menu'); if (menu) { menu.classList.add('hidden'); app.contextMenuTargetFolder = null; } }, /** * Close file context menu */ closeFileContextMenu() { const menu = document.getElementById('file-context-menu'); if (menu) { menu.classList.add('hidden'); app.contextMenuTargetFile = null; } }, /* ================================================================ * Data store + event delegation (replaces per-item listeners) * ================================================================ */ /** @type {Map} item data keyed by id */ _items: new Map(), /** @type {Array