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

Scroll suggestion tag into view

Browse source
This commit is contained in:
Henrik Giesel 2021-09-09 18:32:58 +02:00
parent 75ed24b7ea
commit 9b20ca2da4
2 changed files with 38 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ts/editor/AutocompleteItem.svelte
View file

@ -18,6 +18,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let buttonRef: HTMLButtonElement;
export function scroll() {
/* TODO will not work on Gecko */
(buttonRef as any)?.scrollIntoViewIfNeeded(false);
/* buttonRef.scrollIntoView({ behavior: "smooth", block: "start" }); */
}
onMount(() => dispatch("mount", { button: buttonRef }));
</script>

42
ts/editor/WithAutocomplete.svelte
View file

@ -138,6 +138,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
setSelected(index);
}
}
let scroll: () => void;
$: if (scroll) {
scroll();
}
</script>
<WithDropdown {drop} toggleOpen={false} let:createDropdown>
@ -145,17 +151,31 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<DropdownMenu class={className} {show}>
{#each suggestionsItems as suggestion, index}
<AutocompleteItem
selected={index === selected}
active={index === selected && active}
on:mousedown={() => setSelectedAndActive(index)}
on:mouseup={() => {
selectIndex(index);
chooseSelected();
}}
on:mouseenter={(event) => selectIfMousedown(event, index)}
on:mouseleave={() => (active = false)}>{suggestion}</AutocompleteItem
>
{#if index === selected}
<AutocompleteItem
bind:scroll
selected
{active}
on:mousedown={() => setSelectedAndActive(index)}
on:mouseup={() => {
selectIndex(index);
chooseSelected();
}}
on:mouseenter={(event) => selectIfMousedown(event, index)}
on:mouseleave={() => (active = false)}
>{suggestion}</AutocompleteItem
>
{:else}
<AutocompleteItem
on:mousedown={() => setSelectedAndActive(index)}
on:mouseup={() => {
selectIndex(index);
chooseSelected();
}}
on:mouseenter={(event) => selectIfMousedown(event, index)}
>{suggestion}</AutocompleteItem
>
{/if}
{/each}
</DropdownMenu>
</WithDropdown>