https://www.orient-latin.com/assets/controllers/index_density_cont…238a93864e5410ffc76bce099e4b471fd89045a0.js

1import { Controller } from "@hotwired/stimulus"
2
3// Bascule « vue compacte / vue détaillée » d'un index. La vue détaillée (classe
4// .is-enriched sur le conteneur) révèle des blocs additionnels : badges de
5// forteresses sous le titre des références, vignette de couverture des livres (en
6// vue compacte, une simple icône), légendes sous les vignettes de la grille des
7// images (en compacte, une mosaïque jointive). Le libellé du bouton annonce la
8// vue cible. L'état est mémorisé dans localStorage sous la clé fournie, donc le
9// choix de l'utilisateur persiste entre les pages et les sessions.
10//
11// defaultMode donne la vue servie tant que l'utilisateur n'a rien choisi :
12// « compact » pour les index tabulaires, « enriched » pour la grille d'images,
13// dont la vue nue n'a de sens qu'une fois demandée.
14export default class extends Controller {
15  static targets = ["label"]
16  static values = {
17    storageKey: String,
18    defaultMode: { type: String, default: "compact" },
19    enrichedLabel: { type: String, default: "Vue compacte" },
20    compactLabel: { type: String, default: "Vue détaillée" }
21  }
22
23  connect() {
24    this.apply((this.stored || this.defaultModeValue) === "enriched")
25  }
26
27  toggle() {
28    this.apply(!this.element.classList.contains("is-enriched"))
29  }
30
31  apply(enriched) {
32    this.element.classList.toggle("is-enriched", enriched)
33
34    if (this.hasLabelTarget) {
35      this.labelTarget.textContent = enriched ? this.enrichedLabelValue : this.compactLabelValue
36    }
37
38    if (this.storageKeyValue) {
39      localStorage.setItem(this.storageKeyValue, enriched ? "enriched" : "compact")
40    }
41  }
42
43  get stored() {
44    return this.storageKeyValue ? localStorage.getItem(this.storageKeyValue) : null
45  }
46};