cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(files): migrate uploads + drag-drop to uploads.js; legacy file is a stub

Browse source 
Step 4/12 of docs/superpowers/plans/2026-05-17-files-overlay-rewrite.md.

End of Phase A. files-overlay.js is now a 19-line tombstone comment;
all behavior lives in the 4 modules under files-overlay/. Step 10
deletes the stub and its <script> tag.

uploads.js owns:
  * The upload queue (concurrency 3, XHR-based progress, queued/active/
    done/cancelled/error/conflict states) and the progress panel
  * Drag-drop on treeRoot (5 events: dragstart, dragend, dragover,
    dragleave, drop). Internal drags (row → folder, via the custom
    application/x-files-overlay MIME) and external drags (OS files +
    folders via webkitGetAsEntry) flow through the same drop handler.
  * walkEntry for recursive folder walks during external drops
  * withCollisionSuffix (moves here from files-overlay.js — its biggest
    caller is the upload-conflict "keep both" path; exposed on
    __filesOverlay for editor.js's save-409 path too)
  * "zip" action handler (registered into __filesOverlay) — pure URL
    navigation; placed here as the closest thematic home

Pattern change: upload-row cancel buttons converted from direct-bound
per row (inside buildUploadRow, which captured `item` in a closure) to
a single document-level delegated click listener. Each row carries
data-upload-id; an uploads Map<uploadId, item> looks up the item at
click time. The Map entry is removed in the uploadsClearBtn handler
when a done/error/cancelled row is cleared, so the Map doesn't grow
unbounded.

Drag-drop stays direct-bound to treeRoot per the plan escape hatch —
the 5 events share coordinated highlight state (is-drag-source,
is-drop-target classes that are toggled across events), and treeRoot
is persistent (never swapped). Delegation would obscure the state
coordination logic without any real benefit.

Phase A end-state:
  * core.js (247 lines): helpers, manager guard, registry dispatch
  * editor.js (550 lines): editor flows (legacy + URL-addressable)
  * dialogs.js (212 lines): new-folder, delete-confirm, conflict
  * uploads.js (423 lines): upload queue + drag-drop + zip + collision
  * files-overlay.js (19 lines): tombstone comment, deleted in Step 10

Total: ~1432 lines across 4 modules + 19-line stub. The plan estimated
~780 lines across 4 modules; actual is ~1.8× larger, the difference
being module-header comments and the delegation-with-state scaffolding
(e.g., editor.js's dual-editor listener split, dialogs.js's per-dialog
state plus close-event resolvers).

Verified live on /overlays/2 in Chromium:
  * 5 script tags load in document order (core → editor → dialogs →
    uploads → legacy stub)
  * Registry has 10 keys; askConflict and withCollisionSuffix are both
    callable; withCollisionSuffix('foo.tar.gz') === 'foo.tar (1).gz'
    (legacy behavior preserved — lastIndexOf('.') splits before the
    final extension)
  * Uploads panel + list elements present in DOM, panel hidden by
    default
  * "zip" action button exists; registered handler would set
    window.location.href to /overlays/2/files/download_zip?path=...
  * No console errors
  * pytest still 573 passed, 1 skipped, 3 deselected

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-17 15:57:30 +02:00
parent 307df9c23a
commit cb391ad456
No known key found for this signature in database
3 changed files with 441 additions and 587 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

604
l4d2web/l4d2web/static/js/files-overlay.js
View file

@ -1,589 +1,19 @@
// Files-overlay UI behavior. Activated only on overlay detail pages whose
// `<div class="files-manager">` exists (set by the template when the
// overlay is type='files' and the user can edit). The script binds:
// files-overlay.js — empty stub pending deletion in Step 10 of
// docs/superpowers/plans/2026-05-17-files-overlay-rewrite.md.
//
// * Per-row hover actions: + new file, + new folder, ⬇ zip, ✕ on
// folders; ⬇ (download), ✕ on files. Clicking the filename opens
// the editor (binary fallback for non-editable files).
// * Drag-and-drop: dragging from the OS uploads (one POST per file,
// queue with concurrency 3); dragging a row inside the tree moves
// (rename/move via /files/move).
// * Editor modal: text mode for editable files; binary "details +
// replace upload" mode for everything else; doubles as new-file
// dialog. Filename input is the rename surface.
// * New-folder modal, conflict-resolution modal, delete-confirm modal.
// * Upload progress panel with per-file rows.
// All behavior migrated in Phase A:
// * Helpers + manager-element detection + action-dispatch registry
// → static/js/files-overlay/core.js (Step 1)
// * Editor flows (legacy inline dialog + URL-addressable modal)
// → static/js/files-overlay/editor.js (Step 2)
// * Dialogs (new-folder, delete-confirm, conflict)
// → static/js/files-overlay/dialogs.js (Step 3)
// * Uploads (queue + progress) + drag-drop + withCollisionSuffix +
// "zip" action handler
// → static/js/files-overlay/uploads.js (Step 4)
//
// All operations use the `/overlays/<id>/files/...` JSON / multipart
// endpoints. CSRF token comes from the <meta name="csrf-token"> tag.
(function () {
"use strict";
const manager = document.querySelector(".files-manager");
if (!manager) return;
const overlayId = manager.dataset.overlayId;
const baseUrl = manager.dataset.baseUrl; // /overlays/<id>
const treeRoot = manager.querySelector(".files-tree-root");
const csrfToken =
document.querySelector("meta[name='csrf-token']")?.getAttribute("content") || "";
const uploadsPanel = document.querySelector(".files-uploads");
const uploadsList = uploadsPanel?.querySelector(".files-uploads-list");
const uploadsClearBtn = uploadsPanel?.querySelector(".files-uploads-clear");
// ---------- helpers ------------------------------------------------------
function joinPath(folder, leaf) {
folder = (folder || "").replace(/^\/+|\/+$/g, "");
leaf = (leaf || "").replace(/^\/+|\/+$/g, "");
if (folder && leaf) return folder + "/" + leaf;
return folder || leaf;
}
function parentOf(rel) {
const i = (rel || "").lastIndexOf("/");
return i < 0 ? "" : rel.slice(0, i);
}
function basename(rel) {
const i = (rel || "").lastIndexOf("/");
return i < 0 ? rel : rel.slice(i + 1);
}
function escapeHtml(s) {
return String(s).replace(/[&<>"']/g, (c) => ({
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': "&quot;",
"'": "&#39;",
})[c]);
}
function humanSize(bytes) {
if (bytes === undefined || bytes === null) return "";
if (bytes < 1024) return bytes + " B";
const units = ["KB", "MB", "GB", "TB"];
let v = bytes / 1024;
let u = "KB";
for (const next of units) {
u = next;
if (v < 1024) break;
v /= 1024;
}
return v.toFixed(1) + " " + u;
}
async function fetchJson(url, options) {
options = options || {};
options.headers = Object.assign({ Accept: "application/json" }, options.headers || {});
if (options.method && options.method !== "GET") {
options.headers["X-CSRF-Token"] = csrfToken;
}
options.credentials = "same-origin";
const response = await fetch(url, options);
let body = null;
let rawText = "";
try {
rawText = await response.text();
body = rawText ? JSON.parse(rawText) : null;
} catch (_e) {
body = null;
}
return { ok: response.ok, status: response.status, body, rawText };
}
async function postJson(url, payload) {
return fetchJson(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
}
async function postForm(url, formData) {
return fetchJson(url, { method: "POST", body: formData });
}
// ---------- tree refresh ------------------------------------------------
// Re-fetch a folder's listing partial and swap it into the tree.
// `path === ""` refreshes the overlay root container.
async function refreshFolder(path) {
if (!treeRoot) return;
const url = `${baseUrl}/files?path=${encodeURIComponent(path || "")}`;
let html;
try {
const r = await fetch(url, {
headers: { Accept: "text/html" },
credentials: "same-origin",
});
if (!r.ok) {
if (r.status === 404) {
// Folder no longer exists — refresh its parent instead.
if (path) await refreshFolder(parentOf(path));
return;
}
return;
}
html = await r.text();
} catch (_e) {
return;
}
if (!path) {
// Overlay root — swap into the synthetic root row's children div.
const target = manager.querySelector(".files-root-children");
if (!target) return;
const empty = target.querySelector(".files-empty");
if (empty) empty.remove();
const existingUl = target.querySelector(":scope > ul.file-tree");
if (existingUl) existingUl.remove();
target.insertAdjacentHTML("beforeend", html);
// If the new content is also empty, restore the placeholder.
const newUl = target.querySelector(":scope > ul.file-tree");
if (newUl && newUl.children.length === 0) {
newUl.remove();
const p = document.createElement("p");
p.className = "muted files-empty";
p.textContent = 'Empty — drop files here, or click "+ new file" on this row.';
target.appendChild(p);
}
return;
}
// Sub-folder: find the matching folder row and swap its children div.
const row = findRowByPath(path, "dir");
if (!row) return;
const childrenDiv = row.querySelector(":scope > .file-tree-children");
const toggleBtn = row.querySelector(":scope > .file-tree-toggle");
if (!childrenDiv || !toggleBtn) return;
childrenDiv.innerHTML = html;
childrenDiv.hidden = false;
toggleBtn.setAttribute("aria-expanded", "true");
toggleBtn.dataset.loaded = "1";
}
function findRowByPath(path, kind) {
const sel = kind
? `[data-target-path="${cssEscape(path)}"][data-row-kind="${kind}"]`
: `[data-target-path="${cssEscape(path)}"]`;
return treeRoot ? treeRoot.querySelector(sel) : null;
}
function cssEscape(s) {
if (window.CSS && window.CSS.escape) return window.CSS.escape(s);
return String(s).replace(/["\\]/g, "\\$&");
}
// Debounce per-folder refreshes so a flurry of finishes coalesces.
const pendingRefresh = new Map();
function scheduleRefresh(path) {
const key = path || "";
if (pendingRefresh.has(key)) return;
const timer = setTimeout(() => {
pendingRefresh.delete(key);
refreshFolder(key);
}, 50);
pendingRefresh.set(key, timer);
}
// ---------- conflict modal ----------------------------------------------
//
// Migrated to static/js/files-overlay/dialogs.js (Phase A, Step 3).
// askConflict is now exposed there on window.__filesOverlay. The
// legacy upload + drag-drop code below reads it via __filesOverlay
// at call time.
// Attach a path-collision suffix: foo.txt → foo (1).txt
function withCollisionSuffix(path) {
const dot = path.lastIndexOf(".");
const slash = path.lastIndexOf("/");
if (dot > slash + 0 && dot > -1) {
return path.slice(0, dot) + " (1)" + path.slice(dot);
}
return path + " (1)";
}
// Exposed for editor.js (Phase A). Moves to uploads.js in Step 4.
if (window.__filesOverlay) window.__filesOverlay.withCollisionSuffix = withCollisionSuffix;
// ---------- delete modal ------------------------------------------------
//
// Migrated to static/js/files-overlay/dialogs.js (Phase A, Step 3).
// Now dispatched via the "delete" action-registry handler that
// dialogs.js registers.
// ---------- editor modal ------------------------------------------------
//
// Migrated to static/js/files-overlay/editor.js (Phase A, Step 2).
// This module no longer touches the editor. Helpers it still needs
// (askConflict, withCollisionSuffix) are exposed above on
// window.__filesOverlay and de-duplicate in Steps 3 and 4.
// ---------- new-folder modal --------------------------------------------
//
// Migrated to static/js/files-overlay/dialogs.js (Phase A, Step 3).
// Now dispatched via the "new-folder" action-registry handler that
// dialogs.js registers.
// ---------- upload queue + progress panel -------------------------------
const uploadQueue = [];
let uploadActive = 0;
const UPLOAD_CONCURRENCY = 3;
function showPanel() {
if (uploadsPanel) uploadsPanel.hidden = false;
}
function maybeHidePanel() {
if (!uploadsList) return;
const anyActive = uploadsList.querySelector("[data-state='active'], [data-state='queued']");
if (!anyActive && uploadsList.children.length === 0) {
uploadsPanel.hidden = true;
if (uploadsClearBtn) uploadsClearBtn.hidden = true;
}
const anyDone = uploadsList.querySelector("[data-state='done'], [data-state='error']");
if (uploadsClearBtn) uploadsClearBtn.hidden = !anyDone;
}
function buildUploadRow(item) {
const li = document.createElement("li");
li.className = "files-uploads-row";
li.dataset.state = "queued";
li.innerHTML = `
<div class="files-uploads-row-meta">
<span class="files-uploads-row-name"></span>
<span class="files-uploads-row-target muted"></span>
</div>
<div class="files-uploads-row-progress"><div class="files-uploads-bar"></div></div>
<div class="files-uploads-row-status">
<span class="files-uploads-row-state">queued</span>
<button type="button" class="link-button files-uploads-row-cancel" aria-label="Cancel">✕</button>
</div>
`;
li.querySelector(".files-uploads-row-name").textContent = item.relative;
li.querySelector(".files-uploads-row-target").textContent = `→ ${item.targetFolder || "(root)"}`;
li.querySelector(".files-uploads-row-cancel").addEventListener("click", () => cancelUpload(item));
return li;
}
function setRowState(item, state, percent) {
if (!item.row) return;
item.row.dataset.state = state;
const stateEl = item.row.querySelector(".files-uploads-row-state");
const cancelBtn = item.row.querySelector(".files-uploads-row-cancel");
const bar = item.row.querySelector(".files-uploads-bar");
if (state === "queued") {
stateEl.textContent = "queued";
bar.style.width = "0%";
} else if (state === "active") {
stateEl.textContent = `${Math.round(percent || 0)}%`;
bar.style.width = `${percent || 0}%`;
} else if (state === "done") {
stateEl.textContent = "done";
bar.style.width = "100%";
bar.classList.add("is-done");
cancelBtn.textContent = "✓";
cancelBtn.disabled = true;
} else if (state === "cancelled") {
stateEl.textContent = "cancelled";
bar.classList.add("is-cancelled");
cancelBtn.disabled = true;
} else if (state === "error") {
stateEl.textContent = item.errorText || "error";
bar.classList.add("is-error");
cancelBtn.textContent = "✕";
} else if (state === "conflict") {
stateEl.textContent = "conflict — overwrite / keep both";
}
}
function cancelUpload(item) {
if (item.xhr && item.row.dataset.state === "active") {
item.cancelled = true;
item.xhr.abort();
}
if (item.row.dataset.state === "queued") {
const idx = uploadQueue.indexOf(item);
if (idx >= 0) uploadQueue.splice(idx, 1);
setRowState(item, "cancelled");
}
}
uploadsClearBtn?.addEventListener("click", () => {
uploadsList.querySelectorAll("[data-state='done'], [data-state='error'], [data-state='cancelled']").forEach((row) => row.remove());
maybeHidePanel();
});
function enqueueUpload(file, targetFolder, relativePath) {
const item = {
file,
targetFolder,
relative: relativePath || file.name,
cancelled: false,
xhr: null,
errorText: null,
};
item.row = buildUploadRow(item);
uploadsList.prepend(item.row);
uploadQueue.push(item);
showPanel();
pump();
return item;
}
function pump() {
while (uploadActive < UPLOAD_CONCURRENCY && uploadQueue.length) {
const item = uploadQueue.shift();
runUpload(item);
}
}
function runUpload(item, overwriteFlag) {
uploadActive += 1;
const fd = new FormData();
fd.append("target_path", item.targetFolder || "");
fd.append("relative_path", item.relative);
fd.append("csrf_token", csrfToken);
if (overwriteFlag) fd.append("overwrite", "1");
fd.append("file", item.file, item.file.name);
const xhr = new XMLHttpRequest();
item.xhr = xhr;
xhr.open("POST", `${baseUrl}/files/upload`);
xhr.setRequestHeader("X-CSRF-Token", csrfToken);
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const pct = (event.loaded / event.total) * 100;
setRowState(item, "active", pct);
}
};
setRowState(item, "active", 0);
xhr.onload = () => {
uploadActive -= 1;
if (xhr.status >= 200 && xhr.status < 300) {
setRowState(item, "done");
scheduleRefresh(joinPath(item.targetFolder || "", parentOf(item.relative)));
} else if (xhr.status === 409 && !overwriteFlag) {
setRowState(item, "conflict");
const collidingPath = joinPath(item.targetFolder || "", item.relative);
// askConflict moved to dialogs.js in Step 3 — reach it via the
// shared registry rather than a closure-scope reference.
window.__filesOverlay.askConflict(collidingPath).then((action) => {
if (action === "overwrite") {
runUpload(item, true);
} else if (action === "keep-both") {
item.relative = withCollisionSuffix(item.relative);
item.row.querySelector(".files-uploads-row-name").textContent = item.relative;
runUpload(item, false);
} else {
setRowState(item, "cancelled");
}
});
} else {
item.errorText = `HTTP ${xhr.status}`;
try {
const text = xhr.responseText;
if (text) item.errorText = `HTTP ${xhr.status}: ${text.slice(0, 80)}`;
} catch (_e) {}
setRowState(item, "error");
}
maybeHidePanel();
pump();
};
xhr.onerror = () => {
uploadActive -= 1;
item.errorText = item.cancelled ? "cancelled" : "network error";
setRowState(item, item.cancelled ? "cancelled" : "error");
maybeHidePanel();
pump();
};
xhr.onabort = () => {
uploadActive -= 1;
setRowState(item, "cancelled");
maybeHidePanel();
pump();
};
xhr.send(fd);
}
// ---------- drag-drop on tree rows --------------------------------------
function rowFromEvent(event) {
return event.target.closest("[data-row-kind]");
}
function isInternalDrag(event) {
return Array.from(event.dataTransfer.types).includes("application/x-files-overlay");
}
function isExternalDrag(event) {
const types = Array.from(event.dataTransfer.types);
return types.includes("Files");
}
// Expose containers (rows AND the empty-state placeholder + tree-root)
// as drop targets — both for OS files and internal moves.
if (treeRoot) {
treeRoot.addEventListener("dragstart", (event) => {
const row = rowFromEvent(event);
if (!row) return;
const path = row.dataset.targetPath;
if (!path) return; // overlay root row isn't draggable
event.dataTransfer.setData("application/x-files-overlay", path);
event.dataTransfer.setData("text/plain", path);
event.dataTransfer.effectAllowed = "move";
row.classList.add("is-drag-source");
});
treeRoot.addEventListener("dragend", () => {
treeRoot.querySelectorAll(".is-drag-source").forEach((el) => el.classList.remove("is-drag-source"));
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
});
treeRoot.addEventListener("dragover", (event) => {
// Only react to file or row drags.
if (!isExternalDrag(event) && !isInternalDrag(event)) return;
const row = rowFromEvent(event);
// Find the closest folder row, or the tree-root container itself for
// root-level drops.
const target = row && row.dataset.rowKind === "dir" ? row : null;
const fallbackRoot = !row || row.dataset.rowKind !== "dir" ? treeRoot : null;
const dropEl = target || fallbackRoot;
if (!dropEl) return;
event.preventDefault();
event.dataTransfer.dropEffect = isInternalDrag(event) ? "move" : "copy";
// Highlight the dropEl exclusively.
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
dropEl.classList.add("is-drop-target");
});
treeRoot.addEventListener("dragleave", (event) => {
// Leaving the whole tree clears highlights.
if (!treeRoot.contains(event.relatedTarget)) {
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
}
});
treeRoot.addEventListener("drop", async (event) => {
const internal = isInternalDrag(event);
const external = isExternalDrag(event);
if (!internal && !external) return;
event.preventDefault();
const row = rowFromEvent(event);
const dropFolder =
row && row.dataset.rowKind === "dir" ? row.dataset.targetPath || "" : "";
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
if (internal) {
const src = event.dataTransfer.getData("application/x-files-overlay");
if (!src) return;
const dst = joinPath(dropFolder, basename(src));
if (src === dst) return;
// Cycle guard: refuse moving a folder into itself or descendant.
if (dropFolder === src || dropFolder.startsWith(src + "/")) return;
const r = await postJson(`${baseUrl}/files/move`, { src, dst });
if (r.ok) {
scheduleRefresh(parentOf(src));
if (parentOf(src) !== dropFolder) scheduleRefresh(dropFolder);
} else if (r.status === 409) {
// askConflict moved to dialogs.js in Step 3 — see Edit above.
const action = await window.__filesOverlay.askConflict(dst);
if (action === "overwrite") {
const r2 = await postJson(`${baseUrl}/files/move`, { src, dst, overwrite: true });
if (r2.ok) {
scheduleRefresh(parentOf(src));
scheduleRefresh(dropFolder);
}
}
} else {
alert((r.body && r.body.error) || `Move failed (HTTP ${r.status}).`);
}
return;
}
// External drop — collect entries via webkitGetAsEntry where it
// returns an Entry (real OS drag with folder support), and fall back
// to getAsFile() for any item whose entry is null (synthetic events,
// browsers without the API, or items that have no folder structure).
const items = event.dataTransfer.items;
const files = [];
const tasks = [];
if (items && items.length) {
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (typeof item.webkitGetAsEntry === "function") {
const entry = item.webkitGetAsEntry();
if (entry) {
tasks.push(walkEntry(entry, "", files));
continue;
}
}
// Fallback: treat as a flat file.
if (typeof item.getAsFile === "function") {
const f = item.getAsFile();
if (f) files.push({ file: f, rel: f.name });
}
}
} else if (event.dataTransfer.files) {
for (let i = 0; i < event.dataTransfer.files.length; i++) {
files.push({ file: event.dataTransfer.files[i], rel: event.dataTransfer.files[i].name });
}
}
await Promise.all(tasks);
for (const f of files) {
enqueueUpload(f.file, dropFolder, f.rel);
}
});
}
function walkEntry(entry, prefix, out) {
return new Promise((resolve) => {
if (entry.isFile) {
entry.file((f) => {
out.push({ file: f, rel: prefix + entry.name });
resolve();
});
} else if (entry.isDirectory) {
const reader = entry.createReader();
const children = [];
const readBatch = () => {
reader.readEntries((batch) => {
if (!batch.length) {
Promise.all(
children.map((c) => walkEntry(c, prefix + entry.name + "/", out))
).then(() => resolve());
return;
}
for (const c of batch) children.push(c);
readBatch();
});
};
readBatch();
} else {
resolve();
}
});
}
// ---------- click delegation: action buttons ----------------------------
document.addEventListener("click", (event) => {
const action = event.target?.closest?.(
".files-row-action[data-action], .file-tree-name-button[data-action]"
);
if (!action) return;
if (!manager.contains(action)) return;
const op = action.dataset.action;
const path = action.dataset.targetPath || "";
// new-file + edit dispatched via registry (editor.js); new-folder +
// delete dispatched via registry (dialogs.js). Only "zip" remains
// here — it's pure URL navigation with no module dependency.
if (op === "zip") {
const url = `${baseUrl}/files/download_zip?path=${encodeURIComponent(path)}`;
window.location.href = url;
}
});
})();
// The four modules attach independently when .files-manager exists
// (each does its own document.querySelector check). This file is kept
// for the duration of Phase A so that <script src=".../files-overlay.js">
// in overlay_detail.html stays load-bearing during the transition; Step
// 10 deletes both the file and the script tag.

