From 37c5cb2c4e787f91299e309317a12d98e86fac91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 4 Apr 2020 11:46:17 +0200
Subject: [PATCH] Bring back the sapper-noscroll attribute

Window scroll is now been triggered manually during the page transition and not automatically by Sapper
---
 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..9fbf465 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 = undefined
 </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'} on:click sapper-noscroll={noScroll}>
     <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..16ba895 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 = undefined
 </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 641a155..dc6ef7e 100644
--- a/src/atoms/LinkTranslate.svelte
+++ b/src/atoms/LinkTranslate.svelte
@@ -3,9 +3,10 @@
     export let text = ''
     export let target = null
     export let rel = null
+    export let noScroll = undefined
 </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 46307c5..0756d72 100644
--- a/src/molecules/Location.svelte
+++ b/src/molecules/Location.svelte
@@ -7,7 +7,7 @@
 </script>
 
 <div class="location">
-    <a href="/location/{country.slug}/{slug}" rel="prefetch">
+    <a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
         <img src={country.flag.full_url} alt="Flag of {country.name}">
         <div class="anim-mask mask-city">
             <h3 class="location__city">{name}</h3>
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 692b8bc..7cedfe1 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -46,7 +46,7 @@
 
     <div class="photo__image wrap">
         <div class="align">
-            <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
+            <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}" sapper-noscroll>
                 <picture class="photo__picture">
                     <source media="(min-width: 992px)" data-srcset={getThumbnail(private_hash, 1300)}>
                     <source media="(min-width: 768px)" data-srcset={getThumbnail(private_hash, 992)}>
diff --git a/src/molecules/Switcher.svelte b/src/molecules/Switcher.svelte
index 5c3fec0..b8005e5 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" aria-label="Change the location">
+        <a href="/choose" aria-label="Change the location" 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 bfe6384..efa55a2 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 />
                     </li>
                     {#if $site}
                     <li class="instagram">