export default function Link()

in src/components/Link/index.ts [29:90]


export default function Link(_props: {}) {
    let linkSettingsTimer: Timer | undefined;
    const [label, setLabel] = createSignal("");

    const createLink = () => {
        dialog!.close();
        let l: string | undefined = label();
        if (l === "") {
            l = undefined;
        }
        setLabel("");
        saveSettings(l);
    };

    const saveLinkAuto = () => {
        settings.meta = {
            expiration: "1y",
            relativeDates: false,
            storeDates: true,
            storeEtags: true,
            storeSelection: true,
            storeSignature: true,
            storePing: true,
            storeSort: true,
            storeMeta: true,
        };
        saveSettings();
    };

    let dialog: HTMLDialogElement | undefined;

    const labelChange = (e: Event) => {
        setLabel((e.currentTarget as HTMLInputElement).value);
    }

    const longPress = () => {
        linkSettingsTimer = undefined;
        dialog!.showModal();
    };

    const down = (_: Event) => {
        linkSettingsTimer = setTimeout(longPress, 500);
    };

    const up = (_: Event) => {
        if (linkSettingsTimer) {
            clearTimeout(linkSettingsTimer);
            saveLinkAuto();
        }
    };

    const checkCloseDialog = (e: Event) => {
        if (e.target === dialog) {
            dialog!.close();
        }
    };

    return html`
        <button style="aspect-ratio: 1" onPointerdown=${down} onPointerup=${up} aria-haspopup="dialog" title="Create a link to the current page. Press and hold to open advanced settings.">
            <span aria-hidden="true" class="fa-solid fa-link"></span>
        </button>
        <dialog ref=${(e: HTMLDialogElement) => dialog = e} onClick=${checkCloseDialog} id="link-settings" class="frame">