Merge pull request #836 from basecamp/lightbox-improvements

Lightbox improvements

app/javascript/controllers/lightbox_controller.js

@@ -1,18 +1,42 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = [ "image", "dialog", "zoomedImage" ]
+  static targets = [ "caption", "image", "dialog", "zoomedImage" ]
+
+  connect() {
+    this.dialogTarget.addEventListener('transitionend', this.handleTransitionEnd.bind(this))
+  }
+
+  disconnect() {
+    this.dialogTarget.removeEventListener('transitionend', this.handleTransitionEnd.bind(this))
+  }
 
   open(event) {
     this.dialogTarget.showModal()
     this.#set(event.target.closest("a"))
   }
 
+  // Wait for the transition to finish before resetting the image
+  handleTransitionEnd(event) {
+    if (event.target === this.dialogTarget && !this.dialogTarget.open) {
+      this.reset()
+    }
+  }
+
   reset() {
     this.zoomedImageTarget.src = ""
+    this.captionTarget.innerText = ""
+    this.dispatch('closed')
   }
 
   #set(target) {
-    this.zoomedImageTarget.src = target.href
+    const imageSrc = target.href
+    const caption = target.dataset.lightboxCaptionValue
+
+    this.zoomedImageTarget.src = imageSrc
+
+    if (caption) {
+      this.captionTarget.innerText = caption
+    }
   }
 }