From debf8bb7477eacd8977798927d0e4081beb10255 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Fri, 6 Mar 2020 11:06:35 +0100
Subject: [PATCH] Avoid route change scroll when clicking on links

sapper-noscroll here for the rescue, keeps the scroll position and loads the new page content
---
 src/atoms/Button.svelte        | 3 ++-
 src/atoms/LinkChange.svelte    | 3 ++-
 src/atoms/LinkTranslate.svelte | 3 ++-
 src/molecules/Location.svelte  | 2 +-
 src/molecules/Photo.svelte     | 2 +-
 src/molecules/Switcher.svelte  | 4 ++--
 src/organisms/Footer.svelte    | 2 +-
 7 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/atoms/Button.svelte b/src/atoms/Button.svelte
index 4ed08cf..872d098 100644
--- a/src/atoms/Button.svelte
+++ b/src/atoms/Button.svelte
@@ -2,6 +2,7 @@
     export let href = '#'
     export let type = 'a'
     export let text = ''
+    export let noScroll = null
 </script>
 
 {#if type === 'button'}
@@ -13,7 +14,7 @@
 </button>
 
 {:else}
-<a {href} class={$$props.class ? $$props.class : 'button'} on:click>
+<a {href} class={$$props.class ? $$props.class : 'button'} sapper-noscroll={noScroll} on:click>
     <slot></slot>
     <div class="text" data-text={text}>
         <span>{text}</span>
diff --git a/src/atoms/LinkChange.svelte b/src/atoms/LinkChange.svelte
index 8f84428..da3a8ce 100644
--- a/src/atoms/LinkChange.svelte
+++ b/src/atoms/LinkChange.svelte
@@ -1,9 +1,10 @@
 <script>
     export let href = '#'
     export let text = ''
+    export let noScroll = null
 </script>
 
-<a href={href} class="link-change">
+<a href={href} class="link-change" sapper-noscroll={noScroll}>
     {text}
     <span class="icon">
         <slot></slot>
diff --git a/src/atoms/LinkTranslate.svelte b/src/atoms/LinkTranslate.svelte
index a45012f..e8a34f3 100644
--- a/src/atoms/LinkTranslate.svelte
+++ b/src/atoms/LinkTranslate.svelte
@@ -5,9 +5,10 @@
     export let text = ''
     export let target = null
     export let rel = null
+    export let noScroll = null
 </script>
 
-<a class="link-translate" {href} {target} {rel}>
+<a class="link-translate" {href} {target} {rel} sapper-noscroll={noScroll}>
     <slot />
     <div class="text" data-text={text}>
         <span>{text}</span>
diff --git a/src/molecules/Location.svelte b/src/molecules/Location.svelte
index f6a7c83..fb9e7a3 100644
--- a/src/molecules/Location.svelte
+++ b/src/molecules/Location.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div class="location" data-aos="location">
-    <a href="/location/{location.country.slug}/{location.slug}" rel="prefetch">
+    <a href="/location/{location.country.slug}/{location.slug}" rel="prefetch" sapper-noscroll>
         <img src={location.country.flag.full_url} alt="Flag of {location.country.name}">
         <div class="anim-mask mask-city">
             <h3 class="location__city">{location.name}</h3>
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index d329e56..1ce212a 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -63,7 +63,7 @@
 
     <div class="photo__image wrap">
         <div class="align">
-            <a href={photoHref}>
+            <a href={photoHref} sapper-noscroll>
                 <picture class="photo__picture">
                     {#if layout === 'list'}
                     <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte
index 34cb069..b1027d4 100644
--- a/src/molecules/Switcher.svelte
+++ b/src/molecules/Switcher.svelte
@@ -22,7 +22,7 @@
 
 <div class="switcher {type}">
     <div class="switcher__text" class:empty={!location}>
-        <a href="/">
+        <a href="/" sapper-noscroll>
             {#if !location}
             <span class="top">Houses</span>
             <span class="bottom">
@@ -36,7 +36,7 @@
     </div>
 
     <div class="button-control button-control--dashed switcher__icon">
-        <a href="/choose">
+        <a href="/choose" sapper-noscroll>
             <IconGlobe
                 color={type.includes('side') ? '#333' : '#fff'}
                 width={type.includes('side') ? 18 : 24}
diff --git a/src/organisms/Footer.svelte b/src/organisms/Footer.svelte
index 7f83e35..7544f77 100644
--- a/src/organisms/Footer.svelte
+++ b/src/organisms/Footer.svelte
@@ -17,7 +17,7 @@
             <li>
                 <ul>
                     <li>
-                        <LinkTranslate href="/credits" text="Credits" rel="prefetch" />
+                        <LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll="true" />
                     </li>
                     {#if $site}
                     <li class="instagram">