Lightbox uses Stimulus target callbacks instead of data-action
Remove data-action from the sanitizer allowlist to disallow injection of potentially malicious Stimulus actions in user-provided content. The lightbox controller now uses imageTarget callbacks to handle clicks on image links. Also add the file name as a caption in the light box, and fix the caption color for dark mode visibility.
This commit is contained in:
@@ -3,9 +3,22 @@ import { Controller } from "@hotwired/stimulus"
|
||||
export default class extends Controller {
|
||||
static targets = [ "caption", "image", "dialog", "zoomedImage" ]
|
||||
|
||||
open(event) {
|
||||
imageTargetConnected(element) {
|
||||
element.addEventListener("click", this.#handleImageClick)
|
||||
}
|
||||
|
||||
imageTargetDisconnected(element) {
|
||||
element.removeEventListener("click", this.#handleImageClick)
|
||||
}
|
||||
|
||||
#handleImageClick = (event) => {
|
||||
event.preventDefault()
|
||||
this.#open(event.currentTarget)
|
||||
}
|
||||
|
||||
#open(link) {
|
||||
this.dialogTarget.showModal()
|
||||
this.#set(event.target.closest("a"))
|
||||
this.#set(link)
|
||||
}
|
||||
|
||||
// Wait for the transition to finish before resetting the image
|
||||
|
||||
Reference in New Issue
Block a user