From 2abaadf4be2930ad842e12dcce1f540686612752 Mon Sep 17 00:00:00 2001
From: Maarten <maartenzam@gmail.com>
Date: Tue, 29 Oct 2024 12:12:54 +0100
Subject: [PATCH] Scroll to top

---
 src/lib/components/Header.svelte |  2 +-
 src/lib/components/Legend.svelte |  1 -
 src/lib/components/ToTop.svelte  | 63 ++++++++++++++++++++++++++++++++
 src/lib/utils/misc.js            |  8 ++++
 src/routes/+page.svelte          |  3 ++
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/ToTop.svelte

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 298b7bf..48751b4 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -2,7 +2,7 @@
 	import copy from '../../data/copy.json';
 </script>
 
-<section class="content title section" style:background-image={"url('images/fiat_2024_banner_background_new.jpg')"}>
+<section class="content title section" id="top" style:background-image={"url('images/fiat_2024_banner_background_new.jpg')"}>
 	<div class="container has-text-centered">
 		<div class="logos">
 			<a href="https://www.atlanticcouncil.org"
diff --git a/src/lib/components/Legend.svelte b/src/lib/components/Legend.svelte
index 8b11cb8..10e44eb 100644
--- a/src/lib/components/Legend.svelte
+++ b/src/lib/components/Legend.svelte
@@ -27,7 +27,6 @@
     }
 
     function handleMouseOver(event, id) {
-        console.log(id)
 		showLegendTooltip = true;
 		tooltipX = event.clientX;
 		tooltipY = event.clientY;
diff --git a/src/lib/components/ToTop.svelte b/src/lib/components/ToTop.svelte
new file mode 100644
index 0000000..453e99d
--- /dev/null
+++ b/src/lib/components/ToTop.svelte
@@ -0,0 +1,63 @@
+<script>
+    // back to top
+    import { fly } from 'svelte/transition';
+    import { scrollTo } from '../utils/misc';
+  
+    let show = false;
+  
+    function handleScroll() {
+      if (window.scrollY > window.innerHeight) {
+        show = true;
+      } else {
+        show = false;
+      }
+    }
+  
+    function handleSpanClick(id) {
+      scrollTo(id);
+    }
+  </script>
+  
+  <svelte:window on:scroll={handleScroll}></svelte:window>
+  
+  {#if (show)}
+    <div class="to-top" transition:fly={{duration: 400, y: 100}}>
+      <span class="pseudolink" on:click={() => handleSpanClick('top')}>To Top</span>
+    </div>
+  {/if}
+  
+  <style>
+    .to-top {
+      padding: 0.7rem;
+      font-family: var(--font-02);
+      font-size: 0.9rem;
+      background-color: var(--transparentbg);
+      border-top: 2px solid var(--usa-lightblue);
+      border-left: 2px solid var(--usa-lightblue);
+      border-right: 2px solid var(--usa-lightblue);
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+      position: fixed;
+      z-index: 1000001;
+      bottom: 0;
+      right: 1rem;
+    }
+  
+    span {
+      display: block;
+      margin: 0.2rem auto;
+      text-align: center;
+    }
+
+    span.pseudolink {
+        color: var(--usa-blue);
+        text-decoration: underline;
+        cursor: pointer;
+        transition: all 200ms ease;
+      }
+      
+     span.pseudolink:hover {
+        color: var(--usa-lightblue);
+      }
+  </style>
+  
\ No newline at end of file
diff --git a/src/lib/utils/misc.js b/src/lib/utils/misc.js
index 56b5fc0..a59dbbd 100644
--- a/src/lib/utils/misc.js
+++ b/src/lib/utils/misc.js
@@ -54,4 +54,12 @@ export const includesTextSearch = (filter, s) => {
   return filterArr.some((f) => {
     return s.indexOf(f) > -1;
   });
+};
+
+// scroll-to function (also set on window to make it available outside svelte)
+export const scrollTo = (targetId) => {
+  setTimeout(() => {
+    document.getElementById(targetId).scrollIntoView({behavior: 'smooth'});
+  }, 200);
+  return(false);
 };
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index db6724d..8eea527 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,6 +13,7 @@
 	import AnimatedFilterIcon from '$lib/components/AnimatedFilterIcon.svelte';
 	import Collapsible from '$lib/components/Collapsible.svelte';
 	import CasesControls from '$lib/components/CasesControls.svelte';
+	import ToTop from '$lib/components/ToTop.svelte';
 	import { splitString, haveOverlap, withinRange, includesTextSearch } from '$lib/utils/misc';
 	//import { setScales } from '$lib/utils/scales';
 	import { page } from '$app/stores';
@@ -236,6 +237,8 @@
 	<meta property="og:locale" content="en_US" />
 </svelte:head>
 
+<ToTop />
+
 {#if isMobile && !modalOpen}
 	<div class="filter-button">
 		<button on:click={() => toggleSidebar()}