https://kaspth.com/assets/controllers/image_zoom_controller-12782e…a195dfb325f7a4fabbe929d9fa662c90a99da88d.js

1import { Controller } from "@hotwired/stimulus"
2import "helpers/zoom"
3
4export default class extends Controller {
5  connect() {
6    this.element.addEventListener("click", (event) => this.zoomInOnImages(event))
7    this.setupZoomableImages()
8
9    // Also listen for clicks from shadow DOM (they bubble up)
10    this.element.querySelectorAll(".pulse-post-shadow-host").forEach((host) => {
11      if (host.shadowRoot) {
12        host.shadowRoot.addEventListener("click", (event) => this.zoomInOnImages(event))
13      }
14    })
15  }
16
17  setupZoomableImages() {
18    // Light DOM images
19    this.element.querySelectorAll(".zoomable img").forEach((img) => {
20      if (!img.closest("a")) {
21        img.setAttribute("data-action", "zoom")
22      }
23    })
24
25    // Shadow DOM images (excluding avatars)
26    this.element.querySelectorAll(".pulse-post-shadow-host").forEach((host) => {
27      if (host.shadowRoot) {
28        host.shadowRoot.querySelectorAll("img:not(.avatar)").forEach((img) => {
29          if (!img.closest("a")) {
30            img.setAttribute("data-action", "zoom")
31          }
32        })
33      }
34    })
35  }
36
37  zoomInOnImages(event) {
38    if (event.target.tagName.toUpperCase() !== "IMG") return
39
40    const inShadowDOM = event.target.getRootNode() instanceof ShadowRoot
41    if (!inShadowDOM && !event.target.closest(".zoomable")) return
42
43    if (event.target.closest("a")) return
44
45    const allImages = this.findAllZoomableImages()
46    zoomListener().zoom(event, allImages)
47  }
48
49  findAllZoomableImages() {
50    const images = []
51
52    this.element.querySelectorAll(".zoomable img").forEach((img) => {
53      images.push(img)
54    })
55
56    // Also get images from shadow roots (excluding avatars and linked images)
57    this.element.querySelectorAll(".pulse-post-shadow-host").forEach((host) => {
58      if (host.shadowRoot) {
59        host.shadowRoot.querySelectorAll("img:not(.avatar)").forEach((img) => {
60          if (!img.closest("a")) {
61            images.push(img)
62          }
63        })
64      }
65    })
66
67    return images
68  }
69};