Mangarr/assets/controllers/modal_controller.js

// assets/controllers/modal_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal"]
  static values = {
    openTrigger: String,
    closeTrigger: String
  }

  connect() {
    if (this.hasOpenTriggerValue) {
      document.addEventListener(this.openTriggerValue, this.open.bind(this))
    }
    if (this.hasCloseTriggerValue) {
      document.addEventListener(this.closeTriggerValue, this.close.bind(this))
    }
  }

  disconnect() {
    if (this.hasOpenTriggerValue) {
      document.removeEventListener(this.openTriggerValue, this.open.bind(this))
    }
    if (this.hasCloseTriggerValue) {
      document.removeEventListener(this.closeTriggerValue, this.close.bind(this))
    }
  }

  open() {
    console.log("Opening modal...")
    this.modalTarget.classList.remove('hidden')
  }

  close() {
    this.modalTarget.classList.add('hidden')
  }
}