Add dismiss Searchbar with Esc key
This commit is contained in:
@@ -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()
|
||||||
|
}
|
||||||
}
|
}
|
@@ -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
|
|
Reference in New Issue
Block a user