https://hijrahselangor.com/storage/themes/yayasan-hijrah-selangor/iconic/2026-02-09/js/hotspots.js

1const hotspots = document.querySelectorAll(".hotspot");
2const hotspotsToggler = document.querySelectorAll('[data-toggle="popover"]');
3const hotspotMobilePopover = document.querySelector(".hotspot-popover--mobile");
4const closePopoverToggler = document.querySelector(
5  ".popover__action:is(.action--close-popover)"
6);
7const mobilePopoverContent =
8  hotspotMobilePopover.querySelector(".hotspot__content");
9
10closePopoverToggler.addEventListener("click", function () {
11  hotspotMobilePopover.classList.remove("show");
12
13  hotspots.forEach((hotspot) => {
14    hotspot.classList.remove("active");
15  });
16
17  gsap.to(mobilePopoverContent, {
18    height: 0,
19    duration: 0.5,
20    ease: "power3.out",
21  });
22});
23
24hotspotsToggler.forEach((toggler) => {
25  const wrapper = toggler.closest(".hotspot");
26  const contentContainer = toggler.nextElementSibling;
27  const xAxis = toggler.dataset.horizontalPosition;
28
29  const popperInstance = constructPopover(toggler, contentContainer, xAxis);
30
31  toggler.addEventListener("click", async function () {
32    await hideActivePopover(wrapper);
33    await resolveMobilePopoverContent(this);
34
35    wrapper.classList.toggle("active");
36    hotspotMobilePopover.classList.add("show");
37    popperInstance.update();
38
39    gsap.to(mobilePopoverContent, {
40      height: "auto",
41      duration: 0.5,
42      ease: "power3.out",
43      delay: 0.2,
44    });
45  });
46});
47
48async function hideActivePopover(wrapper) {
49  hotspots.forEach((hotspot) => {
50    if (hotspot !== wrapper) {
51      hotspot.classList.remove("active");
52    }
53  });
54}
55
56function constructPopover(toggler, container, horizontalPosition) {
57  return Popper.createPopper(toggler, container, {
58    placement: horizontalPosition >= 50 ? "left" : "right",
59    strategy: "fixed",
60    modifiers: [
61      {
62        name: "offset",
63        options: {
64          offset: [0, 10],
65        },
66      },
67    ],
68  });
69}
70
71async function resolveMobilePopoverContent({ dataset }) {
72  const { iconSrc, iconWidth, contentHeading, contentBody } = dataset || {};
73  const icon = mobilePopoverContent.querySelector(".content__icon img");
74  const heading = mobilePopoverContent.querySelector("h3");
75  const body = mobilePopoverContent.querySelector("p");
76
77  icon.setAttribute("src", iconSrc);
78  icon.setAttribute("width", iconWidth);
79  heading.innerHTML = contentHeading;
80  body.innerHTML = contentBody;
81}