flare-navigation.es6.js

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

// Sticky header
import { createFocusTrap } from 'focus-trap';

(function () {
    const headerEl = document.querySelector('.fl-header.enable-sticky');

    if (headerEl) {
        const sentinel = document.createElement('div');
        sentinel.className = 'fl-header-sentinel';
        sentinel.setAttribute('aria-hidden', 'true');
        headerEl.parentNode.insertBefore(sentinel, headerEl);

        const observer = new IntersectionObserver(function (entries) {
            headerEl.classList.toggle(
                'is-scrolled',
                !entries[0].isIntersecting
            );
        });
        observer.observe(sentinel);
    }

    // Hamburger menu
    const buttonEl = document.querySelector('.fl-show-mobile-menu');
    const mobileNavEl = document.querySelector('.fl-nav');
    const trap = createFocusTrap(headerEl);

    if (buttonEl && mobileNavEl) {
        buttonEl.addEventListener('click', function (e) {
            e.preventDefault();
            const mobileNavIsOpen =
                e.currentTarget.classList.contains('is-open');
            const elements = [e.currentTarget, mobileNavEl];

            if (mobileNavIsOpen) {
                elements.forEach(function (el) {
                    el.classList.remove('is-open');
                });
                document.body.classList.remove('fl-modal-open');
                trap.deactivate();
            } else {
                elements.forEach(function (el) {
                    el.classList.add('is-open');
                });
                document.body.classList.add('fl-modal-open');
                trap.activate();
            }
        });
    }

    // Menu panels
    const menuCategories = document.querySelectorAll('.fl-menu-category');

    menuCategories.forEach(function (category) {
        // keyboard is being used
        category.addEventListener('keyup', function (event) {
            if (event.key === 'Escape') {
                menuCategories.forEach(function (category) {
                    category.classList.remove('is-active');
                });
            }
        });

        // mouse is being used
        category.addEventListener('mouseover', function () {
            menuCategories.forEach(function (category) {
                category.classList.remove('is-active');
            });
            category.classList.add('is-active');
        });
        category.addEventListener('mouseout', function () {
            category.classList.remove('is-active');
        });
    });

    const menuTitles = document.querySelectorAll('.fl-menu-title');

    // keyboard is being used
    menuTitles.forEach(function (title) {
        // when focusing a menu title, close all menus
        title.addEventListener('focus', function () {
            menuCategories.forEach(function (category) {
                category.classList.remove('is-active');
            });
        });

        // when leaving the last link of a menu, close all menus
        const menuLinks = title
            .closest('.fl-menu-category')
            .querySelectorAll('a');

        menuLinks[menuLinks.length - 1].addEventListener(
            'keydown',
            function (event) {
                if (event.key === 'Tab' && !event.shiftKey) {
                    menuCategories.forEach(function (category) {
                        category.classList.remove('is-active');
                    });
                }
            }
        );

        // when clicking or pressing enter, toggle the menu
        title.addEventListener('click', function (event) {
            event.preventDefault();

            const menuPanel = event.target.closest('.fl-menu-category');

            if (menuPanel.classList.contains('is-active')) {
                menuPanel.classList.remove('is-active');
            } else {
                menuPanel.classList.add('is-active');
            }
        });
    });

    const menuPanelCloseButtons = document.querySelectorAll(
        '.fl-menu-close-button'
    );

    menuPanelCloseButtons.forEach(function (button) {
        button.addEventListener('click', function (event) {
            event.preventDefault();
            const menuPanel = event.target.closest('.fl-menu-category');
            menuPanel.classList.remove('is-active');
        });
    });
})();