gru/RustProxy
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.33.3

Browse Source
This commit is contained in:
Mateusz Gruszczyński committed 2026-10-15 13:00:44 +02:00
1 parent 5a36bb0c4b
commit 78ad28ef4d
27 files changed
+1448 -234
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/admin/web/app/dashboard-inline-layout.js
+55 -18
View File
@@ -15,14 +15,20 @@ window.rustProxyInlineLayout = (() => {
let opening = false;
let saving = false;
const groupFor = id => window.rustProxyMasonry?.groupFor?.(id) ?? 0;
const visibleIds = () => draft.order.filter(id => !draft.hidden.has(id))
.sort((a, b) => groupFor(a) - groupFor(b));
const visibleIds = () => dashboardVisualOrder(draft.order, draft.sizes)
.filter(id => !draft.hidden.has(id));
function enterFreeLayout() {
if (draft.sizes === null) {
draft.order = dashboardVisualOrder(draft.order, null);
draft.sizes = {};
}
}
const nodes = () => [...grid.children].filter(node => node.dataset.dashboardWidget);
const nodeFor = id => nodes().find(node => node.dataset.dashboardWidget === id);
const label = id => dashboardWidgetLabel(id);
const dirty = () => draft && original && (draft.order.some((id, i) => id !== original.order[i])
|| [...draft.hidden].some(id => !original.hidden.has(id)) || [...original.hidden].some(id => !draft.hidden.has(id)));
|| [...draft.hidden].some(id => !original.hidden.has(id)) || [...original.hidden].some(id => !draft.hidden.has(id))
|| JSON.stringify(draft.sizes) !== JSON.stringify(original.sizes));
function renderHidden() {
if (!hiddenList || !draft) return;
@@ -46,16 +52,24 @@ window.rustProxyInlineLayout = (() => {
if (hiddenShelf) { hiddenShelf.open = true; hiddenShelf.querySelector("summary")?.focus(); }
}
function paint() {
applyDashboardLayout(draft.order, [...draft.hidden]);
applyDashboardLayout(draft.order, [...draft.hidden], draft.sizes);
renderHidden();
const visible = visibleIds();
for (const node of nodes()) {
const i = visible.indexOf(node.dataset.dashboardWidget);
const up = node.querySelector(".overview-inline-up");
const down = node.querySelector(".overview-inline-down");
if (up) up.disabled = i <= 0 || groupFor(visible[i - 1]) !== groupFor(node.dataset.dashboardWidget);
if (down) down.disabled = i < 0 || i === visible.length - 1 ||
groupFor(visible[i + 1]) !== groupFor(node.dataset.dashboardWidget);
if (up) up.disabled = i <= 0;
if (down) down.disabled = i < 0 || i === visible.length - 1;
const widths = dashboardAllowedWidths(node.dataset.dashboardWidget);
const span = dashboardWidgetWidth(node.dataset.dashboardWidget, draft.sizes);
const at = widths.indexOf(span);
const value = node.querySelector(".overview-inline-width-value");
if (value) value.textContent = `${span}/12`;
const narrow = node.querySelector(".overview-inline-narrow");
const widen = node.querySelector(".overview-inline-widen");
if (narrow) narrow.disabled = at <= 0;
if (widen) widen.disabled = at === widths.length - 1;
}
}
function clearDrag() {
@@ -63,19 +77,31 @@ window.rustProxyInlineLayout = (() => {
for (const node of nodes()) node.classList.remove("is-overview-dragging", "is-overview-drop-before", "is-overview-drop-after");
}
function move(id, target, after = false) {
if (!draft || id === target || groupFor(id) !== groupFor(target)) return;
if (!draft || id === target) return;
if (!visibleIds().includes(id) || !visibleIds().includes(target)) return;
enterFreeLayout();
const visible = visibleIds();
if (!visible.includes(id) || !visible.includes(target)) return;
visible.splice(visible.indexOf(id), 1);
visible.splice(visible.indexOf(target) + (after ? 1 : 0), 0, id);
const iter = visible.values();
draft.order = draft.order.map(item => draft.hidden.has(item) ? item : iter.next().value);
paint();
}
function resize(id, delta) {
if (!draft) return;
const widths = dashboardAllowedWidths(id);
const next = widths[widths.indexOf(dashboardWidgetWidth(id, draft.sizes)) + delta];
if (next === undefined) return;
enterFreeLayout();
if (next === dashboardDefaultWidth(id)) delete draft.sizes[id];
else draft.sizes[id] = next;
paint();
nodeFor(id)?.querySelector(delta < 0 ? ".overview-inline-narrow" : ".overview-inline-widen")?.focus();
}
function nudge(id, delta) {
const visible = visibleIds();
const index = visible.indexOf(id), target = visible[index + delta];
if (!target || groupFor(id) !== groupFor(target)) return;
if (!target) return;
move(id, target, delta > 0);
nodeFor(id)?.querySelector(delta < 0 ? ".overview-inline-up" : ".overview-inline-down")?.focus();
}
@@ -94,7 +120,14 @@ window.rustProxyInlineLayout = (() => {
const grip = control("⠿", `${t("overviewLayoutInlineDrag")}: ${title}`, "overview-inline-grip", () => { });
grip.draggable = true;
grip.dataset.overviewDragHandle = id;
bar.append(grip, dashboardWidgetTypeBadge(id),
const sizeControls = el("span", undefined, "overview-inline-width");
const widthValue = el("span", "", "overview-inline-width-value");
widthValue.setAttribute("aria-label", t("overviewLayoutWidth"));
sizeControls.append(
control("−", `${t("overviewLayoutNarrow")}: ${title}`, "overview-inline-narrow", () => resize(id, -1)),
widthValue,
control("+", `${t("overviewLayoutWiden")}: ${title}`, "overview-inline-widen", () => resize(id, 1)));
bar.append(grip, dashboardWidgetTypeBadge(id), sizeControls,
control("←", `${t("moveUp")}: ${title}`, "overview-inline-up", () => nudge(id, -1)),
control("→", `${t("moveDown")}: ${title}`, "overview-inline-down", () => nudge(id, 1)),
control("×", `${t("overviewLayoutInlineHide")}: ${title}`, "overview-inline-hide", () => hide(id)));
@@ -125,7 +158,7 @@ window.rustProxyInlineLayout = (() => {
if (hiddenShelf) { hiddenShelf.open = false; hiddenShelf.hidden = true; }
if (hiddenList) hiddenList.replaceChildren();
if (modalButton) modalButton.disabled = false;
if (!preserveSaved && original) applyDashboardLayout(original.order, [...original.hidden]);
if (!preserveSaved && original) applyDashboardLayout(original.order, [...original.hidden], original.sizes);
draft = original = null;
}
async function begin() {
@@ -137,8 +170,9 @@ window.rustProxyInlineLayout = (() => {
const saved = window.rustProxyPreferences?.current?.() || ADMIN_APPEARANCE_DEFAULTS;
const order = normalizeDashboardWidgets(saved.dashboard_widgets);
const hidden = new Set(normalizeHiddenDashboardWidgets(saved.dashboard_hidden_widgets, saved.dashboard_widgets));
original = { order: [...order], hidden: new Set(hidden) };
draft = { order: [...order], hidden: new Set(hidden) };
const sizes = normalizeDashboardWidgetSizes(saved.dashboard_widget_sizes);
original = { order: [...order], hidden: new Set(hidden), sizes: sizes === null ? null : { ...sizes } };
draft = { order: [...order], hidden: new Set(hidden), sizes: sizes === null ? null : { ...sizes } };
showEditing();
} catch (error) { if (error?.status !== 401) toast(error.message, true); }
finally { opening = false; unlock.disabled = false; }
@@ -151,6 +185,7 @@ window.rustProxyInlineLayout = (() => {
try {
await window.rustProxyPreferences.update({
dashboard_widgets: [...draft.order], dashboard_hidden_widgets: [...draft.hidden],
dashboard_widget_sizes: draft.sizes === null ? null : { ...draft.sizes },
});
finish(true);
toast(t("overviewLayoutEditorSaved"));
@@ -177,8 +212,7 @@ window.rustProxyInlineLayout = (() => {
grid?.addEventListener("dragover", event => {
if (!draft || !dragging) return;
const target = dropTarget(event);
if (!target || target.dataset.dashboardWidget === dragging ||
groupFor(target.dataset.dashboardWidget) !== groupFor(dragging)) return;
if (!target || target.dataset.dashboardWidget === dragging) return;
event.preventDefault();
for (const node of nodes()) node.classList.remove("is-overview-drop-before", "is-overview-drop-after");
target.classList.add(positionAfter(target, event) ? "is-overview-drop-after" : "is-overview-drop-before");
@@ -198,7 +232,10 @@ window.rustProxyInlineLayout = (() => {
cancelButton?.addEventListener("click", cancel);
return {
isEditing: () => !!draft,
currentDraft: () => draft ? { order: [...draft.order], hidden: [...draft.hidden] } : null,
currentDraft: () => draft ? {
order: [...draft.order], hidden: [...draft.hidden],
sizes: draft.sizes === null ? null : { ...draft.sizes },
} : null,
cancel,
};
})();