{"version":3,"sources":["vueSearchBar.js"],"names":["vueSearchBar","Vue","name","el","query","historyResults","showHistory","searches","showTopSearch","topResults","charactersToStartSearch","searchServiceMixin","toggleMixin","mounted","requestServiceMixin","populateSearchHistory","vm","initialiseMobileMenu","querySelector","document","addEventListener","event","includes","target","contains","closeSearchDropDowns","body","classList","click","methods","title","mobileMenu","getElementById","mobileMenuUL","navigator","mobileMenuTrigger","MmenuLight","preventDefault","menu","navigation","navButton","openStatus","offcanvas","setTimeout","querySelectorAll","item","innerText","drawer","open","remove","style","display","forEach","close","bodyElement","openMobileSearch","slideToggleByElement","searchAndHistoryElements","productMatchElements","searchInput","JSON","length","localStorage","getItem","localStorageHistory","parse","reverse","this","clearSearchHistory","removeItem","historySearch","location","topSearch","hasError","error","window","href","search","vueSearch","searchBar","getSearchResults","data","action","searchForm","URL","searchParams","response","content","catch","console","log","history","replaceState","$refs","getAttribute","url","origin","pathname","set","toString"],"mappings":"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","file":"../vueSearchBar.js","sourcesContent":["const vueSearchBar = new Vue({\r\n    name: 'vueSearchBar',\r\n    el: '#vueSearchBar',\r\n    data: {\r\n        query: '',\r\n        historyResults: {\r\n            showHistory: false,\r\n            searches: [],\r\n        },\r\n        topResults: {\r\n            showTopSearch: false,\r\n            searches: [],\r\n        },\r\n        charactersToStartSearch: 2,\r\n    },\r\n    mixins: [requestServiceMixin, searchServiceMixin, toggleMixin],\r\n    mounted: function () {\r\n        const vm = this;\r\n        vm.populateSearchHistory();\r\n        vm.initialiseMobileMenu();\r\n\r\n        const target = document.querySelector('.search-form');\r\n        document.addEventListener('click', (event) => {\r\n            const withinBoundaries = event.composedPath().includes(target);\r\n\r\n            if (\r\n                (!withinBoundaries && document.querySelector('.search-results__history')) ||\r\n                document.querySelector('.search-results__main')\r\n            ) {\r\n                vm.closeSearchDropDowns();\r\n\r\n                if (document.body.classList.contains('search-open')) {\r\n                    document.querySelector('.search-trigger').click();\r\n                }\r\n\r\n                vm.query = '';\r\n            }\r\n        });\r\n    },\r\n    methods: {\r\n        initialiseMobileMenu: function () {\r\n            var mobileMenu = document.getElementById('mobile-menu'),\r\n                mobileMenuUL = document.getElementById('mobile-menu-ul');\r\n\r\n            if ((mobileMenu, mobileMenuUL)) {\r\n                const menu = new MmenuLight(mobileMenu);\r\n\r\n                const navigator = menu.navigation({\r\n                    title: '',\r\n                });\r\n                const drawer = menu.offcanvas();\r\n\r\n                navigator.openPanel(mobileMenuUL);\r\n\r\n                const mobileMenuTrigger = document.querySelector('.mobile-nav-trigger');\r\n\r\n                mobileMenuTrigger.addEventListener('click', (event) => {\r\n                    event.preventDefault();\r\n                    const navButton = mobileMenuTrigger.querySelector('.material-icons');\r\n                    const openStatus = navButton.innerText;\r\n\r\n                    if (openStatus === 'menu') {\r\n                        drawer.open();\r\n\r\n                        if (document.body.classList.contains('search-open')) {\r\n                            document.body.classList.remove('search-open');\r\n\r\n                            // delay as there is a transition on it\r\n                            setTimeout(() => {\r\n                                document.querySelector('.search-input-wrap').style.display = 'none';\r\n                                document.querySelectorAll('.search-results').forEach((item) => {\r\n                                    item.style.display = 'none';\r\n                                });\r\n                            }, '500');\r\n                        }\r\n                    } else {\r\n                        drawer.close();\r\n\r\n                        // if (document.body.classList.contains('search-open')) {\r\n                        // \tdocument.body.classList.remove('search-open');\r\n                        // \tdocument.querySelector('.search-input-wrap').style.display = 'none';\r\n                        // }\r\n                    }\r\n\r\n                    navButton.innerText = navButton.innerText === 'menu' ? 'close' : 'menu';\r\n                });\r\n            }\r\n        },\r\n        openMobileSearch: function () {\r\n            const vm = this;\r\n            const bodyElement = document.body;\r\n            const mobileNavTrigger = document.querySelector('.mobile-nav-trigger');\r\n            const productMatchElements = document.querySelectorAll('.search-results--main .product-match li');\r\n            const searchAndHistoryElements = document.querySelectorAll('.search-results--main, .search-results.history');\r\n            const searchInput = document.querySelector('.search-input input[type=\"text\"]');\r\n\r\n            // if search is closed and menu is open, then close the menu before opening the search\r\n            if (!bodyElement.classList.contains('search-open') && bodyElement.classList.contains('mm-ocd-opened')) {\r\n                if (mobileNavTrigger) mobileNavTrigger.click();\r\n            }\r\n\r\n            bodyElement.classList.toggle('search-open');\r\n\r\n            vm.slideToggleByElement('.search-input-wrap', 100);\r\n\r\n            if (bodyElement.classList.contains('search-open') && productMatchElements.length > 0) {\r\n                searchAndHistoryElements.forEach(el => el.style.display = 'block');\r\n            } else if (productMatchElements.length > 0) {\r\n                searchAndHistoryElements.forEach(el => el.style.display = 'none');\r\n            }\r\n\r\n            if (searchInput) {\r\n                searchInput.focus();\r\n            }\r\n        },\r\n        populateSearchHistory: function () {\r\n            const localStorageHistory = localStorage.getItem('searchHistory');\r\n\r\n            if (localStorageHistory != null) {\r\n                this.historyResults.searches = JSON.parse(localStorageHistory).reverse();\r\n            }\r\n        },\r\n        closeSearchDropDowns: function () {\r\n            const vm = this;\r\n            vm.historyResults.showHistory = false;\r\n            vm.topResults.showTopSearch = false;\r\n        },\r\n        inputSearch: function () {\r\n            const vm = this;\r\n            if (vm.query.length <= vm.charactersToStartSearch && vm.historyResults.searches.length) {\r\n                vm.historyResults.showHistory = true;\r\n                vm.topResults.showTopSearch = false;\r\n            } else if (vm.query.length > vm.charactersToStartSearch && vm.historyResults.searches.length) {\r\n                vm.historyResults.showHistory = true;\r\n                vm.topResults.showTopSearch = true;\r\n                vm.topSearch();\r\n            } else {\r\n                vm.historyResults.showHistory = false;\r\n                vm.topResults.showTopSearch = true;\r\n                vm.topSearch();\r\n            }\r\n        },\r\n        clearSearchHistory: function () {\r\n            const vm = this;\r\n            vm.historyResults.showHistory = false;\r\n            localStorage.removeItem('searchHistory');\r\n            vm.historyResults.searches = [];\r\n        },\r\n        historySearch: function (query) {\r\n            const vm = this;\r\n            vm.query = query;\r\n            window.location.href = '/search/?q=' + vm.query;\r\n        },\r\n        topSearch: function () {\r\n            const vm = this;\r\n\r\n            const data = {\r\n                query: vm.query,\r\n                pageSize: 5,\r\n            };\r\n            vm.getSearchResults(data)\r\n                .then(function (response) {\r\n                    if (!response) return;\r\n\r\n                    vm.topResults.searches = response.data.content;\r\n                })\r\n                .catch(function (error) {\r\n                    vm.topResults.searches.hasError = true;\r\n                    if (error.response) {\r\n                        console.log(error.response);\r\n                    }\r\n                });\r\n        },\r\n        /**\r\n         * Submits to the vue search request if we're already on the search page. Updates the search bar with query string parameters.\r\n         */\r\n        search: function () {\r\n            const vm = this;\r\n            vm.closeSearchDropDowns();\r\n            if (typeof vueSearch !== 'undefined') {\r\n                vueSearch.searchBar(vm.query);\r\n                window.history.replaceState(null, null, '?q=' + vm.query);\r\n            } else {\r\n                const action = vm.$refs.searchForm.getAttribute('action');\r\n                const url = new URL(location.origin);\r\n                url.pathname = action;\r\n                url.searchParams.set('q', vm.query);\r\n                window.location = url.toString();\r\n            }\r\n        },\r\n    },\r\n});\r\n"]}