budget/app/javascript/controllers/dropdown_controller.js
2025-06-16 22:16:07 -04:00

39 lines
No EOL
918 B
JavaScript

import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["button", "menu", "chevron"]
connect() {
this.closeOnClickOutside = this.closeOnClickOutside.bind(this)
}
toggle() {
if (this.menuTarget.classList.contains("hidden")) {
this.open()
} else {
this.close()
}
}
open() {
this.menuTarget.classList.remove("hidden")
this.chevronTarget.classList.add("rotate-180")
document.addEventListener("click", this.closeOnClickOutside)
}
close() {
this.menuTarget.classList.add("hidden")
this.chevronTarget.classList.remove("rotate-180")
document.removeEventListener("click", this.closeOnClickOutside)
}
closeOnClickOutside(event) {
if (!this.element.contains(event.target)) {
this.close()
}
}
disconnect() {
document.removeEventListener("click", this.closeOnClickOutside)
}
}