diff --git a/src/app.d.ts b/src/app.d.ts index ffe56e8..68894e3 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -16,6 +16,7 @@ declare namespace svelte.JSX { interface HTMLAttributes { onswipe?: (event: CustomEvent & { target: EventTarget & T }) => any, ontap?: (event: CustomEvent & { target: EventTarget & T }) => any, + oncopied?: (event: CustomEvent & { target: EventTarget & T }) => any, } } diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 5390848..e506335 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -9,7 +9,7 @@ import { fade, fly } from 'svelte/transition' import type { PageData } from './$types' import { animate, inView, stagger, timeline } from 'motion' - import { map } from '$utils/functions' + import { mailtoClipboard, map } from '$utils/functions' import { getAssetUrlKey } from '$utils/api' import { DELAY } from '$utils/contants' import { quartOut } from '$animations/easings' @@ -39,27 +39,6 @@ : [1, 4, 5, 7, 11, 14, 17, 20, 24, 27, 30, 33, 34, 36, 40, 43] - // Copy mailto links to clipboard and show message - const mailtoClipboard = (node: HTMLElement, options = { hideDelay: 2500 }) => { - const links = node.querySelectorAll('a[href^="mailto:"') - links.forEach(link => { - link.addEventListener('click', (event) => { - const emailAddress = event.currentTarget.href.split('mailto:')[1].split('?')[0] - emailCopied = emailAddress - - // Copy email to clipboard - navigator.clipboard.writeText(emailAddress) - - // Hide message after a delay - clearTimeout(emailCopiedTimeout) - emailCopiedTimeout = setTimeout(() => emailCopied = null, options.hideDelay) - - event.preventDefault() - }) - }) - } - - onMount(() => { /** * Animations @@ -387,9 +366,16 @@
{#if link} {#key emailCopied === link} -
{ + emailCopied = detail.email + // Clear timeout and add timeout to hide message + clearTimeout(emailCopiedTimeout) + emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500) + }} > {#if emailCopied !== link}