2021-06-24 00:12:20 +02:00
|
|
|
<!--
|
|
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
-->
|
|
|
|
<script lang="typescript">
|
2021-09-08 19:27:50 +02:00
|
|
|
import { createEventDispatcher, tick } from "svelte";
|
2021-06-28 02:05:32 +02:00
|
|
|
|
2021-06-25 19:23:35 +02:00
|
|
|
import type Dropdown from "bootstrap/js/dist/dropdown";
|
|
|
|
|
2021-07-01 20:26:41 +02:00
|
|
|
import WithDropdown from "components/WithDropdown.svelte";
|
2021-06-24 20:41:50 +02:00
|
|
|
import DropdownMenu from "components/DropdownMenu.svelte";
|
2021-06-29 01:37:23 +02:00
|
|
|
import AutocompleteItem from "./AutocompleteItem.svelte";
|
2021-06-24 00:12:20 +02:00
|
|
|
|
2021-06-25 15:44:44 +02:00
|
|
|
let className: string = "";
|
|
|
|
export { className as class };
|
2021-06-24 00:12:20 +02:00
|
|
|
|
2021-09-08 14:27:46 +02:00
|
|
|
export let drop: "down" | "up" = "down";
|
2021-06-29 00:14:31 +02:00
|
|
|
export let suggestionsPromise: Promise<string[]>;
|
2021-06-27 17:13:48 +02:00
|
|
|
|
2021-06-28 23:39:46 +02:00
|
|
|
let dropdown: Dropdown;
|
2021-09-08 19:18:37 +02:00
|
|
|
let show = false;
|
2021-06-27 18:57:32 +02:00
|
|
|
|
2021-09-08 12:25:26 +02:00
|
|
|
let suggestionsItems: string[] = [];
|
|
|
|
$: suggestionsPromise.then((items) => {
|
2021-09-08 19:18:37 +02:00
|
|
|
show = items.length > 0;
|
|
|
|
|
|
|
|
if (show) {
|
2021-09-08 12:25:26 +02:00
|
|
|
dropdown.show();
|
|
|
|
} else {
|
|
|
|
dropdown.hide();
|
|
|
|
}
|
|
|
|
|
|
|
|
suggestionsItems = items;
|
|
|
|
});
|
|
|
|
|
2021-06-29 02:10:32 +02:00
|
|
|
let selected: number | null = null;
|
2021-06-26 03:20:27 +02:00
|
|
|
let active: boolean = false;
|
|
|
|
|
2021-06-28 02:05:32 +02:00
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
|
2021-09-08 12:25:26 +02:00
|
|
|
/**
|
|
|
|
* select as currently highlighted item
|
|
|
|
*/
|
2021-09-08 15:11:53 +02:00
|
|
|
function incrementSelected(): void {
|
2021-06-29 01:37:23 +02:00
|
|
|
if (selected === null) {
|
|
|
|
selected = 0;
|
2021-09-08 12:25:26 +02:00
|
|
|
} else if (selected >= suggestionsItems.length - 1) {
|
2021-06-29 01:37:23 +02:00
|
|
|
selected = null;
|
|
|
|
} else {
|
|
|
|
selected++;
|
|
|
|
}
|
2021-06-28 19:21:01 +02:00
|
|
|
}
|
|
|
|
|
2021-09-08 15:11:53 +02:00
|
|
|
function decrementSelected(): void {
|
2021-06-29 01:37:23 +02:00
|
|
|
if (selected === null) {
|
2021-09-08 12:25:26 +02:00
|
|
|
selected = suggestionsItems.length - 1;
|
2021-06-29 01:37:23 +02:00
|
|
|
} else if (selected === 0) {
|
|
|
|
selected = null;
|
|
|
|
} else {
|
|
|
|
selected--;
|
|
|
|
}
|
2021-09-08 15:11:53 +02:00
|
|
|
}
|
2021-06-29 01:37:23 +02:00
|
|
|
|
2021-09-08 15:11:53 +02:00
|
|
|
async function updateSelected(): Promise<void> {
|
2021-09-08 12:25:26 +02:00
|
|
|
dispatch("select", { selected: suggestionsItems[selected ?? -1] });
|
2021-09-08 15:11:53 +02:00
|
|
|
await tick();
|
|
|
|
dropdown.update();
|
|
|
|
}
|
|
|
|
|
|
|
|
async function selectNext(): Promise<void> {
|
|
|
|
incrementSelected();
|
|
|
|
await updateSelected();
|
|
|
|
}
|
|
|
|
|
|
|
|
async function selectPrevious(): Promise<void> {
|
|
|
|
decrementSelected();
|
|
|
|
await updateSelected();
|
2021-06-28 19:21:01 +02:00
|
|
|
}
|
|
|
|
|
2021-09-08 12:25:26 +02:00
|
|
|
/**
|
|
|
|
* choose as accepted suggestion
|
|
|
|
*/
|
2021-06-29 02:10:32 +02:00
|
|
|
async function chooseSelected() {
|
2021-06-28 19:21:01 +02:00
|
|
|
active = true;
|
2021-09-08 12:25:26 +02:00
|
|
|
dispatch("choose", { chosen: suggestionsItems[selected ?? -1] });
|
2021-09-08 19:18:37 +02:00
|
|
|
|
2021-09-08 17:20:20 +02:00
|
|
|
await tick();
|
2021-09-08 19:18:37 +02:00
|
|
|
show = false;
|
2021-06-28 19:21:01 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
async function update() {
|
|
|
|
dropdown.update();
|
2021-09-08 12:25:26 +02:00
|
|
|
await tick();
|
2021-06-29 01:37:23 +02:00
|
|
|
|
2021-09-08 12:25:26 +02:00
|
|
|
dispatch("update");
|
2021-06-28 19:21:01 +02:00
|
|
|
}
|
|
|
|
|
2021-07-06 17:53:33 +02:00
|
|
|
function hasSelected(): boolean {
|
|
|
|
return selected !== null;
|
|
|
|
}
|
|
|
|
|
2021-06-28 23:39:46 +02:00
|
|
|
const createAutocomplete =
|
|
|
|
(createDropdown: (element: HTMLElement) => Dropdown) =>
|
|
|
|
(element: HTMLElement): any => {
|
|
|
|
dropdown = createDropdown(element);
|
2021-07-01 20:26:41 +02:00
|
|
|
|
|
|
|
const api = {
|
|
|
|
hide: dropdown.hide,
|
|
|
|
show: dropdown.show,
|
|
|
|
toggle: dropdown.toggle,
|
2021-06-28 23:39:46 +02:00
|
|
|
isVisible: (dropdown as any).isVisible,
|
|
|
|
selectPrevious,
|
|
|
|
selectNext,
|
|
|
|
chooseSelected,
|
|
|
|
update,
|
2021-09-08 17:20:20 +02:00
|
|
|
hasSelected,
|
2021-06-28 23:39:46 +02:00
|
|
|
};
|
|
|
|
|
2021-07-01 20:26:41 +02:00
|
|
|
return api;
|
2021-06-28 23:39:46 +02:00
|
|
|
};
|
2021-06-28 19:21:01 +02:00
|
|
|
|
2021-06-29 01:37:23 +02:00
|
|
|
function setSelected(index: number): void {
|
|
|
|
selected = index;
|
2021-07-02 12:47:23 +02:00
|
|
|
active = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
function setSelectedAndActive(index: number): void {
|
|
|
|
setSelected(index);
|
2021-06-29 01:37:23 +02:00
|
|
|
}
|
|
|
|
|
2021-07-02 12:47:23 +02:00
|
|
|
async function selectIndex(index: number): Promise<void> {
|
|
|
|
active = false;
|
2021-09-08 12:25:26 +02:00
|
|
|
dispatch("select", { selected: suggestionsItems[index] });
|
2021-06-29 01:37:23 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function selectIfMousedown(event: MouseEvent, index: number): void {
|
|
|
|
if (event.buttons === 1) {
|
|
|
|
setSelected(index);
|
|
|
|
}
|
|
|
|
}
|
2021-09-09 18:32:58 +02:00
|
|
|
|
|
|
|
let scroll: () => void;
|
|
|
|
|
|
|
|
$: if (scroll) {
|
|
|
|
scroll();
|
|
|
|
}
|
2021-06-24 00:12:20 +02:00
|
|
|
</script>
|
|
|
|
|
2021-07-02 13:13:58 +02:00
|
|
|
<WithDropdown {drop} toggleOpen={false} let:createDropdown>
|
2021-09-08 19:18:37 +02:00
|
|
|
<slot createAutocomplete={createAutocomplete(createDropdown)} />
|
2021-06-25 18:09:58 +02:00
|
|
|
|
2021-09-08 19:18:37 +02:00
|
|
|
<DropdownMenu class={className} {show}>
|
2021-09-08 12:25:26 +02:00
|
|
|
{#each suggestionsItems as suggestion, index}
|
2021-09-09 18:32:58 +02:00
|
|
|
{#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}
|
2021-09-08 12:25:26 +02:00
|
|
|
{/each}
|
2021-06-25 18:14:32 +02:00
|
|
|
</DropdownMenu>
|
2021-07-01 20:26:41 +02:00
|
|
|
</WithDropdown>
|