/** * OxiCloud - UI Module * This file handles UI-related functions, view toggling, and interface interactions */ // @ts-check import { i18n } from '../core/i18n.js'; import { OxiIcons } from '../core/icons.js'; import * as viewPrefs from '../core/viewPrefs.js'; import { batchToolbar } from '../features/files/batchToolbar.js'; import { contextMenus } from '../features/files/contextMenus.js'; import { fileOps } from '../features/files/fileOperations.js'; import { inlineViewer } from '../features/files/inlineViewer.js'; import { wopiEditor } from '../features/files/wopiEditor.js'; import { recent } from '../features/library/recent.js'; import { loadFiles } from './filesView.js'; import { updateHistory } from './main.js'; import { activateFilesUI, switchToFilesSection, syncViewContainers } from './navigation.js'; import { app } from './state.js'; import { uiFileTypes } from './uiFileTypes.js'; import { uiNotifications } from './uiNotifications.js'; /** * @import {FileItem, FolderItem} from '../core/types.js' * @import {BatchResult} from '../features/files/fileOperations.js' */ // UI Module const ui = { /** @type {HTMLDivElement | null} */ dragPreview: null, /** @type {HTMLDivElement | null} */ draggedItems: null, /** * Whether the Owner column is currently visible. * Tracked so that newly rendered items can stamp the correct initial class. */ _ownerVisible: false, /** * 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); i18n.translateElement(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); i18n.translateElement(fileMenu); } // 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 is now handled by shareModal (components/shareModal.js) // 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'); /** * * @param {DataTransfer} dataTransfer * @returns {Promise} */ 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; /** @type {Array<{file: File, relativePath: string}>} */ const out = []; /** * @param {FileSystemEntry} entry * @param {string} prefix */ const walkEntry = async (entry, prefix = '') => { if (!entry) return; if (entry.isFile) { await new Promise((resolve) => { /** @type {FileSystemFileEntry} */ (entry).file( (/** @type {File} */ file) => { out.push({ file, relativePath: `${prefix}${file.name}` }); resolve(undefined); }, () => resolve(undefined) ); }); return; } if (entry.isDirectory) { const dirPrefix = `${prefix}${entry.name}/`; const reader = /** @type {FileSystemDirectoryEntry} */ (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 — only active in the Files section document.addEventListener('dragover', (e) => { e.preventDefault(); if (!e.dataTransfer) return; if (e.dataTransfer.types.includes('Files') && app.currentSection === '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 (app.currentSection !== 'files') { if (e.dataTransfer.types.includes('Files')) { this.showNotification(i18n.t('notifications.upload_files_section_title'), i18n.t('notifications.upload_files_section_body')); } 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() { app.currentView = 'grid'; localStorage.setItem('oxicloud-view', 'grid'); if (app.currentSection) viewPrefs.saveView(app.currentSection, 'grid'); syncViewContainers(); }, /** * Switch to list view */ switchToListView() { app.currentView = 'list'; localStorage.setItem('oxicloud-view', 'list'); if (app.currentSection) viewPrefs.saveView(app.currentSection, 'list'); syncViewContainers(); }, /** * Show or hide the Owner column. When hidden, no name-resolution calls are made. * Sections that show owner (SharedWithMe, Favorites) pass `true`; all others `false`. * @param {boolean} visible */ setOwnerColumnVisible(visible) { this._ownerVisible = visible; document .getElementById('files-list') ?.querySelectorAll('.owner-cell') .forEach((cell) => { cell.classList.toggle('hidden', !visible); }); }, /** * 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 + Intermediate + current segments -- // NOTE: The home folder entry is added by rebuildBreadCrumb() (filesView.js) when it // reaches the root folder during traversal. updateBreadcrumb() just renders app.breadcrumbPath // as-is — no implicit mutation. This allows shared-folder navigation to show only the // reachable subtree without the home prefix leaking in. 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 {FileItem} file * @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). * @param {string} fileName */ 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. * @param {string} fileName */ 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; } }, _getActiveView() { 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'; }, /** * handle the drop * @param {string} action copy|move * @param {string} targetFolderId the target * @param {any} dataTransfer fallback if nothing is selected */ async _dropToFolder(action, targetFolderId, dataTransfer) { const selection = batchToolbar.getSelection(targetFolderId); batchToolbar.clear(); if (selection.fileIds.length === 0 && selection.folderIds.length === 0) { // try to use dataTransfer (direct move without selection) const id = dataTransfer.getData('text/plain'); const isFolder = dataTransfer.getData('application/oxicloud-folder') === 'true'; if (isFolder && id === targetFolderId) { console.log('nothing to do'); return; //nothing to do } // append current item to selection if (isFolder) { console.log(`adding ${id} as folder`); selection.folderIds.push(id); } else { console.log(`adding ${id} as file`); selection.fileIds.push(id); } } console.log(`request ${action} of: `, selection); /* TODO do we prefer use atomic operation on 1 item ? like: await fileOps.moveFolder(sourceId, targetFolderId); await fileOps.moveFile(sourceId, targetFolderId); */ /** @type {BatchResult} */ let result; switch (action) { case 'copy': result = await fileOps.batchCopy(selection.fileIds, selection.folderIds, targetFolderId); break; case 'move': result = await fileOps.batchMove(selection.fileIds, selection.folderIds, targetFolderId); // redraw directory if (result.success > 0) loadFiles(); break; default: console.error(`drag and drop: action ${action} unknown`); return; } batchToolbar.showBatchResult(action, result); console.log(result); }, /** * Attach delegated drag-and-drop listeners to a files-list container. * Called once by `filesView.js` after the `ResourceListComponent` is created. * Idempotent — a second call on the same element is a no-op. * * Handles: * - `dragstart` / `dragend` — visual preview + dataTransfer payload * - `dragover` / `dragleave` / `drop` — folder drop targets (delegated) * * @param {HTMLElement} container The `#files-list` element. */ initDragDrop(container) { if (container.dataset.dragDropReady) return; container.dataset.dragDropReady = '1'; // ── helpers ──────────────────────────────────────────────────────── /** @param {HTMLElement} card */ const itemInfo = (card) => { if (!card) return null; const fileId = card.dataset.fileId; if (fileId) return { type: 'file', id: fileId, name: card.dataset.fileName ?? '' }; const folderId = card.dataset.folderId; if (folderId) return { type: 'folder', id: folderId, name: card.dataset.folderName ?? '' }; return null; }; // ── dragstart ────────────────────────────────────────────────────── container.addEventListener('dragstart', (e) => { const card = /** @type {HTMLDivElement | null} */ (/** @type {HTMLElement} */ (e.target).closest('.file-item')); if (!card) { e.preventDefault(); return; } const info = itemInfo(card); if (!info) { e.preventDefault(); return; } if (!e.dataTransfer) return; e.dataTransfer.setData('text/plain', info.id); if (info.type === 'folder') e.dataTransfer.setData('application/oxicloud-folder', 'true'); e.dataTransfer.effectAllowed = 'copyMove'; this.draggedItems = document.createElement('div'); this.draggedItems.className = 'dragged-items'; let selectedCards = container.querySelectorAll('div.selected > div.name-cell'); if (selectedCards.length === 0) selectedCards = card.querySelectorAll('div.name-cell'); const maxElements = 4; let lastItemDiv = null; let index = 0; while (index < selectedCards.length && index < maxElements) { const iconCell = document.createElement('div'); const icon = selectedCards[index].getElementsByClassName('file-icon').item(0)?.cloneNode(true); if (icon) { iconCell.appendChild(icon); iconCell.querySelectorAll('img').forEach((img) => { img.loading = 'eager'; }); } const nameCell = document.createElement('div'); const name = selectedCards[index].getElementsByTagName('span').item(0)?.cloneNode(true); if (name) nameCell.appendChild(name); const div = document.createElement('div'); div.className = 'file-item'; div.appendChild(iconCell); div.appendChild(nameCell); this.draggedItems.appendChild(div); lastItemDiv = div; index += 1; } let nameEncoded; let downloadUrl; if (selectedCards.length === 1) { if (info.type === 'file') { nameEncoded = info.name.replaceAll(/:/g, '-'); downloadUrl = `${window.location.origin}/api/files/${info.id}`; } else { nameEncoded = info.name.replaceAll(/:/g, '-').concat('.zip'); downloadUrl = `${window.location.origin}/api/folders/${info.id}/download?format=zip`; } } else { const now = new Date().toISOString().replace(/T/, ' ').replace(/\..*/, '').replaceAll(/:/g, '-'); nameEncoded = `oxicloud ${now}.zip`; /** @type {string[]} */ const folderIds = []; /** @type {string[]} */ const fileIds = []; /** @type {NodeListOf} */ (container.querySelectorAll('div.selected')).forEach((el) => { const item = itemInfo(/** @type {HTMLElement} */ (el)); if (item?.type === 'file') fileIds.push(item.id); else if (item) folderIds.push(item.id); }); downloadUrl = `${window.location.origin}/api/batch/download?file_ids=${fileIds.join(',')}&folder_ids=${folderIds.join(',')}`; } e.dataTransfer.setData('DownloadURL', `application/octet-stream:${nameEncoded}:${downloadUrl}`); if (selectedCards.length > 1) { const badge = document.createElement('span'); badge.className = 'dragged-items-badge'; badge.innerText = `${selectedCards.length}`; this.draggedItems.appendChild(badge); } if (selectedCards.length > maxElements) lastItemDiv?.classList.add('fading'); this.dragPreview?.appendChild(this.draggedItems); e.dataTransfer.setDragImage(this.draggedItems, 0, 0); }); // ── dragend ──────────────────────────────────────────────────────── container.addEventListener('dragend', () => { if (this.draggedItems && this.dragPreview?.contains(this.draggedItems)) { this.dragPreview.removeChild(this.draggedItems); } document.querySelectorAll('.drop-target').forEach((el) => { el.classList.remove('drop-target'); }); }); // ── dragover — only folder cards are valid drop targets ──────────── container.addEventListener('dragover', (e) => { const card = /** @type {HTMLElement} */ (/** @type {HTMLElement} */ (e.target).closest('.file-item')); if (!card || card.dataset.fileId || !card.dataset.folderId) return; e.preventDefault(); card.classList.add('drop-target'); }); // ── dragleave ────────────────────────────────────────────────────── container.addEventListener('dragleave', (e) => { const card = /** @type {HTMLElement} */ (/** @type {HTMLElement} */ (e.target).closest('.file-item')); if (!card || card.dataset.fileId) return; card.classList.remove('drop-target'); }); // ── drop ─────────────────────────────────────────────────────────── container.addEventListener('drop', async (e) => { const card = /** @type {HTMLElement} */ (/** @type {HTMLElement} */ (e.target).closest('.file-item')); if (!card || card.dataset.fileId || !card.dataset.folderId) return; e.preventDefault(); card.classList.remove('drop-target'); if (!e.dataTransfer) return; await this._dropToFolder(e.dataTransfer.dropEffect, card.dataset.folderId, e.dataTransfer); }); }, /* ================================================================ * Item open / navigate — shared by ui.js delegation and component * callbacks so the same logic fires regardless of which view renders * the items. * ================================================================ */ /** * Open a file: dispatch a recent-access event, try WOPI, fall back to * inline viewer or download. * @param {FileItem} file */ async _openFile(file) { if (!file) return; if (recent) { document.dispatchEvent(new CustomEvent('file-accessed', { detail: { file } })); } // WOPI editor intercept: open Office documents in the WOPI editor // But NOT image files - those should be previewed in the inline viewer 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); try { if (!isImage && wopiEditor && (await wopiEditor.canEdit(file.name))) { await wopiEditor.openInModal(file.id, file.name, 'edit'); return; } } catch (e) { console.warn(`WOPI Editor failed, falling back to classic view`, e); } if (this.isViewableFile(file) || isImage) { if (inlineViewer) { inlineViewer.openFile(file); app.viewFile = file.id; updateHistory(false); } else { fileOps.downloadFile(file.id, file.name); } } else { fileOps.downloadFile(file.id, file.name); } }, /** * Navigate into a folder, handling section transitions (SharedWithMe, * Favorites, Recent → Files). * @param {string|undefined} folderId * @param {string|undefined} folderName */ _navigateToFolder(folderId, folderName) { if (!folderId) return; if (app.currentSection === 'favorites' || app.currentSection === 'recent') { switchToFilesSection(); app.currentPath = folderId; loadFiles(); return; } if (app.currentSection === 'sharedwithme' || app.currentSection === 'shared') { // Activate Files UI (nav, breadcrumb, actions bar) without // resetting the path — the shared folder becomes the entry point. activateFilesUI(); } app.breadcrumbPath.push({ id: folderId, name: folderName || '' }); app.currentPath = folderId; this.updateBreadcrumb(); loadFiles(); }, /** * Open a file or navigate into a folder. * Used as the `onOpen` callback for `ResourceListComponent`. * @param {FileItem|FolderItem} item */ async openItem(item) { if ('mime_type' in item) { await this._openFile(/** @type {FileItem} */ (item)); } else { const folder = /** @type {FolderItem} */ (item); this._navigateToFolder(folder.id, folder.name); } }, /** * Set the context-menu target and show the appropriate menu. * Used as the `onContextMenu` callback for `ResourceListComponent`. * @param {FileItem|FolderItem} item * @param {MouseEvent} e */ showContextMenuForItem(item, e) { const trigger = /** @type {HTMLElement | null} */ (/** @type {HTMLElement} */ (e.target).closest('.file-actions')); if ('mime_type' in item) { app.contextMenuTargetFile = /** @type {FileItem} */ (item); if (trigger) { showContextMenuAtElement(trigger, 'file-context-menu'); } else { const menu = document.getElementById('file-context-menu'); if (menu) { menu.style.left = `${e.pageX}px`; menu.style.top = `${e.pageY}px`; contextMenus.sync(); menu.classList.remove('hidden'); } } } else { app.contextMenuTargetFolder = /** @type {FolderItem} */ (item); if (trigger) { showContextMenuAtElement(trigger, 'folder-context-menu'); } else { const menu = document.getElementById('folder-context-menu'); if (menu) { menu.style.left = `${e.pageX}px`; menu.style.top = `${e.pageY}px`; contextMenus.sync(); menu.classList.remove('hidden'); } } } }, /** * Sync favorite visuals for a file/folder across grid and list views. * @param {string} itemId * @param {string} itemType * @param {boolean} isFavorite */ setFavoriteVisualState(itemId, itemType, isFavorite) { const selector = itemType === 'folder' ? `#files-list .file-item[data-folder-id="${itemId}"]` : `#files-list .file-item[data-file-id="${itemId}"]`; const item = document.querySelector(selector); const starBtn = item?.querySelector('.favorite-star'); // chzn if (starBtn) { starBtn.classList.toggle('active', !!isFavorite); // SVG icon path (after icons.js replacement) const svg = starBtn.querySelector('svg'); const filledPath = OxiIcons?.star; const outlinePath = OxiIcons?.['star-outline']; const targetPath = isFavorite ? filledPath : outlinePath; if (svg && targetPath) { const p = svg.querySelector('path'); if (p) p.setAttribute('d', String(targetPath[1])); svg.setAttribute('viewBox', `0 0 ${targetPath[0]} 512`); } // Fallback icon (before icons.js replacement) const i = starBtn.querySelector('i'); if (i) { i.classList.remove('fas', 'far'); i.classList.add(isFavorite ? 'fas' : 'far'); } } // toggle favorite's badge if (item) { const badgeFavorite = item.querySelector('.file-badge-favorite'); badgeFavorite?.classList.toggle('hidden', !isFavorite); } }, /** * @param {string} itemId * @param {string} itemType * @param {boolean} isShared */ setSharedVisualState(itemId, itemType, isShared) { console.log(`setSharedVisual call for ${itemId} ${itemType} to ${isShared}`); const selector = itemType === 'folder' ? `#files-list .file-item[data-folder-id="${itemId}"]` : `#files-list .file-item[data-file-id="${itemId}"]`; // toggle favorite's badge const item = document.querySelector(selector); if (item) { const badgeShared = item.querySelector('.file-badge-shared'); badgeShared?.classList.toggle('hidden', !isShared); } }, /* ================================================================ * Element-creation helpers * ================================================================ */ resetFilesList() { const filesList = document.getElementById('files-list'); const filesContainerError = document.getElementById('files-container-error'); if (!filesList) return; // Let ui.js delegation handle this container again delete filesList.dataset.managedBy; filesList.innerHTML = `

