mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-24 06:27:19 +00:00
Merge pull request #112 from TeamPiped/feature/search-suggestions
Implement search suggestions
This commit is contained in:
FireMasterK
GitHub
commit
b1f8899bd8
74
src/App.vue
74
src/App.vue
@ -3,53 +3,7 @@
|
|||||||
class="uk-container uk-container-expand uk-light uk-height-viewport"
|
class="uk-container uk-container-expand uk-light uk-height-viewport"
|
||||||
style="background: #0b0e0f"
|
style="background: #0b0e0f"
|
||||||
>
|
>
|
||||||
<nav
|
<Navigation />
|
||||||
class="uk-navbar-container uk-container-expand uk-light"
|
|
||||||
style="background: #0b0e0f"
|
|
||||||
uk-navbar
|
|
||||||
>
|
|
||||||
<div class="uk-navbar-left">
|
|
||||||
<router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
|
|
||||||
><img
|
|
||||||
src="../public/img/icons/logo.svg"
|
|
||||||
height="32"
|
|
||||||
width="32"
|
|
||||||
/>iped</router-link
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="uk-navbar-center uk-flex uk-visible@s">
|
|
||||||
<input
|
|
||||||
class="uk-input"
|
|
||||||
type="text"
|
|
||||||
placeholder="Search"
|
|
||||||
v-model="searchText"
|
|
||||||
@keypress="onChange($event)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="uk-navbar-right">
|
|
||||||
<ul class="uk-navbar-nav">
|
|
||||||
<li>
|
|
||||||
<router-link to="/preferences">Preferences</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/login">Login</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/feed">Feed</router-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div class="uk-container-expand uk-hidden@s">
|
|
||||||
<input
|
|
||||||
class="uk-input"
|
|
||||||
type="text"
|
|
||||||
placeholder="Search"
|
|
||||||
v-model="searchText"
|
|
||||||
@keypress="onChange($event)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<router-view />
|
<router-view />
|
||||||
|
|
||||||
<div style="text-align: center">
|
<div style="text-align: center">
|
||||||
@ -70,30 +24,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Constants from "@/Constants.js";
|
import Navigation from "@/components/Navigation";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
components: {
|
||||||
return {
|
Navigation
|
||||||
searchText: "",
|
|
||||||
searchSuggestions: []
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange(e) {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
this.$router.push({
|
|
||||||
name: "SearchResults",
|
|
||||||
query: { search_query: this.searchText }
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.fetchJson(
|
|
||||||
Constants.BASE_URL +
|
|
||||||
"/suggestions?query=" +
|
|
||||||
encodeURI(this.searchText + e.key)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
95
src/components/Navigation.vue
Normal file
95
src/components/Navigation.vue
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<template
|
||||||
|
><nav
|
||||||
|
class="uk-navbar-container uk-container-expand uk-position-relative uk-light"
|
||||||
|
style="background: #0b0e0f"
|
||||||
|
uk-navbar
|
||||||
|
>
|
||||||
|
<div class="uk-navbar-left">
|
||||||
|
<router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
|
||||||
|
><img src="/img/icons/logo.svg" height="32" width="32" />iped</router-link
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="uk-navbar-center uk-flex uk-visible@m">
|
||||||
|
<input
|
||||||
|
class="uk-input uk-width-medium"
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
|
v-model="searchText"
|
||||||
|
@keyup="onKeyUp"
|
||||||
|
@focus="onInputFocus"
|
||||||
|
@blur="onInputBlur"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="uk-navbar-right">
|
||||||
|
<ul class="uk-navbar-nav">
|
||||||
|
<li>
|
||||||
|
<router-link to="/preferences">Preferences</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/login">Login</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link to="/feed">Feed</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="uk-container-expand uk-hidden@m">
|
||||||
|
<input
|
||||||
|
class="uk-input"
|
||||||
|
type="text"
|
||||||
|
placeholder="Search"
|
||||||
|
v-model="searchText"
|
||||||
|
@keyup="onKeyUp"
|
||||||
|
@focus="onInputFocus"
|
||||||
|
@blur="onInputBlur"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<SearchSuggestions
|
||||||
|
v-show="searchText && suggestionsVisible"
|
||||||
|
:searchText="searchText"
|
||||||
|
@searchchange="onSearchTextChange"
|
||||||
|
ref="searchSuggestions"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SearchSuggestions from "@/components/SearchSuggestions";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
SearchSuggestions
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
searchText: "",
|
||||||
|
suggestionsVisible: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onKeyUp(e) {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
this.$router.push({
|
||||||
|
name: "SearchResults",
|
||||||
|
query: { search_query: this.searchText }
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
this.$refs.searchSuggestions.onKeyUp(e);
|
||||||
|
},
|
||||||
|
onInputFocus() {
|
||||||
|
this.suggestionsVisible = true;
|
||||||
|
},
|
||||||
|
onInputBlur() {
|
||||||
|
this.suggestionsVisible = false;
|
||||||
|
},
|
||||||
|
onSearchTextChange(searchText) {
|
||||||
|
this.searchText = searchText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
104
src/components/SearchSuggestions.vue
Normal file
104
src/components/SearchSuggestions.vue
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<template>
|
||||||
|
<div class="uk-position-absolute uk-panel uk-box-shadow-large suggestions-container">
|
||||||
|
<ul class="uk-list uk-margin-remove uk-text-secondary">
|
||||||
|
<li
|
||||||
|
v-for="(suggestion, i) in searchSuggestions"
|
||||||
|
:key="i"
|
||||||
|
:class="{ selected: selected === i }"
|
||||||
|
@mouseover="onMouseOver(i)"
|
||||||
|
@mousedown.stop="onClick(i)"
|
||||||
|
class="uk-margin-remove suggestion"
|
||||||
|
>
|
||||||
|
{{ suggestion }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Constants from "@/Constants.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
searchText: String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selected: 0,
|
||||||
|
searchSuggestions: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onKeyUp(e) {
|
||||||
|
if (e.key === "ArrowUp") {
|
||||||
|
if (this.selected <= 0) {
|
||||||
|
this.setSelected(this.searchSuggestions.length - 1);
|
||||||
|
} else {
|
||||||
|
this.setSelected(this.selected - 1);
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
} else if (e.key === "ArrowDown") {
|
||||||
|
if (this.selected >= this.searchSuggestions.length - 1) {
|
||||||
|
this.setSelected(0);
|
||||||
|
} else {
|
||||||
|
this.setSelected(this.selected + 1);
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
this.refreshSuggestions();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async refreshSuggestions() {
|
||||||
|
this.searchSuggestions = await this.fetchJson(
|
||||||
|
Constants.BASE_URL + "/suggestions?query=" + encodeURI(this.searchText)
|
||||||
|
);
|
||||||
|
this.searchSuggestions.unshift(this.searchText);
|
||||||
|
this.setSelected(0);
|
||||||
|
},
|
||||||
|
onMouseOver(i) {
|
||||||
|
if (i !== this.selected) {
|
||||||
|
this.selected = i;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onClick(i) {
|
||||||
|
this.setSelected(i);
|
||||||
|
this.$router.push({
|
||||||
|
name: "SearchResults",
|
||||||
|
query: { search_query: this.searchSuggestions[i] }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setSelected(val) {
|
||||||
|
this.selected = val;
|
||||||
|
this.$emit("searchchange", this.searchSuggestions[this.selected]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.suggestions-container {
|
||||||
|
background-color: #242727;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
max-width: 640px;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
.suggestion {
|
||||||
|
padding: 4px 15px;
|
||||||
|
}
|
||||||
|
.suggestion.selected {
|
||||||
|
background-color: #393d3d;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 959px) {
|
||||||
|
.suggestions-container {
|
||||||
|
max-width: calc(100% - 60px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 639px) {
|
||||||
|
.suggestions-container {
|
||||||
|
max-width: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user