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

suggestions -> suggestionsPromise, so it works with external APIs

Browse source
This commit is contained in:
Henrik Giesel 2021-06-29 00:14:31 +02:00
parent a515a9899b
commit b2d2cb8715
2 changed files with 56 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ts/editor/TagEditor.svelte
View file

@ -39,9 +39,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
activeName = selected ?? activeTag.name;
}
let suggestions: string[] = [];
let suggestionsPromise: Promise<string[]> = Promise.resolve([]);
function updateSuggestions(): void {}
function updateSuggestions(): void {
suggestionsPromise = Promise.resolve([
"en::vocabulary",
"en::idioms",
Math.random().toString(36).substring(2),
]);
}
function updateWithTagName(tag: TagType): void {
tag.name = activeName;
@ -244,6 +250,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
break;
default:
if (event.code.startsWith("Arrow")) {
return;
}
autocomplete.update();
break;
}
@ -259,7 +269,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{#if index === active}
<WithAutocomplete
class="d-flex flex-column-reverse"
{suggestions}
{suggestionsPromise}
on:autocomplete={onAutocomplete}
on:update={updateSuggestions}
let:createAutocomplete

74
ts/editor/WithAutocomplete.svelte
View file

@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let className: string = "";
export { className as class };
export let suggestions: string[];
export let suggestionsPromise: Promise<string[]>;
let target: HTMLElement;
let dropdown: Dropdown;
@ -27,27 +27,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dispatch = createEventDispatcher();
function selectNext() {
if (selected === null) {
selected = 0;
} else if (selected >= suggestions.length - 1) {
selected = null;
} else {
selected++;
}
suggestionsPromise.then((suggestions) => {
if (selected === null) {
selected = 0;
} else if (selected >= suggestions.length - 1) {
selected = null;
} else {
selected++;
}
dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
});
}
function selectPrevious() {
if (selected === null) {
selected = suggestions.length - 1;
} else if (selected === 0) {
selected = null;
} else {
selected--;
}
suggestionsPromise.then((suggestions) => {
if (selected === null) {
selected = suggestions.length - 1;
} else if (selected === 0) {
selected = null;
} else {
selected--;
}
dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
});
}
function chooseSelected() {
@ -61,14 +65,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
await tick();
if (suggestions.length > 0) {
dropdown.show();
// disabled class will tell Bootstrap not to show menu on clicking
target.classList.remove("disabled");
} else {
dropdown.hide();
target.classList.add("disabled");
}
suggestionsPromise.then((suggestions) => {
if (suggestions.length > 0) {
dropdown.show();
// disabled class will tell Bootstrap not to show menu on clicking
target.classList.remove("disabled");
} else {
dropdown.hide();
target.classList.add("disabled");
}
});
}
const createAutocomplete =
@ -97,14 +103,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot createAutocomplete={createAutocomplete(createDropdown)} {autocomplete} />
<DropdownMenu id={menuId} class={className}>
{#each suggestions as suggestion, i}
{#await suggestionsPromise}
<div class="suggestion-item">
<DropdownItem
class={i === selected ? (active ? "active" : "focus") : ""}
on:click>{suggestion}</DropdownItem
>
<DropdownItem>...</DropdownItem>
</div>
{/each}
{:then suggestions}
{#each suggestions as suggestion, i}
<div class="suggestion-item">
<DropdownItem
class={i === selected ? (active ? "active" : "focus") : ""}
on:click>{suggestion}</DropdownItem
>
</div>
{/each}
{/await}
</DropdownMenu>
</WithDropdownMenu>