✨ Use map function to define the side margins on Photos page

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

@@ -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
+        const viewportScroll = innerHeight / innerWidth <= 0.6 ? innerHeight * 1.5 : innerHeight
-        scrollProgress = clamp(scrollY / (window.innerHeight * 1.5), 0, 1)
+        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">

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
  */