Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/Omnibox: simplify link state storage

Browse source
This commit is contained in:
wukko 2024-07-22 16:34:19 +06:00
parent 44243cc4c2
commit bc8e3d4a7c
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 17 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
web/src/components/save/Omnibox.svelte
View file

@ -7,7 +7,7 @@
import dialogs from "$lib/dialogs"; import dialogs from "$lib/dialogs";
import { storedLink } from "$lib/state/omnibox"; import { link } from "$lib/state/omnibox";
import { updateSetting } from "$lib/state/settings"; import { updateSetting } from "$lib/state/settings";
import type { DownloadModeOption } from "$lib/types/settings"; import type { DownloadModeOption } from "$lib/types/settings";
@ -27,29 +27,16 @@
import IconSparkles from "$lib/icons/Sparkles.svelte"; import IconSparkles from "$lib/icons/Sparkles.svelte";
import IconClipboard from "$lib/icons/Clipboard.svelte"; import IconClipboard from "$lib/icons/Clipboard.svelte";
let link: string = "";
let linkInput: Optional<HTMLInputElement>; let linkInput: Optional<HTMLInputElement>;
let isFocused = false; let isFocused = false;
let stored;
$: storedLink.set(link);
storedLink.subscribe((value) => {
stored = value;
});
if (!link && stored) {
link = stored
}
let isDisabled: boolean = false; let isDisabled: boolean = false;
let downloadButton: SvelteComponent; let downloadButton: SvelteComponent;
const validLink = (link: string) => { const validLink = (url: string) => {
try { try {
return /^https:/i.test(new URL(link).protocol); return /^https:/i.test(new URL(url).protocol);
} catch {} } catch {}
}; };
@ -58,9 +45,9 @@
$: if (linkFromHash || linkFromQuery) { $: if (linkFromHash || linkFromQuery) {
if (validLink(linkFromHash)) { if (validLink(linkFromHash)) {
link = linkFromHash; $link = linkFromHash;
} else if (validLink(linkFromQuery)) { } else if (validLink(linkFromQuery)) {
link = linkFromQuery; $link = linkFromQuery;
} }
// clear hash and query to prevent bookmarking unwanted links // clear hash and query to prevent bookmarking unwanted links
@ -75,10 +62,10 @@
navigator.clipboard.readText().then(async (text) => { navigator.clipboard.readText().then(async (text) => {
let matchLink = text.match(/https:\/\/[^\s]+/g); let matchLink = text.match(/https:\/\/[^\s]+/g);
if (matchLink) { if (matchLink) {
link = matchLink[0]; $link = matchLink[0];
await tick(); // wait for button to render await tick(); // wait for button to render
downloadButton.download(link); downloadButton.download($link);
} }
}); });
}; };
@ -96,12 +83,12 @@
linkInput.focus(); linkInput.focus();
} }
if (e.key === "Enter" && validLink(link)) { if (e.key === "Enter" && validLink($link)) {
downloadButton.download(link); downloadButton.download($link);
} }
if (["Escape", "Clear"].includes(e.key)) { if (["Escape", "Clear"].includes(e.key)) {
link = ""; $link = "";
} }
if (e.target === linkInput) { if (e.target === linkInput) {
@ -133,13 +120,13 @@
<div <div
id="input-container" id="input-container"
class:focused={isFocused} class:focused={isFocused}
class:downloadable={validLink(link)} class:downloadable={validLink($link)}
> >
<IconLink id="input-link-icon" /> <IconLink id="input-link-icon" />
<input <input
id="link-area" id="link-area"
bind:value={link} bind:value={$link}
bind:this={linkInput} bind:this={linkInput}
on:input={() => (isFocused = true)} on:input={() => (isFocused = true)}
on:focus={() => (isFocused = true)} on:focus={() => (isFocused = true)}
@ -153,11 +140,11 @@
data-form-type="other" data-form-type="other"
/> />
{#if link} {#if $link}
<ClearButton click={() => (link = "")} /> <ClearButton click={() => ($link = "")} />
{/if} {/if}
{#if validLink(link)} {#if validLink($link)}
<DownloadButton url={link} bind:this={downloadButton} bind:isDisabled={isDisabled} /> <DownloadButton url={$link} bind:this={downloadButton} bind:isDisabled={isDisabled} />
{/if} {/if}
</div> </div>

2
web/src/lib/state/omnibox.ts
View file

@ -1,3 +1,3 @@
import { writable } from "svelte/store"; import { writable } from "svelte/store";
export const storedLink = writable(); export const link = writable("");