github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-10 13:43:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed input styles in search preview mode, added animation

Browse Source 
Also added JS handlers for hiding the suggestions
This commit is contained in:
Dan Brown
2022-11-20 21:50:59 +00:00
parent 19a792bc12
commit 851ab47f8a
5 changed files with 74 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/components/global-search.js
View File

@ -6,6 +6,7 @@ import {htmlToDom} from "../services/dom";
class GlobalSearch {
setup() {
this.container = this.$el;
this.input = this.$refs.input;
this.suggestions = this.$refs.suggestions;
this.suggestionResultsWrap = this.$refs.suggestionResults;
@ -14,6 +15,8 @@ class GlobalSearch {
}
setupListeners() {
this.hideOnOuterEventListener = this.hideOnOuterEventListener.bind(this);
this.input.addEventListener('input', () => {
const value = this.input.value;
if (value.length > 0) {
@ -33,15 +36,35 @@ class GlobalSearch {
child.remove();
}
this.suggestions.style.display = 'block';
this.suggestionResultsWrap.innerHTML = '';
this.suggestionResultsWrap.append(resultDom);
if (!this.container.classList.contains('search-active')) {
this.showSuggestions();
}
}
showSuggestions() {
this.container.classList.add('search-active');
document.addEventListener('click', this.hideOnOuterEventListener);
document.addEventListener('focusin', this.hideOnOuterEventListener);
window.requestAnimationFrame(() => {
this.suggestions.classList.add('search-suggestions-animation');
})
}
hideSuggestions() {
this.suggestions.style.display = null;
this.container.classList.remove('search-active');
this.suggestions.classList.remove('search-suggestions-animation');
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;