mirror of
https://github.com/wukko/cobalt.git
synced 2025-04-29 22:14:26 +02:00
web/DownloadButton: refactor & add haptic feedback
This commit is contained in:
parent
bf0b9f55e5
commit
a2e08b9ccb
@ -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,7 +18,8 @@
|
|||||||
|
|
||||||
type DownloadButtonState = "idle" | "think" | "check" | "done" | "error";
|
type DownloadButtonState = "idle" | "think" | "check" | "done" | "error";
|
||||||
|
|
||||||
const unsubscribe = downloadButtonState.subscribe((state: CobaltDownloadButtonState) => {
|
const unsubscribe = downloadButtonState.subscribe(
|
||||||
|
(state: CobaltDownloadButtonState) => {
|
||||||
disabled = state !== "idle";
|
disabled = state !== "idle";
|
||||||
loading = state === "think" || state === "check";
|
loading = state === "think" || state === "check";
|
||||||
|
|
||||||
@ -45,7 +47,8 @@
|
|||||||
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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user