Navigation

class Menu {
    constructor(elem) {
        this.elem = elem;
        this.hamburgerId = 'mobileNav';
        this.hamburgerElem = document.getElementById(this.hamburgerId);
    }

    openMenu = false;

    cssroot = document.querySelector(':root');

    cssVarGet(prop) {
        const rootstyles = getComputedStyle(this.cssroot);
        const styleVal = rootstyles.getPropertyValue(prop);

        return styleVal;
    }

    cssVarSet(prop, value) {
        this.cssroot.style.setProperty(prop, value);
    }

    setSubMenuHeight() {
        let childrenTotal = 0;
        document.querySelectorAll('.o-navigation__sub-items').forEach((menu) => {
            if (menu.children.length > childrenTotal) {
                childrenTotal = menu.children.length;
            }
        });

        const menuheight = ((childrenTotal + 1) * 63) - 50;
        this.cssVarSet('--menuheight', `${menuheight}px`);
    }

    addEventListener() {
        this.elem.forEach((btn) => {
            if (btn.classList.contains('o-navigation__item-toggle')) {
                btn.nextElementSibling.addEventListener('focusout', (e) => {
                    this.toggleFocus(e);
                });
                btn.nextElementSibling.addEventListener('focusin', (e) => {
                    this.toggleFocus(e);
                });
            }
            btn.addEventListener('click', () => {
                this.toggleSubmenu(btn.nextElementSibling);
            });
            btn.addEventListener('keydown', (e) => {
                this.keyDown(e);
            });
        });
    }

    toggleFocus(e) {
        if (e.type === 'focusout') {
            if (!e.currentTarget.contains(e.relatedTarget)) {
                this.toggleSubmenu(e.currentTarget);
            }
        }
    }

    toggleSubmenu(elem) {
        const menu = elem;
        const btn = elem.previousElementSibling;
        if (btn === this.hamburgerElem) {
            // It's the main burger menu
            if (btn.querySelector('.o-hamburger__btn').classList.contains('is-active')) {
                // menu already open, lets close it and reset menus.
                this.resetMenu();
                return;
            }
            btn.querySelector('.o-hamburger__btn').classList.toggle('is-active');
            document.body.classList.add('js-menu--open');
        }
        const expanded = menu.getAttribute('aria-hidden') === 'true' || false;
        menu.setAttribute('aria-hidden', !expanded);
        btn.setAttribute('aria-expanded', expanded);
        if (menu.hidden) {
            btn.classList.add('js-menu--expanded');
        } else {
            btn.classList.remove('js-menu--expanded');
        }
        menu.hidden = !menu.hidden;
    }

    keyDown(e) {
        const keyCode = e.code;
        switch (keyCode) {
            case 'Escape': // arrow down
                e.preventDefault();
                this.resetMenu();
                break;
            default:
        }
    }

    resetMenu() {
        // Reset the buttons
        this.elem.forEach((btn) => {
            btn.setAttribute('aria-expanded', false);
            btn.classList.remove('js-menu--expanded');
            const menu = btn.nextElementSibling;
            menu.hidden = true;
            menu.setAttribute('aria-hidden', true);
            if (btn.querySelector('.hamburger')) {
                document.body.classList.remove('js-menu--open');
                btn.querySelector('.hamburger').classList.remove('is-active');
            }
        });
    }

    resetBtns(current) {
        this.elem.forEach((btn) => {
            if (btn !== current && btn.classList.contains('o-navigation__item-toggle')) {
                btn.setAttribute('aria-expanded', false);
                btn.classList.remove('js-menu--expanded');
                const menu = btn.nextElementSibling;
                menu.hidden = true;
            }
        });
    }

    init() {
        this.addEventListener();
        this.setSubMenuHeight();
    }
}

export default Menu;