mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-08-10 15:21:22 +02:00
Pontoporeia
ec9c140ba2
Switch from swapping the entire #repertoire-index block to targeted hx-swap-oob swaps: only the <ul> list elements are replaced, while section headers and accordion chrome stay in the DOM untouched. - Filter column <ul>s get IDs (rep-list-years, rep-list-ap, etc.) and render with hx-swap-oob=true on HTMX requests - Students <ul> gets id=rep-students as main swap target - Filter buttons now target #rep-students instead of #repertoire-index - Server sets $isOob=true when rendering HTMX partial responses - Accordion re-init on swap no longer needed (headers never replaced) - Scroll-restore updated to capture/restore per <ul> ID Fading fixes: - Restore rep-entry--faded class with simplified logic: any active filter fades entries whose matched flag is false (removed the $colHasMatch gate that prevented fading when a column had no matches) - Add $noResults guard: when matched_ids is empty (zero theses match all active filters), force-fade all non-selected entries across ALL columns. This covers the keyword edge case where per-column matched is computed excluding the keyword filter (many-to-many), causing keywords to appear valid even though the full intersection is empty.
50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
/**
|
|
* repertoire-scroll-restore.js — Preserve column scroll positions on HTMX OOB swap.
|
|
*
|
|
* Filter clicks trigger HTMX requests that swap individual <ul> elements via
|
|
* hx-swap-oob. This module captures scrollTop of all rep-list-* <ul>s and the
|
|
* students <ul> before the request and restores them after the response settles.
|
|
*/
|
|
(() => {
|
|
var LIST_SEL = "ul[id^='rep-list-'], ul#rep-students";
|
|
var scrollSnapshots = {};
|
|
|
|
function snapshot() {
|
|
scrollSnapshots = {};
|
|
document.querySelectorAll(LIST_SEL).forEach((ul) => {
|
|
scrollSnapshots[ul.id] = ul.scrollTop;
|
|
});
|
|
}
|
|
|
|
function restore() {
|
|
document.querySelectorAll(LIST_SEL).forEach((ul) => {
|
|
if (scrollSnapshots[ul.id] !== undefined) {
|
|
ul.scrollTop = scrollSnapshots[ul.id];
|
|
}
|
|
});
|
|
}
|
|
|
|
// Capture before any HTMX request targeting rep-students
|
|
document.body.addEventListener("htmx:beforeRequest", (e) => {
|
|
if (e.detail.target?.id === "rep-students") {
|
|
snapshot();
|
|
}
|
|
});
|
|
|
|
// Restore after the response has settled into the DOM
|
|
document.body.addEventListener("htmx:afterSettle", (e) => {
|
|
if (e.detail.target?.id === "rep-students") {
|
|
requestAnimationFrame(() => {
|
|
restore();
|
|
});
|
|
}
|
|
});
|
|
|
|
// Also restore on history navigation (browser back/forward)
|
|
document.body.addEventListener("htmx:historyRestore", () => {
|
|
requestAnimationFrame(() => {
|
|
restore();
|
|
});
|
|
});
|
|
})();
|