GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 06:22:22 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Show Autocomplete on keydown, hide on blur

Browse source
This commit is contained in:
Henrik Giesel 2021-06-25 23:24:45 +02:00
parent c8ac822971
commit 65e9a0f2ed
4 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ts/editor/Tag.svelte
View file

@ -43,6 +43,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:input
on:focus
on:blur={() => (active = false)}
on:blur
on:keydown
on:tagupdate={updateTag}
on:tagadd
on:tagjoinprevious

23
ts/editor/TagAutocomplete.svelte
View file

@ -15,6 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { className as class };
let autocomplete: Dropdown | undefined;
let displayed: string[] = [];
function switchUpDown(event: KeyboardEvent): void {
const target = event.currentTarget as HTMLButtonElement;
@ -33,16 +34,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
}
const createAutocomplete =
const updateAutocomplete =
(createDropdown: (element: HTMLElement) => Dropdown) =>
(element: HTMLElement) => {
autocomplete = createDropdown(element);
(event: KeyboardEvent): Dropdown => {
const target = event.target as HTMLElement;
autocomplete = createDropdown(target);
autocomplete.show();
return autocomplete;
};
function destroyAutocomplete(): void {
if (!autocomplete) {
return;
}
autocomplete.hide();
}
</script>
<WithDropdownMenu let:menuId let:createDropdown>
<slot createAutocomplete={createAutocomplete(createDropdown)} />
<slot
updateAutocomplete={updateAutocomplete(createDropdown)}
{destroyAutocomplete}
/>
<DropdownMenu id={menuId} class={className}>
{#each suggestions as tag}

12
ts/editor/TagEditor.svelte
View file

@ -27,7 +27,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
newInput.blur();
}
console.log("focus");
newInput.focus();
}
@ -105,13 +104,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<TagAutocomplete
class="d-flex flex-column-reverse"
{suggestions}
let:createAutocomplete
let:updateAutocomplete
let:destroyAutocomplete
>
{#each tags as tag, index (tag.id)}
<Tag
bind:name={tag.name}
on:keydown
on:focus={(event) => createAutocomplete(event.target)}
on:keydown={updateAutocomplete}
on:blur={destroyAutocomplete}
on:tagupdate={() => checkForDuplicateAt(index)}
on:tagadd={() => insertTagAt(index)}
on:tagdelete={() => deleteTagAt(index)}
@ -123,8 +123,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<TagInput
bind:input={newInput}
bind:name={newName}
on:focus={(event) => createAutocomplete(event.target)}
on:keydown
on:keydown={updateAutocomplete}
on:blur={destroyAutocomplete}
on:tagupdate={appendTag}
on:tagadd={appendTag}
on:tagjoinprevious={joinWithLastTag}

2
ts/editor/TagInput.svelte
View file

@ -51,7 +51,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onAccept();
event.preventDefault();
}
console.log("keydown");
}
function onPaste(event: ClipboardEvent): void {
@ -100,6 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:blur
on:blur={onAccept}
on:keydown={onKeydown}
on:keydown
on:paste={onPaste}
on:click
/>