web: add haptics for all copy actions

& prevent spamming the copy action along with haptic feedback :3

should probably unify all of this cuz this is really messy
This commit is contained in:
wukko 2025-03-05 18:07:46 +06:00
parent fd5f7c36b2
commit 0d3044c5e6
No known key found for this signature in database
GPG Key ID: 3E30B3F26C7B4AA2
6 changed files with 34 additions and 13 deletions

View File

@ -2,6 +2,7 @@
import { t } from "$lib/i18n/translations";
import { device } from "$lib/device";
import { hapticConfirm } from "$lib/haptics";
import {
copyURL,
openURL,
@ -101,8 +102,11 @@
fill
elevated
click={async () => {
copyURL(url);
copied = true;
if (!copied) {
copyURL(url);
hapticConfirm();
copied = true;
}
}}
ariaLabel={copied ? $t("button.copied") : ""}
>

View File

@ -1,5 +1,6 @@
<script lang="ts">
import { t } from "$lib/i18n/translations";
import { hapticConfirm } from "$lib/haptics";
import { copyURL, openURL } from "$lib/download";
import CopyIcon from "$components/misc/CopyIcon.svelte";
@ -27,8 +28,11 @@
})}
on:click={() => {
if (type === "copy") {
copied = true;
copyURL(address);
if (!copied) {
copyURL(address);
hapticConfirm();
copied = true;
}
} else {
openURL(address);
}

View File

@ -3,6 +3,7 @@
import { device } from "$lib/device";
import locale from "$lib/i18n/locale";
import { t } from "$lib/i18n/translations";
import { hapticConfirm } from "$lib/haptics";
import { openURL, copyURL, shareURL } from "$lib/download";
@ -51,8 +52,11 @@
id="action-button-copy"
class="action-button"
on:click={async () => {
copyURL(cobaltUrl);
copied = true;
if (!copied) {
copyURL(cobaltUrl);
hapticConfirm();
copied = true;
}
}}
aria-label={copied ? $t("button.copied") : ""}
>

View File

@ -1,7 +1,8 @@
<script lang="ts">
import { page } from "$app/stores";
import { t } from "$lib/i18n/translations";
import { copyURL } from "$lib/download";
import { t } from "$lib/i18n/translations";
import { hapticConfirm } from "$lib/haptics";
import CopyIcon from "$components/misc/CopyIcon.svelte";
@ -40,8 +41,11 @@
? $t("button.copied")
: $t(`button.copy${copyData ? "" : ".section"}`)}
on:click={() => {
copied = true;
copyURL(copyData || sectionURL);
if (!copied) {
copyURL(copyData || sectionURL);
hapticConfirm();
copied = true;
}
}}
>
<CopyIcon check={copied} regularIcon={!!copyData} />

View File

@ -1,7 +1,5 @@
<script lang="ts">
import { page } from "$app/stores";
import { copyURL as _copyURL } from "$lib/download";
import SectionHeading from "$components/misc/SectionHeading.svelte";
export let title: string;

View File

@ -2,10 +2,10 @@ import { device } from "$lib/device";
// not sure if vibrations feel the same on android,
// so they're enabled only on ios 18+ for now
const shouldVibrate = device.is.modernIOS;
const useHaptics = device.is.modernIOS;
export const hapticSwitch = () => {
if (!shouldVibrate) return;
if (!useHaptics) return;
try {
const label = document.createElement("label");
@ -24,3 +24,10 @@ export const hapticSwitch = () => {
// ignore
}
}
export const hapticConfirm = () => {
if (!useHaptics) return;
hapticSwitch();
setTimeout(() => hapticSwitch(), 120);
}