https://invisiblepresident.com/assets/controllers/reveal_controller-6e000dc5.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["revealed"]
5  static values = {
6    hiddenClasses: { type: String, default: "invisible opacity-0" },
7    dismissible: { type: Boolean, default: true }
8  }
9
10  connect() {
11    this.closeOnOutside = this.closeOnOutside.bind(this)
12    this.closeOnEscape = this.closeOnEscape.bind(this)
13  }
14
15  toggle(event) {
16    event.stopPropagation()
17    this.open ? this.close() : this.show()
18  }
19
20  show() {
21    this.revealedTarget.classList.remove(...this.hiddenClassList)
22    this.open = true
23    if (this.dismissibleValue) {
24      document.addEventListener("click", this.closeOnOutside)
25      document.addEventListener("keydown", this.closeOnEscape)
26    }
27  }
28
29  close() {
30    this.revealedTarget.classList.add(...this.hiddenClassList)
31    this.open = false
32    document.removeEventListener("click", this.closeOnOutside)
33    document.removeEventListener("keydown", this.closeOnEscape)
34  }
35
36  closeOnOutside(event) {
37    if (!this.element.contains(event.target)) this.close()
38  }
39
40  closeOnEscape(event) {
41    if (event.key === "Escape") this.close()
42  }
43
44  get hiddenClassList() {
45    return this.hiddenClassesValue.split(" ").filter(Boolean)
46  }
47
48  disconnect() {
49    document.removeEventListener("click", this.closeOnOutside)
50    document.removeEventListener("keydown", this.closeOnEscape)
51  }
52}