Allow the search bar to be focused with '/' and closed with 'esc'
This commit is contained in:
parent
315d306eb4
commit
8398670530
|
@ -10,6 +10,12 @@ library.add(
|
||||||
)
|
)
|
||||||
|
|
||||||
const SearchBar = {
|
const SearchBar = {
|
||||||
|
mounted () {
|
||||||
|
window.addEventListener('keydown', this.autoFocus)
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
window.removeEventListener('keydown', this.autoFocus)
|
||||||
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
searchTerm: undefined,
|
searchTerm: undefined,
|
||||||
hidden: true,
|
hidden: true,
|
||||||
|
@ -36,6 +42,36 @@ const SearchBar = {
|
||||||
this.$refs.searchInput.focus()
|
this.$refs.searchInput.focus()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
autoFocus (event) {
|
||||||
|
if (
|
||||||
|
event.target.tagName !== 'BODY' ||
|
||||||
|
event.altKey ||
|
||||||
|
event.ctrlKey ||
|
||||||
|
event.isComposing ||
|
||||||
|
event.metaKey ||
|
||||||
|
event.repeat ||
|
||||||
|
event.shiftKey
|
||||||
|
) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === '/') {
|
||||||
|
if (this.hidden) {
|
||||||
|
this.toggleHidden()
|
||||||
|
} else {
|
||||||
|
this.$refs.searchInput.focus()
|
||||||
|
}
|
||||||
|
event.preventDefault()
|
||||||
|
} else if (event.key === 'Escape') {
|
||||||
|
if (!this.hidden) {
|
||||||
|
this.toggleHidden()
|
||||||
|
}
|
||||||
|
event.preventDefault()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
blur () {
|
||||||
|
this.$refs.searchInput.blur()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -27,6 +27,9 @@
|
||||||
@keydown.enter="
|
@keydown.enter="
|
||||||
$event.isComposing || $event.keyCode === 229 || find(searchTerm)
|
$event.isComposing || $event.keyCode === 229 || find(searchTerm)
|
||||||
"
|
"
|
||||||
|
@keydown.escape="
|
||||||
|
$event.isComposing || blur()
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="button-default search-button"
|
class="button-default search-button"
|
||||||
|
|
Loading…
Reference in New Issue