Add dismiss Searchbar with Esc key

This commit is contained in:
Sam Lu
2018-08-06 11:53:23 -05:00
parent ab98261889
commit 053570e55d
2 changed files with 10 additions and 6 deletions

View File

@@ -7,6 +7,7 @@ var searchButton = document.querySelector('#searchButton'),
navbarNav = document.querySelector('#navbarNav'), navbarNav = document.querySelector('#navbarNav'),
profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
/* Interactions /* Interactions
================================================================== */ ================================================================== */
searchButton.addEventListener('click', showSearch) searchButton.addEventListener('click', showSearch)
@@ -24,10 +25,18 @@ function showSearch() {
searchNavInput.focus() searchNavInput.focus()
navbarNav.classList.add('hidden') navbarNav.classList.add('hidden')
profileMenu.classList.add('visible') profileMenu.classList.add('visible')
document.addEventListener('keyup', onPressEscCloseSearch)
} }
function closeSearch() { function closeSearch() {
searchNav.classList.add('hidden') searchNav.classList.add('hidden')
navbarNav.classList.remove('hidden') navbarNav.classList.remove('hidden')
profileMenu.classList.remove('visible') profileMenu.classList.remove('visible')
document.removeEventListener('keyup', onPressEscCloseSearch)
}
function onPressEscCloseSearch(e) {
if (e.keyCode == 27) {
closeSearch()
}
} }

View File

@@ -170,7 +170,6 @@ nav.navbar
padding-bottom: 0 padding-bottom: 0
padding-right: 0 padding-right: 0
outline: none outline: none
#searchNav #searchNav
display: flex display: flex
align-items: center align-items: center
@@ -218,8 +217,4 @@ nav.navbar
cursor: pointer cursor: pointer
position: absolute position: absolute
right: 16px right: 16px
top: 12px top: 12px
// #search-overlay.active {
// opacity: 1;
// visibility: visible;
// background-color: rgba(67,89,112,0.7