https://fclbuilders.com/wp-content/themes/fcl/js/home-map.js?ver=v1706724986

1jQuery(function () {
2  /**
3   * Handle homepage map buttons/popup
4   */
5  class HomeMapPopupController {
6    constructor() {
7      this.root = document.querySelector(".Home-map");
8      if (!this.root) return;
9      this.popup = this.root.querySelector("#home-map-location-popup");
10      this.popup.addEventListener("mouseleave", this.closePopup);
11      this.buttons = Array.from(
12        this.root.querySelectorAll(".map-image .map-buttons .map-button")
13      );
14      this.buttons.forEach((button) =>
15        button.addEventListener("click", this.handleMapButtonClick)
16      );
17      this.isPopupOpen = false;
18      this.currentLocation = null;
19      document.body.addEventListener("click", this.handleCloseClick);
20
21      let mapTimeline = gsap.timeline({
22        scrollTrigger: {
23          trigger: ".row-home_map",
24          start: "25% center",
25          // markers: true,
26          toggleActions: "play none none none",
27        },
28      });
29
30      mapTimeline.to(".row-home_map .headline", {
31        duration: 3,
32        opacity: 1,
33        y: -50,
34      });
35
36      mapTimeline.to(
37        ".row-home_map .map-image",
38        {
39          duration: 3,
40          opacity: 1,
41        },
42        "<"
43      );
44
45      mapTimeline.to(
46        ".row-home_map .map-legend",
47        {
48          duration: 3,
49          opacity: 1,
50          y: -50,
51        },
52        "-=75%"
53      );
54    }
55
56    // handle button click
57    handleMapButtonClick = (e) => {
58      const target = e.currentTarget;
59      const location = target.dataset.location;
60
61      // reset popup
62      this.popup.style.transform = null;
63      if (this.isPopupOpen) {
64        if (location === this.currentLocation) {
65          // popup is opened and they are clicking on the same button -> should close popup
66          this.currentLocation = location;
67          this.closePopup();
68          return;
69        }
70        this.popup.style.display = "none";
71        this.popup.classList.remove("show");
72      }
73
74      this.currentLocation = location;
75
76      // get popup data
77      const top = target.dataset.top;
78      const left = target.dataset.left;
79      const popupData = JSON.parse(target.dataset.popup);
80
81      // populate popup
82      this.popup.querySelector(".modal-header .label").innerHTML =
83        popupData.location;
84      this.popup.querySelector(".modal-body").innerHTML = popupData.details;
85      this.popup.querySelector(
86        ".modal-footer"
87      ).innerHTML = `<a class="link" href="${popupData.link}">View Location</a>`;
88
89      // set styles for popup
90      // if (window.innerWidth <= 875) {
91      //   this.popup.style.top = null;
92      //   this.popup.style.left = null;
93      //   // no popup on mobile, just follow link to page
94      //   this.popup.querySelector(".modal-footer a")?.click();
95      //   return;
96      // } else {
97      this.popup.style.top = `${top}%`;
98      this.popup.style.left = `${left}%`;
99
100      // handle popup so it doesn't show up offscreen on the right
101      const leftNumber = parseInt(left);
102      if (leftNumber > 62) {
103        const oldMin = 62;
104        const oldMax = 83;
105        const newMin = -8;
106        const newMax = -46;
107        const xTranslateOffset =
108          ((leftNumber - oldMin) / (oldMax - oldMin)) *
109          (newMax - newMin + newMin); // linear mapping formula
110        this.popup.style.transform = `translate(${xTranslateOffset}%, -82%)`;
111      }
112      // }
113
114      this.popup.style.display = "block";
115      setTimeout(() => {
116        this.popup.classList.add("show");
117      }, 100);
118      this.isPopupOpen = true;
119      this.popup.querySelector("a")?.focus();
120    };
121
122    // handle click outside of popup
123    handleCloseClick = (e) => {
124      if (this.popup.classList.contains("show")) {
125        const target = e.target;
126        if (!target.closest("#home-map-location-popup")) {
127          this.closePopup();
128        }
129      }
130    };
131
132    // close popup
133    closePopup = () => {
134      this.popup.classList.remove("show");
135      setTimeout(() => {
136        this.popup.style.display = "none";
137      }, 200);
138      this.isPopupOpen = false;
139    };
140  }
141
142  new HomeMapPopupController();
143});