GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-21 15:32: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; 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 })); onMount(() => dispatch("mount", { button: buttonRef }));
</script> </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); setSelected(index);
} }
} }
let scroll: () => void;
$: if (scroll) {
scroll();
}
</script> </script>
<WithDropdown {drop} toggleOpen={false} let:createDropdown> <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}> <DropdownMenu class={className} {show}>
{#each suggestionsItems as suggestion, index} {#each suggestionsItems as suggestion, index}
<AutocompleteItem {#if index === selected}
selected={index === selected} <AutocompleteItem
active={index === selected && active} bind:scroll
on:mousedown={() => setSelectedAndActive(index)} selected
on:mouseup={() => { {active}
selectIndex(index); on:mousedown={() => setSelectedAndActive(index)}
chooseSelected(); on:mouseup={() => {
}} selectIndex(index);
on:mouseenter={(event) => selectIfMousedown(event, index)} chooseSelected();
on:mouseleave={() => (active = false)}>{suggestion}</AutocompleteItem }}
> 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} {/each}
</DropdownMenu> </DropdownMenu>
</WithDropdown> </WithDropdown>