Add folder image loader node
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
export async function listFolder(folder, recursive) {
|
||||
try {
|
||||
const url =
|
||||
`/dumas/api/load_images_folder/list?path=${encodeURIComponent(folder)}` +
|
||||
`&recursive=${recursive ? 1 : 0}`;
|
||||
const response = await fetch(url, { cache: "no-store" });
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
return { ok: false, message: String(error), files: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export function thumbURL(folder, rel, mtime) {
|
||||
return (
|
||||
`/dumas/api/load_images_folder/thumb?path=${encodeURIComponent(folder)}` +
|
||||
`&file=${encodeURIComponent(rel)}&mt=${Math.floor(mtime || 0)}`
|
||||
);
|
||||
}
|
||||
|
||||
export async function browseFolder(path) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/dumas/api/load_images_folder/browse?path=${encodeURIComponent(path || "")}`,
|
||||
);
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
return { ok: false, message: String(error), dirs: [] };
|
||||
}
|
||||
}
|
||||
|
||||
export async function pickNativeFolder(startPath) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/dumas/api/load_images_folder/pick_native?path=${encodeURIComponent(startPath || "")}`,
|
||||
);
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
return { ok: false, message: String(error) };
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
import { app } from "/scripts/app.js";
|
||||
import { applyAdaptiveCanvasOnly } from "../shared/nodes2.mjs";
|
||||
import { listFolder, pickNativeFolder } from "./api.mjs";
|
||||
import {
|
||||
COMFY_CLASS,
|
||||
HIDDEN_INPUT_NAME,
|
||||
readState,
|
||||
writeState,
|
||||
} from "./state.mjs";
|
||||
import {
|
||||
buildRoot,
|
||||
injectCSS,
|
||||
openBrowsePopup,
|
||||
openPickGallery,
|
||||
} from "./ui.mjs";
|
||||
|
||||
const MIN_W = 300;
|
||||
const DEFAULT_W = 370;
|
||||
|
||||
function hideJsonWidget(widgets, name) {
|
||||
const widget = (widgets || []).find((entry) => entry?.name === name);
|
||||
if (!widget) return;
|
||||
widget.type = "hidden";
|
||||
widget.computeSize = () => [0, 0];
|
||||
}
|
||||
|
||||
function normalizePath(value) {
|
||||
if (!value) return "";
|
||||
let normalized = String(value).trim().replace(/\\/g, "/").replace(/\/+$/, "");
|
||||
if (/^[A-Za-z]:$/.test(normalized)) normalized += "/";
|
||||
return normalized;
|
||||
}
|
||||
|
||||
function stripInputs(node) {
|
||||
if (!node?.inputs?.length) return;
|
||||
for (let index = node.inputs.length - 1; index >= 0; index -= 1) {
|
||||
if (node.inputs[index]?.link != null) {
|
||||
try {
|
||||
node.disconnectInput(index);
|
||||
} catch (_error) {
|
||||
// Ignore failed disconnects and keep stripping.
|
||||
}
|
||||
}
|
||||
node.removeInput(index);
|
||||
}
|
||||
}
|
||||
|
||||
function selectionSummary(state, total) {
|
||||
const mode = state.selection_mode || "selected";
|
||||
if (mode === "all") return `All ${total} / ${total}`;
|
||||
if (mode === "first_n") return `First ${Math.min(Math.max(parseInt(state.first_n, 10) || 0, 0), total)} / ${total}`;
|
||||
if (mode === "random") return `Random ${total ? 1 : 0} / ${total}`;
|
||||
return `${(state.selected || []).length} / ${total}`;
|
||||
}
|
||||
|
||||
function renderUI(node) {
|
||||
const ui = node._dlfUI;
|
||||
if (!ui) return;
|
||||
const state = readState(node);
|
||||
if (document.activeElement !== ui.folderInput) {
|
||||
ui.folderInput.value = state.folder || "";
|
||||
}
|
||||
const total = (node._dlfFiles || []).length;
|
||||
ui.pickBtn.textContent = `Pick images · ${selectionSummary(state, total)}`;
|
||||
ui.pickBtn.classList.toggle("empty", total === 0);
|
||||
ui.msgEl.textContent = node._dlfListError || "";
|
||||
node.setDirtyCanvas?.(true, true);
|
||||
}
|
||||
|
||||
async function refreshListing(node) {
|
||||
const requestId = (node._dlfListReq = (node._dlfListReq || 0) + 1);
|
||||
const state = readState(node);
|
||||
if (!state.folder) {
|
||||
node._dlfFiles = [];
|
||||
node._dlfListError = "";
|
||||
renderUI(node);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await listFolder(state.folder, state.recursive);
|
||||
if (node._dlfListReq !== requestId || !node._dlfUI) return;
|
||||
if (response?.ok) {
|
||||
node._dlfFiles = response.files || [];
|
||||
node._dlfListError = node._dlfFiles.length ? "" : "No images found in this folder.";
|
||||
} else {
|
||||
node._dlfFiles = [];
|
||||
node._dlfListError = response?.message || "Folder not found.";
|
||||
}
|
||||
|
||||
const present = new Set((node._dlfFiles || []).map((file) => file.file));
|
||||
const nextState = readState(node);
|
||||
const kept = (nextState.selected || []).filter((file) => present.has(file));
|
||||
if (kept.length !== (nextState.selected || []).length) {
|
||||
nextState.selected = kept;
|
||||
writeState(node, nextState);
|
||||
}
|
||||
renderUI(node);
|
||||
}
|
||||
|
||||
async function setFolder(node, folder) {
|
||||
const normalized = normalizePath(folder);
|
||||
const state = readState(node);
|
||||
const changed = (state.folder || "") !== normalized;
|
||||
state.folder = normalized;
|
||||
if (changed) state.selected = [];
|
||||
writeState(node, state);
|
||||
await refreshListing(node);
|
||||
}
|
||||
|
||||
function setupNode(node) {
|
||||
injectCSS();
|
||||
hideJsonWidget(node.widgets, HIDDEN_INPUT_NAME);
|
||||
stripInputs(node);
|
||||
|
||||
const ui = buildRoot();
|
||||
node._dlfUI = ui;
|
||||
const widget = node.addDOMWidget("dumas_load_images_folder", "custom", ui.root, {
|
||||
getValue: () => null,
|
||||
setValue: () => {},
|
||||
serialize: false,
|
||||
getMinHeight: () => 96,
|
||||
});
|
||||
widget.computeLayoutSize = () => ({ minHeight: 96, minWidth: 1 });
|
||||
applyAdaptiveCanvasOnly(widget);
|
||||
|
||||
ui.folderInput.addEventListener("keydown", (event) => {
|
||||
event.stopImmediatePropagation();
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
ui.folderInput.blur();
|
||||
}
|
||||
});
|
||||
ui.folderInput.addEventListener("change", () => setFolder(node, ui.folderInput.value.trim()));
|
||||
ui.folderInput.addEventListener("paste", () => {
|
||||
setTimeout(() => {
|
||||
const value = ui.folderInput.value.trim();
|
||||
if (normalizePath(value) !== (readState(node).folder || "")) setFolder(node, value);
|
||||
}, 0);
|
||||
});
|
||||
ui.browseBtn.addEventListener("click", async () => {
|
||||
const start = readState(node).folder || "";
|
||||
const previous = ui.browseLbl.textContent;
|
||||
ui.browseBtn.disabled = true;
|
||||
ui.browseLbl.textContent = "Opening…";
|
||||
let response;
|
||||
try {
|
||||
response = await pickNativeFolder(start);
|
||||
} catch (_error) {
|
||||
response = { ok: false };
|
||||
}
|
||||
ui.browseBtn.disabled = false;
|
||||
ui.browseLbl.textContent = previous || "Browse";
|
||||
if (response?.ok && response.path) {
|
||||
await setFolder(node, response.path);
|
||||
return;
|
||||
}
|
||||
if (response?.cancelled) return;
|
||||
openBrowsePopup(node, ui.browseBtn, {
|
||||
startPath: start,
|
||||
onPick: (folder) => setFolder(node, folder),
|
||||
});
|
||||
});
|
||||
ui.pickBtn.addEventListener("click", async () => {
|
||||
const typed = ui.folderInput.value.trim();
|
||||
if (typed !== (readState(node).folder || "")) await setFolder(node, typed);
|
||||
const state = readState(node);
|
||||
if (!state.folder) {
|
||||
ui.folderInput.focus();
|
||||
node._dlfListError = "Set a folder first.";
|
||||
renderUI(node);
|
||||
return;
|
||||
}
|
||||
ui.pickBtn.disabled = true;
|
||||
try {
|
||||
await refreshListing(node);
|
||||
} finally {
|
||||
ui.pickBtn.disabled = false;
|
||||
}
|
||||
openPickGallery(node, ui.pickBtn, {
|
||||
onChange: renderUI,
|
||||
refreshListing,
|
||||
});
|
||||
});
|
||||
|
||||
node.size[0] = Math.max(node.size[0] || 0, DEFAULT_W);
|
||||
node.size[1] = Math.max(node.size[1] || 0, 110);
|
||||
queueMicrotask(() => refreshListing(node));
|
||||
}
|
||||
|
||||
function collectNodes(graph, out) {
|
||||
if (!graph) return;
|
||||
const nodes = graph._nodes || graph.nodes || [];
|
||||
for (const node of nodes) {
|
||||
if (node?.comfyClass === COMFY_CLASS) out.push(node);
|
||||
const inner = node?.subgraph || node?.graph || node?._graph;
|
||||
if (inner && inner !== graph) collectNodes(inner, out);
|
||||
}
|
||||
}
|
||||
|
||||
function matchNode(nodes, promptId) {
|
||||
let node = nodes.find((entry) => String(entry.id) === String(promptId));
|
||||
if (node) return node;
|
||||
const tail = String(promptId).split(":").pop();
|
||||
node = nodes.find((entry) => String(entry.id) === tail);
|
||||
return node || null;
|
||||
}
|
||||
|
||||
function injectState(result) {
|
||||
const output = result?.output;
|
||||
if (!output) return;
|
||||
const nodes = [];
|
||||
collectNodes(app.graph, nodes);
|
||||
for (const id in output) {
|
||||
const entry = output[id];
|
||||
if (!entry || entry.class_type !== COMFY_CLASS) continue;
|
||||
const node = matchNode(nodes, id);
|
||||
if (!node) continue;
|
||||
if (!entry.inputs) entry.inputs = {};
|
||||
entry.inputs[HIDDEN_INPUT_NAME] = JSON.stringify(readState(node));
|
||||
}
|
||||
}
|
||||
|
||||
function installGraphToPromptHook() {
|
||||
if (app._dlfGraphPatched) return;
|
||||
app._dlfGraphPatched = true;
|
||||
const original = app.graphToPrompt.bind(app);
|
||||
app.graphToPrompt = async function graphToPromptPatched(...args) {
|
||||
const result = await original(...args);
|
||||
injectState(result);
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
app.registerExtension({
|
||||
name: "Dumas.LoadImagesFolder",
|
||||
setup() {
|
||||
installGraphToPromptHook();
|
||||
},
|
||||
async beforeRegisterNodeDef(nodeType, nodeData) {
|
||||
if (nodeData?.name !== COMFY_CLASS) return;
|
||||
|
||||
const originalNodeCreated = nodeType.prototype.onNodeCreated;
|
||||
nodeType.prototype.onNodeCreated = function onNodeCreated() {
|
||||
const result = originalNodeCreated?.apply(this, arguments);
|
||||
setupNode(this);
|
||||
return result;
|
||||
};
|
||||
|
||||
const originalConfigure = nodeType.prototype.onConfigure;
|
||||
nodeType.prototype.onConfigure = function onConfigure() {
|
||||
const result = originalConfigure?.apply(this, arguments);
|
||||
stripInputs(this);
|
||||
queueMicrotask(() => refreshListing(this));
|
||||
return result;
|
||||
};
|
||||
|
||||
const originalDrawForeground = nodeType.prototype.onDrawForeground;
|
||||
nodeType.prototype.onDrawForeground = function onDrawForeground(ctx) {
|
||||
const result = originalDrawForeground?.call(this, ctx);
|
||||
this.size[0] = Math.max(this.size[0], MIN_W);
|
||||
return result;
|
||||
};
|
||||
|
||||
nodeType.prototype.onConnectInput = function onConnectInput() {
|
||||
return false;
|
||||
};
|
||||
|
||||
const originalRemoved = nodeType.prototype.onRemoved;
|
||||
nodeType.prototype.onRemoved = function onRemoved() {
|
||||
this._dlfGallery?._dlfClose?.();
|
||||
this._dlfBrowsePopup?._dlfClose?.();
|
||||
document.querySelectorAll(".dlf-menu").forEach((menu) => menu._dlfClose?.());
|
||||
return originalRemoved?.apply(this, arguments);
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
export const COMFY_CLASS = "DumasLoadImagesFolder";
|
||||
export const STATE_PROP = "loadImagesFolderState";
|
||||
export const HIDDEN_INPUT_NAME = "LoadImagesFolderState";
|
||||
|
||||
export const DEFAULT_STATE = {
|
||||
version: 1,
|
||||
folder: "",
|
||||
recursive: false,
|
||||
sort: "name",
|
||||
sort_dir: "asc",
|
||||
selected: [],
|
||||
selection_mode: "selected",
|
||||
first_n: 5,
|
||||
};
|
||||
|
||||
export function readState(node) {
|
||||
const value = node.properties?.[STATE_PROP];
|
||||
if (typeof value === "string" && value) {
|
||||
try {
|
||||
return { ...DEFAULT_STATE, ...JSON.parse(value) };
|
||||
} catch (_error) {
|
||||
return { ...DEFAULT_STATE };
|
||||
}
|
||||
}
|
||||
return { ...DEFAULT_STATE };
|
||||
}
|
||||
|
||||
export function writeState(node, state) {
|
||||
if (!node.properties) node.properties = {};
|
||||
node.properties[STATE_PROP] = JSON.stringify({ ...DEFAULT_STATE, ...(state || {}) });
|
||||
}
|
||||
|
||||
export function sortFiles(files, sort, dir) {
|
||||
const ordered = [...(files || [])];
|
||||
ordered.sort((a, b) => {
|
||||
if (sort === "date") {
|
||||
const delta = (a?.mtime || 0) - (b?.mtime || 0);
|
||||
if (delta !== 0) return dir === "desc" ? -delta : delta;
|
||||
}
|
||||
const delta = String(a?.file || "").localeCompare(String(b?.file || ""), undefined, {
|
||||
numeric: true,
|
||||
sensitivity: "base",
|
||||
});
|
||||
return dir === "desc" ? -delta : delta;
|
||||
});
|
||||
return ordered;
|
||||
}
|
||||
@@ -0,0 +1,415 @@
|
||||
import { browseFolder, thumbURL } from "./api.mjs";
|
||||
import { readState, sortFiles, writeState } from "./state.mjs";
|
||||
|
||||
const FOLDER_SVG =
|
||||
'<svg viewBox="0 0 64 64" aria-hidden="true"><path d="M52.291,56.817H5.626c-1.006,0-1.922-.594-2.5-1.323-.752-.949-.846-2.209-.483-3.372l7.293-23.34c.522-1.67,1.625-2.992,3.453-3.243h46.148c2.155.308,3.418,2.045,3.193,4.245l-7.097,23.693c-.491,1.64-1.523,2.993-3.343,3.341ZM50.726,14.308h-21.805c-.429-.181-.717-.689-.997-1.031l-3.967-4.843c-.559-.682-1.432-1.249-2.369-1.25H6.186c-1.185,0-2.24.531-3.095,1.272-1.098.952-1.545,2.24-1.818,3.706v31.447c1.841-5.514,3.332-10.857,5.103-16.241.459-1.396,1.126-2.594,2.154-3.621,1.355-1.054,2.862-2.056,4.685-2.057h42.426c.669-2.549-.634-7.369-4.914-7.382Z"/></svg>';
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value).replace(/[&<>"]/g, (char) => (
|
||||
{ "&": "&", "<": "<", ">": ">", '"': """ }[char]
|
||||
));
|
||||
}
|
||||
|
||||
export function injectCSS() {
|
||||
if (document.getElementById("dumas-lif-css")) return;
|
||||
const style = document.createElement("style");
|
||||
style.id = "dumas-lif-css";
|
||||
style.textContent = `
|
||||
.dlf-root { display:flex; flex-direction:column; gap:8px; padding:8px 10px; box-sizing:border-box; font-family:inherit; }
|
||||
.dlf-folderrow { display:flex; gap:6px; }
|
||||
.dlf-folder { flex:1; min-width:0; background:#141414; border:1px solid #3a3a3a; border-radius:5px; padding:7px 8px; color:#cfcfcf; font-size:11px; box-sizing:border-box; }
|
||||
.dlf-folder:focus { outline:none; border-color:#e66a2c; }
|
||||
.dlf-browse { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:5px; color:#ddd; font-size:11px; padding:0 9px; cursor:pointer; white-space:nowrap; }
|
||||
.dlf-browse:hover { border-color:#e66a2c; color:#fff; }
|
||||
.dlf-browse svg { width:13px; height:13px; fill:currentColor; }
|
||||
.dlf-pick { background:#e66a2c; border:1px solid #e66a2c; border-radius:6px; padding:8px; font-size:12px; color:#fff; text-align:center; font-weight:500; cursor:pointer; }
|
||||
.dlf-pick:hover { filter:brightness(1.08); }
|
||||
.dlf-pick.empty { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.16); color:#9a9a9a; }
|
||||
.dlf-msg { font-size:11px; color:#e0a33e; line-height:1.4; }
|
||||
.dlf-msg:empty { display:none; }
|
||||
.dlf-menu, .dlf-gallery, .dlf-browse-pop { position:fixed; z-index:99999; background:#191919; box-shadow:0 14px 40px rgba(0,0,0,0.6); }
|
||||
.dlf-menu { border:1px solid #3a3a3a; border-radius:6px; overflow:hidden; min-width:150px; }
|
||||
.dlf-menu .it { padding:7px 11px; font-size:12px; color:#cfcfcf; cursor:pointer; display:flex; justify-content:space-between; gap:14px; }
|
||||
.dlf-menu .it:hover { background:#2a2a2a; }
|
||||
.dlf-menu .it.on { color:#e66a2c; }
|
||||
.dlf-gallery, .dlf-browse-pop { border:1px solid #e66a2c; border-radius:9px; display:flex; flex-direction:column; }
|
||||
.dlf-gallery { max-height:80vh; }
|
||||
.dlf-gal-head { padding:9px 12px; border-bottom:1px solid #333; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
|
||||
.dlf-tbtn { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.16); border-radius:5px; padding:5px 10px; font-size:11px; color:#ddd; cursor:pointer; user-select:none; }
|
||||
.dlf-tbtn:hover { border-color:#e66a2c; color:#fff; }
|
||||
.dlf-tbtn.active { border-color:#e66a2c; color:#fff; background:rgba(230,106,44,0.18); }
|
||||
.dlf-firstwrap { display:flex; align-items:center; }
|
||||
.dlf-firstwrap .dlf-tbtn { border-radius:5px 0 0 5px; }
|
||||
.dlf-firstn { width:46px; background:#141414; border:1px solid rgba(255,255,255,0.16); border-left:none; border-radius:0 5px 5px 0; color:#e66a2c; font-size:11px; padding:5px 4px; text-align:center; box-sizing:border-box; }
|
||||
.dlf-firstn:focus { outline:none; border-color:#e66a2c; }
|
||||
.dlf-count { margin-left:auto; font-size:11px; color:#9a9a9a; white-space:nowrap; }
|
||||
.dlf-count b { color:#e66a2c; }
|
||||
.dlf-gal-body { padding:10px 12px; overflow:auto; }
|
||||
.dlf-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:7px; }
|
||||
.dlf-thumb { position:relative; aspect-ratio:1; border-radius:5px; border:2px solid transparent; cursor:pointer; overflow:hidden; background:#0f0f0f; }
|
||||
.dlf-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
|
||||
.dlf-thumb .veil { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
|
||||
.dlf-thumb.sel { border-color:#e66a2c; }
|
||||
.dlf-thumb.sel .veil { opacity:0; }
|
||||
.dlf-thumb .chk { position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; background:#e66a2c; color:#fff; font-size:11px; display:none; align-items:center; justify-content:center; }
|
||||
.dlf-thumb.sel .chk { display:flex; }
|
||||
.dlf-thumb .nm { position:absolute; bottom:0; left:0; right:0; padding:2px 4px; font-size:9px; color:#eee; background:linear-gradient(transparent, rgba(0,0,0,0.75)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
.dlf-gal-empty { padding:30px; text-align:center; color:#888; font-size:12px; grid-column:1/-1; }
|
||||
.dlf-gal-foot { padding:9px 12px; border-top:1px solid #333; display:flex; gap:10px; align-items:center; }
|
||||
.dlf-subf { display:flex; align-items:center; gap:6px; font-size:11px; color:#bbb; cursor:pointer; user-select:none; }
|
||||
.dlf-subf .box { width:12px; height:12px; border:1px solid #555; border-radius:3px; }
|
||||
.dlf-subf.on .box { background:#e66a2c; border-color:#e66a2c; }
|
||||
.dlf-done { margin-left:auto; background:#e66a2c; border:1px solid #e66a2c; border-radius:6px; padding:6px 16px; font-size:12px; color:#fff; cursor:pointer; }
|
||||
.dlf-done:hover { filter:brightness(1.08); }
|
||||
.dlf-bp-head { padding:9px 12px; border-bottom:1px solid #333; font-size:12px; color:#e66a2c; font-weight:600; }
|
||||
.dlf-bp-crumb { padding:7px 12px 4px; font-size:11px; color:#999; word-break:break-all; }
|
||||
.dlf-bp-list { padding:6px 10px 10px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
|
||||
.dlf-bp-item { display:flex; align-items:center; gap:8px; padding:7px 9px; background:#141414; border:1px solid #2c2c2c; border-radius:6px; cursor:pointer; font-size:12px; color:#ddd; }
|
||||
.dlf-bp-item:hover { border-color:#e66a2c; background:#1c1c1c; }
|
||||
.dlf-bp-item svg { width:13px; height:13px; fill:#e66a2c; flex:0 0 auto; }
|
||||
.dlf-bp-item .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.dlf-bp-item .cnt { color:#777; font-size:11px; white-space:nowrap; }
|
||||
.dlf-bp-item.up { color:#9a9a9a; }
|
||||
.dlf-bp-empty { padding:14px; text-align:center; color:#777; font-size:12px; }
|
||||
.dlf-bp-foot { padding:9px 12px; border-top:1px solid #333; display:flex; gap:8px; }
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function positionBelow(popup, anchorEl, width) {
|
||||
const rect = anchorEl.getBoundingClientRect();
|
||||
popup.style.width = `${width}px`;
|
||||
popup.style.left = `${Math.max(8, Math.min(rect.left, window.innerWidth - width - 8))}px`;
|
||||
popup.style.top = `${rect.bottom + 4}px`;
|
||||
requestAnimationFrame(() => {
|
||||
const popupRect = popup.getBoundingClientRect();
|
||||
if (popupRect.bottom > window.innerHeight - 8) {
|
||||
popup.style.top = `${Math.max(8, window.innerHeight - 8 - popupRect.height)}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function attachClosePopup(popup, onClose, ignoreSelector) {
|
||||
const close = () => {
|
||||
if (popup._dlfClosed) return;
|
||||
popup._dlfClosed = true;
|
||||
document.removeEventListener("mousedown", onDown, true);
|
||||
document.removeEventListener("pointerdown", onDown, true);
|
||||
document.removeEventListener("wheel", onWheel, true);
|
||||
document.removeEventListener("keydown", onKey, true);
|
||||
popup.remove();
|
||||
onClose?.();
|
||||
};
|
||||
const inside = (target) =>
|
||||
popup.contains(target) || (ignoreSelector && target.closest && target.closest(ignoreSelector));
|
||||
const onDown = (event) => { if (!inside(event.target)) close(); };
|
||||
const onWheel = (event) => { if (!inside(event.target)) close(); };
|
||||
const onKey = (event) => { if (event.key === "Escape") close(); };
|
||||
popup._dlfClose = close;
|
||||
setTimeout(() => {
|
||||
if (popup._dlfClosed) return;
|
||||
document.addEventListener("mousedown", onDown, true);
|
||||
document.addEventListener("pointerdown", onDown, true);
|
||||
document.addEventListener("wheel", onWheel, true);
|
||||
document.addEventListener("keydown", onKey, true);
|
||||
}, 0);
|
||||
return close;
|
||||
}
|
||||
|
||||
export function openMiniMenu(anchorEl, items, currentValue, onPick) {
|
||||
document.querySelectorAll(".dlf-menu").forEach((menu) => menu._dlfClose?.());
|
||||
const menu = document.createElement("div");
|
||||
menu.className = "dlf-menu";
|
||||
for (const item of items) {
|
||||
const row = document.createElement("div");
|
||||
row.className = `it${item.value === currentValue ? " on" : ""}`;
|
||||
row.innerHTML = `<span>${escapeHtml(item.label)}</span>`;
|
||||
row.addEventListener("click", () => {
|
||||
menu._dlfClose?.();
|
||||
onPick(item.value);
|
||||
});
|
||||
menu.appendChild(row);
|
||||
}
|
||||
document.body.appendChild(menu);
|
||||
positionBelow(menu, anchorEl, Math.max(150, anchorEl.getBoundingClientRect().width));
|
||||
attachClosePopup(menu);
|
||||
}
|
||||
|
||||
export function buildRoot() {
|
||||
const root = document.createElement("div");
|
||||
root.className = "dlf-root";
|
||||
root.innerHTML =
|
||||
`<div class="dlf-folderrow">` +
|
||||
`<input class="dlf-folder" type="text" spellcheck="false" placeholder="Folder path - type, paste, or Browse">` +
|
||||
`<button class="dlf-browse" type="button" title="Browse for a folder">${FOLDER_SVG}<span class="dlf-browse-lbl">Browse</span></button>` +
|
||||
`</div>` +
|
||||
`<button class="dlf-pick empty" type="button" title="Choose which images to load">Pick images · 0 / 0</button>` +
|
||||
`<div class="dlf-msg"></div>`;
|
||||
return {
|
||||
root,
|
||||
folderInput: root.querySelector(".dlf-folder"),
|
||||
browseBtn: root.querySelector(".dlf-browse"),
|
||||
browseLbl: root.querySelector(".dlf-browse-lbl"),
|
||||
pickBtn: root.querySelector(".dlf-pick"),
|
||||
msgEl: root.querySelector(".dlf-msg"),
|
||||
};
|
||||
}
|
||||
|
||||
const SORTS = [
|
||||
{ value: "name|asc", label: "Name ↑" },
|
||||
{ value: "name|desc", label: "Name ↓" },
|
||||
{ value: "date|asc", label: "Date ↑" },
|
||||
{ value: "date|desc", label: "Date ↓" },
|
||||
];
|
||||
|
||||
function randomPreviewFile(files) {
|
||||
if (!files.length) return "";
|
||||
return files[Math.floor(Math.random() * files.length)]?.file || "";
|
||||
}
|
||||
|
||||
export function openPickGallery(node, anchorEl, ctx) {
|
||||
document.querySelectorAll(".dlf-gallery").forEach((gallery) => gallery._dlfClose?.());
|
||||
const gallery = document.createElement("div");
|
||||
gallery.className = "dlf-gallery";
|
||||
gallery.innerHTML =
|
||||
`<div class="dlf-gal-head">` +
|
||||
`<div class="dlf-tbtn" data-act="all" title="Select every image in this folder">Select all</div>` +
|
||||
`<div class="dlf-tbtn" data-act="none" title="Deselect all">None</div>` +
|
||||
`<div class="dlf-firstwrap"><div class="dlf-tbtn" data-act="first" title="Select the first N images">First</div>` +
|
||||
`<input class="dlf-firstn" type="number" min="1" value="5" title="How many images First selects"></div>` +
|
||||
`<div class="dlf-tbtn" data-act="random" title="Pick one random image each run">Select random</div>` +
|
||||
`<div class="dlf-count"><b class="dlf-cn">0</b> / <span class="dlf-ct">0</span> active</div>` +
|
||||
`</div>` +
|
||||
`<div class="dlf-gal-body"><div class="dlf-grid"></div></div>` +
|
||||
`<div class="dlf-gal-foot">` +
|
||||
`<div class="dlf-subf" title="Also include images inside sub-folders"><span class="box"></span> Include subfolders</div>` +
|
||||
`<div class="dlf-tbtn" data-act="sort" title="Change the sort order">Sort: Name ↑</div>` +
|
||||
`<div class="dlf-done" data-act="done" title="Apply this selection and close">Done</div>` +
|
||||
`</div>`;
|
||||
document.body.appendChild(gallery);
|
||||
|
||||
const grid = gallery.querySelector(".dlf-grid");
|
||||
const countCurrent = gallery.querySelector(".dlf-cn");
|
||||
const countTotal = gallery.querySelector(".dlf-ct");
|
||||
const firstInput = gallery.querySelector(".dlf-firstn");
|
||||
const recursiveToggle = gallery.querySelector(".dlf-subf");
|
||||
const sortButton = gallery.querySelector('[data-act="sort"]');
|
||||
const randomButton = gallery.querySelector('[data-act="random"]');
|
||||
const allButton = gallery.querySelector('[data-act="all"]');
|
||||
const firstButton = gallery.querySelector('[data-act="first"]');
|
||||
|
||||
let state = readState(node);
|
||||
const manualSelection = new Set(state.selected || []);
|
||||
let randomPreview = "";
|
||||
|
||||
function activeFiles() {
|
||||
const files = sortFiles(node._dlfFiles || [], state.sort, state.sort_dir);
|
||||
if (state.selection_mode === "all") return new Set(files.map((file) => file.file));
|
||||
if (state.selection_mode === "first_n") {
|
||||
const count = Math.max(0, Math.min(parseInt(state.first_n, 10) || 0, files.length));
|
||||
return new Set(files.slice(0, count).map((file) => file.file));
|
||||
}
|
||||
if (state.selection_mode === "random") {
|
||||
if (!randomPreview || !files.some((file) => file.file === randomPreview)) {
|
||||
randomPreview = randomPreviewFile(files);
|
||||
}
|
||||
return randomPreview ? new Set([randomPreview]) : new Set();
|
||||
}
|
||||
return manualSelection;
|
||||
}
|
||||
|
||||
function commit() {
|
||||
const fresh = readState(node);
|
||||
fresh.selected = [...manualSelection];
|
||||
fresh.sort = state.sort;
|
||||
fresh.sort_dir = state.sort_dir;
|
||||
fresh.recursive = state.recursive;
|
||||
fresh.selection_mode = state.selection_mode;
|
||||
fresh.first_n = Math.max(1, parseInt(firstInput.value, 10) || 1);
|
||||
writeState(node, fresh);
|
||||
state = fresh;
|
||||
ctx.onChange?.(node);
|
||||
}
|
||||
|
||||
function renderGrid() {
|
||||
grid.innerHTML = "";
|
||||
const files = sortFiles(node._dlfFiles || [], state.sort, state.sort_dir);
|
||||
const active = activeFiles();
|
||||
sortButton.textContent = `Sort: ${SORTS.find((item) => item.value === `${state.sort}|${state.sort_dir}`)?.label || "Name ↑"}`;
|
||||
recursiveToggle.classList.toggle("on", !!state.recursive);
|
||||
allButton.classList.toggle("active", state.selection_mode === "all");
|
||||
firstButton.classList.toggle("active", state.selection_mode === "first_n");
|
||||
randomButton.classList.toggle("active", state.selection_mode === "random");
|
||||
countCurrent.textContent = active.size;
|
||||
countTotal.textContent = files.length;
|
||||
firstInput.value = String(Math.max(1, parseInt(state.first_n, 10) || 1));
|
||||
firstInput.max = String(files.length || 1);
|
||||
|
||||
if (!files.length) {
|
||||
const empty = document.createElement("div");
|
||||
empty.className = "dlf-gal-empty";
|
||||
empty.textContent = node._dlfListError || "No images in this folder.";
|
||||
grid.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const file of files) {
|
||||
const cell = document.createElement("div");
|
||||
cell.className = `dlf-thumb${active.has(file.file) ? " sel" : ""}`;
|
||||
cell.innerHTML =
|
||||
`<img loading="lazy" src="${thumbURL(state.folder, file.file, file.mtime)}" onerror="this.style.display='none'">` +
|
||||
`<div class="veil"></div><div class="chk">✓</div>` +
|
||||
`<div class="nm">${escapeHtml(file.name)}</div>`;
|
||||
cell.addEventListener("click", () => {
|
||||
state.selection_mode = "selected";
|
||||
randomPreview = "";
|
||||
if (manualSelection.has(file.file)) manualSelection.delete(file.file);
|
||||
else manualSelection.add(file.file);
|
||||
commit();
|
||||
renderGrid();
|
||||
});
|
||||
grid.appendChild(cell);
|
||||
}
|
||||
}
|
||||
|
||||
gallery.querySelector('[data-act="all"]').addEventListener("click", () => {
|
||||
state.selection_mode = "all";
|
||||
randomPreview = "";
|
||||
commit();
|
||||
renderGrid();
|
||||
});
|
||||
gallery.querySelector('[data-act="none"]').addEventListener("click", () => {
|
||||
state.selection_mode = "selected";
|
||||
manualSelection.clear();
|
||||
randomPreview = "";
|
||||
commit();
|
||||
renderGrid();
|
||||
});
|
||||
gallery.querySelector('[data-act="first"]').addEventListener("click", () => {
|
||||
state.selection_mode = "first_n";
|
||||
randomPreview = "";
|
||||
commit();
|
||||
renderGrid();
|
||||
});
|
||||
gallery.querySelector('[data-act="random"]').addEventListener("click", () => {
|
||||
state.selection_mode = "random";
|
||||
randomPreview = randomPreviewFile(sortFiles(node._dlfFiles || [], state.sort, state.sort_dir));
|
||||
commit();
|
||||
renderGrid();
|
||||
});
|
||||
firstInput.addEventListener("input", () => {
|
||||
if (state.selection_mode !== "first_n") return;
|
||||
commit();
|
||||
renderGrid();
|
||||
});
|
||||
firstInput.addEventListener("keydown", (event) => {
|
||||
event.stopImmediatePropagation();
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
commit();
|
||||
renderGrid();
|
||||
}
|
||||
});
|
||||
sortButton.addEventListener("click", () => {
|
||||
openMiniMenu(sortButton, SORTS, `${state.sort}|${state.sort_dir}`, (value) => {
|
||||
const [sort, sortDir] = value.split("|");
|
||||
state.sort = sort;
|
||||
state.sort_dir = sortDir;
|
||||
if (state.selection_mode === "random") {
|
||||
randomPreview = randomPreviewFile(sortFiles(node._dlfFiles || [], state.sort, state.sort_dir));
|
||||
}
|
||||
commit();
|
||||
renderGrid();
|
||||
});
|
||||
});
|
||||
recursiveToggle.addEventListener("click", async () => {
|
||||
state.recursive = !state.recursive;
|
||||
writeState(node, state);
|
||||
grid.innerHTML = '<div class="dlf-gal-empty">Loading…</div>';
|
||||
await ctx.refreshListing(node);
|
||||
if (gallery._dlfClosed) return;
|
||||
state = readState(node);
|
||||
manualSelection.clear();
|
||||
(state.selected || []).forEach((file) => manualSelection.add(file));
|
||||
randomPreview = "";
|
||||
renderGrid();
|
||||
});
|
||||
gallery.querySelector('[data-act="done"]').addEventListener("click", () => gallery._dlfClose?.());
|
||||
|
||||
node._dlfGallery = gallery;
|
||||
attachClosePopup(gallery, () => {
|
||||
document.querySelectorAll(".dlf-menu").forEach((menu) => menu._dlfClose?.());
|
||||
if (node._dlfGallery === gallery) node._dlfGallery = null;
|
||||
}, ".dlf-menu");
|
||||
positionBelow(gallery, anchorEl, Math.min(560, window.innerWidth - 16));
|
||||
renderGrid();
|
||||
}
|
||||
|
||||
export function openBrowsePopup(node, anchorEl, ctx) {
|
||||
document.querySelectorAll(".dlf-browse-pop").forEach((popup) => popup._dlfClose?.());
|
||||
const popup = document.createElement("div");
|
||||
popup.className = "dlf-browse-pop";
|
||||
popup.innerHTML =
|
||||
`<div class="dlf-bp-head">Choose a folder</div>` +
|
||||
`<div class="dlf-bp-crumb"></div>` +
|
||||
`<div class="dlf-bp-list"></div>` +
|
||||
`<div class="dlf-bp-foot">` +
|
||||
`<div class="dlf-tbtn" data-act="cancel">Cancel</div>` +
|
||||
`<div class="dlf-done" data-act="use">Use this folder</div>` +
|
||||
`</div>`;
|
||||
document.body.appendChild(popup);
|
||||
|
||||
const crumb = popup.querySelector(".dlf-bp-crumb");
|
||||
const list = popup.querySelector(".dlf-bp-list");
|
||||
const useButton = popup.querySelector('[data-act="use"]');
|
||||
let current = ctx.startPath || "";
|
||||
|
||||
async function nav(path) {
|
||||
list.innerHTML = '<div class="dlf-bp-empty">Loading…</div>';
|
||||
const response = await browseFolder(path);
|
||||
if (popup._dlfClosed) return;
|
||||
if (!response.ok) {
|
||||
list.innerHTML = `<div class="dlf-bp-empty">${escapeHtml(response.message || "Could not open this folder.")}</div>`;
|
||||
return;
|
||||
}
|
||||
current = response.path || "";
|
||||
useButton.style.opacity = current ? "" : "0.4";
|
||||
useButton.style.pointerEvents = current ? "" : "none";
|
||||
crumb.innerHTML = current ? `Location: <b style="color:#ddd">${escapeHtml(current)}</b>` : "This PC";
|
||||
list.innerHTML = "";
|
||||
if (response.parent !== null && response.parent !== undefined) {
|
||||
const up = document.createElement("div");
|
||||
up.className = "dlf-bp-item up";
|
||||
up.innerHTML = '<span style="width:13px;text-align:center;flex:0 0 auto">↰</span> <span class="nm">.. (up one level)</span>';
|
||||
up.addEventListener("click", () => nav(response.parent || ""));
|
||||
list.appendChild(up);
|
||||
}
|
||||
if (!response.dirs.length) {
|
||||
const empty = document.createElement("div");
|
||||
empty.className = "dlf-bp-empty";
|
||||
empty.textContent = current ? "No sub-folders here. Use this folder." : "No drives found.";
|
||||
list.appendChild(empty);
|
||||
}
|
||||
for (const dir of response.dirs) {
|
||||
const item = document.createElement("div");
|
||||
item.className = "dlf-bp-item";
|
||||
const count = dir.images >= 0 ? `<span class="cnt">${dir.images} image${dir.images === 1 ? "" : "s"}</span>` : "";
|
||||
item.innerHTML = `${FOLDER_SVG}<span class="nm">${escapeHtml(dir.name)}</span>${count}`;
|
||||
item.addEventListener("click", () => nav(dir.path));
|
||||
list.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
popup.querySelector('[data-act="cancel"]').addEventListener("click", () => popup._dlfClose?.());
|
||||
popup.querySelector('[data-act="use"]').addEventListener("click", () => {
|
||||
if (current) ctx.onPick(current);
|
||||
popup._dlfClose?.();
|
||||
});
|
||||
|
||||
node._dlfBrowsePopup = popup;
|
||||
attachClosePopup(popup, () => {
|
||||
if (node._dlfBrowsePopup === popup) node._dlfBrowsePopup = null;
|
||||
});
|
||||
positionBelow(popup, anchorEl, Math.min(440, window.innerWidth - 16));
|
||||
nav(current);
|
||||
}
|
||||
Reference in New Issue
Block a user