Files
fizzy/app/javascript/controllers/dialog_controller.js
T

67 lines
1.5 KiB
JavaScript

import { Controller } from "@hotwired/stimulus"
import { orient } from "helpers/orientation_helpers"
export default class extends Controller {
static targets = [ "dialog" ]
static values = {
modal: { type: Boolean, default: false },
sizing: { type: Boolean, default: true },
autoOpen: { type: Boolean, default: false }
}
connect() {
this.dialogTarget.setAttribute("aria-hidden", "true")
if (this.autoOpenValue) this.open()
}
open() {
const modal = this.modalValue
if (modal) {
this.dialogTarget.showModal()
} else {
this.dialogTarget.show()
orient(this.dialogTarget)
}
this.loadLazyFrames()
this.dialogTarget.setAttribute("aria-hidden", "false")
this.dispatch("show")
}
toggle() {
if (this.dialogTarget.open) {
this.close()
} else {
this.open()
}
}
close() {
this.dialogTarget.close()
this.dialogTarget.setAttribute("aria-hidden", "true")
this.dialogTarget.blur()
orient(this.dialogTarget, false)
this.dispatch("close")
}
closeOnClickOutside({ target }) {
if (!this.element.contains(target)) this.close()
}
preventCloseOnMorphing(event) {
if (event.detail?.attributeName === "open") {
event.preventDefault()
event.stopPropagation()
}
}
loadLazyFrames() {
Array.from(this.dialogTarget.querySelectorAll("turbo-frame")).forEach(frame => { frame.loading = "eager" })
}
captureKey(event) {
if (event.key !== "Escape") { event.stopPropagation() }
}
}