map function with selectors

PHOTO EMBED

Wed Jan 07 2026 05:46:55 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #map #selectors #tracking

function navigationTracking() {
        const mainNav = document.querySelector(".main-navigation__main");
        if (!mainNav) return;

        const navItems = [
            {
                selector: ".main-navigation__control-link",
                type: "nav-links",
                handler: (e, el) => {
                    const btnText = el.textContent.trim() || "";
                    const isPressed =
                        el.getAttribute("aria-pressed") === "true";

                    navigationClickTracking(btnText, null, 1, isPressed);
                },
            },
            {
                selector: "#main-nav-bookmarks",
                type: "nav-bookmark",
                handler: (e, el) => {
                    const btnText = el.innerText.trim();
                    navigationClickTracking(btnText, "/sruh/bookmarks", 1);
                },
            },
            {
                selector: "#main-nav-close",
                type: "nav-search",
                handler: (e, el) => {
                    const btnText = el.outerText.trim();
                    navigationClickTracking(btnText, null, 1);
                },
            },
            {
                selector: "#main-nav-quiz",
                type: "nav-quiz",
                handler: (e, el) => {
                    const cleanText = el.textContent
                        .replace(/\s+/g, " ")
                        .trim();

                    navigationClickTracking(cleanText, "/sruh/quiz", 1);
                },
            },
        ];

        navItems.forEach((item) => {
            const elements = mainNav.querySelectorAll(item.selector);

            elements.forEach((el) => {
                // ✅ prevent duplicate listeners
                if (el.dataset.navTracked) return;
                el.dataset.navTracked = "true";

                el.addEventListener("click", (e) => {
                    e.preventDefault();
                    item.handler(e, el);
                });
            });
        });

        /*  SUB MENU LINK TRACKING */

        const subNavButtons = document.querySelectorAll(
            ".main-navigation__control-link",
        );
        if (!subNavButtons.length) return;

        subNavButtons.forEach((button) => {
            // prevent duplicate listeners
            if (button.dataset.subNavTracked) return;
            button.dataset.subNavTracked = "true";

            button.addEventListener("click", (e) => {
                e.preventDefault();

                const isActive = button.classList.contains("active");
                if (!isActive) return;

                const subNavWrapper = document.querySelector(
                    ".main-navigation__aside",
                );
                if (!subNavWrapper) return;

                const contentMenus = subNavWrapper.querySelectorAll(
                    ".main-navigation__content",
                );

                // wait for active class toggle
                setTimeout(() => {
                    contentMenus.forEach((menu) => {
                        if (!menu.classList.contains("active")) return;

                        const links = menu.querySelectorAll(
                            ".main-navigation__content-list li a",
                        );

                        links.forEach((link) => {
                            // ✅ prevent duplicate listeners
                            if (link.dataset.subNavLinkTracked) return;
                            link.dataset.subNavLinkTracked = "true";

                            link.addEventListener("click", (e) => {
                                e.preventDefault();

                                const linkText = link.textContent
                                    .replace(/\s+/g, " ")
                                    .trim();

                                const linkUrl = link.getAttribute("href") || "";

                                navigationClickTracking(linkText, linkUrl, 2);
                            });
                        });
                    });
                }, 100);
            });
        });
    }
content_copyCOPY