Name

Owner

Type

Size

Modified

`; i18n.translateElement(filesList); filesList.classList.remove('hidden'); filesContainerError?.classList.add('hidden'); }, showEmptyList() { this.showError(`

`); }, /** * * @param {string} content * */ showError(content) { const filesContainerError = document.getElementById('files-container-error'); const filesList = document.getElementById('files-list'); if (filesContainerError) filesContainerError.innerHTML = content; i18n.translateElement(filesContainerError); filesContainerError?.classList.remove('hidden'); filesList?.classList.add('hidden'); } }; // --- Global helper functions for card interactions --- /** * Toggle selection state of a file/folder card. * Routes through the batchToolbar module so batch actions know about selected items. * @param {HTMLDivElement} card * @param {MouseEvent} event */ function toggleCardSelection(card, event) { if (batchToolbar) { batchToolbar.handleToggleItem(card, event); } else { card.classList.toggle('selected'); } } /** * Show the context menu anchored next to a trigger element (the 3-dot button). * @param {HTMLElement} triggerElement * @param {string} menuId */ function showContextMenuAtElement(triggerElement, menuId) { // Hide any open menus first document.querySelectorAll('.context-menu').forEach((m) => { m.classList.add('hidden'); }); const menu = document.getElementById(menuId); if (!menu) return; const rect = triggerElement.getBoundingClientRect(); const menuWidth = 200; // approximate // Position below the trigger, aligned to the right edge let left = rect.right - menuWidth + window.scrollX; let top = rect.bottom + 4 + window.scrollY; // Keep inside viewport if (left < 8) left = 8; if (top + 300 > window.innerHeight + window.scrollY) { top = rect.top - 4 + window.scrollY; // flip above if no room } contextMenus.sync(); menu.style.left = `${left}px`; menu.style.top = `${top}px`; menu.classList.remove('hidden'); } /** * Rubber band (lasso) selection — click + drag on empty grid area * to draw a rectangle and select all cards it touches. */ function initRubberBandSelection() { // Create the visual rectangle element once let selRect = document.getElementById('selection-rect'); if (!selRect) { selRect = document.createElement('div'); selRect.id = 'selection-rect'; selRect.className = 'selection-rect'; document.body.appendChild(selRect); } let active = false; let startX = 0, startY = 0; // We listen on the whole files-container (covers grid + empty space) const container = document.querySelector('.files-container') || document.getElementById('files-list'); if (!container) return; container.addEventListener('mousedown', (e) => { if (!(e instanceof MouseEvent)) return; // Only start if clicking empty area (not on a card, button, menu, input…) if (e.button !== 0) return; // left click only const target = /** @type {Element} */ (e.target); if ( target.closest('.file-item') || target.closest('.context-menu') || target.closest('.upload-dropdown') || target.closest('button') || target.closest('input') || target.closest('.breadcrumb') || target.closest('.list-header') ) return; active = true; startX = e.clientX; startY = e.clientY; selRect.style.left = `${startX}px`; selRect.style.top = `${startY}px`; selRect.style.width = '0px'; selRect.style.height = '0px'; selRect.style.display = 'none'; // show only after a small movement e.preventDefault(); // prevent text selection }); document.addEventListener('mousemove', (e) => { if (!active) return; const curX = e.clientX; const curY = e.clientY; const left = Math.min(startX, curX); const top = Math.min(startY, curY); const width = Math.abs(curX - startX); const height = Math.abs(curY - startY); // Only show the rect after a small threshold to avoid flicker on click if (width > 5 || height > 5) { selRect.style.display = 'block'; } selRect.style.left = `${left}px`; selRect.style.top = `${top}px`; selRect.style.width = `${width}px`; selRect.style.height = `${height}px`; // Highlight cards that intersect with the rectangle const rectBounds = { left, top, right: left + width, bottom: top + height }; document.querySelectorAll('#files-list .file-item').forEach((card) => { const cardRect = card.getBoundingClientRect(); const intersects = cardRect.left < rectBounds.right && cardRect.right > rectBounds.left && cardRect.top < rectBounds.bottom && cardRect.bottom > rectBounds.top; if (intersects) { card.classList.add('selected'); // Sync with batchToolbar module if (batchToolbar) { const info = batchToolbar._extractInfo(/** @type {HTMLDivElement} */ (card)); if (info) batchToolbar.select(info.id, info.name, info.type, info.parentId); } } else { card.classList.remove('selected'); // Deselect from batchToolbar module if (batchToolbar) { const info = batchToolbar._extractInfo(/** @type {HTMLDivElement} */ (card)); if (info) batchToolbar.deselect(info.id); } } }); }); document.addEventListener('mouseup', () => { if (!active) return; active = false; const hadSelection = selRect.style.display === 'block'; selRect.style.display = 'none'; // Update the batch bar after rubber band selection completes if (batchToolbar) batchToolbar._syncUI(); // Suppress the click event that follows mouseup so the global // deselect handler doesn't immediately clear the selection. if (hadSelection) { requestAnimationFrame(() => {}); } }); } // Initialize rubber band once DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initRubberBandSelection); } else { initRubberBandSelection(); } /** * Show a modern confirm dialog (replaces native confirm()) * @param {Object} options * @param {string} options.title - Dialog title * @param {string} options.message - Dialog message/body * @param {string} [options.confirmText='Confirmar'] - Text for confirm button * @param {string} [options.cancelText='Cancelar'] - Text for cancel button * @param {boolean} [options.danger=false] - Use danger styling (red) * @returns {Promise} true if confirmed, false if cancelled */ function showConfirmDialog({ title, message, confirmText, cancelText, danger = true }) { const ct = confirmText || i18n.t('actions.delete'); const cc = cancelText || i18n.t('actions.cancel'); const t = title || i18n.t('dialogs.confirm_title'); return new Promise((resolve) => { // Remove any previous confirm dialog const prev = document.getElementById('confirm-dialog-overlay'); if (prev) prev.remove(); const overlay = document.createElement('div'); overlay.id = 'confirm-dialog-overlay'; overlay.className = 'confirm-dialog'; overlay.innerHTML = `

${t}

${message || ''}

`; document.body.appendChild(overlay); // Force layout then show requestAnimationFrame(() => { overlay.classList.add('active'); }); /** @param {boolean} result */ const cleanup = (result) => { overlay.classList.remove('active'); setTimeout(() => overlay.remove(), 200); resolve(result); }; overlay.querySelector('.confirm-dialog-cancel')?.addEventListener('click', () => cleanup(false)); overlay.querySelector('.confirm-dialog-ok')?.addEventListener('click', () => cleanup(true)); overlay.addEventListener('click', (e) => { if (e.target === overlay) cleanup(false); }); }); } export { initRubberBandSelection, showConfirmDialog, showContextMenuAtElement, toggleCardSelection, ui };