64 lines
2.4 KiB
JavaScript
64 lines
2.4 KiB
JavaScript
// static/js/ui.js
|
|
(() => {
|
|
const docEl = document.documentElement;
|
|
|
|
// ---- THEME ----
|
|
const THEME_KEY = "pve-ui-theme";
|
|
const storedTheme = localStorage.getItem(THEME_KEY);
|
|
if (storedTheme === "light" || storedTheme === "dark") {
|
|
docEl.setAttribute("data-bs-theme", storedTheme);
|
|
}
|
|
|
|
const btnTheme = document.getElementById("btnTheme");
|
|
if (btnTheme) {
|
|
btnTheme.addEventListener("click", () => {
|
|
const current = docEl.getAttribute("data-bs-theme") === "light" ? "dark" : "light";
|
|
docEl.setAttribute("data-bs-theme", current);
|
|
localStorage.setItem(THEME_KEY, current);
|
|
btnTheme.innerHTML = current === "dark"
|
|
? '<i class="bi bi-moon-stars"></i> Theme'
|
|
: '<i class="bi bi-sun"></i> Theme';
|
|
});
|
|
}
|
|
|
|
// ---- DENSITY ----
|
|
const DENSITY_KEY = "pve-ui-density";
|
|
const storedDensity = localStorage.getItem(DENSITY_KEY);
|
|
if (storedDensity === "compact") {
|
|
docEl.setAttribute("data-density", "compact");
|
|
}
|
|
|
|
const btnDensity = document.getElementById("btnDensity");
|
|
if (btnDensity) {
|
|
btnDensity.addEventListener("click", () => {
|
|
const isCompact = docEl.getAttribute("data-density") === "compact";
|
|
if (isCompact) {
|
|
docEl.removeAttribute("data-density");
|
|
localStorage.setItem(DENSITY_KEY, "normal");
|
|
} else {
|
|
docEl.setAttribute("data-density", "compact");
|
|
localStorage.setItem(DENSITY_KEY, "compact");
|
|
}
|
|
});
|
|
}
|
|
|
|
// ---- PRE blocks: keep nicely scrollable ----
|
|
const pres = document.querySelectorAll("pre.pre-scrollable");
|
|
pres.forEach((p) => {
|
|
p.style.maxHeight = "40vh";
|
|
p.style.overflow = "auto";
|
|
});
|
|
|
|
// Optional: subtle overflow shadows for horizontally scrollable areas
|
|
const scrollables = document.querySelectorAll(".table-responsive, .overflow-auto");
|
|
scrollables.forEach((el) => {
|
|
el.addEventListener("scroll", () => {
|
|
// Add classes for left/right shadow indicators
|
|
const atStart = el.scrollLeft <= 0;
|
|
const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
|
|
el.classList.toggle("is-scrolled-start", !atStart);
|
|
el.classList.toggle("is-scrolled-end", !atEnd);
|
|
});
|
|
});
|
|
})();
|