https://en.monos.lu/assets/controllers/hub_details_controller-6c90…be76b92ad85ae2e62bdffa2066506c22863b17ac.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  connect() {
5    this.closeIfOutside = this.closeIfOutside.bind(this)
6    this.reposition = this.reposition.bind(this)
7    document.addEventListener("click", this.closeIfOutside)
8    this.element.addEventListener("toggle", this.reposition)
9  }
10
11  disconnect() {
12    document.removeEventListener("click", this.closeIfOutside)
13    this.element.removeEventListener("toggle", this.reposition)
14  }
15
16  closeIfOutside(event) {
17    if (!this.element.open) return
18    if (this.element.contains(event.target)) return
19    this.element.removeAttribute("open")
20  }
21
22  // Le panneau (.hub-kebab-panel) est en position:absolute par defaut, ce
23  // qui le fait clipper par tout ancetre avec overflow != visible (ex: le
24  // conteneur de scroll horizontal du Rapport). On le bascule en
25  // position:fixed a l'ouverture, avec des coordonnees calculees a partir
26  // du bouton, pour qu'il echappe a ce clipping et reste toujours visible.
27  reposition() {
28    const panel = this.element.querySelector(".hub-kebab-panel")
29    if (!panel) return
30    if (!this.element.open) {
31      panel.style.position = ""
32      panel.style.top = ""
33      panel.style.right = ""
34      panel.style.left = ""
35      panel.style.width = ""
36      return
37    }
38    const summary = this.element.querySelector("summary")
39    const rect = (summary || this.element).getBoundingClientRect()
40    // On fixe explicitement la largeur (comme le min-width d'origine) car en
41    // position:fixed sans conteneur pour la contraindre, le panneau (flex +
42    // flex-wrap) s'etirerait sur toute la largeur disponible au lieu de
43    // revenir a la colonne etroite prevue. Personnalisable via
44    // data-panel-width sur .hub-kebab-panel pour les panneaux plus larges
45    // (ex: edition des heures par semaine).
46    const width = panel.dataset.panelWidth || "280"
47    panel.style.position = "fixed"
48    panel.style.top = `${rect.bottom + 4}px`
49    panel.style.right = `${Math.max(8, window.innerWidth - rect.right)}px`
50    panel.style.left = "auto"
51    panel.style.width = `${width}px`
52  }
53};