Copy email addresses in clipboard over opening mailto url

src/routes/about/+page.svelte

@@ -5,6 +5,8 @@
 <script lang="ts">
     import { navigating, page } from '$app/stores'
     import { onMount, afterUpdate } from 'svelte'
+    import { quartOut as quartOutSvelte } from 'svelte/easing'
+    import { fade, fly } from 'svelte/transition'
     import type { PageData } from './$types'
     import { scroll, animate, inView, timeline } from 'motion'
     import { map } from '$utils/functions'
@@ -28,6 +30,8 @@
     let photosGridEl: HTMLElement
     let currentStep: number = 0
     let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
+    let emailCopied: string = null
+    let emailCopiedTimeout: ReturnType<typeof setTimeout> | number
 
     $: currentStep = $page.url.hash ? Number($page.url.hash.split('#step-')[1]) - 1 : 0
     $: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
@@ -36,6 +40,27 @@
         : [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
@@ -288,9 +313,22 @@
                     <div class="block">
                         <h3 class="text-label">{title}</h3>
                         <p class="text-normal">{text}</p>
-                        {#if link}
-                            <Button size="small" url={link} text={button} />
-                        {/if}
+                        <div class="button-container">
+                            {#if link}
+                            {#key emailCopied === link}
+                                <div class="wrap" use:mailtoClipboard
+                                    in:fly={{ y: 4, duration: 325, easing: quartOutSvelte, delay: 250 }}
+                                    out:fade={{ duration: 250, easing: quartOutSvelte }}
+                                >
+                                    {#if emailCopied !== link}
+                                        <Button size="small" url="mailto:{link}" text={button} />
+                                    {:else}
+                                        <span class="clipboard">Email copied in clipboard</span>
+                                    {/if}
+                                </div>
+                            {/key}
+                            {/if}
+                        </div>
                     </div>
                 {/each}
             </div>

src/style/pages/_about.scss

@@ -611,6 +611,26 @@
                     margin-bottom: 32px;
                 }
             }
+
+            // Button
+            :global(.button-container) {
+                position: relative;
+                height: 40px;
+            }
+            :global(.clipboard) {
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%) translateZ(0);
+                display: inline-flex;
+                align-items: center;
+                height: 40px;
+                padding: 0 20px;
+                font-size: rem(14px);
+                font-weight: 400;
+                background: rgba($color-secondary, 0.5);
+                border-radius: 100vh;
+            }
         }
     }
 }