https://www.ehs.com/wp-content/themes/velocity_ehs/blocks/resource…?ver=c6c05caa7f4a41ee507346bb0818c708

1document.addEventListener("DOMContentLoaded", () => {
2    const blocks = document.querySelectorAll(".resource-grid.events_and_webinars");
3    if (!blocks.length) return;
4
5    blocks.forEach((block) => {
6        const $block = jQuery(block);
7
8        // =====================================================
9        // MODE FILTER: hide "Select Mode" when only one option
10        // =====================================================
11        const $modeGroup = $block.find(
12            '.alm-filter[data-taxonomy="events_and_webinars_mode"]'
13        );
14        if ($modeGroup.length) {
15            const $modeLinks = $modeGroup.find(".alm-filter--link");
16            if ($modeLinks.length <= 1) {
17                // Hide the ALM mode filter UI
18                const $modeContainer = $modeGroup.closest(".alm-filters");
19                $modeContainer.hide();
20                // Hide the "Select Mode" trigger (first event-filters trigger)
21                const $modeTrigger = $block
22                    .find(".filters .filters-trigger.event-filters")
23                    .first();
24                $modeTrigger.hide();
25            }
26        }
27
28        const $buttons = $block.find(".filter-custom-buttons button.webinar-type-btn");
29        if (!$buttons.length) return;
30
31        const $allButton = $buttons.filter('[data-value="all"]');
32        const $typeButtons = $buttons.not($allButton);
33
34        // ALM renders each option as .alm-filter--link with a data-value
35        const $filterLinks = $block.find(
36            '.filter-custom-buttons .alm-filter--link[data-value]'
37        );
38        if (!$filterLinks.length) return;
39
40        // Helper: sync tab highlight from ALM's current selection
41        const syncTabsFromAlm = () => {
42            const $activeLink = $filterLinks
43                .filter('[aria-checked="true"], .active')
44                .first();
45            const activeValue = $activeLink.data("value") || "";
46
47            $buttons.removeClass("active");
48
49            if (activeValue) {
50                const $match = $buttons.filter(
51                    '[data-value="' + activeValue + '"]'
52                );
53                if ($match.length) {
54                    $match.addClass("active");
55                    return;
56                }
57            }
58
59            // If no ALM selection or no matching tab, default to "All"
60            if ($allButton.length) {
61                $allButton.addClass("active");
62            }
63        };
64
65        // Initial sync on page load
66        syncTabsFromAlm();
67
68        // Click handler for the tabs
69        $buttons.on("click", function (e) {
70            e.preventDefault();
71            const $btn = jQuery(this);
72            const value = $btn.data("value");
73
74            // "All Events" tab: clear any ALM selection
75            if (value === "all") {
76                const $activeLink = $filterLinks
77                    .filter('[aria-checked="true"], .active')
78                    .first();
79
80                $buttons.removeClass("active");
81                $allButton.addClass("active");
82
83                if ($activeLink.length) {
84                    $activeLink.trigger("click");
85                }
86                return;
87            }
88
89            // If clicking the already-active type tab, behave like clicking "All"
90            if ($btn.hasClass("active") && $allButton.length) {
91                $allButton.trigger("click");
92                return;
93            }
94
95            const $targetLink = $filterLinks
96                .filter('[data-value="' + value + '"]')
97                .first();
98            if (!$targetLink.length) return;
99
100            $buttons.removeClass("active");
101            $btn.addClass("active");
102
103            // Delegate filter change to ALM
104            $targetLink.trigger("click");
105        });
106
107        // If some other ALM control changes webinar-type filter, keep tabs in sync
108        jQuery(window).on("alm:complete", () => {
109            syncTabsFromAlm();
110        });
111    });
112});