diff --git a/src/assets/table_hscroll.js b/src/assets/table_hscroll.js index b02e438..3285316 100644 --- a/src/assets/table_hscroll.js +++ b/src/assets/table_hscroll.js @@ -19,15 +19,22 @@ bar.appendChild(thumb); wrapper.insertBefore(bar, wrapper.firstChild); - // --- Métriques communes --- + // Étend la barre à toute la largeur du viewport, hors du container Bootstrap. + // wrapper.getBoundingClientRect().left donne le décalage horizontal du conteneur. + const adjustBarWidth = () => { + const left = wrapper.getBoundingClientRect().left; + bar.style.marginLeft = -left + "px"; + bar.style.width = window.innerWidth + "px"; + }; + + // Métriques basées sur window.innerWidth (la barre occupe exactement la largeur du viewport). const metrics = () => { const total = document.documentElement.scrollWidth; const visible = window.innerWidth; - const trackW = bar.clientWidth; - const thumbW = Math.max(40, (visible / total) * trackW); + const thumbW = Math.max(40, (visible / total) * visible); const scrollRange = total - visible; - const thumbRange = trackW - thumbW; - return { total, visible, trackW, thumbW, scrollRange, thumbRange }; + const thumbRange = visible - thumbW; + return { total, visible, thumbW, scrollRange, thumbRange }; }; // --- Mise à jour de la position du thumb --- @@ -91,22 +98,31 @@ // Clic sur le track (hors thumb) : saute à la position cliquée. bar.addEventListener("click", (e) => { if (e.target === thumb) return; - const rect = bar.getBoundingClientRect(); const { scrollRange, thumbW, thumbRange } = metrics(); const fraction = Math.max( 0, - Math.min(1, (e.clientX - rect.left - thumbW / 2) / thumbRange) + Math.min( + 1, + (e.clientX - bar.getBoundingClientRect().left - thumbW / 2) / + thumbRange + ) ); window.scrollTo(fraction * scrollRange, window.scrollY); }); - // Synchronise le thumb quand la page défile (via clavier, molette, etc.). + // Synchronise le thumb quand la page défile (clavier, molette, barre native, etc.). // SPA : ce listener est intentionnellement conservé pour toute la durée de vie de la page. window.addEventListener("scroll", syncThumb); const refresh = () => { - const { total, visible } = metrics(); - const hasOverflow = total > visible + 1; + adjustBarWidth(); + // Mesure la largeur réelle de CETTE table (pas de la page entière) pour + // ne pas afficher la barre sur les petits tableaux d'une page qui a aussi + // un grand tableau (ex. top10 sur /acheteur, /titulaire, /observatoire). + const tableEl = + dashContainer.querySelector(".cell-table") || dashContainer; + const tableWidth = tableEl.getBoundingClientRect().width; + const hasOverflow = tableWidth > window.innerWidth + 1; bar.classList.toggle("is-hidden", !hasOverflow); if (hasOverflow) syncThumb(); }; @@ -119,7 +135,10 @@ attributes: true, }); // SPA : ce listener est intentionnellement conservé pour toute la durée de vie de la page. - window.addEventListener("resize", refresh); + window.addEventListener("resize", () => { + adjustBarWidth(); + refresh(); + }); refresh(); }