85 lines
2.9 KiB
JavaScript
85 lines
2.9 KiB
JavaScript
|
export default () => ({
|
||
|
|
search: false,
|
||
|
|
menu: false,
|
||
|
|
searchValue: '',
|
||
|
|
isLoading: false,
|
||
|
|
results: '',
|
||
|
|
init() {
|
||
|
|
this.$el.classList.remove('hidden');
|
||
|
|
// this.openMenu();
|
||
|
|
// 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);
|
||
|
|
// });
|
||
|
|
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
});
|