54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
|
// app/javascript/controllers/dialog_controller.js
|
||
|
|
import { Controller } from "@hotwired/stimulus"
|
||
|
|
|
||
|
|
// Connects to data-controller="dialog"
|
||
|
|
export default class extends Controller {
|
||
|
|
connect() {
|
||
|
|
this.open()
|
||
|
|
console.log("connect dialog", this.element)
|
||
|
|
this.element.addEventListener("turbo:submit-end", e => {
|
||
|
|
this.submitEnd(e)
|
||
|
|
})
|
||
|
|
this.element.addEventListener("click", e => this.clickOutside(e))
|
||
|
|
}
|
||
|
|
|
||
|
|
disconnect() {
|
||
|
|
}
|
||
|
|
|
||
|
|
// hide modal on successful form submission
|
||
|
|
// data-action="turbo:submit-end->turbo-modal#submitEnd"
|
||
|
|
submitEnd(e) {
|
||
|
|
if (e.detail.success) {
|
||
|
|
this.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
open() {
|
||
|
|
console.log("open dialog")
|
||
|
|
this.element.showModal()
|
||
|
|
document.body.classList.add('overflow-hidden')
|
||
|
|
this.element.addEventListener("close", this.enableBodyScroll.bind(this))
|
||
|
|
}
|
||
|
|
|
||
|
|
close() {
|
||
|
|
this.element.removeEventListener("close", this.enableBodyScroll.bind(this))
|
||
|
|
this.element.close()
|
||
|
|
// clean up modal content
|
||
|
|
const frame = document.getElementById('modal')
|
||
|
|
frame.removeAttribute("src")
|
||
|
|
frame.innerHTML = ""
|
||
|
|
}
|
||
|
|
|
||
|
|
enableBodyScroll() {
|
||
|
|
document.body.classList.remove('overflow-hidden')
|
||
|
|
}
|
||
|
|
|
||
|
|
clickOutside(event) {
|
||
|
|
console.log("clickOutside", event.target, this)
|
||
|
|
if (event.target === this.element) {
|
||
|
|
this.close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|