diff --git a/folderManager.js b/folderManager.js index e24a0c4..de9383e 100644 --- a/folderManager.js +++ b/folderManager.js @@ -60,7 +60,111 @@ function getParentFolder(folder) { } // ---------------------- -// DOM Building Functions +// Breadcrumb Functions +// ---------------------- +// Render breadcrumb for a normalized folder path. +// For example, if window.currentFolder is "Folder1/Folder1SubFolder2", +// this will return: Root / Folder1 / Folder1SubFolder2. +function renderBreadcrumb(normalizedFolder) { + if (normalizedFolder === "root") { + return `Root`; + } + const parts = normalizedFolder.split("/"); + let breadcrumbItems = []; + // Always start with "Root". + breadcrumbItems.push(`Root`); + let cumulative = ""; + parts.forEach((part, index) => { + cumulative = index === 0 ? part : cumulative + "/" + part; + breadcrumbItems.push(` / `); + breadcrumbItems.push(`${escapeHTML(part)}`); + }); + return breadcrumbItems.join(''); +} + +// Bind click and drag-and-drop events to breadcrumb links. +function bindBreadcrumbEvents() { + const breadcrumbLinks = document.querySelectorAll(".breadcrumb-link"); + breadcrumbLinks.forEach(link => { + // Click event for navigation. + link.addEventListener("click", function(e) { + e.stopPropagation(); + let folder = this.getAttribute("data-folder"); + window.currentFolder = folder; + localStorage.setItem("lastOpenedFolder", folder); + const titleEl = document.getElementById("fileListTitle"); + if (folder === "root") { + titleEl.innerHTML = "Files in (" + renderBreadcrumb("root") + ")"; + } else { + titleEl.innerHTML = "Files in (" + renderBreadcrumb(folder) + ")"; + } + // Expand the folder tree to ensure the target is visible. + expandTreePath(folder); + // Update folder tree selection. + document.querySelectorAll(".folder-option").forEach(item => item.classList.remove("selected")); + const targetOption = document.querySelector(`.folder-option[data-folder="${folder}"]`); + if (targetOption) { + targetOption.classList.add("selected"); + } + // Load the file list. + loadFileList(folder); + // Re-bind breadcrumb events to ensure all links remain active. + bindBreadcrumbEvents(); + }); + + // Drag-and-drop events. + link.addEventListener("dragover", function(e) { + e.preventDefault(); + this.classList.add("drop-hover"); + }); + link.addEventListener("dragleave", function(e) { + this.classList.remove("drop-hover"); + }); + link.addEventListener("drop", function(e) { + e.preventDefault(); + this.classList.remove("drop-hover"); + const dropFolder = this.getAttribute("data-folder"); + let dragData; + try { + dragData = JSON.parse(e.dataTransfer.getData("application/json")); + } catch (err) { + console.error("Invalid drag data on breadcrumb:", err); + return; + } + const filesToMove = dragData.files ? dragData.files : (dragData.fileName ? [dragData.fileName] : []); + if (filesToMove.length === 0) return; + fetch("moveFiles.php", { + method: "POST", + credentials: "include", + headers: { + "Content-Type": "application/json", + "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content") + }, + body: JSON.stringify({ + source: dragData.sourceFolder, + files: filesToMove, + destination: dropFolder + }) + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + showToast(`File(s) moved successfully to ${dropFolder}!`); + loadFileList(dragData.sourceFolder); + } else { + showToast("Error moving files: " + (data.error || "Unknown error")); + } + }) + .catch(error => { + console.error("Error moving files via drop on breadcrumb:", error); + showToast("Error moving files."); + }); + }); + }); +} + +// ---------------------- +// DOM Building Functions for Folder Tree // ---------------------- // Recursively builds HTML for the folder tree as nested