kavin/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-12-14 06:10:28 +05:30
Code Issues Projects Releases Wiki Activity

Merge pull request #2980 from Bnyro/anchor-search-suggestions

Browse Source 
feat: allow middle clicks to open search suggestions in new tab
This commit is contained in:
Kavin 2023-09-25 13:24:05 +00:00 committed by GitHub
commit 1bedd48292
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/NavBar.vue
View File

@ -183,7 +183,9 @@ export default {
this.suggestionsVisible = true; this.suggestionsVisible = true;
}, },
onInputBlur() { onInputBlur() {
this.suggestionsVisible = false; // the search suggestions will be hidden after some seconds
// otherwise anchor links won't work!
setTimeout(() => (this.suggestionsVisible = false), 200);
}, },
onSearchTextChange(searchText) { onSearchTextChange(searchText) {
this.searchText = searchText; this.searchText = searchText;

23
src/components/SearchSuggestions.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div class="suggestions-container absolute"> <div class="suggestions-container absolute">
<ul> <ul>
<li <li v-for="(suggestion, i) in searchSuggestions" :key="i" @mouseover="onMouseOver(i)">
v-for="(suggestion, i) in searchSuggestions" <router-link
:key="i" class="suggestion"
class="suggestion" :class="{ 'suggestion-selected': selected === i }"
:class="{ 'suggestion-selected': selected === i }" :to="`/results?search_query=${encodeURIComponent(suggestion)}`"
@mouseover="onMouseOver(i)" >{{ suggestion }}</router-link
@mousedown.stop="onClick(i)" >
v-text="suggestion" </li>
/>
</ul> </ul>
</div> </div>
</template> </template>
@ -71,10 +70,6 @@ export default {
}, },
onClick(i) { onClick(i) {
this.setSelected(i); this.setSelected(i);
this.$router.push({
name: "SearchResults",
query: { search_query: this.searchSuggestions[i] },
});
}, },
setSelected(val) { setSelected(val) {
this.selected = val; this.selected = val;
@ -102,6 +97,6 @@ export default {
} }
.suggestion { .suggestion {
@apply p-1; @apply block w-full p-1;
} }
</style> </style>