84 lines
2.7 KiB
JavaScript
84 lines
2.7 KiB
JavaScript
|
export default () => ({
|
||
|
|
search: false,
|
||
|
|
menu: false,
|
||
|
|
searchValue: '',
|
||
|
|
isLoading: false,
|
||
|
|
results: '',
|
||
|
|
init() {
|
||
|
|
this.$el.classList.remove('hidden');
|
||
|
|
// this.open();
|
||
|
|
},
|
||
|
|
openSearch() {
|
||
|
|
// this.$refs.nav.classList.remove('w-0')
|
||
|
|
this.$refs.search.classList.add('translate-y-72')
|
||
|
|
this.$refs.searchField.focus()
|
||
|
|
this.search = true;
|
||
|
|
},
|
||
|
|
openMenu() {
|
||
|
|
this.$refs.nav.classList.remove('w-0')
|
||
|
|
this.$refs.nav.classList.add('w-2/3')
|
||
|
|
this.menu = true;
|
||
|
|
},
|
||
|
|
closeSearch() {
|
||
|
|
this.searchValue = ''
|
||
|
|
this.results = ''
|
||
|
|
this.$refs.search.classList.remove('translate-y-72')
|
||
|
|
this.search = false;
|
||
|
|
},
|
||
|
|
closeMenu() {
|
||
|
|
this.$refs.nav.classList.add('w-0')
|
||
|
|
this.$refs.nav.classList.remove('w-2/3')
|
||
|
|
this.menu = false;
|
||
|
|
},
|
||
|
|
isSearchOpen() {
|
||
|
|
return this.search === true;
|
||
|
|
},
|
||
|
|
isMenuOpen() {
|
||
|
|
return this.menu === true;
|
||
|
|
},
|
||
|
|
showOverlay() {
|
||
|
|
return this.search || this.menu
|
||
|
|
},
|
||
|
|
shouldSearch() {
|
||
|
|
return this.searchValue.length >= 2;
|
||
|
|
},
|
||
|
|
searching(fetch = true) {
|
||
|
|
if(fetch){
|
||
|
|
this.isLoading = true;
|
||
|
|
this.$refs.results.classList.add('opacity-0')
|
||
|
|
} else {
|
||
|
|
this.isLoading = false;
|
||
|
|
this.$refs.results.classList.remove('opacity-0')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fetchResults(query) {
|
||
|
|
// console.log(query);
|
||
|
|
if (this.shouldSearch) {
|
||
|
|
this.searching();
|
||
|
|
fetch('/api/search', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Accept': 'application/json, text/plain, */*',
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify({query: this.searchValue})
|
||
|
|
}).then(res => {
|
||
|
|
if (res.ok) {
|
||
|
|
return res.json();
|
||
|
|
}
|
||
|
|
throw new Error('Something went wrong');
|
||
|
|
}).then(data => {
|
||
|
|
this.results = data.html.length ? data.html : `<span class='w-full p-1.5 group overflow-hidden bg-gray-800 hover:bg-gray-700 h-20 flex items-center justify-center font-semibold'>No Result Found</span>`
|
||
|
|
setTimeout(this.searching(false), 2000)
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
.catch( (error) => {
|
||
|
|
console.log(error);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|