langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow clicking on suggestion items

Browse Source
This commit is contained in:
Henrik Giesel 2021-07-02 12:47:23 +02:00
parent 2dff6cf4be
commit 95806c5176
4 changed files with 30 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ts/components/WithDropdown.svelte
View File

@ -12,6 +12,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let autoClose: boolean | "inside" | "outside" = true; export let autoClose: boolean | "inside" | "outside" = true;
export let placement = "bottom-start"; export let placement = "bottom-start";
export let drop: "down" | "up" | "left" | "right" = "down";
$: dropClass = `drop${drop}`;
setContext(dropdownKey, { setContext(dropdownKey, {
dropdown: true, dropdown: true,
@ -59,7 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onDestroy(() => dropdown?.dispose()); onDestroy(() => dropdown?.dispose());
</script> </script>
<div class="dropdown"> <div class={dropClass}>
<slot {createDropdown} dropdownObject={api} /> <slot {createDropdown} dropdownObject={api} />
</div> </div>

3
ts/editor/AutocompleteItem.svelte
View File

@ -30,9 +30,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:btn-night={nightMode} class:btn-night={nightMode}
class:selected class:selected
class:active class:active
on:mousedown|preventDefault
on:mouseup on:mouseup
on:mouseenter on:mouseenter
on:mousedown|preventDefault on:mouseleave
> >
<slot /> <slot />
</button> </button>

8
ts/editor/TagEditor.svelte
View File

@ -358,7 +358,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<StickyBottom> <StickyBottom>
<ButtonToolbar <ButtonToolbar
class="dropup d-flex flex-wrap align-items-center" class="d-flex flex-wrap align-items-center"
{size} {size}
on:focusout={deselectIfLeave} on:focusout={deselectIfLeave}
> >
@ -395,11 +395,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{#if index === active} {#if index === active}
<div class="adjust-position"> <div class="adjust-position">
<WithAutocomplete <WithAutocomplete
class="d-flex flex-column-reverse dropup" drop="up"
class="d-flex flex-column-reverse"
{suggestionsPromise} {suggestionsPromise}
on:update={updateSuggestions} on:update={updateSuggestions}
on:autocomplete={({ detail }) => on:select={({ detail }) => onAutocomplete(detail.selected)}
onAutocomplete(detail.selected)}
on:choose={({ detail }) => onChosen(detail.chosen)} on:choose={({ detail }) => onChosen(detail.chosen)}
let:createAutocomplete let:createAutocomplete
> >

27
ts/editor/WithAutocomplete.svelte
View File

@ -14,6 +14,8 @@ 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 drop: "down" | "up" | "left" | "right" = "down";
export let suggestionsPromise: Promise<string[]>; export let suggestionsPromise: Promise<string[]>;
let target: HTMLElement; let target: HTMLElement;
@ -35,7 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
selected++; selected++;
} }
dispatch("autocomplete", { selected: suggestions[selected ?? -1] }); dispatch("select", { selected: suggestions[selected ?? -1] });
} }
async function selectPrevious() { async function selectPrevious() {
@ -49,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
selected--; selected--;
} }
dispatch("autocomplete", { selected: suggestions[selected ?? -1] }); dispatch("select", { selected: suggestions[selected ?? -1] });
} }
async function chooseSelected() { async function chooseSelected() {
@ -100,11 +102,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
function setSelected(index: number): void { function setSelected(index: number): void {
selected = index; selected = index;
active = true;
} }
async function chooseIndex(index: number): Promise<void> { function setSelectedAndActive(index: number): void {
setSelected(index);
}
async function selectIndex(index: number): Promise<void> {
const suggestions = await suggestionsPromise; const suggestions = await suggestionsPromise;
dispatch("autocomplete", { name: suggestions[index] }); active = false;
dispatch("select", { selected: suggestions[index] });
} }
function selectIfMousedown(event: MouseEvent, index: number): void { function selectIfMousedown(event: MouseEvent, index: number): void {
@ -114,7 +122,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<WithDropdown let:createDropdown> <WithDropdown {drop} let:createDropdown>
<slot createAutocomplete={createAutocomplete(createDropdown)} /> <slot createAutocomplete={createAutocomplete(createDropdown)} />
<DropdownMenu class={className}> <DropdownMenu class={className}>
@ -125,9 +133,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<AutocompleteItem <AutocompleteItem
selected={index === selected} selected={index === selected}
active={index === selected && active} active={index === selected && active}
on:mousedown={() => setSelected(index)} on:mousedown={() => setSelectedAndActive(index)}
on:mouseup={() => {
selectIndex(index);
chooseSelected();
}}
on:mouseenter={(event) => selectIfMousedown(event, index)} on:mouseenter={(event) => selectIfMousedown(event, index)}
on:mouseup={() => chooseIndex(index)}>{suggestion}</AutocompleteItem on:mouseleave={() => (active = false)}
>{suggestion}</AutocompleteItem
> >
{/each} {/each}
{/await} {/await}