From 7ca8366cd5b8be8f466cb3c88cd350104cfefbd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 18 Oct 2021 11:10:26 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Use=20map=20function=20to=20define?=
 =?UTF-8?q?=20the=20side=20margins=20on=20Photos=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also defines the amount of viewport from the screen width to height ratio for small screens

Merci @sixclones et @raphael! (devs slack)
---
 src/routes/photos.svelte | 11 ++++++-----
 src/utils/functions.ts   | 21 +++++++++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index d6338f7..5a8f823 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -7,7 +7,7 @@
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import { clamp, lerp } from '$utils/functions'
+    import { map, lerp } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
@@ -30,6 +30,7 @@
     let buttonReset: HTMLElement
     let buttonShuffle: HTMLElement
     let scrollY: number
+    let innerWidth: number, innerHeight: number
 
     // Filters
     const urlFiltersParams = new URLSearchParams()
@@ -49,10 +50,10 @@
 
     // Container margins
     let scrollProgress: number
-    let sideMargins: number = 6
+    let sideMargins: number = 8
     $: if (browser && window.innerWidth >= 768) {
-        // TODO: Define this value to be 1 past 1.5 viewport
-        scrollProgress = clamp(scrollY / (window.innerHeight * 1.5), 0, 1)
+        const viewportScroll = innerHeight / innerWidth <= 0.6 ? innerHeight * 1.5 : innerHeight
+        scrollProgress = map(scrollY, 0, viewportScroll, 0, 1, true)
         sideMargins = lerp(8, 30, scrollProgress)
     }
 
@@ -168,7 +169,7 @@
     image=""
 />
 
-<svelte:window bind:scrollY />
+<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
 
 
 <main class="photos">
diff --git a/src/utils/functions.ts b/src/utils/functions.ts
index fd2947f..0ca3d07 100644
--- a/src/utils/functions.ts
+++ b/src/utils/functions.ts
@@ -32,6 +32,27 @@ export const lerp = (start: number, end: number, amt: number): number => {
 }
 
 
+/**
+ * Re-maps a number from one range to another
+ * @param value the incoming value to be converted
+ * @param start1 lower bound of the value's current range
+ * @param stop1 upper bound of the value's current range
+ * @param start2 lower bound of the value's target range
+ * @param stop2 upper bound of the value's target range
+ * @param [withinBounds] constrain the value to the newly mapped range
+ * @return remapped number
+ */
+export const map = (n: number, start1: number, stop1: number, start2: number, stop2: number, withinBounds: boolean): number => {
+    const value = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2
+    if (!withinBounds) return value
+    if (start2 < stop2) {
+        return clamp(value, start2, stop2)
+    } else {
+        return clamp(value, stop2, start2)
+    }
+}
+
+
 /**
  * Clamp a number
  */