https://www.allodons.fr/assets/controllers/tab_scroll_controller-ca0b4ffa.js

1import { Controller } from "@hotwired/stimulus";
2
3// Amène la SECTION à l'écran après un clic sur un pavé « Modifier cette page ».
4//
5// ⚠️ SANS ÇA, LE CLIC N'A L'AIR DE RIEN FAIRE SUR TÉLÉPHONE. Le bloc de
6// navigation occupe le haut de l'écran ; le panneau qu'il ouvre commence en
7// dessous, hors de vue. Le contenu change bien, mais on ne le voit pas - et
8// c'est exactement le public qui ne pensera pas à faire défiler la page pour
9// vérifier.
10//
11// ⚠️ POURQUOI UN DRAPEAU DE MODULE (`armed`) ET PAS UN ÉTAT D'INSTANCE. Le clic
12// et l'arrivée du contenu ne se passent pas dans la même vie du contrôleur : le
13// turbo-frame REMPLACE tout son contenu, donc le pavé cliqué n'existe déjà plus
14// quand le panneau arrive. Le drapeau vit au niveau du module, il traverse le
15// remplacement - là où un `this.armed` serait détruit avec l'ancien DOM.
16//
17// ⚠️ ET IL FAUT UN DRAPEAU, TOUT COURT : `turbo:frame-load` se déclenche AUSSI
18// au premier rendu de la page. Sans lui, ouvrir la page ferait sauter le
19// visiteur au milieu de l'écran, sans qu'il ait rien demandé.
20//
21// L'écart avec le haut de l'écran n'est PAS calculé ici : il vient de
22// `scroll-mt-*` posé sur la cible (cf `_tab_frame`), donc du même endroit que le
23// reste de la mise en page.
24let armed = false;
25
26export default class extends Controller {
27  static targets = ["panel"];
28
29  // Posé sur les pavés d'édition (`click->tab-scroll#arm`).
30  arm() {
31    armed = true;
32  }
33
34  // Posé sur le turbo-frame (`turbo:frame-load->tab-scroll#scrollIfArmed`).
35  scrollIfArmed() {
36    if (!armed) return;
37    armed = false;
38    if (!this.hasPanelTarget) return;
39
40    // Respecte le réglage système « réduire les animations » - un défilement
41    // animé peut être désagréable, voire nauséeux, pour une partie des gens.
42    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
43    this.panelTarget.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
44  }
45}