https://littlebirdelectronics.com.au/assets/controllers/ecommerce/image_gallery_controller-1f4b9c41.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["display", "thumbnail"]
5
6  select(event) {
7    event.preventDefault()
8    this.activate(event.currentTarget)
9  }
10
11  // Fired by the variant selector when the picked variant has an image of its
12  // own. `index` points into the product gallery; `url` is the fallback for a
13  // variant image that was uploaded rather than picked from the gallery.
14  showVariantImage(event) {
15    const { index, url } = event.detail || {}
16
17    if (Number.isInteger(index) && this.thumbnailTargets[index]) {
18      this.activate(this.thumbnailTargets[index])
19    } else if (url && this.hasDisplayTarget) {
20      this.displayTarget.style.backgroundImage = `url('${url}')`
21      this.retargetLightbox(url)
22    }
23  }
24
25  activate(button) {
26    const url = button.dataset.imageUrl
27
28    if (this.hasDisplayTarget && url) {
29      this.displayTarget.style.backgroundImage = `url('${url}')`
30      this.retargetLightbox(button.dataset.imageFullUrl || url)
31    }
32
33    this.thumbnailTargets.forEach(thumb => {
34      thumb.classList.remove("ring-2", "ring-brand-500")
35      thumb.classList.add("ring-1", "ring-transparent")
36      thumb.setAttribute("aria-selected", "false")
37    })
38
39    button.classList.remove("ring-1", "ring-transparent")
40    button.classList.add("ring-2", "ring-brand-500")
41    button.setAttribute("aria-selected", "true")
42
43    button.scrollIntoView({ block: "nearest", inline: "nearest" })
44  }
45
46  // Point the lightbox at whatever the display is now showing, so opening it
47  // zooms the selected image rather than the one the page loaded with. The
48  // guard skips the no-images placeholder, which is a display target too but
49  // has nothing to zoom.
50  retargetLightbox(url) {
51    if (!url || !this.displayTarget.dataset.lightboxSrc) return
52
53    this.displayTarget.dataset.lightboxSrc = url
54  }
55}