{"version":3,"file":"Src_Scripts_components_mobile-navigation_js.191d9149ce93cc44c427.js","sources":["webpack://Boerneraadet/./Src/Scripts/components/mobile-navigation.js"],"sourcesContent":["export default class MobileNavigation {\r\n\r\n    constructor(elm) {\r\n\r\n        elm.querySelector('.header-mobile__navigation-button').addEventListener('click', e => {\r\n            e.preventDefault();\r\n            const mobileNavigationMain = elm.querySelector('#mobile-navigation-main');\r\n\r\n            if (!mobileNavigationMain.classList.contains('active')) {\r\n                mobileNavigationMain.classList.add('active');\r\n                elm.querySelector('.header-mobile__menu-icon.open').classList.remove('active');\r\n                elm.querySelector('.header-mobile__menu-icon.close').classList.add('active');\r\n                document.body.classList.add('stop-scrolling');\r\n                document.body.classList.add('no-focus');\r\n\r\n                if (document.querySelector('#nav-search-icon-mobile-close').classList.contains('active')) {\r\n                    document.querySelector('.header').classList.remove('searching');\r\n                    document.querySelector('.nav-search').classList.remove('searching');\r\n                    document.querySelector('#nav-search-icon-mobile').style.display = 'inline';\r\n                    document.querySelector('#nav-search-icon-mobile').classList.add('active');\r\n                    document.querySelector('#nav-search-icon-mobile-close').style.display = 'none';\r\n                    document.querySelector('#nav-search-icon-mobile-close').classList.remove('active');\r\n                    document.querySelector('.site-search').classList.remove('open');\r\n                }\r\n\r\n            } else {\r\n                mobileNavigationMain.classList.remove('active');\r\n                elm.querySelector('.header-mobile__menu-icon.open').classList.add('active');\r\n                elm.querySelector('.header-mobile__menu-icon.close').classList.remove('active');\r\n                document.body.classList.remove('stop-scrolling');\r\n                document.body.classList.remove('no-focus');\r\n            }\r\n\r\n            // Toggle tabindex for submenu when mobile navigation is opened/closed\r\n            const submenuItems = elm.querySelectorAll('.submenu');\r\n            submenuItems.forEach(submenu => {\r\n                const dropdownToggle = submenu.querySelector('.dropdown-toggle');\r\n                const navigationContainer = submenu.querySelector('.header-mobile__navigation-container');\r\n\r\n                // Check if navigationContainer is not null\r\n                if (navigationContainer) {\r\n                    const isOpen = navigationContainer.classList.contains('active');\r\n                    toggleTabIndex(navigationContainer, isOpen);\r\n\r\n                    // Set focus to the first focusable element if the submenu is opened by keyboard\r\n                    if (isOpen && e.type === 'keydown') {\r\n                        setFocusToFirstElement(navigationContainer);\r\n                    }\r\n                }\r\n            });\r\n        });\r\n\r\n        const elements = elm.querySelectorAll('.nav-item.submenu');\r\n\r\n        elements.forEach(element => {\r\n            const dropdownToggle = element.querySelector('.dropdown-toggle');\r\n\r\n            dropdownToggle.addEventListener('click', e => {\r\n                e.preventDefault();\r\n                console.log('open submenu');\r\n                const navigationContainer = element.querySelector('.header-mobile__navigation-container');\r\n\r\n                if (navigationContainer) {\r\n                    navigationContainer.classList.toggle('active');\r\n                    elm.querySelector('#mobile-navigation-main').classList.toggle('submenu-active');\r\n                    toggleTabIndex(navigationContainer, navigationContainer.classList.contains('active'));\r\n\r\n                    // Set focus to the first focusable element when the submenu is opened\r\n                    if (navigationContainer.classList.contains('active')) {\r\n                        setFocusToFirstElement(navigationContainer);\r\n                    }\r\n                }\r\n            });\r\n        });\r\n\r\n        const subElements = elm.querySelectorAll('.header-mobile__navigation-container.submenu');\r\n\r\n        subElements.forEach(element => {\r\n            element.querySelector('.header-mobile__backlink .dropdown-item').addEventListener('click', e => {\r\n                e.preventDefault();\r\n                element.classList.remove('active');\r\n                elm.querySelector('#mobile-navigation-main').classList.remove('submenu-active');\r\n                toggleTabIndex(element, false);\r\n            });\r\n        });\r\n    }\r\n}\r\n\r\nfunction toggleTabIndex(container, enable) {\r\n    const tabIndexValue = enable ? '0' : '-1';\r\n\r\n    container.querySelectorAll('a, button, input, select, textarea').forEach(element => {\r\n        element.tabIndex = tabIndexValue;\r\n    });\r\n}\r\n\r\nfunction setFocusToFirstElement(container) {\r\n    const focusableElements = container.querySelectorAll('a, button, input, select, textarea');\r\n    const firstFocusableElement = focusableElements[0];\r\n\r\n    if (firstFocusableElement) {\r\n        firstFocusableElement.focus();\r\n    }\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAtFA;AACA;;;AAuFA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;A;;A","sourceRoot":""}