https://en.monos.lu/assets/controllers/hub_dropdown_controller-aa1…024cd8e5bc112db2dc2142bc0d4b79a5326f2ac9.js

1import { Controller } from "@hotwired/stimulus"
2
3// Header dropdown menu bar: clicking a trigger opens its own panel and
4// closes any other open panel. Closes on outside click or Escape.
5export default class extends Controller {
6  static targets = ["trigger", "panel"]
7
8  toggle(event) {
9    event.preventDefault()
10    const item = event.currentTarget.closest(".hub-nav-item")
11    const wasOpen = item.classList.contains("is-open")
12    this.closeAll()
13    if (!wasOpen) item.classList.add("is-open")
14  }
15
16  closeAll() {
17    this.panelTargets.forEach((panel) => panel.closest(".hub-nav-item").classList.remove("is-open"))
18  }
19
20  clickOutside(event) {
21    if (!this.element.contains(event.target)) this.closeAll()
22  }
23
24  keydown(event) {
25    if (event.key === "Escape") this.closeAll()
26  }
27
28  connect() {
29    this.boundClickOutside = this.clickOutside.bind(this)
30    this.boundKeydown = this.keydown.bind(this)
31    document.addEventListener("click", this.boundClickOutside)
32    document.addEventListener("keydown", this.boundKeydown)
33  }
34
35  disconnect() {
36    document.removeEventListener("click", this.boundClickOutside)
37    document.removeEventListener("keydown", this.boundKeydown)
38  }
39};