https://passages.ink/assets/controllers/modal_controller-c300f2f1.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["backdrop"]
5
6  connect() {
7    this._keyHandler = this.handleKeydown.bind(this)
8  }
9
10  disconnect() {
11    document.removeEventListener("keydown", this._keyHandler)
12  }
13
14  open(event) {
15    event?.preventDefault()
16    this.backdropTarget.classList.add("modal-backdrop--open")
17    document.addEventListener("keydown", this._keyHandler)
18  }
19
20  close() {
21    this.backdropTarget.classList.remove("modal-backdrop--open")
22    document.removeEventListener("keydown", this._keyHandler)
23  }
24
25  backdropClick(event) {
26    if (event.target === this.backdropTarget) this.close()
27  }
28
29  handleKeydown(event) {
30    if (event.key === "Escape") this.close()
31  }
32}