PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-08-10 15:21:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

repertoire: HTMX OOB swaps for filter columns + fix fading edge cases

Browse Source 
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.
This commit is contained in:
Pontoporeia
2026-07-10 12:59:12 +02:00
parent f86deaf02f
commit ec9c140ba2
4 changed files with 113 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/assets/js/app/repertoire-scroll-restore.js
+16 -29
View File
@@ -1,52 +1,39 @@
/**
* repertoire-scroll-restore.js — Preserve column scroll positions on HTMX swap.
* repertoire-scroll-restore.js — Preserve column scroll positions on HTMX OOB swap.
*
* When a filter button triggers an HTMX swap that replaces #repertoire-index,
* the new markup replaces the old, resetting all column scroll positions to 0.
* This module captures scrollTop of each scrollable <ul> before the swap and
* restores it after, keyed by data-col attribute so the mapping survives
* DOM replacement.
* 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 INDEX_SEL = "#repertoire-index";
var LIST_SEL = "ul[id^='rep-list-'], ul#rep-students";
var scrollSnapshots = {};
function snapshot() {
var index = document.querySelector(INDEX_SEL);
if (!index) return;
scrollSnapshots = {};
index.querySelectorAll(".repertoire-col[data-col] > ul").forEach((ul) => {
var col = ul.closest(".repertoire-col");
if (!col) return;
var key = col.getAttribute("data-col");
scrollSnapshots[key] = ul.scrollTop;
document.querySelectorAll(LIST_SEL).forEach((ul) => {
scrollSnapshots[ul.id] = ul.scrollTop;
});
}
function restore() {
var index = document.querySelector(INDEX_SEL);
if (!index) return;
index.querySelectorAll(".repertoire-col[data-col] > ul").forEach((ul) => {
var col = ul.closest(".repertoire-col");
if (!col) return;
var key = col.getAttribute("data-col");
if (scrollSnapshots[key] !== undefined) {
ul.scrollTop = scrollSnapshots[key];
document.querySelectorAll(LIST_SEL).forEach((ul) => {
if (scrollSnapshots[ul.id] !== undefined) {
ul.scrollTop = scrollSnapshots[ul.id];
}
});
}
// Capture scroll positions before the outgoing element is replaced
document.body.addEventListener("htmx:beforeSwap", (e) => {
if (e.detail.target?.matches?.(INDEX_SEL)) {
// 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 new content is in the DOM
document.body.addEventListener("htmx:afterSwap", (e) => {
if (e.detail.target?.matches?.(INDEX_SEL)) {
// Use requestAnimationFrame to ensure layout has settled
// Restore after the response has settled into the DOM
document.body.addEventListener("htmx:afterSettle", (e) => {
if (e.detail.target?.id === "rep-students") {
requestAnimationFrame(() => {
restore();
});