Files
fizzy/app/javascript/controllers/lightbox_controller.js
T
2025-07-30 17:26:05 -05:00

31 lines
726 B
JavaScript

import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "image", "dialog", "zoomedImage" ]
connect() {
this.dialogTarget.addEventListener('transitionend', this.onTransitionEnd.bind(this))
}
// Only remove the image src after the CSS transition has finished
onTransitionEnd(event) {
if (this._waitingForTransition && !this.dialogTarget.open) {
this._waitingForTransition = false
this.zoomedImageTarget.src = ""
}
}
open(event) {
this.dialogTarget.showModal()
this.#set(event.target.closest("a"))
}
reset() {
this._waitingForTransition = true
}
#set(target) {
this.zoomedImageTarget.src = target.href
}
}