{"version":3,"file":"Src_Scripts_components_top-navigation_js.8ce6f436b3d04f34df7e.js","sources":["webpack://haveselskabet/./Src/Scripts/components/top-navigation.js"],"sourcesContent":["export default class TopNavigation {\n    constructor(elm) {\n        let didScroll = false;\n        let lastScrollTop = 0;\n        let delta = 5;\n        let header = elm;\n        let megaMenuExpanders = elm.querySelectorAll('[data-opens-mega-menu]');\n        let megaMenues = elm.querySelectorAll('[data-mega-menu]');\n        var welcomeScreenScrolled = false;\n        var welcomeHeight = header.offsetTop;\n        var body = document.body;\n\n        window.onscroll = () => {\n            const st = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;\n            var welcomeScreenActive = body.classList.contains('welcome-screen-active');\n            if (welcomeScreenActive) {\n                if (st > welcomeHeight) {\n                    body.classList.add('welcome-screen-scrolled');\n                    welcomeScreenScrolled = true;\n                } else {\n                    body.classList.remove('welcome-screen-scrolled');\n                    welcomeScreenScrolled = false;\n                    header.classList.remove('scrolled');\n                    header.classList.remove('nav-up');\n                    header.classList.remove('nav-down');\n                }\n            }\n\n            if (!welcomeScreenActive || welcomeScreenScrolled) {\n                header.classList.toggle('scrolled', st > 0);\n                didScroll = true;\n            }\n        };\n\n        setInterval(() => {\n            if (didScroll) {\n                hasScrolled();\n                didScroll = false;\n            }\n        }, 250);\n\n        var dataHref = elm.querySelectorAll('[data-href]')\n        dataHref.forEach(x => x.onclick = () => {\n            if (window.innerWidth < 992) {\n                document.location = x.dataset.href;\n            }\n        });\n\n        header.querySelector('.burger-menu').addEventListener('click', e => {\n            e.preventDefault();\n            var open = document.body.classList.contains('mobile-menu-open');\n            document.body.classList.toggle('mobile-menu-open', !open);\n            if (open) {\n                megaMenues.forEach(x => x.classList.remove('mega-menu--active'))\n            }\n        });\n\n        const checkScrollPosition = () => {\n            if (document.documentElement.scrollTop > 0) {\n                document.querySelector('header').classList.add('scrolled');\n                document.querySelector('header').classList.add('nav-up');\n                document.querySelector('header').classList.add('nav-down');\n                document.body.classList.add('body-nav-up');\n            }\n        }\n\n        checkScrollPosition();\n\n        const removeUnderline = () => {\n            const underline = elm.querySelector('.nav-link__underline');\n            if (underline) {\n                underline.parentNode.removeChild(underline);\n            }\n        }\n\n        const addUnderline = (targetListItem) => {\n            if (document.body.offsetWidth > 992) {\n                const underline = document.createElement('span');\n                underline.classList.add('nav-link__underline');\n                targetListItem.appendChild(underline);\n            }\n        }\n\n        const removeSelectedSubmenu = () => {\n            removeUnderline();\n            const selectedSubmenu = elm.querySelector('.nav-link--selected');\n            const megaMenuContainer = elm.querySelector('.mega-menu__container--expanded');\n            const activeSubmenuLists = elm.querySelectorAll('.submenu-list--active');\n            if (selectedSubmenu && megaMenuContainer) {\n                selectedSubmenu.classList.remove('nav-link--selected');\n                megaMenuContainer.classList.remove('mega-menu__container--expanded');\n                megaMenuContainer.classList.remove('mega-menu__container--hidden');\n            }\n            if (activeSubmenuLists && activeSubmenuLists.length > 0) {\n                activeSubmenuLists.forEach(item => {\n                    item.classList.remove('submenu-list--active');\n                })\n            }\n            const fullHeightMenu = elm.querySelector('.full-height');\n            if (fullHeightMenu) {\n                fullHeightMenu.classList.remove('full-height');\n            }\n            const megaMenuInnerFullHeight = elm.querySelector('.mega-menu__inner--full-height');\n            const activeMegaMenuFullHeight = elm.querySelector('.mega-menu--active--full-height');\n            if (megaMenuInnerFullHeight) {\n                megaMenuInnerFullHeight.classList.remove('mega-menu__inner--full-height');\n            }\n            if (activeMegaMenuFullHeight) {\n                activeMegaMenuFullHeight.classList.remove('mega-menu--active--full-height');\n            }\n        }\n\n\n        megaMenuExpanders.forEach(clicked => clicked.onclick = (event) => {\n            const prevActiveMenu = elm.querySelector('.active-menu');\n            let targetListItem;\n            if (event.target.classList.contains(\"nav-link\") || event.target.classList.contains(\"nav-item__chevron\")) {\n                targetListItem = event.target.parentNode;\n            } else if (event.target.classList.contains(\"nav-item\")) {\n                targetListItem = event.target;\n            } else if (event.target.parentNode.classList.contains(\"nav-item__chevron\")) {\n                targetListItem = event.target.parentNode.parentNode;\n            }\n            if (prevActiveMenu && targetListItem === prevActiveMenu) {\n                prevActiveMenu.classList.remove('active-menu');\n\n                removeSelectedSubmenu();\n            } else {\n                if (prevActiveMenu) {\n                    prevActiveMenu.classList.remove('active-menu');\n                    removeSelectedSubmenu();\n                }\n\n                if (targetListItem.classList.contains(\"active-menu\")) {\n                    targetListItem.classList.remove('active-menu');\n                    removeSelectedSubmenu();\n                } else {\n                    targetListItem.classList.add('active-menu');\n                    addUnderline(targetListItem);\n                }\n            }\n            elm.querySelector(`[data-mega-menu=\"${clicked.dataset.opensMegaMenu}\"]`).classList.toggle('mega-menu--active');\n            megaMenues.forEach(others => { if (others.dataset.megaMenu != clicked.dataset.opensMegaMenu) { others.classList.remove('mega-menu--active') } })\n        });\n\n        const scrollToSubmenuTop = () => {\n            if (document.body.offsetWidth > 991) {\n                const activeMenu = elm.querySelector('.mega-menu--active');\n                const inner = activeMenu.querySelector('.mega-menu__inner');\n                inner.scrollTop = 0;\n            }\n        }\n\n        var submenuExpanders = elm.querySelectorAll('[data-opens-submenu-list]');\n        var submenues = elm.querySelectorAll('[data-submenu-list]');\n        submenuExpanders.forEach(clicked => clicked.onclick = () => {\n            scrollToSubmenuTop();\n            elm.querySelector(`[data-submenu-list=\"${clicked.dataset.opensSubmenuList}\"]`).classList.toggle('submenu-list--active');\n            clicked.closest('.mega-menu__container').classList.add('mega-menu__container--expanded');\n\n            if (clicked.classList.contains('nav-link--selected')) {\n                submenuExpanders.forEach(y => y.classList.remove('nav-link--selected'));\n                const expandedMenu = elm.querySelector('.mega-menu__container--expanded');\n                if (expandedMenu) {\n                    expandedMenu.classList.remove('mega-menu__container--expanded');\n                }\n            } else {\n                submenuExpanders.forEach(y => y.classList.remove('nav-link--selected'));\n                // If the clicked menu was already selected, don't add the selected class again\n                clicked.classList.add('nav-link--selected');\n            }\n\n            submenues.forEach(others => {\n                if (others.dataset.submenuList != clicked.dataset.opensSubmenuList) {\n                    others.classList.remove('submenu-list--active');\n                }\n            })\n\n            // In mobile view, if the sublink list (3rd level) is visible, we should set the mega-menu__container--expanded to 100vh and overflow hidden\n            const justExpandedMenu = elm.querySelector('.mega-menu__container--expanded');\n            if (document.body.offsetWidth < 992 && justExpandedMenu) {\n                justExpandedMenu.classList.add('mega-menu__container--hidden');\n            }\n        });\n\n        elm.querySelectorAll('[data-close-mega-menu]').forEach(x => x.onclick = () => {\n            megaMenues.forEach(y => y.classList.remove('mega-menu--active'));\n            elm.querySelectorAll('.active-menu').forEach(x => x.classList.remove('active-menu'));\n\n        });\n\n        elm.querySelectorAll('[data-close-submenu-list]').forEach(x => x.onclick = () => {\n            submenues.forEach(y => setTimeout(() => { y.classList.remove('submenu-list--active') }, window.innerWidth > 992 ? 0 : 300));\n            submenues.forEach(y => setTimeout(() => {\n                y.classList.remove('submenu-list--active');\n            }, window.innerWidth > 992 ? 0 : 300));\n\n            x.closest('.mega-menu__container').classList.remove('mega-menu__container--expanded');\n            submenuExpanders.forEach(y => y.classList.remove('nav-link--selected'));\n            const hiddenMegaMenuContainer = elm.querySelector('.mega-menu__container--hidden');\n            if (hiddenMegaMenuContainer) {\n                hiddenMegaMenuContainer.classList.remove('mega-menu__container--hidden');\n            }\n        });\n\n        window.addEventListener('click', x => {\n            if (!x.target.closest('.header')) {\n                megaMenues.forEach(others => { others.classList.remove('mega-menu--active') })\n            }\n        });\n\n        function hasScrolled() {\n            const st = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;\n\n            var realDelta = document.querySelector('.mega-menu--active') ? 250 : delta;\n            if (Math.abs(lastScrollTop - st) <= realDelta) return;\n\n            header.classList.toggle('nav-down', (st > lastScrollTop && st));\n            header.classList.toggle('nav-up', (st > lastScrollTop && st));\n            document.body.classList.toggle('body-nav-up', (st > lastScrollTop && st));\n\n            lastScrollTop = st;\n\n            megaMenues.forEach(others => {\n                others.classList.remove('mega-menu--active');\n                removeUnderline()\n                const activeListItem = elm.querySelector('.active-menu');\n                if (activeListItem) {\n                    activeListItem.classList.remove('active-menu');\n                }\n            })\n        }\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AAAA;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAAA;AAAA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;;A;;A","sourceRoot":""}