From b7e39b59fd0fc7b5610ebff29035bf622079e0d8 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 5 Oct 2022 20:45:21 +0800
Subject: refactor: Change file structure

---
 old-apps/web-shared/src/components/dropdown.svelte | 389 ---------------------
 1 file changed, 389 deletions(-)
 delete mode 100644 old-apps/web-shared/src/components/dropdown.svelte

(limited to 'old-apps/web-shared/src/components/dropdown.svelte')

diff --git a/old-apps/web-shared/src/components/dropdown.svelte b/old-apps/web-shared/src/components/dropdown.svelte
deleted file mode 100644
index a28bcd3..0000000
--- a/old-apps/web-shared/src/components/dropdown.svelte
+++ /dev/null
@@ -1,389 +0,0 @@
-<script lang="ts">
-    // @ts-ignore
-    import { go, highlight } from "fuzzysort";
-    import { element_has_focus, random_string } from "$shared/lib/helpers";
-    import Button from "$shared/components/button.svelte";
-    import Chip from "$shared/components/chip.svelte";
-
-    export let name;
-    export let id;
-    export let maxlength;
-    export let placeholder = "Search";
-    export let entries = [];
-    export let createable = false;
-    export let loading = false;
-    export let multiple = false;
-    export let noResultsText;
-    export let errorText;
-    export let label;
-    export let on_create_async = ({name: string}) => {
-    };
-
-    export const reset = () => methods.reset();
-    export const select = (id: string) => methods.select_entry(id);
-    export const deselect = (id: string) => methods.deselect_entry(id);
-
-    const INTERNAL_ID = "__dropdown-" + random_string(5);
-
-    let searchInputNode;
-    let searchResults = [];
-    let searchValue = "";
-    let showCreationHint = false;
-    let showDropdown = false;
-    let lastKeydownCode = "";
-    let mouseIsOverDropdown = false;
-    let mouseIsOverComponent = false;
-
-    $: hasSelection = entries.some((c) => c.selected === true);
-    $: if (searchValue.trim()) {
-        showCreationHint = createable && entries.every((c) => search.normalise_value(c.name) !== search.normalise_value(searchValue));
-    } else {
-        showCreationHint = false;
-        entries = methods.get_sorted_array(entries);
-    }
-
-    const search = {
-        normalise_value(value: string): string {
-            if (!value) {
-                return "";
-            }
-            return value.toString().trim().toLowerCase();
-        },
-        do() {
-            const query = search.normalise_value(searchValue);
-            if (!query.trim()) {
-                searchResults = [];
-                return;
-            }
-
-            const options = {
-                limit: 10,
-                allowTypo: true,
-                threshold: -10000,
-                key: "name",
-            };
-            searchResults = go(query, entries, options);
-            showDropdown = true;
-        },
-        on_input_focusout() {
-            if (lastKeydownCode !== "Tab" && (mouseIsOverDropdown || lastKeydownCode === "ArrowDown")) {
-                return;
-            }
-            const selected = entries.find((c) => c.selected === true);
-            if (selected && !multiple) {
-                searchValue = selected.name;
-            }
-            document.querySelector("#" + INTERNAL_ID + " ul li.focus")?.classList.remove("focus");
-            showDropdown = false;
-        }
-    };
-
-    const methods = {
-        reset(focus_input = false) {
-            searchValue = "";
-            const copy = entries;
-            for (const entry of copy) {
-                entry.selected = false;
-            }
-            entries = methods.get_sorted_array(copy);
-            if (focus_input) {
-                searchInputNode?.focus();
-                showDropdown = true;
-            } else {
-                showDropdown = false;
-            }
-        },
-        async create_entry(name) {
-            if (!name || !createable || loading) {
-                console.log("Not sending creation event due to failed preconditions", {name, createable, loading});
-                return;
-            }
-            try {
-                await on_create_async({name});
-                searchValue = "";
-                loading = false;
-            } catch (e) {
-                console.error(e);
-            }
-        },
-        select_entry(entry_id) {
-            if (!entry_id || loading) {
-                console.log("Not selecting entry due to failed preconditions", {
-                    entry_id,
-                    loading,
-                });
-                return;
-            }
-
-            const copy = entries;
-            let selected;
-            for (const entry of entries) {
-                if (entry.id === entry_id) {
-                    entry.selected = true;
-                    selected = entry;
-                    if (multiple) {
-                        searchValue = "";
-                    } else {
-                        searchValue = entry.name;
-                    }
-                } else if (!multiple) {
-                    entry.selected = false;
-                }
-            }
-            entries = methods.get_sorted_array(copy);
-            searchInputNode?.focus();
-            searchResults = [];
-        },
-        deselect_entry(entry_id) {
-            if (!entry_id || loading) {
-                console.log("Not deselecting entry due to failed preconditions", {
-                    entry_id,
-                    loading,
-                });
-                return;
-            }
-            console.log("Deselecting entry", entry_id);
-
-            const copy = entries;
-            let deselected;
-
-            for (const entry of copy) {
-                if (entry.id === entry_id) {
-                    entry.selected = false;
-                    deselected = entry;
-                }
-            }
-
-            entries = methods.get_sorted_array(copy);
-            searchInputNode?.focus();
-        },
-        get_sorted_array(entries: Array<DropdownEntry>): Array<DropdownEntry> {
-            if (!entries) {
-                return;
-            }
-            if (entries.length < 1) {
-                return [];
-            }
-            if (searchValue) {
-                return entries;
-            }
-            return (entries as any).sort((a, b) => {
-                search.normalise_value(a.name).localeCompare(search.normalise_value(b.name));
-            });
-        },
-    };
-
-    const windowEvents = {
-        on_mousemove(event) {
-            if (!event.target) return;
-            mouseIsOverDropdown = (event.target?.closest("#" + INTERNAL_ID + " .autocomplete__results") != null ?? false);
-            mouseIsOverComponent = (event.target?.closest("#" + INTERNAL_ID) != null ?? false);
-        },
-        on_click(event) {
-            if (showDropdown && !mouseIsOverDropdown && !mouseIsOverComponent && event.target.id !== id && event.target?.htmlFor !== id) {
-                showDropdown = false;
-            }
-        },
-        on_keydown(event) {
-            lastKeydownCode = event.code;
-            const enterPressed = event.code === "Enter";
-            const backspacePressed = event.code === "Backspace";
-            const arrowUpPressed = event.code === "ArrowUp";
-            const spacePressed = event.code === "Space";
-            const arrowDownPressed = event.code === "ArrowDown";
-            const searchInputHasFocus = element_has_focus(searchInputNode);
-            const focusedEntry = document.querySelector("#" + INTERNAL_ID + " ul    .focus");
-
-            if (showDropdown && (enterPressed || arrowDownPressed)) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-
-            if (searchInputHasFocus && backspacePressed && !searchValue && entries.length > 0) {
-                if (entries.filter(c => c.selected === true).at(-1)?.id ?? false) {
-                    methods.deselect_entry(entries.filter(c => c.selected === true).at(-1)?.id ?? "");
-                }
-                return;
-            }
-            if (searchInputHasFocus && enterPressed && showCreationHint) {
-                methods.create_entry(searchValue.trim());
-                return;
-            }
-
-            if (searchInputHasFocus && !focusedEntry && arrowDownPressed) {
-                const firstEntry = document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type");
-                if (firstEntry) {
-                    firstEntry.classList.add("focus");
-                    return;
-                }
-            }
-
-            if (focusedEntry && (arrowUpPressed || arrowDownPressed)) {
-                if (arrowDownPressed) {
-                    if (focusedEntry.nextElementSibling) {
-                        focusedEntry.nextElementSibling.classList.add("focus");
-                        focusedEntry.nextElementSibling.scrollIntoView();
-                    } else {
-                        document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type").classList.add("focus");
-                        document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type").scrollIntoView();
-                    }
-                } else if (arrowUpPressed) {
-                    if (focusedEntry.previousElementSibling) {
-                        focusedEntry.previousElementSibling.classList.add("focus");
-                        focusedEntry.previousElementSibling.scrollIntoView();
-                    } else {
-                        document.querySelector("#" + INTERNAL_ID + " ul li:last-of-type").classList.add("focus");
-                        document.querySelector("#" + INTERNAL_ID + " ul li:last-of-type").scrollIntoView();
-                    }
-                }
-                focusedEntry.classList.remove("focus");
-                return;
-            }
-
-            if (focusedEntry && (spacePressed || enterPressed)) {
-                methods.select_entry(focusedEntry.dataset.id);
-                return;
-            }
-
-            if (lastKeydownCode === "Tab" && !searchInputHasFocus) {
-                showDropdown = false;
-            }
-        },
-        on_touchend(event) {
-            windowEvents.on_mousemove(event);
-        }
-    };
-
-    interface DropdownEntry {
-        name: string,
-        id: string,
-    }
-</script>
-
-<svelte:window
-        on:keydown={windowEvents.on_keydown}
-        on:mousemove={windowEvents.on_mousemove}
-        on:touchend={windowEvents.on_touchend}
-        on:click={windowEvents.on_click}
-/>
-
-{#if label}
-    <label for="{id}"
-           class="form-label margin-bottom-xxs">{label}</label>
-{/if}
-
-<div class="autocomplete position-relative select-auto"
-     class:cursor-wait={loading}
-     class:autocomplete--results-visible={showDropdown}
-     class:select-auto--selection-done={searchValue}
-     id={INTERNAL_ID}
->
-    <!-- input -->
-    <div class="select-auto__input-wrapper form-control"
-         style="cursor: text"
-         on:click={() => {
-			 if (!element_has_focus(searchInputNode)) searchInputNode.focus();
-			 showDropdown = true;
-         }}
-         class:multiple={multiple === true}
-         class:has-selection={hasSelection}>
-        {#if multiple === true && hasSelection}
-            {#each entries.filter((c) => c.selected === true) as entry}
-                <Chip id={entry.id}
-                      removable={true}
-                      tabindex="-1"
-                      on:remove={() => methods.deselect_entry(entry.id)}
-                      text={entry.name}/>
-            {/each}
-        {/if}
-        <input
-                class="reset width-100%"
-                style="outline:none;"
-                type="text"
-                {name}
-                {id}
-                {maxlength}
-                {placeholder}
-                bind:value={searchValue}
-                bind:this={searchInputNode}
-                on:input={() => search.do()}
-                on:click={() => (showDropdown = true)}
-                on:focus={() => (showDropdown = true)}
-                on:blur={search.on_input_focusout}
-                autocomplete="off"
-        />
-        <div class="select-auto__input-icon-wrapper">
-            <!-- arrow icon -->
-            <svg class="icon"
-                 viewBox="0 0 16 16">
-                <title>Open selection</title>
-                <polyline points="1 5 8 12 15 5"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"/>
-            </svg>
-
-            <!-- close X icon -->
-            <button class="reset select-auto__input-btn"
-                    type="button"
-                    on:click={() => reset(true)}>
-                <svg class="icon"
-                     viewBox="0 0 16 16">
-                    <title>Reset selection</title>
-                    <path
-                            d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm3.707,10.293a1,1,0,1,1-1.414,1.414L8,9.414,5.707,11.707a1,1,0,0,1-1.414-1.414L6.586,8,4.293,5.707A1,1,0,0,1,5.707,4.293L8,6.586l2.293-2.293a1,1,0,1,1,1.414,1.414L9.414,8Z"
-                    />
-                </svg>
-            </button>
-        </div>
-    </div>
-
-    {#if errorText}
-        <small class="color-error">{errorText}</small>
-    {/if}
-
-    <!-- dropdown -->
-    <div class="autocomplete__results select-auto__results shadow-xs inner-glow">
-        <ul on:keydown={(event) => event.code.startsWith("Arrow") && event.preventDefault()}
-            tabindex="-1"
-            class="autocomplete__list">
-            {#if searchResults.length > 0}
-                {#each searchResults.filter((c) => !c.selected) as result}
-                    <li class="select-auto__option padding-y-xs padding-x-sm"
-                        data-id={result.obj.id}
-                        on:click={(e) => methods.select_entry(e.target.dataset.id)}
-                        tabindex="-1">
-                        {@html highlight(result, (open = '<span class="font-semibold">'), (close = "</span>"))}
-                    </li>
-                {/each}
-            {:else if entries.length > 0}
-                {#each entries.filter((c) => !c.selected) as entry}
-                    <li class="select-auto__option padding-y-xs padding-x-sm"
-                        data-id={entry.id}
-                        on:click={(e) => methods.select_entry(e.target.dataset.id)}
-                        tabindex="-1">
-                        {entry.name}
-                    </li>
-                {/each}
-            {:else}
-                <li class="select-auto__option text-center padding-y-xs padding-x-sm pointer-events-none"
-                    tabindex="-1">
-                    {noResultsText}
-                </li>
-            {/if}
-        </ul>
-        {#if showCreationHint}
-            <div class="width-100% border-top border-bg-lighter padding-xxxs">
-                <Button variant="reset"
-                        type="button"
-                        class="width-100%"
-                        text="Press enter or click to create {searchValue.trim()}"
-                        title="Press enter or click here to create {searchValue.trim()}"
-                        loading={loading}
-                        on:click={() => methods.create_entry(searchValue.trim())}/>
-            </div>
-        {/if}
-    </div>
-</div>
-- 
cgit v1.3