{"version":3,"file":"Src_Scripts_components_local-menu-swiper_js.66b733fd3c5d6097f6da.js","sources":["webpack://haveselskabet/./Src/Scripts/components/local-menu-swiper.js"],"sourcesContent":["export default class LocalMenuSwiper {\n    constructor(elm, args) {\n        if (elm.querySelectorAll('.swiper-slide').length == 0) return;\n        \n        const addOrRemoveUnderline = (targetListItem) => {\n            const underline = elm.querySelector('.nav-link__underline');\n            let underLineParent;\n            if (underline && !underline.classList.contains('nav-link__underline--on-hover')) {\n                underLineParent = underline.parentNode;\n                underline.parentNode.removeChild(underline);\n            }\n            if (targetListItem && document.body.offsetWidth > 992 && targetListItem !== underLineParent) {\n                const underline = document.createElement('span');\n                underline.classList.add('nav-link__underline');\n                underline.classList.add('nav-link__underline--local');\n                targetListItem.appendChild(underline);\n            }\n        }\n\n        var toggles = elm.querySelectorAll('.nav-item--has-simple-dropdown');\n        toggles.forEach(x => x.onclick = e => {\n\n            if (!e.target.closest('.simple-dropdown__links-list') && window.innerWidth < 992) {\n                e.preventDefault();\n            }\n\n            if (document.body.offsetWidth < 992) {\n                x.classList.toggle('nav-item--simple-dropdown-active')\n                document.body.classList.toggle('local-menu-open');\n                elm.querySelector(`#id-${x.dataset.dropdownId}`).classList.toggle('mobile-dropdown--active');\n                addOrRemoveUnderline(x);\n            }\n        });\n\n\n        const location = document.querySelector('.nav-item--local-page-home');\n        if (location) {\n            elm.style.width = 'calc(100% - ' + location.offsetWidth + 'px)';\n        }\n\n\n        const breakpoint = window.matchMedia('(min-width:992px)');\n        let swiper;\n        let options = {\n            loop: false,\n            slidesPerView: 'auto',\n            spaceBetween: 15,\n            breakpoints: {\n                992: {\n                    slidesPerView: 4,\n                    spaceBetween: 30,\n                }\n            },\n            on: {\n                slideChange: () => closeAllModal\n            }\n        };\n\n        elm.querySelectorAll('.mobile-dropdown__close').forEach(x => x.onclick = closeAllModal)\n        window.addEventListener('click', e => !e.target.closest('.local-menu') ? closeAllModal() : '')\n        function closeAllModal() {\n            elm.querySelector('.nav-item--simple-dropdown-active')?.classList.remove('nav-item--simple-dropdown-active');\n            elm.querySelector('.mobile-dropdown--active')?.classList.remove('mobile-dropdown--active');\n            document.body.classList.remove('local-menu-open');\n            addOrRemoveUnderline();\n        }\n\n        if (!breakpoint.matches) {\n            enableSwiper();\n        }\n\n        // keep an eye on viewport size changes\n        breakpoint.addListener(breakpointChecker);\n        // kickstart\n        breakpointChecker();\n\n        function breakpointChecker() {\n            // if larger viewport and multi-row layout needed\n            if (breakpoint.matches === true) {\n                console.log('destroy')\n                // clean up old instances and inline styles when available\n                if (swiper !== undefined) swiper.destroy(true, true);\n                // or/and do nothing\n                return;\n                // else if a small viewport and single column layout needed\n            } else if (breakpoint.matches === false) {\n                // fire small viewport version of swiper\n                return enableSwiper();\n            }\n        };\n\n        function enableSwiper() {\n            import('swiper').then(slider => swiper = new slider.Swiper(elm, options));\n        };\n\n        // Add additional padding-top to <main> if there is local-menu on the page\n        document.querySelector('main').style.paddingTop = '40px';\n\n    }\n\n    update() {\n        this.swiper.update();\n    }\n\n    destroy() {\n        this.swiper.destroy();\n    }\n}\n\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEA;AACA;AACA;AAAA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;;A;;A","sourceRoot":""}