https://mylegalaid.org/wp-content/themes/mmla/blocks/carousel/script.js?ver=1781732637

1// Keep references to Flickity instances
2let flickityInstances = [];
3
4// Simple debounce helper
5function debounce(fn, delay = 100) {
6  let t;
7  return function (...args) {
8    clearTimeout(t);
9    t = setTimeout(() => fn.apply(this, args), delay);
10  };
11}
12
13// Helper function to initialize carousels.
14initializeBlock = function () {
15  const carousels = document.getElementsByClassName("is-carousel");
16
17  // Loop through all carousels.
18  for (let i = 0; i < carousels.length; i++) {
19    const flkty = new Flickity(carousels[i], {
20      pageDots: false,
21      prevNextButtons: false,
22      resize: false,
23      wrapAround: true,
24    });
25
26    // store instance for later manual resize
27    flickityInstances.push(flkty);
28
29    const statusElement = carousels[i].parentElement.querySelector(
30      ".spm-carousel__status"
31    );
32    const totalSlides = flkty.cells.length;
33
34    updateStatus();
35
36    function updateStatus() {
37      const currentIndex = flkty.selectedIndex + 1;
38      statusElement.textContent = currentIndex + "/" + totalSlides;
39    }
40
41    flkty.on("select", updateStatus);
42
43    const previousButton = carousels[i].parentElement.querySelector(
44      ".spm-carousel__button--prev"
45    );
46    const nextButton = carousels[i].parentElement.querySelector(
47      ".spm-carousel__button--next"
48    );
49
50    previousButton.addEventListener("click", function () {
51      flkty.previous();
52    });
53
54    nextButton.addEventListener("click", function () {
55      flkty.next();
56    });
57  }
58};
59
60// Debounced window resize -> manually call resize on all instances
61const handleWindowResize = debounce(() => {
62  for (const flkty of flickityInstances) {
63    // In case an instance was destroyed, guard before calling
64    if (flkty && typeof flkty.resize === "function") {
65      flkty.resize();
66    }
67  }
68}, 150);
69
70// Attach once
71window.addEventListener("resize", handleWindowResize);
72
73// Optional: if fonts/images load late and affect layout, trigger a resize after load
74window.addEventListener("load", () => {
75  handleWindowResize();
76});
77
78if (window.acf) {
79  // Clear instances when re-rendering ACF previews to avoid duplicates
80  window.acf.addAction("render_block_preview/type=spm/carousel", () => {
81    flickityInstances = [];
82    initializeBlock();
83    // A short timeout lets DOM settle in the editor before resizing
84    setTimeout(handleWindowResize, 50);
85  });
86} else {
87  // Initialize on the frontend.
88  initializeBlock();
89  // Initial manual resize in case layout differs after first paint
90  setTimeout(handleWindowResize, 50);
91}