/** * OxiCloud - UI Module * This file handles UI-related functions, view toggling, and interface interactions */ // @ts-check // 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.className = 'context-menu'; 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.className = 'context-menu'; 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.className = 'rename-dialog'; 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.className = 'rename-dialog'; 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.className = 'share-dialog'; shareDialog.id = 'share-dialog'; shareDialog.innerHTML = ` `; document.body.appendChild(shareDialog); // Add event listeners for share dialog document.getElementById('share-cancel-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 = document.getElementById('generated-share-url').value; await fileSharing.copyLinkToClipboard(shareUrl); }); document.getElementById('notify-share-btn').addEventListener('click', () => { const shareUrl = document.getElementById('generated-share-url').value; contextMenus.showEmailNotificationDialog(shareUrl); }); } // Notification dialog if (!document.getElementById('notification-dialog')) { const notificationDialog = document.createElement('div'); notificationDialog.className = 'share-dialog'; 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(); }); } // Assign events to menu items if (window.contextMenus) { window.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(); }, () => resolve() ); }); 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'); }); dropzone.addEventListener('drop', async (e) => { e.preventDefault(); e.stopPropagation(); // Prevent bubbling to document's drop handler (avoids double upload) e._oxiHandled = true; // Mark as handled for document-level fallback dropzone.classList.remove('active'); 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.style.display = 'none'; }, 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.style.display = 'none'; }, 500); }); // Document-wide drag and drop document.addEventListener('dragover', (e) => { e.preventDefault(); if (e.dataTransfer.types.includes('Files')) { dropzone.style.display = 'block'; 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.style.display = 'none'; } }, 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 (e._oxiHandled) 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.style.display = 'none'; }, 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.style.display = 'none'; }, 500); }); }, /** * Switch to grid view */ switchToGridView() { this._hydrateViewIfNeeded(); window.app.currentView = 'grid'; localStorage.setItem('oxicloud-view', 'grid'); window.syncViewContainers(); }, /** * Switch to list view */ switchToListView() { this._hydrateViewIfNeeded(); window.app.currentView = 'list'; localStorage.setItem('oxicloud-view', 'list'); window.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'); breadcrumb.innerHTML = ''; const path = window.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); }; // -- Home icon (always present, clickable to go to root) -- const homeIcon = document.createElement('span'); homeIcon.className = 'breadcrumb-item breadcrumb-home'; homeIcon.innerHTML = ''; homeIcon.title = getTranslatedText('breadcrumb.home', 'Home'); // Home is always clickable if we have a home folder if (window.app.userHomeFolderId) { homeIcon.classList.add('breadcrumb-link'); homeIcon.addEventListener('click', () => { window.app.breadcrumbPath = []; window.app.currentPath = window.app.userHomeFolderId; this.updateBreadcrumb(); window.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) { path.unshift({ name: window.app.userHomeFolderName, id: window.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', () => { window.app.breadcrumbPath = path.slice(0, index + 1); window.app.currentPath = segment.id; this.updateBreadcrumb(); window.loadFiles(); }); // can drag files on this folder // dragover – only folders are valid drop targets item.addEventListener('dragover', (e) => { const card = 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 = 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 = 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; 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 window.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 window.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 window.uiFileTypes.getIconSpecialClass(fileName); }, /** * Show notification * @param {string} title - Notification title * @param {string} message - Notification message */ showNotification(title, message) { window.uiNotifications.show(title, message); }, /** * Close folder context menu */ closeContextMenu() { const menu = document.getElementById('folder-context-menu'); if (menu) { menu.style.display = 'none'; window.app.contextMenuTargetFolder = null; } }, /** * Close file context menu */ closeFileContextMenu() { const menu = document.getElementById('file-context-menu'); if (menu) { menu.style.display = 'none'; window.app.contextMenuTargetFile = null; } }, /* ================================================================ * Data store + event delegation (replaces per-item listeners) * ================================================================ */ /** @type {Map} item data keyed by id */ _items: new Map(), /** @type {Array