https://my.theford.com/bundles/madelaphil/js/global-navigation.js

1'use strict';
2
3const linkSelector = '.mobileChildButton';
4const itemSelector = '.mobile-nav-group__list-item';
5const backSelector = '.global-nav__item--back';
6const itemActiveClass = 'mobile-nav-group__list-item--active';
7const parentActiveClass = 'is-active';
8const menuActiveClass = 'nav-open';
9const menuBtnId = 'nav-btn';
10const mobileNavId = 'global-nav-mobile';
11
12export function init() {
13    const links = document.querySelectorAll(linkSelector);
14    const backLinks = document.querySelectorAll(backSelector);
15    const body = document.querySelector('body');
16    const menuBtn = document.getElementById(menuBtnId);
17    const mobileNav = document.getElementById(mobileNavId);
18
19    if (menuBtn) {
20        menuBtn.addEventListener('click', () => {
21            const isOpening = !body.classList.contains(menuActiveClass);
22
23            body.classList.toggle(menuActiveClass);
24            menuBtn.classList.toggle('is-toggled');
25            mobileNav.classList.toggle('is-toggled');
26
27            resetMenu(isOpening);
28        });
29    }
30
31    links.forEach(link => {
32        link.addEventListener('click', e => {
33            e.preventDefault();
34            process(link);
35        });
36    });
37
38    backLinks.forEach(backLink => {
39        backLink.addEventListener('click', () => backProcess(backLink));
40    });
41}
42
43function resetMenu(isOpening = false) {
44    if (isOpening) return;
45
46    setTimeout(() => {
47        const scope = document.getElementById(mobileNavId) || document;
48        scope.querySelectorAll(itemSelector).forEach(el => el.classList.remove(itemActiveClass));
49        scope.querySelectorAll('.global-nav__list, .global-nav__child').forEach(list => list.classList.remove(parentActiveClass));
50        document.body.classList.remove(menuActiveClass);
51    }, 250);
52}
53
54function process(link) {
55    const parentUL = link.closest('ul');
56    if (!parentUL) return;
57
58    const items = parentUL.querySelectorAll(itemSelector);
59    items.forEach(i => i.classList.remove(itemActiveClass));
60
61    const li = link.closest('li');
62    if (li) li.classList.add(itemActiveClass);
63
64    const childList = li ? (li.querySelector('.global-nav__list') || li.querySelector('.global-nav__child') || link.nextElementSibling) : null;
65
66    const scope = document.getElementById(mobileNavId) || document;
67    scope.querySelectorAll('.global-nav__list, .global-nav__child').forEach(list => {
68        if (list !== childList) list.classList.remove(parentActiveClass);
69    });
70
71    if (childList) {
72        childList.classList.add(parentActiveClass);
73    } else {
74        parentUL.classList.remove(parentActiveClass);
75    }
76}
77
78function backProcess(backLink) {
79    const childList = backLink.closest('.global-nav__list, .global-nav__child');
80
81    if (childList) {
82        childList.classList.remove(parentActiveClass);
83        const triggeringLI = childList.closest('li');
84        if (triggeringLI) triggeringLI.classList.remove(itemActiveClass);
85    } else {
86        const li = backLink.closest('li');
87        if (li) li.classList.remove(itemActiveClass);
88    }
89}