panel/app/javascript/controllers/modal_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["modal", "backdrop"];

  // TODO: Stimulus >1
  connect() {
    this.showEvent = this.show.bind(this);
    this.hideEvent = this.hide.bind(this);

    window.addEventListener("modal:show", this.showEvent);
    window.addEventListener("modal:hide", this.hideEvent);
  }

  // TODO: Stimulus >1
  disconnect() {
    window.removeEventListener("modal:show", this.showEvent);
    window.removeEventListener("modal:hide", this.hideEvent);
  }

  /*
   * Podemos enviar la orden de apertura como un click o como un
   * CustomEvent incluyendo el id del modal como detail.
   */
  show(event = undefined) {
    event?.preventDefault();
    const modalId = event?.detail?.id;

    if (modalId && this.element.id !== modalId) return;

    this.modalTarget.style.display = "block";
    this.backdropTarget.style.display = "block";
    this.modalTarget.setAttribute("role", "dialog");
    this.modalTarget.setAttribute("aria-modal", true);
    this.modalTarget.removeAttribute("aria-hidden");

    window.document.body.classList.add("modal-open");

    setTimeout(() => {
      this.modalTarget.classList.add("show");
      this.backdropTarget.classList.add("show");
    }, 1);
  }

  hide(event = undefined) {
    event?.preventDefault();
    const modalId = event?.detail?.id;

    if (modalId && this.element.id !== modalId) return;

    this.backdropTarget.classList.remove("show");
    this.modalTarget.classList.remove("show");

    this.modalTarget.setAttribute("aria-hidden", true);
    this.modalTarget.removeAttribute("role");
    this.modalTarget.removeAttribute("aria-modal");

    setTimeout(() => {
      this.modalTarget.style.display = "";
      this.backdropTarget.style.display = "";
    }, 500);

    window.document.body.classList.remove("modal-open");
  }
}