diff --git a/src/js/07-search.js b/src/js/07-search.js index dbc1bc8..209d84f 100644 --- a/src/js/07-search.js +++ b/src/js/07-search.js @@ -4,16 +4,54 @@ function openSearchPopover () { document.getElementById('search-background').style.display = 'block' document.getElementById('search').style.display = 'block' + // focus the textbox after popover appears + focusSearchInput() + // add eventlisteners after popover appears + addNavigationToSearch() + } + + function closeSearchPopover () { + document.getElementById('search-background').style.display = 'none' + document.getElementById('search').style.display = 'none' + } + + function focusSearchInput () { var searchInput = document.querySelector('.pagefind-modular-input') if (searchInput) { searchInput.focus() } } - function closeSearchPopover () { - document.getElementById('search-background').style.display = 'none' - document.getElementById('search').style.display = 'none' + function addNavigationToSearch () { + // focus the first search result when pressing enter in search input + document.getElementById('pfmod-input-0').addEventListener('keydown', goToSearchResultsOnEnter) + } + + function goToSearchResultsOnEnter (event) { + var searchResults = document.getElementById('search-results') + if (event.key === 'Enter' && searchResults.childElementCount > 0) { + searchResults.firstChild.querySelector('a').focus() + searchResults.addEventListener('keydown', addNavigationInSearchResults) + } + } + + function addNavigationInSearchResults (event) { + if (event.key === 'ArrowDown' && document.activeElement.classList.contains('pagefind-modular-list-link')) { + event.preventDefault() // prevent page scrolling + var nextSibling = document.activeElement.parentElement.parentElement.parentElement.nextElementSibling + if (nextSibling) { + nextSibling.querySelector('a').focus() + } + } + + if (event.key === 'ArrowUp' && document.activeElement.classList.contains('pagefind-modular-list-link')) { + event.preventDefault() // prevent page scrolling + var previousSibling = document.activeElement.parentElement.parentElement.parentElement.previousElementSibling + if (previousSibling) { + previousSibling.querySelector('a').focus() + } + } } // open the popover when clicking the magnifying glass search icon @@ -28,20 +66,26 @@ // close functionality when clicking the background var searchBackground = document.getElementById('search-background') if (searchBackground) { - searchBackground.addEventListener('click', function (e) { - e.stopPropagation() // trap event + searchBackground.addEventListener('click', function (event) { + event.stopPropagation() // trap event closeSearchPopover() }) } - // open/close with keyboard document.addEventListener('keydown', function (event) { + // open search with keyboard if (event.ctrlKey && event.key === 'k') { event.preventDefault() // prevent focussing the URL bar in the browser openSearchPopover() } + // close search with keyboard if (event.key === 'Escape') { closeSearchPopover() } + // focus the search input when pressing / while search popover is open + if (event.key === '/') { + event.preventDefault() // prevent opening the browser search dialog + focusSearchInput() + } }) })()