423
l4d2web/l4d2web/static/js/files-overlay/uploads.js Normal file
View file

@ -0,0 +1,423 @@
// files-overlay/uploads.js — Phase A, Step 4.
//
// Owns the upload queue (concurrency 3 with XHR-based progress events)
// and the drag-drop UX on the file tree. Both OS-file drops (external)
// and row-to-folder moves (internal) flow through the same drop
// handler on treeRoot.
//
// Drag-drop is deliberately direct-bound to treeRoot (5 events:
// dragstart, dragend, dragover, dragleave, drop) per the plan escape
// hatch. They share coordinated highlight state across events, and
// delegation would obscure that coordination. treeRoot is persistent
// — never swapped out — so direct binding is safe.
//
// Upload-row cancel buttons converted from direct-bound per row to a
// single document-level delegated listener that finds the upload via
// data-upload-id on the row. uploads Map keyed by that id.
//
// Dispatch:
// * "zip" registered into __filesOverlay → folder-zip download
// (pure URL navigation). This is the last remaining action — with
// Step 4 the legacy click-delegation switch goes away.
//
// withCollisionSuffix moves here from files-overlay.js (its biggest
// caller is the upload-conflict path). Exposed on __filesOverlay for
// editor.js's save-409 "keep both" branch.
(function () {
"use strict";
const fo = window.__filesOverlay;
if (!fo) return;
const { baseUrl, csrfToken, manager, treeRoot } = fo;
const { joinPath, parentOf, basename, postJson, scheduleRefresh } = fo.helpers;
const uploadsPanel = document.querySelector(".files-uploads");
const uploadsList = uploadsPanel?.querySelector(".files-uploads-list");
const uploadsClearBtn = uploadsPanel?.querySelector(".files-uploads-clear");
// Attach a path-collision suffix: foo.txt → foo (1).txt
function withCollisionSuffix(path) {
const dot = path.lastIndexOf(".");
const slash = path.lastIndexOf("/");
if (dot > slash + 0 && dot > -1) {
return path.slice(0, dot) + " (1)" + path.slice(dot);
}
return path + " (1)";
}
fo.withCollisionSuffix = withCollisionSuffix;
// ---------- upload queue + progress panel ----------
const uploadQueue = [];
let uploadActive = 0;
const UPLOAD_CONCURRENCY = 3;
// Map<uploadId, item> — used by the delegated cancel-button click
// handler to find the item from the row's data-upload-id attribute.
const uploads = new Map();
let nextUploadId = 0;
function showPanel() {
if (uploadsPanel) uploadsPanel.hidden = false;
}
function maybeHidePanel() {
if (!uploadsList) return;
const anyActive = uploadsList.querySelector("[data-state='active'], [data-state='queued']");
if (!anyActive && uploadsList.children.length === 0) {
uploadsPanel.hidden = true;
if (uploadsClearBtn) uploadsClearBtn.hidden = true;
}
const anyDone = uploadsList.querySelector("[data-state='done'], [data-state='error']");
if (uploadsClearBtn) uploadsClearBtn.hidden = !anyDone;
}
function buildUploadRow(item) {
const li = document.createElement("li");
li.className = "files-uploads-row";
li.dataset.state = "queued";
li.dataset.uploadId = item.id;
li.innerHTML = `
<div class="files-uploads-row-meta">
<span class="files-uploads-row-name"></span>
<span class="files-uploads-row-target muted"></span>
</div>
<div class="files-uploads-row-progress"><div class="files-uploads-bar"></div></div>
<div class="files-uploads-row-status">
<span class="files-uploads-row-state">queued</span>
<button type="button" class="link-button files-uploads-row-cancel" aria-label="Cancel">✕</button>
</div>
`;
li.querySelector(".files-uploads-row-name").textContent = item.relative;
li.querySelector(".files-uploads-row-target").textContent = `→ ${item.targetFolder || "(root)"}`;
return li;
}
function setRowState(item, state, percent) {
if (!item.row) return;
item.row.dataset.state = state;
const stateEl = item.row.querySelector(".files-uploads-row-state");
const cancelBtn = item.row.querySelector(".files-uploads-row-cancel");
const bar = item.row.querySelector(".files-uploads-bar");
if (state === "queued") {
stateEl.textContent = "queued";
bar.style.width = "0%";
} else if (state === "active") {
stateEl.textContent = `${Math.round(percent || 0)}%`;
bar.style.width = `${percent || 0}%`;
} else if (state === "done") {
stateEl.textContent = "done";
bar.style.width = "100%";
bar.classList.add("is-done");
cancelBtn.textContent = "✓";
cancelBtn.disabled = true;
} else if (state === "cancelled") {
stateEl.textContent = "cancelled";
bar.classList.add("is-cancelled");
cancelBtn.disabled = true;
} else if (state === "error") {
stateEl.textContent = item.errorText || "error";
bar.classList.add("is-error");
cancelBtn.textContent = "✕";
} else if (state === "conflict") {
stateEl.textContent = "conflict — overwrite / keep both";
}
}
function cancelUpload(item) {
if (item.xhr && item.row.dataset.state === "active") {
item.cancelled = true;
item.xhr.abort();
}
if (item.row.dataset.state === "queued") {
const idx = uploadQueue.indexOf(item);
if (idx >= 0) uploadQueue.splice(idx, 1);
setRowState(item, "cancelled");
}
}
// Delegated click handler for upload-row cancel buttons. Replaces
// the per-row direct-bound listener that the legacy code attached
// inside buildUploadRow. Reads the row's data-upload-id and looks up
// the upload in the Map — works for rows added at any later time.
document.addEventListener("click", (event) => {
const btn = event.target?.closest?.(".files-uploads-row-cancel");
if (!btn) return;
const row = btn.closest(".files-uploads-row");
if (!row || !uploadsList || !uploadsList.contains(row)) return;
const id = row.dataset.uploadId;
if (!id) return;
const item = uploads.get(id);
if (item) cancelUpload(item);
});
uploadsClearBtn?.addEventListener("click", () => {
uploadsList.querySelectorAll("[data-state='done'], [data-state='error'], [data-state='cancelled']").forEach((row) => {
const id = row.dataset.uploadId;
if (id) uploads.delete(id);
row.remove();
});
maybeHidePanel();
});
function enqueueUpload(file, targetFolder, relativePath) {
const id = String(nextUploadId++);
const item = {
id,
file,
targetFolder,
relative: relativePath || file.name,
cancelled: false,
xhr: null,
errorText: null,
};
item.row = buildUploadRow(item);
uploads.set(id, item);
uploadsList.prepend(item.row);
uploadQueue.push(item);
showPanel();
pump();
return item;
}
function pump() {
while (uploadActive < UPLOAD_CONCURRENCY && uploadQueue.length) {
const item = uploadQueue.shift();
runUpload(item);
}
}
function runUpload(item, overwriteFlag) {
uploadActive += 1;
const fd = new FormData();
fd.append("target_path", item.targetFolder || "");
fd.append("relative_path", item.relative);
fd.append("csrf_token", csrfToken);
if (overwriteFlag) fd.append("overwrite", "1");
fd.append("file", item.file, item.file.name);
const xhr = new XMLHttpRequest();
item.xhr = xhr;
xhr.open("POST", `${baseUrl}/files/upload`);
xhr.setRequestHeader("X-CSRF-Token", csrfToken);
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
const pct = (event.loaded / event.total) * 100;
setRowState(item, "active", pct);
}
};
setRowState(item, "active", 0);
xhr.onload = () => {
uploadActive -= 1;
if (xhr.status >= 200 && xhr.status < 300) {
setRowState(item, "done");
scheduleRefresh(joinPath(item.targetFolder || "", parentOf(item.relative)));
} else if (xhr.status === 409 && !overwriteFlag) {
setRowState(item, "conflict");
const collidingPath = joinPath(item.targetFolder || "", item.relative);
fo.askConflict(collidingPath).then((action) => {
if (action === "overwrite") {
runUpload(item, true);
} else if (action === "keep-both") {
item.relative = withCollisionSuffix(item.relative);
item.row.querySelector(".files-uploads-row-name").textContent = item.relative;
runUpload(item, false);
} else {
setRowState(item, "cancelled");
}
});
} else {
item.errorText = `HTTP ${xhr.status}`;
try {
const text = xhr.responseText;
if (text) item.errorText = `HTTP ${xhr.status}: ${text.slice(0, 80)}`;
} catch (_e) {}
setRowState(item, "error");
}
maybeHidePanel();
pump();
};
xhr.onerror = () => {
uploadActive -= 1;
item.errorText = item.cancelled ? "cancelled" : "network error";
setRowState(item, item.cancelled ? "cancelled" : "error");
maybeHidePanel();
pump();
};
xhr.onabort = () => {
uploadActive -= 1;
setRowState(item, "cancelled");
maybeHidePanel();
pump();
};
xhr.send(fd);
}
// ---------- drag-drop on tree rows ----------
function rowFromEvent(event) {
return event.target.closest("[data-row-kind]");
}
function isInternalDrag(event) {
return Array.from(event.dataTransfer.types).includes("application/x-files-overlay");
}
function isExternalDrag(event) {
const types = Array.from(event.dataTransfer.types);
return types.includes("Files");
}
// Expose containers (rows AND the empty-state placeholder + tree-root)
// as drop targets — both for OS files and internal moves.
if (treeRoot) {
treeRoot.addEventListener("dragstart", (event) => {
const row = rowFromEvent(event);
if (!row) return;
const path = row.dataset.targetPath;
if (!path) return; // overlay root row isn't draggable
event.dataTransfer.setData("application/x-files-overlay", path);
event.dataTransfer.setData("text/plain", path);
event.dataTransfer.effectAllowed = "move";
row.classList.add("is-drag-source");
});
treeRoot.addEventListener("dragend", () => {
treeRoot.querySelectorAll(".is-drag-source").forEach((el) => el.classList.remove("is-drag-source"));
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
});
treeRoot.addEventListener("dragover", (event) => {
// Only react to file or row drags.
if (!isExternalDrag(event) && !isInternalDrag(event)) return;
const row = rowFromEvent(event);
// Find the closest folder row, or the tree-root container itself for
// root-level drops.
const target = row && row.dataset.rowKind === "dir" ? row : null;
const fallbackRoot = !row || row.dataset.rowKind !== "dir" ? treeRoot : null;
const dropEl = target || fallbackRoot;
if (!dropEl) return;
event.preventDefault();
event.dataTransfer.dropEffect = isInternalDrag(event) ? "move" : "copy";
// Highlight the dropEl exclusively.
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
dropEl.classList.add("is-drop-target");
});
treeRoot.addEventListener("dragleave", (event) => {
// Leaving the whole tree clears highlights.
if (!treeRoot.contains(event.relatedTarget)) {
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
}
});
treeRoot.addEventListener("drop", async (event) => {
const internal = isInternalDrag(event);
const external = isExternalDrag(event);
if (!internal && !external) return;
event.preventDefault();
const row = rowFromEvent(event);
const dropFolder =
row && row.dataset.rowKind === "dir" ? row.dataset.targetPath || "" : "";
treeRoot.querySelectorAll(".is-drop-target").forEach((el) => el.classList.remove("is-drop-target"));
if (internal) {
const src = event.dataTransfer.getData("application/x-files-overlay");
if (!src) return;
const dst = joinPath(dropFolder, basename(src));
if (src === dst) return;
// Cycle guard: refuse moving a folder into itself or descendant.
if (dropFolder === src || dropFolder.startsWith(src + "/")) return;
const r = await postJson(`${baseUrl}/files/move`, { src, dst });
if (r.ok) {
scheduleRefresh(parentOf(src));
if (parentOf(src) !== dropFolder) scheduleRefresh(dropFolder);
} else if (r.status === 409) {
const action = await fo.askConflict(dst);
if (action === "overwrite") {
const r2 = await postJson(`${baseUrl}/files/move`, { src, dst, overwrite: true });
if (r2.ok) {
scheduleRefresh(parentOf(src));
scheduleRefresh(dropFolder);
}
}
} else {
alert((r.body && r.body.error) || `Move failed (HTTP ${r.status}).`);
}
return;
}
// External drop — collect entries via webkitGetAsEntry where it
// returns an Entry (real OS drag with folder support), and fall back
// to getAsFile() for any item whose entry is null (synthetic events,
// browsers without the API, or items that have no folder structure).
const items = event.dataTransfer.items;
const files = [];
const tasks = [];
if (items && items.length) {
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (typeof item.webkitGetAsEntry === "function") {
const entry = item.webkitGetAsEntry();
if (entry) {
tasks.push(walkEntry(entry, "", files));
continue;
}
}
// Fallback: treat as a flat file.
if (typeof item.getAsFile === "function") {
const f = item.getAsFile();
if (f) files.push({ file: f, rel: f.name });
}
}
} else if (event.dataTransfer.files) {
for (let i = 0; i < event.dataTransfer.files.length; i++) {
files.push({ file: event.dataTransfer.files[i], rel: event.dataTransfer.files[i].name });
}
}
await Promise.all(tasks);
for (const f of files) {
enqueueUpload(f.file, dropFolder, f.rel);
}
});
}
function walkEntry(entry, prefix, out) {
return new Promise((resolve) => {
if (entry.isFile) {
entry.file((f) => {
out.push({ file: f, rel: prefix + entry.name });
resolve();
});
} else if (entry.isDirectory) {
const reader = entry.createReader();
const children = [];
const readBatch = () => {
reader.readEntries((batch) => {
if (!batch.length) {
Promise.all(
children.map((c) => walkEntry(c, prefix + entry.name + "/", out))
).then(() => resolve());
return;
}
for (const c of batch) children.push(c);
readBatch();
});
};
readBatch();
} else {
resolve();
}
});
}
// ---------- register action-registry handlers ----------
// The last remaining file-row action — pure URL navigation. Could
// equally live in core.js; placed here since uploads.js is the
// closest thematic home (folder-level action like + new file etc.).
fo.registerHandler("zip", (path) => {
window.location.href = `${baseUrl}/files/download_zip?path=${encodeURIComponent(path)}`;
});
})();

1
l4d2web/l4d2web/templates/overlay_detail.html
View file

@ -285,6 +285,7 @@
<script src="{{ url_for('static', filename='js/files-overlay/core.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/files-overlay/editor.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/files-overlay/dialogs.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/files-overlay/uploads.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/files-overlay.js') }}" defer></script>
{% endif %}
{% endblock %}