56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import { useClickOutside } from 'stimulus-use'
|
|
|
|
// Connects to data-controller="modals"
|
|
export default class extends Controller {
|
|
connect() {
|
|
// useClickOutside(this)
|
|
this.boundHandleKeydown = this.handleKeydown.bind(this)
|
|
document.addEventListener("keydown", this.boundHandleKeydown)
|
|
window.addEventListener('modals:close', this.close.bind(this))
|
|
|
|
const panelElement = document.getElementById("modals-panel")
|
|
const backdropElement = document.getElementById("modals-backdrop")
|
|
|
|
if (panelElement && backdropElement) {
|
|
setTimeout(() => {
|
|
panelElement.classList.remove('opacity-0', 'translate-y-4', 'sm:scale-95')
|
|
panelElement.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100')
|
|
backdropElement.classList.remove('opacity-0')
|
|
backdropElement.classList.add('opacity-75')
|
|
}, 10) // 애니메이션이 바로 시작되도록 약간의 지연 추가
|
|
}
|
|
}
|
|
|
|
disconnect() {
|
|
document.removeEventListener('keydown', this.boundHandleKeydown)
|
|
}
|
|
|
|
handleKeydown(event) {
|
|
if (event.key === "Escape") {
|
|
this.close()
|
|
}
|
|
}
|
|
|
|
close(event) {
|
|
const panelElement = document.getElementById("modals-panel")
|
|
const backdropElement = document.getElementById("modals-backdrop")
|
|
|
|
if (panelElement && backdropElement) {
|
|
panelElement.classList.remove("opacity-100", "translate-y-0", "sm:scale-100")
|
|
panelElement.classList.add("opacity-0", "translate-y-4", "sm:scale-95")
|
|
|
|
backdropElement.classList.remove("opacity-75")
|
|
backdropElement.classList.add("opacity-0")
|
|
|
|
setTimeout(() => {
|
|
const modalsFrame = document.querySelector("turbo-frame#modals")
|
|
if (modalsFrame) {
|
|
modalsFrame.innerHTML = ""
|
|
window.location.reload()
|
|
}
|
|
}, 300) // 닫힘 애니메이션 시간과 동일하게 300ms 지연 후 모달 제거
|
|
}
|
|
}
|
|
}
|