https://cmief.ca/wp-content/themes/adnetframework/extensions/blocks/block-team-grid/block-team-grid.js

1(function () {
2  document.addEventListener("DOMContentLoaded", () => {
3    const teamGrids = document.querySelectorAll(".block-team-grid");
4
5    if (teamGrids.length === 0) {
6      return;
7    }
8
9    const teamMembers = document.querySelectorAll(".team-member");
10    initTeamMembers(teamMembers);
11
12    // Use event delegation for member image click events
13    document.addEventListener("click", handleMemberImageClick);
14
15    // Use event delegation for team member keydown events
16    document.addEventListener("keydown", handleMemberKeyDown);
17
18    window.addEventListener("resize", debounce(handleWindowResize, 250));
19
20    /**************************
21     * FUNCTIONS
22     *************************/
23
24    function initTeamMembers(members) {
25      members.forEach((member) => {
26        if (member) {
27          member.setAttribute("draggable", false);
28          member.setAttribute("tabindex", "0");
29          member.setAttribute("role", "button");
30          member.setAttribute("aria-expanded", "false");
31
32          const img = member.querySelector("img");
33          if (img) {
34            img.setAttribute("draggable", false);
35          }
36        }
37      });
38    }
39
40    function handleMemberImageClick(event) {
41      const memberImage = event.target.closest(".block-team-grid .member-image");
42      if (!memberImage) return;
43
44      const teamMember = memberImage.closest(".team-member");
45      toggleMemberBio(teamMember);
46    }
47
48    function handleMemberKeyDown(event) {
49      const teamMember = event.target.closest(".team-member");
50      if (!teamMember) return;
51
52      if (event.key === "Enter" || event.key === " ") {
53        event.preventDefault();
54        toggleMemberBio(teamMember);
55      }
56    }
57
58    function toggleMemberBio(teamMember) {
59      const memberBio = teamMember.querySelector(".member-bio");
60      const bio = teamMember.querySelector(".bio");
61
62      if (!memberBio) return;
63
64      const isMemberBioHidden = window.getComputedStyle(memberBio).display === "none";
65      const posFix = teamMember.offsetLeft;
66
67      memberBio.style.transform = `translateX(-${posFix}px)`;
68
69      if (isMemberBioHidden) {
70        closeAllBios();
71
72        memberBio.style.display = "block";
73        memberBio.setAttribute("aria-hidden", "false");
74
75        setTimeout(() => {
76          memberBio.style.height = getBioHeight(bio);
77        }, 1);
78
79        teamMember.setAttribute("aria-expanded", "true");
80      } else {
81        memberBio.style.height = 0;
82        memberBio.setAttribute("aria-hidden", "true");
83        teamMember.setAttribute("aria-expanded", "false");
84
85        setTimeout(() => {
86          memberBio.style.display = "none";
87        }, 500);
88      }
89    }
90
91    function closeAllBios() {
92      teamMembers.forEach((member) => {
93        const memberBio = member.querySelector(".member-bio");
94        if (memberBio) {
95          memberBio.style.display = "none";
96          memberBio.setAttribute("aria-hidden", "true");
97        }
98        member.setAttribute("aria-expanded", "false");
99      });
100    }
101
102    function handleWindowResize() {
103      const initialPos = teamGrids[0].offsetLeft;
104      const currentPos = teamGrids[0].offsetLeft;
105      if (teamMembers[0] && initialPos !== currentPos) {
106        closeAllBios();
107      }
108    }
109
110    function getBioHeight(element) {
111      const rect = element.getBoundingClientRect();
112      const style = window.getComputedStyle(element);
113      const marginTop = parseFloat(style.marginTop);
114      const marginBottom = parseFloat(style.marginBottom);
115
116      return rect.height + marginTop + marginBottom + "px";
117    }
118
119    // Debounce function to limit the rate at which a function can fire
120    function debounce(func, wait) {
121      let timeout;
122      return function (...args) {
123        const context = this;
124        clearTimeout(timeout);
125        timeout = setTimeout(() => func.apply(context, args), wait);
126      };
127    }
128  });
129})();