luisgulo/BookStack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Replaced JS logic with CSS focus-within logic

Browse source
This commit is contained in:
Dan Brown 2022-11-20 21:53:53 +00:00
parent 851ab47f8a
commit 2c1f20969a
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
2 changed files with 1 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/js/components/global-search.js
View file

@ -15,8 +15,6 @@ class GlobalSearch {
} }
setupListeners() { setupListeners() {
this.hideOnOuterEventListener = this.hideOnOuterEventListener.bind(this);
this.input.addEventListener('input', () => { this.input.addEventListener('input', () => {
const value = this.input.value; const value = this.input.value;
if (value.length > 0) { if (value.length > 0) {
@ -45,8 +43,6 @@ class GlobalSearch {
showSuggestions() { showSuggestions() {
this.container.classList.add('search-active'); this.container.classList.add('search-active');
document.addEventListener('click', this.hideOnOuterEventListener);
document.addEventListener('focusin', this.hideOnOuterEventListener);
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
this.suggestions.classList.add('search-suggestions-animation'); this.suggestions.classList.add('search-suggestions-animation');
}) })
@ -56,15 +52,7 @@ class GlobalSearch {
this.container.classList.remove('search-active'); this.container.classList.remove('search-active');
this.suggestions.classList.remove('search-suggestions-animation'); this.suggestions.classList.remove('search-suggestions-animation');
this.suggestionResultsWrap.innerHTML = ''; this.suggestionResultsWrap.innerHTML = '';
document.removeEventListener('click', this.hideOnOuterEventListener);
document.removeEventListener('focusin', this.hideOnOuterEventListener);
} }
hideOnOuterEventListener(event) {
if (!this.container.contains(event.target)) {
this.hideSuggestions();
}
};
} }
export default GlobalSearch; export default GlobalSearch;

2
resources/sass/_header.scss
View file

@ -164,7 +164,7 @@ header .search-box {
overflow: hidden; overflow: hidden;
} }
} }
.search-active .global-search-suggestions { .search-active:focus-within .global-search-suggestions {
display: block; display: block;
} }
header .search-box.search-active input { header .search-box.search-active input {