Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-04-29 22:14:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/DownloadButton: refactor & add haptic feedback

Browse Source
This commit is contained in:
wukko 2025-03-05 22:05:11 +06:00
parent bf0b9f55e5
commit a2e08b9ccb
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
1 changed files with 32 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/components/save/buttons/DownloadButton.svelte
View File

@ -3,6 +3,7 @@
import { onDestroy } from "svelte"; import { onDestroy } from "svelte";
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import { hapticSwitch } from "$lib/haptics";
import { savingHandler } from "$lib/api/saving-handler"; import { savingHandler } from "$lib/api/saving-handler";
import { downloadButtonState } from "$lib/state/omnibox"; import { downloadButtonState } from "$lib/state/omnibox";
@ -17,35 +18,37 @@
type DownloadButtonState = "idle" | "think" | "check" | "done" | "error"; type DownloadButtonState = "idle" | "think" | "check" | "done" | "error";
const unsubscribe = downloadButtonState.subscribe((state: CobaltDownloadButtonState) => { const unsubscribe = downloadButtonState.subscribe(
disabled = state !== "idle"; (state: CobaltDownloadButtonState) => {
loading = state === "think" || state === "check"; disabled = state !== "idle";
loading = state === "think" || state === "check";
buttonText = { buttonText = {
idle: ">>", idle: ">>",
think: "...", think: "...",
check: "..?", check: "..?",
done: ">>>", done: ">>>",
error: "!!", error: "!!",
}[state]; }[state];
buttonAltText = $t( buttonAltText = $t(
{ {
idle: "a11y.save.download", idle: "a11y.save.download",
think: "a11y.save.download.think", think: "a11y.save.download.think",
check: "a11y.save.download.check", check: "a11y.save.download.check",
done: "a11y.save.download.done", done: "a11y.save.download.done",
error: "a11y.save.download.error", error: "a11y.save.download.error",
}[state] }[state]
); );
// states that don't wait for anything, and thus can // states that don't wait for anything, and thus can
// transition back to idle after some period of time. // transition back to idle after some period of time.
const final: DownloadButtonState[] = ["done", "error"]; const final: DownloadButtonState[] = ["done", "error"];
if (final.includes(state)) { if (final.includes(state)) {
setTimeout(() => downloadButtonState.set("idle"), 1500); setTimeout(() => downloadButtonState.set("idle"), 1500);
}
} }
}); );
onDestroy(() => unsubscribe()); onDestroy(() => unsubscribe());
</script> </script>
@ -53,7 +56,10 @@
<button <button
id="download-button" id="download-button"
{disabled} {disabled}
on:click={() => savingHandler(url)} on:click={() => {
hapticSwitch();
savingHandler(url);
}}
aria-label={buttonAltText} aria-label={buttonAltText}
> >
<span id="download-state">{buttonText}</span> <span id="download-state">{buttonText}</span>