"use strict";
// Panels of the File Manager: local disk or any open SSH session, one to three side by side.
// Copies always go through the Transfer Manager; the classic one-panel view keeps the editor, sudo and archives.
(function () {
const local = api.files.local;
const LOCAL = "local";
const $ = (id) => document.getElementById(id);
const view = { mode: 3, panels: [], active: null, clipboard: null, places: null, drag: null, refreshTimer: null };
try { const saved = Number(localStorage.getItem("chj.fm.panels")); if ([1, 2, 3].includes(saved)) view.mode = saved; } catch {}
const isLocal = (panel) => panel.source === LOCAL;
const sep = () => view.places?.separator || "/";
const session = (id) => state.sessions.find((entry) => entry.sessionId === id);
const panelName = (panel) => isLocal(panel) ? t("Lokální disk") : session(panel.source) ? api.sessions.displayName(session(panel.source)) : "—";
const isDir = (item) => item.type === "directory" || item.targetType === "directory";
const visible = () => view.panels.slice(0, view.mode);
function joinFor(panel, name) {
if (!isLocal(panel)) return joinPath(panel.path, name);
return `${panel.path.replace(/[\\/]+$/, "")}${sep()}${name}`;
}
function parentFor(panel) {
if (!isLocal(panel)) return parentPath(panel.path);
const trimmed = panel.path.replace(/[\\/]+$/, "");
const cut = trimmed.lastIndexOf(sep());
if (cut <= 0) return view.places?.roots?.[0] || sep();
const parent = trimmed.slice(0, cut);
return /^[A-Za-z]:$/.test(parent) ? `${parent}\\` : parent;
}
function panelStatus(panel, message, error = false) { panel.statusNode.textContent = message; panel.statusNode.classList.toggle("error", error); }
function createPanel(index) {
const root = document.createElement("article");
root.className = "fs-panel panel";
root.innerHTML = `
`;
const panel = { index, root, source: "", path: "/", back: [], forward: [], entries: [], selected: new Set(), anchor: null, generation: 0, ended: false, touched: false,
select: root.querySelector(".fs-source"), input: root.querySelector(".fs-path input"), body: root.querySelector("tbody"), statusNode: root.querySelector(".fs-status"), dot: root.querySelector(".fs-dot") };
panel.select.addEventListener("change", () => { panel.touched = true; panel.ended = false; setSource(panel, panel.select.value); });
root.querySelector(".fs-path").addEventListener("submit", (event) => { event.preventDefault(); void open(panel, panel.input.value.trim()); });
root.querySelector(".fs-nav").addEventListener("click", (event) => {
const action = event.target.closest("[data-nav]")?.dataset.nav;
if (action === "up") void open(panel, parentFor(panel));
else if (action === "refresh") void reload(panel, true);
else if (action === "back" && panel.back.length) { panel.forward.push(panel.path); void open(panel, panel.back.pop(), false); }
else if (action === "forward" && panel.forward.length) { panel.back.push(panel.path); void open(panel, panel.forward.pop(), false); }
});
root.addEventListener("pointerdown", () => setActive(panel));
root.querySelector(".fs-table").addEventListener("contextmenu", (event) => { if (!event.target.closest("tbody")) { event.preventDefault(); setActive(panel); panel.selected = new Set(); showSelection(panel); showMenu(panel, event.clientX, event.clientY); } });
root.addEventListener("focusin", () => setActive(panel));
panel.body.addEventListener("click", (event) => {
const row = event.target.closest("tr[data-path]");
if (!row) return;
const path = row.dataset.path;
if (event.target.matches("input[type=checkbox]")) toggle(panel, path);
else if (event.shiftKey && panel.anchor) range(panel, path);
else if (event.metaKey || event.ctrlKey) toggle(panel, path);
else { panel.selected = new Set([path]); panel.anchor = path; }
// In place: replacing the rows between two clicks would lose the double click.
showSelection(panel);
});
panel.body.addEventListener("contextmenu", (event) => {
event.preventDefault();
setActive(panel);
const row = event.target.closest("tr[data-path]");
if (row && !panel.selected.has(row.dataset.path)) { panel.selected = new Set([row.dataset.path]); panel.anchor = row.dataset.path; showSelection(panel); }
if (!row) { panel.selected = new Set(); showSelection(panel); }
showMenu(panel, event.clientX, event.clientY);
});
panel.body.addEventListener("dblclick", (event) => {
const row = event.target.closest("tr[data-path]");
const item = row && panel.entries.find((entry) => entry.path === row.dataset.path);
if (!item) return;
if (isDir(item)) void open(panel, item.path);
else if (!isLocal(panel)) void openInEditor(panel, item.path);
});
panel.body.addEventListener("dragstart", (event) => {
const row = event.target.closest("tr[data-path]");
if (!row) return;
if (!panel.selected.has(row.dataset.path)) { panel.selected = new Set([row.dataset.path]); render(panel); }
view.drag = { panel, paths: [...panel.selected], directory: panel.path, source: panel.source };
event.dataTransfer.effectAllowed = "copyMove";
event.dataTransfer.setData("text/plain", [...panel.selected].join("\n"));
});
root.addEventListener("dragover", (event) => { if (view.drag && view.drag.panel !== panel && panel.source) { event.preventDefault(); root.classList.add("drop-target"); event.dataTransfer.dropEffect = event.shiftKey ? "move" : "copy"; } });
root.addEventListener("dragleave", (event) => { if (!root.contains(event.relatedTarget)) root.classList.remove("drop-target"); });
root.addEventListener("drop", (event) => {
root.classList.remove("drop-target");
if (!view.drag || view.drag.panel === panel) return;
event.preventDefault();
const drag = view.drag; view.drag = null;
void transfer(drag, panel, event.shiftKey);
});
root.addEventListener("dragend", () => { view.drag = null; for (const item of view.panels) item.root.classList.remove("drop-target"); });
return panel;
}
function toggle(panel, path) { if (panel.selected.has(path)) panel.selected.delete(path); else panel.selected.add(path); panel.anchor = path; }
function range(panel, path) {
const list = sorted(panel), from = list.findIndex((entry) => entry.path === panel.anchor), to = list.findIndex((entry) => entry.path === path);
if (from < 0 || to < 0) return;
for (let i = Math.min(from, to); i <= Math.max(from, to); i += 1) panel.selected.add(list[i].path);
}
function setActive(panel) {
if (view.active === panel) return;
view.active = panel;
for (const item of view.panels) item.root.classList.toggle("active", item === panel);
}
function sorted(panel) {
return [...panel.entries].sort((a, b) => (isDir(b) - isDir(a)) || String(a.name).localeCompare(String(b.name), i18n.locale(), { numeric: true, sensitivity: "base" }));
}
function render(panel) {
panel.input.value = panel.source ? panel.path : "";
panel.dot.dataset.kind = !panel.source ? "none" : isLocal(panel) ? "local" : "remote";
const fragment = document.createDocumentFragment();
for (const item of sorted(panel)) {
const row = document.createElement("tr");
row.dataset.path = item.path; row.draggable = true; row.classList.toggle("selected", panel.selected.has(item.path));
const checkCell = document.createElement("td"); const check = document.createElement("input"); check.type = "checkbox"; check.checked = panel.selected.has(item.path); check.setAttribute("aria-label", item.name); checkCell.append(check);
const name = document.createElement("td"); name.className = "file-name"; const icon = document.createElement("span"); icon.className = "file-icon"; icon.textContent = isDir(item) ? "📁" : item.type === "symlink" ? "↗" : "📄"; name.append(icon, document.createTextNode(item.name));
const size = document.createElement("td"); size.className = "file-meta"; size.textContent = isDir(item) ? "—" : bytes(item.size);
const when = document.createElement("td"); when.className = "file-meta"; when.textContent = item.modifiedAt ? new Date(item.modifiedAt).toLocaleString(i18n.locale()) : "—";
row.append(checkCell, name, size, when);
fragment.append(row);
}
if (!panel.entries.length) {
const row = document.createElement("tr"); const cell = document.createElement("td"); cell.colSpan = 4; cell.className = "empty";
cell.textContent = panel.source ? t("Adresář je prázdný.") : t("Vyberte umístění panelu.");
row.append(cell); fragment.append(row);
}
panel.body.replaceChildren(fragment);
const chosen = panel.entries.filter((entry) => panel.selected.has(entry.path));
if (panel.source && !panel.statusNode.classList.contains("error")) panelStatus(panel, t("{count} položek · {selected} vybráno", { count: panel.entries.length, selected: chosen.length }));
updateActions();
}
function showSelection(panel) {
for (const row of panel.body.querySelectorAll("tr[data-path]")) {
const on = panel.selected.has(row.dataset.path);
row.classList.toggle("selected", on);
row.querySelector("input").checked = on;
}
if (panel.source && !panel.statusNode.classList.contains("error")) panelStatus(panel, t("{count} položek · {selected} vybráno", { count: panel.entries.length, selected: panel.selected.size }));
updateActions();
}
function hideMenu() { $("panelMenu").hidden = true; }
function showMenu(panel, x, y) {
const menu = $("panelMenu"), chosen = panel.entries.filter((entry) => panel.selected.has(entry.path)), one = chosen.length === 1 ? chosen[0] : null;
const add = (label, action, enabled = true, danger = false) => { const button = document.createElement("button"); button.type = "button"; button.textContent = label; button.disabled = !enabled; if (danger) button.className = "danger-text"; button.addEventListener("click", () => { hideMenu(); action(); }); menu.append(button); };
const line = () => { const separator = document.createElement("div"); separator.className = "menu-separator"; menu.append(separator); };
menu.replaceChildren();
if (one && isDir(one)) add(t("Otevřít"), () => void open(panel, one.path));
else if (one && !isLocal(panel)) add(t("Upravit"), () => void openInEditor(panel, one.path));
if (one) line();
if (chosen.length) {
add(t("Kopírovat"), () => toClipboard(false));
add(t("Vyjmout"), () => toClipboard(true));
}
add(t("Vložit"), paste, Boolean(view.clipboard && panel.source));
const others = visible().filter((other) => other !== panel && other.source && !(isLocal(other) && isLocal(panel)));
if (chosen.length && others.length) {
line();
for (const other of others) add(`${t("Kopírovat")} → ${panelName(other)}`, () => void transfer(selection(panel), other, false));
for (const other of others) add(`${t("Přesun")} → ${panelName(other)}`, () => void transfer(selection(panel), other, true));
}
line();
if (one) add(t("Přejmenovat"), () => void rename());
add(t("+ Soubor"), () => void newFile(), Boolean(panel.source));
add(t("+ Složka"), () => void mkdir(), Boolean(panel.source));
add(t("Obnovit (F5)"), () => void reload(panel, true), Boolean(panel.source));
if (chosen.length) { line(); add(t("Smazat"), () => void remove(), true, true); }
menu.hidden = false;
const box = menu.getBoundingClientRect();
menu.style.left = `${Math.max(4, Math.min(x, innerWidth - box.width - 4))}px`;
menu.style.top = `${Math.max(4, Math.min(y, innerHeight - box.height - 4))}px`;
menu.querySelector("button:not(:disabled)")?.focus();
}
function updateActions() {
const panel = view.active, chosen = panel ? panel.selected.size : 0;
for (const id of ["panelCopy", "panelCut", "panelDelete"]) $(id).disabled = !chosen;
$("panelRename").disabled = chosen !== 1;
$("panelMkdir").disabled = !panel?.source;
$("panelNewFile").disabled = !panel?.source;
$("panelPaste").disabled = !view.clipboard || !panel?.source;
$("panelClipboard").textContent = view.clipboard ? `${view.clipboard.cut ? t("Vyjmuto") : t("Zkopírováno")}: ${view.clipboard.paths.length}` : "";
}
async function open(panel, path, remember = true) {
if (!panel.source || !path) return;
const token = ++panel.generation, source = panel.source;
panelStatus(panel, t("Načítám {path}…", { path }));
try {
const target = isLocal(panel) ? path : normalizePath(path);
const entries = isLocal(panel) ? await local.list(target) : await api.files.list(source, target, {});
if (token !== panel.generation || source !== panel.source) return;
if (remember && target !== panel.path) { panel.back.push(panel.path); panel.forward = []; }
panel.path = target; panel.entries = entries; panel.selected = new Set(); panel.anchor = null;
panel.statusNode.classList.remove("error");
render(panel);
} catch (error) {
if (token !== panel.generation) return;
panel.input.value = panel.path;
panelStatus(panel, errorText(error), true);
}
}
async function reload(panel, clearError = false) {
if (!panel.source) return;
if (clearError) panel.statusNode.classList.remove("error");
const token = ++panel.generation, source = panel.source, keep = new Set(panel.selected);
try {
const entries = isLocal(panel) ? await local.list(panel.path) : await api.files.list(source, panel.path, {});
if (token !== panel.generation || source !== panel.source) return;
panel.entries = entries; panel.selected = new Set(entries.filter((entry) => keep.has(entry.path)).map((entry) => entry.path));
render(panel);
} catch (error) { if (token === panel.generation) panelStatus(panel, errorText(error), true); }
}
function setSource(panel, source) {
panel.generation += 1;
panel.source = source; panel.entries = []; panel.selected = new Set(); panel.anchor = null; panel.back = []; panel.forward = [];
panel.statusNode.classList.remove("error");
panel.path = source === LOCAL ? (view.places?.home || "/") : "/";
render(panel);
if (source) void open(panel, panel.path, false);
}
function renderSources(panel) {
const list = state.sessions;
panel.select.replaceChildren(new Option(list.length ? t("Vyberte relaci…") : t("Žádná připojená relace"), ""), new Option(t("Lokální disk"), LOCAL));
for (const entry of list) panel.select.add(new Option(api.sessions.displayName(entry), entry.sessionId));
panel.select.value = panel.source;
}
// One open session fills the next free panel. A session that ended never makes its panel jump to another
// server; with two sessions and one free panel the user decides.
function syncSessions(sessions) {
if (!view.panels.length) return;
const ids = new Set(sessions.map((entry) => entry.sessionId));
for (const panel of view.panels) {
if (panel.source && panel.source !== LOCAL && !ids.has(panel.source)) {
panel.ended = true;
setSource(panel, "");
panelStatus(panel, t("Relace skončila. Vyberte server."), true);
}
}
// T1 before T2: the same order every time.
const ordered = [...sessions].sort((a, b) => (a.slot || 99) - (b.slot || 99));
const free = () => ordered.filter((entry) => !view.panels.some((panel) => panel.source === entry.sessionId));
const empty = visible().filter((panel) => !panel.source && !panel.ended && !panel.touched);
if (active() && free().length <= empty.length) for (const panel of empty) { const next = free()[0]; if (next) setSource(panel, next.sessionId); }
for (const panel of view.panels) renderSources(panel);
if (active() && empty[0] && !empty[0].source && free().length > empty.length) api.sessions.offerChoice(empty[0].select, free(), t("Vyberte relaci…"));
updateActions();
}
function selection(panel) { return { panel, paths: [...panel.selected], directory: panel.path, source: panel.source }; }
async function transfer(from, to, move) {
if (!to.source || !from.source) return;
if (from.source === LOCAL && to.source === LOCAL) { panelStatus(to, t("Mezi dvěma lokálními panely se nekopíruje."), true); return; }
if (from.source !== LOCAL && !session(from.source)) { panelStatus(to, t("Zdrojová relace už není připojena."), true); return; }
const fromName = from.source === LOCAL ? t("Lokální disk") : api.sessions.displayName(session(from.source));
try {
// Within one connection a move is a single atomic rename.
if (move && from.source === to.source) {
for (const path of from.paths) await api.files.rename(from.source, path, joinPath(to.path, path.split("/").pop()), {});
for (const panel of visible()) void reload(panel);
if (view.clipboard?.cut) { view.clipboard = null; updateActions(); }
return;
}
panelStatus(to, t("Připravuji přenos…"));
const plan = await api.files.transfers.planCopy(
from.source === LOCAL ? { kind: "local", paths: from.paths } : { kind: "remote", sessionId: from.source, paths: from.paths },
to.source === LOCAL ? { kind: "local", directory: to.path } : { kind: "remote", sessionId: to.source, directory: to.path });
to.statusNode.classList.remove("error");
render(to);
if (plan.canceled) return;
if (!plan.files && !plan.directories) { panelStatus(to, t("Výběr neobsahuje žádné přenositelné soubory.")); return; }
plan.title = `${move ? t("Přesun") : t("Kopírování")}: ${fromName} → ${panelName(to)}`;
await runPlanned(plan, to, move, from.directory);
if (view.clipboard?.cut) { view.clipboard = null; updateActions(); }
} catch (error) { panelStatus(to, errorText(error), true); }
}
async function runPlanned(plan, target, move, sourceDirectory) {
let current = plan;
for (let attempt = 0; attempt < 4; attempt += 1) {
const choice = await showPlan(current);
if (!choice) return;
try {
const started = await api.files.transfers.start(plan.planId, { ...choice, ...(move ? { move: true, sourceDirectory } : {}) });
setStatus(`${t("Zařazeno {count} přenosů", { count: started.jobs })}${started.skipped ? `, ${t("přeskočeno {count}", { count: started.skipped })}` : ""}.`);
setTransfersCollapsed(false);
// Only empty folders: there are no jobs, and so no finished transfer to refresh after.
if (!started.jobs) for (const panel of visible()) void reload(panel);
return;
} catch (error) {
const code = errorCode(error);
if (code !== "SUDO_PASSWORD_INCORRECT" && code !== "SUDO_PASSWORD_REQUIRED") throw error;
current = { ...current, sudoPasswordRequired: true, error: errorText(error) };
}
}
}
async function openInEditor(panel, path) {
if (state.sessionId !== panel.source) {
elements.sessionSelect.value = panel.source;
elements.sessionSelect.dispatchEvent(new Event("change", { bubbles: true }));
if (state.sessionId !== panel.source) return;
for (let wait = 0; state.busy && wait < 100; wait += 1) await new Promise((done) => setTimeout(done, 50));
}
await openText(path);
}
async function mkdir() {
const panel = view.active; if (!panel?.source) return;
const name = await askName(t("Název nové složky:")); if (!name) return;
try { if (isLocal(panel)) await local.mkdir(panel.path, name); else await api.files.mkdir(panel.source, joinPath(panel.path, name), {}); await reload(panel, true); }
catch (error) { panelStatus(panel, errorText(error), true); }
}
// Any name and extension. On a server the new file opens in the editor right away.
async function newFile() {
const panel = view.active; if (!panel?.source) return;
const name = await askName(t("Název nového souboru:"), t("novy-soubor.txt")); if (!name) return;
try {
if (isLocal(panel)) { await local.createFile(panel.path, name); await reload(panel, true); return; }
const path = joinPath(panel.path, name);
await api.files.createFile(panel.source, path, {});
await reload(panel, true);
await openInEditor(panel, path);
} catch (error) { panelStatus(panel, errorText(error), true); }
}
async function rename() {
const panel = view.active; if (panel?.selected.size !== 1) return;
const path = [...panel.selected][0], item = panel.entries.find((entry) => entry.path === path);
const name = await askName(t("Nový název:"), item?.name); if (!name || name === item?.name) return;
try { if (isLocal(panel)) await local.rename(path, name); else await api.files.rename(panel.source, path, joinPath(panel.path, name), {}); await reload(panel, true); }
catch (error) { panelStatus(panel, errorText(error), true); }
}
async function remove() {
const panel = view.active; if (!panel?.selected.size) return;
if (!window.confirm(`${panelName(panel)}\n\n${t("Opravdu trvale smazat {count} vybraných položek včetně obsahu vybraných složek?", { count: panel.selected.size })}`)) return;
try { if (isLocal(panel)) await local.remove([...panel.selected]); else await api.files.removeMany(panel.source, [...panel.selected], true, {}); await reload(panel, true); }
catch (error) { panelStatus(panel, errorText(error), true); }
}
function toClipboard(cut) { const panel = view.active; if (!panel?.selected.size) return; view.clipboard = { ...selection(panel), cut }; updateActions(); }
function paste() { const panel = view.active; if (!panel?.source || !view.clipboard) return; void transfer(view.clipboard, panel, view.clipboard.cut); }
function active() { return view.mode > 1; }
function applyMode() {
document.querySelector("main").classList.toggle("panels-mode", active());
document.body.classList.toggle("panels-active", active());
$("panelsView").hidden = !active();
view.panels.forEach((panel, index) => { panel.root.hidden = index >= view.mode; });
document.querySelectorAll("#panelMode button").forEach((button) => { const on = Number(button.dataset.panels) === view.mode; button.classList.toggle("active", on); button.setAttribute("aria-checked", String(on)); });
$("panelGrid").style.setProperty("--panels", String(view.mode));
if (active()) { if (!view.active || view.panels.indexOf(view.active) >= view.mode) setActive(view.panels[0]); syncSessions(state.sessions); }
queueTransferRender();
}
// Refreshes open folders after finished transfers, at most every 1.5 s.
function transfersFinished() {
if (view.refreshTimer || !active()) return;
view.refreshTimer = setTimeout(() => { view.refreshTimer = null; for (const panel of visible()) void reload(panel); }, 1500);
}
document.addEventListener("pointerdown", (event) => { if (!event.target.closest("#panelMenu")) hideMenu(); });
window.addEventListener("blur", hideMenu);
$("panelMode").addEventListener("click", (event) => {
const mode = Number(event.target.closest("[data-panels]")?.dataset.panels);
if (!mode) return;
view.mode = mode;
try { localStorage.setItem("chj.fm.panels", String(mode)); } catch {}
applyMode();
});
$("panelCopy").addEventListener("click", () => toClipboard(false));
$("panelCut").addEventListener("click", () => toClipboard(true));
$("panelPaste").addEventListener("click", paste);
$("panelRename").addEventListener("click", () => void rename());
$("panelDelete").addEventListener("click", () => void remove());
$("panelMkdir").addEventListener("click", () => void mkdir());
$("panelNewFile").addEventListener("click", () => void newFile());
window.addEventListener("keydown", (event) => {
if (!active() || !elements.editor.hidden || document.querySelector("dialog[open]") || event.target.matches?.("input:not([type=checkbox]), select, textarea")) return;
if (event.key === "Escape") { hideMenu(); return; }
const mod = event.metaKey || event.ctrlKey, key = event.key.toLowerCase();
if (mod && key === "c") toClipboard(false);
else if (mod && key === "x") toClipboard(true);
else if (mod && key === "v") paste();
else if (mod && key === "a" && view.active) { view.active.selected = new Set(view.active.entries.map((entry) => entry.path)); render(view.active); }
else if (event.key === "F2") void rename();
else if (event.key === "F5" && view.active) void reload(view.active, true);
else if (event.key === "Delete" || (event.key === "Backspace" && event.metaKey)) void remove();
else return;
event.preventDefault(); event.stopPropagation();
}, true);
// This handler can run before the one in index.js, so the language is set here as well.
api.ui.onLanguageChanged((language) => { i18n.setLanguage(language); for (const panel of view.panels) { renderSources(panel); render(panel); } i18n.apply(document); });
window.chjPanels = { active, syncSessions, transfersFinished, view };
void (async () => {
try { view.places = await local.places(); } catch {}
for (let index = 0; index < 3; index += 1) { const panel = createPanel(index); view.panels.push(panel); $("panelGrid").append(panel.root); }
view.panels[0].touched = true;
setSource(view.panels[0], LOCAL);
for (const panel of view.panels) renderSources(panel);
i18n.apply(document);
applyMode();
})();
})();