mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-12-23 14:03:35 +00:00
make suggestion clickable, fix event listener issue
This commit is contained in:
parent
f922dd74eb
commit
6528ce7bf8
@ -15,7 +15,7 @@
|
|||||||
type="text"
|
type="text"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
@keydown="onKeyDown"
|
@keyup="onKeyUp"
|
||||||
@focus="onInputFocus"
|
@focus="onInputFocus"
|
||||||
@blur="onInputBlur"
|
@blur="onInputBlur"
|
||||||
/>
|
/>
|
||||||
@ -40,7 +40,7 @@
|
|||||||
type="text"
|
type="text"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
v-model="searchText"
|
v-model="searchText"
|
||||||
@keydown="onKeyDown"
|
@keyup="onKeyUp"
|
||||||
@focus="onInputFocus"
|
@focus="onInputFocus"
|
||||||
@blur="onInputBlur"
|
@blur="onInputBlur"
|
||||||
/>
|
/>
|
||||||
@ -49,6 +49,7 @@
|
|||||||
v-show="searchText && suggestionsVisible"
|
v-show="searchText && suggestionsVisible"
|
||||||
:searchText="searchText"
|
:searchText="searchText"
|
||||||
@searchchange="onSearchTextChange"
|
@searchchange="onSearchTextChange"
|
||||||
|
ref="searchSuggestions"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -66,7 +67,7 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onKeyDown(e) {
|
onKeyUp(e) {
|
||||||
if (e.key === "Enter") {
|
if (e.key === "Enter") {
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name: "SearchResults",
|
name: "SearchResults",
|
||||||
@ -76,6 +77,7 @@ export default {
|
|||||||
} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
} else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
|
this.$refs.searchSuggestions.onKeyUp(e);
|
||||||
},
|
},
|
||||||
onInputFocus() {
|
onInputFocus() {
|
||||||
this.suggestionsVisible = true;
|
this.suggestionsVisible = true;
|
||||||
|
@ -5,6 +5,8 @@
|
|||||||
v-for="(suggestion, i) in searchSuggestions"
|
v-for="(suggestion, i) in searchSuggestions"
|
||||||
:key="i"
|
:key="i"
|
||||||
:class="{ selected: selected === i }"
|
:class="{ selected: selected === i }"
|
||||||
|
@mouseover="onMouseOver(i)"
|
||||||
|
@mousedown.stop="onClick(i)"
|
||||||
class="uk-margin-remove suggestion"
|
class="uk-margin-remove suggestion"
|
||||||
>
|
>
|
||||||
{{ suggestion }}
|
{{ suggestion }}
|
||||||
@ -30,16 +32,16 @@ export default {
|
|||||||
onKeyUp(e) {
|
onKeyUp(e) {
|
||||||
if (e.key === "ArrowUp") {
|
if (e.key === "ArrowUp") {
|
||||||
if (this.selected <= 0) {
|
if (this.selected <= 0) {
|
||||||
this.selected = this.searchSuggestions.length - 1;
|
this.setSelected(this.searchSuggestions.length - 1);
|
||||||
} else {
|
} else {
|
||||||
this.selected -= 1;
|
this.setSelected(this.selected - 1);
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
} else if (e.key === "ArrowDown") {
|
} else if (e.key === "ArrowDown") {
|
||||||
if (this.selected >= this.searchSuggestions.length - 1) {
|
if (this.selected >= this.searchSuggestions.length - 1) {
|
||||||
this.selected = 0;
|
this.setSelected(0);
|
||||||
} else {
|
} else {
|
||||||
this.selected += 1;
|
this.setSelected(this.selected + 1);
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
} else {
|
} else {
|
||||||
@ -51,21 +53,25 @@ export default {
|
|||||||
Constants.BASE_URL + "/suggestions?query=" + encodeURI(this.searchText)
|
Constants.BASE_URL + "/suggestions?query=" + encodeURI(this.searchText)
|
||||||
);
|
);
|
||||||
this.searchSuggestions.unshift(this.searchText);
|
this.searchSuggestions.unshift(this.searchText);
|
||||||
|
this.setSelected(0);
|
||||||
|
},
|
||||||
|
onMouseOver(i) {
|
||||||
|
if (i !== this.selected) {
|
||||||
|
this.selected = i;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
onClick(i) {
|
||||||
selected(newValue, oldValue) {
|
this.setSelected(i);
|
||||||
if (newValue !== oldValue && this.searchSuggestions[this.selected]) {
|
this.$router.push({
|
||||||
|
name: "SearchResults",
|
||||||
|
query: { search_query: this.searchText }
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setSelected(val) {
|
||||||
|
this.selected = val;
|
||||||
this.$emit("searchchange", this.searchSuggestions[this.selected]);
|
this.$emit("searchchange", this.searchSuggestions[this.selected]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
window.addEventListener("keyup", this.onKeyUp);
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
window.removeEventListener("keyup", this.onKeyUp);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user