{"version":3,"file":"Src_Scripts_components_search_js.3209090f5c339db22d75.js","sources":["webpack://haveselskabet/./Src/Scripts/components/search.js"],"sourcesContent":["export default class Search {\n    constructor(elm, args) {\n        const searchMenu = document.querySelector('.search-menu');\n        const searchField = elm.querySelector('[data-search-field]');\n        const allSearchResults = searchMenu.querySelectorAll('[data-search-results]');\n        const categories = searchMenu.querySelectorAll('[data-category]');\n        const loadMore = searchMenu.querySelectorAll('[data-load-more]');\n        const underline = searchMenu.querySelector('.search-menu__banner__underline');\n        const closeSearchButtons = document.querySelectorAll('[data-close-search]');\n        const header = searchMenu.closest('header');\n        const body = document.body;\n        const defaultCategory = searchMenu.querySelector('[data-default]');\n        const openSearchButton = document.querySelectorAll('[data-open-search]');\n        const scrollSearchButton = document.querySelector('[data-scroll-search-button]');\n        const desktop = window.matchMedia('(min-width:992px)');\n\n        openSearchButton.forEach(x => x.onclick = e => {\n            const closeButton = e.target.closest('[data-close-search]');\n            if (!closeButton) {\n                openSearch();\n            }\n        });\n\n        searchMenu.querySelectorAll('[data-toggle]').forEach(x => x.onclick = () => {\n            searchMenu.dataset.active = x.dataset.toggle;\n        });\n\n        categories.forEach(x => x.onclick = () => {\n            if (x.classList.contains('search-menu__banner__category--inactive')) { return; }\n\n            selectCategory(x);\n        });\n\n        searchField.addEventListener('input', updateSearch);\n        searchField.addEventListener('change', updateSearch);\n\n        window.onkeydown = function (event) {\n            if (event.keyCode == 27) {\n                closeSearch();\n            }\n        };\n\n        closeSearchButtons.forEach(x => x.onclick = closeSearch);\n\n        loadMore.forEach(x => x.onclick = () => {\n            if (searchField.value.length > 2) {\n                const categoryElem = searchMenu.querySelector(`[data-category=\"${x.dataset.loadMore}\"]`);\n                categoryElem.page++;\n                fetch(`/umbraco/surface/search/SearchInCategory?query=${searchField.value}&page=${categoryElem.page}&category=${x.dataset.loadMore}`)\n                    .then(x => x.json()).then(json => {\n                        const searchResults = searchMenu.querySelector(`[data-search-results=\"${json.Category}\"]`);\n                        const categoryElem = searchMenu.querySelector(`[data-category=\"${json.Category}\"]`);\n                        searchResults.innerHTML += json.ItemsHtml;\n                        updateCategory(json, categoryElem);\n                    });\n            }\n        });\n\n        scrollSearchButton.addEventListener('click', searchInScrollClicked);\n\n        function searchInScrollClicked() {\n            header.classList.remove('nav-down');\n            header.classList.remove('nav-up');\n\n            setTimeout(() => {\n                openSearch();\n            }, 300);\n        }\n\n        function selectCategory(category) {\n            searchMenu.querySelectorAll('.search-menu__banner__category--selected')\n                .forEach(y => y.classList.remove('search-menu__banner__category--selected'));\n\n            category.classList.add('search-menu__banner__category--selected');\n            searchMenu.dataset.filter = category.dataset.category;\n            if (desktop.matches) {\n                underline.style.transform = `translateX(${category.offsetLeft}px)`;\n                underline.style.width = `${category.getBoundingClientRect().width}px`;\n            } else {\n                underline.style.transform = `translateY(${category.offsetTop}px)`;\n                underline.style.height = `${category.getBoundingClientRect().height}px`;\n            }\n        }\n\n        let lastSearch = '';\n\n        function updateSearch() {\n            if (searchField.value.length > 2) {\n                if (lastSearch != searchField.value) {\n                    searchMenu.classList.add('search-loading');\n                    clearSearch();\n                    lastSearch = searchField.value;\n                    const curSearch = searchField.value;\n                    const csrfToken = document.querySelector('input[name=\"__RequestVerificationToken\"]').value;\n                    setTimeout(() => {\n                        fetch('/umbraco/surface/search/search', {\n                            method: 'POST',\n                            headers: {\n                                'Content-Type': 'application/json',\n                                'RequestVerificationToken': csrfToken,\n                            },\n                            body: JSON.stringify({\n                                query: searchField.value,\n                                page: 1,\n                                pageSize: 12,\n                            }),\n                        })\n                            .then(x => x.json()).then(json => {\n                                if (curSearch == lastSearch) {\n                                    json.Categories.forEach(category => {\n                                        const searchResults = searchMenu.querySelector(`[data-search-results=\"${category.Category}\"]`);\n                                        const categoryElem = searchMenu.querySelector(`[data-category=\"${category.Category}\"]`);\n                                        categoryElem.page = 1;\n                                        updateCategory(category, categoryElem, true);\n                                        searchResults.innerHTML = category.ItemsHtml;\n                                    });\n\n                                    categories.forEach(category => {\n                                        category.classList.remove('search-menu__banner__category--selected');\n                                    });\n                                    const defaultCategoryJson = json.Categories.filter(x => x.Category == defaultCategory.dataset.category)[0];\n                                    if (defaultCategory && defaultCategoryJson.TotalAmount != 0) {\n                                        selectCategory(defaultCategory);\n                                    } else {\n                                        const nextCategory = json.Categories.find(x => x.TotalAmount > 0);\n                                        if (nextCategory && nextCategory.TotalAmount > 0) {\n                                            selectCategory(categories[3]);\n                                        } else {\n                                            selectCategory(categories[0]);\n                                        }\n                                    }\n\n                                    searchMenu.classList.remove('search-loading');\n                                    searchMenu.classList.add('searched');\n                                    expandSection(searchMenu);\n                                }\n                            });\n                    }, 1);\n                }\n            } else {\n                clearSearch();\n            }\n        }\n\n        function collapseSection(element) {\n\n            // get the height of the element's inner content, regardless of its actual size\n            const sectionHeight = element.scrollHeight;\n\n            // temporarily disable all css transitions\n            const elementTransition = element.style.transition;\n            element.style.transition = '';\n            element.classList.remove('search-menu--transitioned');\n\n            // on the next frame (as soon as the previous style change has taken effect),\n            // explicitly set the element's height to its current pixel height, so we\n            // aren't transitioning out of 'auto'\n            requestAnimationFrame(function () {\n                element.style.height = sectionHeight + 'px';\n                element.style.transition = elementTransition;\n\n                // on the next frame (as soon as the previous style change has taken effect),\n                // have the element transition to height: 0\n                requestAnimationFrame(function () {\n                    element.style.height = 0 + 'px';\n                });\n            });\n        }\n\n        function expandSection(element) {\n            // get the height of the element's inner content, regardless of its actual size\n            const sectionHeight = element.scrollHeight;\n\n            // have the element transition to the height of its inner content\n            element.style.height = sectionHeight + 'px';\n\n            // when the next css transition finishes (which should be the one we just triggered)\n            const endTransition = () => {\n                element.removeEventListener('transitionend', endTransition);\n                element.style.height = '';\n                element.classList.add('search-menu--transitioned');\n\n                if (!element.closest('.search-menu-open')) {\n                    element.style.height = '';\n                } else {\n                    element.style.height = 'auto';\n                }\n            };\n\n            element.addEventListener('transitionend', endTransition);\n        }\n\n        function updateHeight(element) {\n\n        }\n\n        function closeSearch() {\n            // searchMenu.style.height = '0';\n            collapseSection(searchMenu);\n            body.classList.remove('search-menu-open');\n\n        //    setTimeout(() => {\n        //        body.classList.remove('search-menu-open')\n        //    }, 500);\n        }\n\n        function openSearch() {\n            body.classList.add('search-menu-open');\n            expandSection(searchMenu);\n            // setTimeout(() => {\n            //    //searchMenu.style.maxHeight = '10000px';\n            // }, 1);\n            searchField.focus();\n        }\n\n        function clearSearch() {\n            lastSearch = '';\n            searchMenu.classList.remove('searched');\n            allSearchResults.forEach(x => x.innerHTML = '');\n            searchMenu.dataset.filter = '';\n            categories.forEach(category => {\n                category.querySelector('[data-category-amount]').innerHTML = 0;\n                category.classList.add('search-menu__banner__category--inactive');\n                category.classList.remove('search-menu__banner__category--selected');\n            });\n        }\n\n        function updateCategory(category, categoryElem, reset = false) {\n            const loadMoreButtom = searchMenu.querySelector(`[data-load-more=\"${category.Category}\"]`);\n            loadMoreButtom.classList.toggle('search-menu__load-more--disabled', category.CurrentPage >= category.TotalPages || category.TotalPages == 0);\n\n            if (reset) {\n                categoryElem.querySelector('[data-category-amount]').innerHTML = category.TotalAmount;\n            }\n\n            categoryElem.classList.toggle('search-menu__banner__category--inactive', category.TotalAmount == 0);\n        }\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAAA;AAAA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAEA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;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;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;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;AAEA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AAIA;AACA;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;AAEA;AAAA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAA;;A;;A","sourceRoot":""}