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; 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 { function updateWithTagName(tag: TagType): void {
tag.name = activeName; tag.name = activeName;
@ -244,6 +250,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
break; break;
default: default:
if (event.code.startsWith("Arrow")) {
return;
}
autocomplete.update(); autocomplete.update();
break; break;
} }
@ -259,7 +269,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{#if index === active} {#if index === active}
<WithAutocomplete <WithAutocomplete
class="d-flex flex-column-reverse" class="d-flex flex-column-reverse"
{suggestions} {suggestionsPromise}
on:autocomplete={onAutocomplete} on:autocomplete={onAutocomplete}
on:update={updateSuggestions} on:update={updateSuggestions}
let:createAutocomplete 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 = ""; let className: string = "";
export { className as class }; export { className as class };
export let suggestions: string[]; export let suggestionsPromise: Promise<string[]>;
let target: HTMLElement; let target: HTMLElement;
let dropdown: Dropdown; let dropdown: Dropdown;
@ -27,27 +27,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function selectNext() { function selectNext() {
if (selected === null) { suggestionsPromise.then((suggestions) => {
selected = 0; if (selected === null) {
} else if (selected >= suggestions.length - 1) { selected = 0;
selected = null; } else if (selected >= suggestions.length - 1) {
} else { selected = null;
selected++; } else {
} selected++;
}
dispatch("autocomplete", { selected: suggestions[selected ?? -1] }); dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
});
} }
function selectPrevious() { function selectPrevious() {
if (selected === null) { suggestionsPromise.then((suggestions) => {
selected = suggestions.length - 1; if (selected === null) {
} else if (selected === 0) { selected = suggestions.length - 1;
selected = null; } else if (selected === 0) {
} else { selected = null;
selected--; } else {
} selected--;
}
dispatch("autocomplete", { selected: suggestions[selected ?? -1] }); dispatch("autocomplete", { selected: suggestions[selected ?? -1] });
});
} }
function chooseSelected() { function chooseSelected() {
@ -61,14 +65,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
await tick(); await tick();
if (suggestions.length > 0) { suggestionsPromise.then((suggestions) => {
dropdown.show(); if (suggestions.length > 0) {
// disabled class will tell Bootstrap not to show menu on clicking dropdown.show();
target.classList.remove("disabled"); // disabled class will tell Bootstrap not to show menu on clicking
} else { target.classList.remove("disabled");
dropdown.hide(); } else {
target.classList.add("disabled"); dropdown.hide();
} target.classList.add("disabled");
}
});
} }
const createAutocomplete = 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} /> <slot createAutocomplete={createAutocomplete(createDropdown)} {autocomplete} />
<DropdownMenu id={menuId} class={className}> <DropdownMenu id={menuId} class={className}>
{#each suggestions as suggestion, i} {#await suggestionsPromise}
<div class="suggestion-item"> <div class="suggestion-item">
<DropdownItem <DropdownItem>...</DropdownItem>
class={i === selected ? (active ? "active" : "focus") : ""}
on:click>{suggestion}</DropdownItem
>
</div> </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> </DropdownMenu>
</WithDropdownMenu> </WithDropdownMenu>