From 6a66cdaf22e4994cd6a95af280f0906404e9b33c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 19 Jul 2022 13:43:25 +0200
Subject: [PATCH] Use options parameters with types and default on smoothScroll
 function

---
 src/components/molecules/Poster.svelte           |  2 +-
 .../molecules/ShopLocationSwitcher.svelte        |  2 +-
 src/components/organisms/ShopHeader.svelte       |  2 +-
 src/routes/index.svelte                          |  2 +-
 src/utils/functions/index.ts                     | 16 +++++++++++-----
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte
index f13e0da..1ce0163 100644
--- a/src/components/molecules/Poster.svelte
+++ b/src/components/molecules/Poster.svelte
@@ -36,7 +36,7 @@
             size="xsmall"
             url="/shop/poster-{location.slug}"
             text="View"
-            on:click={() => setTimeout(() => smoothScroll('poster', false), 1000)}
+            on:click={() => setTimeout(() => smoothScroll({ hash: 'poster', changeHash: false }), 1000)}
         />
         <Button
             tag="button"
diff --git a/src/components/molecules/ShopLocationSwitcher.svelte b/src/components/molecules/ShopLocationSwitcher.svelte
index 1095195..d436290 100644
--- a/src/components/molecules/ShopLocationSwitcher.svelte
+++ b/src/components/molecules/ShopLocationSwitcher.svelte
@@ -24,7 +24,7 @@
         const newPath = `/shop/poster-${value}`
         goto(newPath, { replaceState: true, noscroll: true, keepfocus: true })
         // Scroll to anchor
-        setTimeout(() => smoothScroll('poster'), 1000)
+        setTimeout(() => smoothScroll({ hash: 'poster' }), 1000)
     }
 </script>
 
diff --git a/src/components/organisms/ShopHeader.svelte b/src/components/organisms/ShopHeader.svelte
index 9c49d81..66911ad 100644
--- a/src/components/organisms/ShopHeader.svelte
+++ b/src/components/organisms/ShopHeader.svelte
@@ -107,7 +107,7 @@
                 <ul>
                     {#each shopLocations as { name, slug }}
                         <li class:is-active={product && slug === product.location.slug}>
-                            <a href="/shop/poster-{slug}" on:click={() => smoothScroll('poster')} sveltekit:prefetch sveltekit:noscroll>
+                            <a href="/shop/poster-{slug}" on:click={() => smoothScroll({ hash: 'poster' })} sveltekit:prefetch sveltekit:noscroll>
                                 {name}
                             </a>
                         </li>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 9a4a110..4422019 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -95,7 +95,7 @@
                 {settings.description}
             </p>
 
-            <Button url="#locations" text="Explore locations" on:click={() => smoothScroll('locations')}>
+            <Button url="#locations" text="Explore locations" on:click={event => smoothScroll({ hash: 'locations', event })}>
                 <IconEarth animate={true} />
             </Button>
         </div>
diff --git a/src/utils/functions/index.ts b/src/utils/functions/index.ts
index 1285fc9..4d992cc 100644
--- a/src/utils/functions/index.ts
+++ b/src/utils/functions/index.ts
@@ -158,7 +158,7 @@ export const scrollToTop = (delay?: number) => {
 /**
  * Smooth Scroll to an element
  * @description Promised based
- * @url https://www.youtube.com/watch?v=oUSvlrDTLi4
+ * @url Based on: https://www.youtube.com/watch?v=oUSvlrDTLi4
  */
 const smoothScrollPromise = (target: HTMLElement, duration: number = 1600): Promise<void> => {
     const position = target.getBoundingClientRect().top + 1
@@ -190,13 +190,19 @@ const smoothScrollPromise = (target: HTMLElement, duration: number = 1600): Prom
         requestAnimationFrame(animation)
     })
 }
-export const smoothScroll = async (hash: string, changeHash: boolean = true, callback?: Function) => {
+export const smoothScroll = async ({ hash, callback, changeHash = true, event }: smoothScrollOptions) => {
+    if (event) event.preventDefault()
+
     const target = document.getElementById(hash)
 
     smoothScrollPromise(target).then(() => {
-        if (changeHash) {
-            location.hash = hash
-        }
+        if (changeHash) location.hash = hash
         callback && callback()
     })
+}
+type smoothScrollOptions = {
+    hash: string
+    changeHash?: boolean
+    event?: MouseEvent
+    callback?: Function
 }
\ No newline at end of file