guide201/assets/js/navigation.js

Atlas is living style-guides & pattern library static site generator with extensive CSS monitoring and components info that could be used virtually with any scss/css project

'use strict';

document.addEventListener('DOMContentLoaded', function () {
    (function () {
        let end = null;
        const navigation = document.getElementById('js-atlas-navigation');
        const navigationContent = document.getElementById('js-atlas-aside-content');

        function menuCollapse(ev) {
            if (ev.target.classList.contains('_category')) {
                ev.preventDefault();

                if (ev.target.classList.contains('js-collapsed')) {
                    ev.target.classList.remove('js-collapsed');
                } else {
                    ev.target.classList.add('js-collapsed');
                }
            }
        }

        function findParent(element) {
            if (!element || end) {
                return false;
            }

            end = element.classList.contains('atlas-nav');

            if (element.classList.contains('atlas-nav__item_category')) {
                element.querySelector('._category').classList.remove('js-collapsed');
            }
            findParent(element.parentElement);
        }

        function highlightCurrentPage() {
            const location = window.location.href;
            const currentFile = location.split('/').pop().replace('.html', '');
            const linkCurrent = document.getElementById('nav-' + currentFile);
            if (!linkCurrent) {
                return;
            }
            linkCurrent.classList.add('js-current-page');
            findParent(linkCurrent);

            const storedValue = window.sessionStorage ? window.sessionStorage.getItem('navigationScroll') : null;

            if (storedValue === null) {
                const linkPosition = linkCurrent.getBoundingClientRect().top;
                navigationContent.scrollTo && navigationContent.scrollTo(0, linkPosition - (window.innerHeight / 2));
            } else {
                document.getElementById('js-atlas-aside-content').scrollTo(0, storedValue);
            }
        }

        function populateStorage() {
            window.sessionStorage.setItem('navigationScroll', navigationContent.scrollTop);
        }

        navigation.addEventListener('click', menuCollapse);

        window.addEventListener('beforeunload', populateStorage);

        highlightCurrentPage();

    }());
});