https://www.hhglobal.com/wp-content/themes/genesis-block-theme-child/observers.js?ver=1785498224

1document.addEventListener("DOMContentLoaded", function () {
2  // Start of scripts
3  setCarouselListener(
4    document.querySelectorAll(
5      ".data-visualisation .carousel-controls .styled-dots span"
6    )
7  );
8  setCarouselListener(
9    document.querySelectorAll(
10      ".spotlight-cards .carousel-controls .styled-dots span"
11    )
12  );
13  setCarouselListener(
14    document.querySelectorAll(
15      ".cards-block-container .carousel-controls .styled-dots span"
16    )
17  );
18  
19  watchCards(document.querySelectorAll(".data-visualisation-card"));
20  watchCards(document.querySelectorAll(".spotlight-card"));
21  watchCards(
22    document.querySelectorAll(
23      ".cards-container-default.case-studies-layout .card"
24    )
25  );
26
27  document.querySelectorAll(".sustainability-container").forEach((item) => {
28    onScreenEntry(item, (e) => {
29      e.classList.remove("off-screen");
30      e.classList.add("on-screen");
31    });
32  });
33
34  document.querySelectorAll(".stats-content-block").forEach((item) => {
35    onScreenEntry(item, (e) => {
36      e.classList.remove("off-screen");
37      e.classList.add("on-screen");
38    });
39  });
40
41  document.querySelectorAll(".quote-block .quote-container").forEach((item) => {
42    onScreenEntry(item, (e) => {
43      e.classList.remove("off-screen");
44      e.classList.add("on-screen");
45    });
46  });
47  // End of scripts
48});
49
50function setCarouselListener(btns) {
51  btns.forEach((item) => {
52    item.addEventListener("click", function (e) {
53      var targetCard = document.querySelector(
54        '[data-target="' + e.currentTarget.ariaLabel + '"]'
55      );
56      targetCard.scrollIntoView({ block: "nearest" });
57    });
58  });
59}
60
61function watchCards(cards) {
62  cards.forEach((item) => {
63    cardInView(item, item.parentElement, (e) => {
64      var targetLabel = e.dataset.target;
65      var activeDot = item.parentElement.parentElement.querySelector(
66        ".carousel-controls .styled-dots .active"
67      );
68      var targetDot = document.querySelector(
69        '[aria-label="' + targetLabel + '"]'
70      );
71      activeDot.classList.remove("active");
72      targetDot.classList.add("active");
73    });
74  });
75}
76
77function cardInView(e, cont, callback) {
78  new IntersectionObserver(
79    (entries) => {
80      entries.forEach((entry) => {
81        if (entry.intersectionRatio > 0.5) {
82          callback(e);
83        }
84      });
85    },
86    {
87      root: cont,
88      rootMargin: "0px",
89      threshold: 1,
90    }
91  ).observe(e);
92}
93
94function onScreenEntry(e, callback) {
95  new IntersectionObserver(
96    (entries) => {
97      entries.forEach((entry) => {
98        if (entry.intersectionRatio > 0.44) {
99          callback(e);
100        }
101      });
102    },
103    {
104      rootMargin: "-100px 0px 0px 0px",
105      threshold: 0.45,
106    }
107  ).observe(e);
108}