Lucas/Pooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

site: rework {up,down} arrow handling

Browse source 
Allows it to work when setting the cursor via the pointer.
This commit is contained in:
Lucas Gabriel Vuotto 2025-04-28 14:19:01 +00:00
parent 301b28e7e1
commit cc25efc5f4
2 changed files with 21 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

29
public/js/app.js
View file

@ -38,13 +38,14 @@ document.addEventListener('alpine:init', () => {
return; return;
} }
this.activeItem = null;
this.items = await response.json(); this.items = await response.json();
this.open = true; this.open = true;
}, },
fetchSuggestionsOnInput(evt) { async fetchSuggestionsOnInput(evt) {
this.cursor = evt.target.selectionStart; this.cursor = evt.target.selectionStart;
this.fetchSuggestions(); await this.fetchSuggestions();
}, },
autocompleteSuggestion() { autocompleteSuggestion() {
@ -54,6 +55,7 @@ document.addEventListener('alpine:init', () => {
const pos = Math.max(this.cursor - this.currentWord.length, 0); const pos = Math.max(this.cursor - this.currentWord.length, 0);
const tag = this.items[this.activeItem ?? 0].display; const tag = this.items[this.activeItem ?? 0].display;
this.items = [];
this.activeItem = null; this.activeItem = null;
this.search = mySplice(this.search, pos, this.currentWord.length, this.search = mySplice(this.search, pos, this.currentWord.length,
tag + ' '); tag + ' ');
@ -87,20 +89,27 @@ document.addEventListener('alpine:init', () => {
this.activeItem = this.getListItemIndexOf(evt.currentTarget); this.activeItem = this.getListItemIndexOf(evt.currentTarget);
}, },
previousItem(evt) { moveActiveItem(evt, amount, defaultValue) {
const len = this.items.length; const len = this.items.length;
let item = this.activeItem === null ? -1 : this.activeItem - 1; if (len === 0)
item = item % len; returrn;
let item = this.activeItem === null ?
defaultValue : (this.activeItem + amount) % len;
if (item < 0) if (item < 0)
item += len; item += len;
this.activeItem = item; this.activeItem = item;
}, },
nextItem(evt) { async moveActiveItemBackward(evt) {
const len = this.items.length; await this.fetchSuggestionsOnInput(evt);
let item = this.activeItem === null ? 0 : this.activeItem + 1; this.moveActiveItem(evt, -1, -1);
item = item % len; },
this.activeItem = item;
async moveActiveItemForward(evt) {
await this.fetchSuggestionsOnInput(evt);
this.moveActiveItem(evt, 1, 0);
}, },
})); }));
}); });

4
templates/_search.html.ep
View file

@ -13,8 +13,8 @@
@input.debounce="fetchSuggestionsOnInput" @input.debounce="fetchSuggestionsOnInput"
@keydown.tab="autocompleteItem" @keydown.tab="autocompleteItem"
@keydown.enter="autocompleteItem" @keydown.enter="autocompleteItem"
@keydown.up.prevent="previousItem" @keydown.up.prevent="moveActiveItemBackward"
@keydown.down.prevent="nextItem" @keydown.down.prevent="moveActiveItemForward"
@keydown.escape="open = false"> @keydown.escape="open = false">
<ul <ul
x-ref="suggestions" x-ref="suggestions"