Use copy email to clipboard as an action

Returns an event with the email to detect for value and timeouts

src/app.d.ts

@@ -16,6 +16,7 @@ declare namespace svelte.JSX {
     interface HTMLAttributes<T> {
         onswipe?: (event: CustomEvent<string> & { target: EventTarget & T }) => any,
         ontap?: (event: CustomEvent<boolean> & { target: EventTarget & T }) => any,
+        oncopied?: (event: CustomEvent<any> & { target: EventTarget & T }) => any,
     }
 }
 

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 @@
                         <div class="button-container">
                             {#if link}
                             {#key emailCopied === link}
-                                <div class="wrap" use:mailtoClipboard
+                                <div class="wrap"
                                     in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
                                     out:fade={{ duration: 250, easing: quartOutSvelte }}
+                                    use:mailtoClipboard
+                                    on:copied={({ detail }) => {
+                                        emailCopied = detail.email
+                                        // Clear timeout and add timeout to hide message
+                                        clearTimeout(emailCopiedTimeout)
+                                        emailCopiedTimeout = setTimeout(() => emailCopied = null, 2500)
+                                    }}
                                 >
                                     {#if emailCopied !== link}
                                         <Button size="small" url="mailto:{link}" text={button} />

src/utils/functions/index.ts

@@ -200,3 +200,33 @@ export const smoothScroll = async ({ hash, callback, changeHash = true, event }:
         callback && callback()
     })
 }
+
+
+/**
+ * Copy mailto links to clipboard and show message
+ */
+export const mailtoClipboard = (node: HTMLElement) => {
+    const links = node.querySelectorAll('a[href^="mailto:"]')
+
+    const clickToCopy = (event) => {
+        let emailAddress = event.currentTarget.href.split('mailto:')[1].split('?')[0]
+
+        // Copy email to clipboard
+        navigator.clipboard.writeText(emailAddress)
+
+        // Send event
+        node.dispatchEvent(new CustomEvent('copied', {
+            detail: { email: emailAddress }
+        }))
+
+        event.preventDefault()
+    }
+
+    links && links.forEach(link => link.addEventListener('click', clickToCopy, true))
+
+    return {
+        destroy () {
+            links && links.forEach(link => link.removeEventListener('click', clickToCopy, true))
+        }
+    }
+}