From 417ec134c1b605b36e777f491dba6d0f5f736a0c Mon Sep 17 00:00:00 2001
From: wires <benaultowski@proton.me>
Date: Sat, 7 Mar 2026 19:00:15 -0500
Subject: [PATCH] Change how we detect touch events

---
 .../components/BeforeAfter/BeforeAfter.svelte | 35 +++++++----
 pages/Stories/One/+page.svelte                | 42 +++++++++++++
 pages/Stories/One/One.svelte                  | 59 +++++++++++++++++++
 3 files changed, 123 insertions(+), 13 deletions(-)
 create mode 100644 pages/Stories/One/+page.svelte
 create mode 100644 pages/Stories/One/One.svelte

diff --git a/packages/graphics-components/src/components/BeforeAfter/BeforeAfter.svelte b/packages/graphics-components/src/components/BeforeAfter/BeforeAfter.svelte
index 3a79ef3..c41d138 100644
--- a/packages/graphics-components/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/packages/graphics-components/src/components/BeforeAfter/BeforeAfter.svelte
@@ -145,20 +145,29 @@
 
   /** Move the slider */
   const move = (e: MouseEvent | TouchEvent) => {
-    if (sliding && imgOffset) {
-      const el =
-        e instanceof TouchEvent && e.touches ? e.touches[0] : (e as MouseEvent);
-      const figureOffset =
-        figure ?
-          parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
-        : 0;
-      let x = el.pageX - figureOffset - imgOffset.left;
-      x =
-        x < handleMargin ? handleMargin
-        : x > w - handleMargin ? w - handleMargin
-        : x;
-      offset = x / w;
+    if (!sliding || !imgOffset) return;
+
+    let pointer: MouseEvent | Touch | undefined;
+
+    if ('touches' in e) {
+      pointer = e.touches[0] ?? e.changedTouches[0];
+    } else {
+      pointer = e;
     }
+
+    if (!pointer) return;
+
+    const figureOffset =
+      figure ?
+        parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
+      : 0;
+
+    let x = pointer.pageX - figureOffset - imgOffset.left;
+    x =
+      x < handleMargin ? handleMargin
+      : x > w - handleMargin ? w - handleMargin
+      : x;
+    offset = x / w;
   };
 
   /** Starts the slider */
diff --git a/pages/Stories/One/+page.svelte b/pages/Stories/One/+page.svelte
new file mode 100644
index 0000000..0e91784
--- /dev/null
+++ b/pages/Stories/One/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import One from './One.svelte';
+  /* import ScrollerBase from './ScrollerBase.svelte';
+  import ScrollerDemo from './demo/ScrollerDemo.svelte'; */
+  import type { PageData } from '../../$types';
+  import {
+    EmbedPreviewerLink,
+    Theme,
+  } from '@reuters-graphics/graphics-components';
+  import App from '$lib/App.svelte';
+  import pkg from '$pkg';
+  import { dev } from '$app/environment';
+  import { assets } from '$app/paths';
+  import { page } from '$app/state';
+
+  // Styles
+  import '@reuters-graphics/graphics-components/scss/main.scss';
+  import '$lib/styles/global.scss';
+
+  let { data }: { data: PageData } = $props();
+  let content = $derived(data.content);
+</script>
+
+<Theme
+  base="dark"
+  theme={{
+    font: {
+      family: {
+        serif: 'Sentient',
+        'sans-serif': "'Atkinson Hyperlegible Next'",
+        hed: 'Sentient',
+        subhed: 'Sentient',
+        body: "'Atkinson Hyperlegible Next'",
+        note: "'Atkinson Hyperlegible Next'",
+      },
+    },
+  }}
+>
+  <App {content} />
+</Theme>
+<!-- Only visible in dev! -->
+<EmbedPreviewerLink {dev} />
diff --git a/pages/Stories/One/One.svelte b/pages/Stories/One/One.svelte
new file mode 100644
index 0000000..fdd2035
--- /dev/null
+++ b/pages/Stories/One/One.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { ScrollerBase } from '@reuters-graphics/graphics-components';
+
+  // Optional: Bind your own variables to use them in your code.
+  let count = $state(1);
+  let index = $state(0);
+  let offset = $state(0);
+  let progress = $state(0);
+  let top = $state(0.1);
+  let threshold = $state(0.5);
+  let bottom = $state(0.9);
+</script>
+
+<ScrollerBase
+  {top}
+  {threshold}
+  {bottom}
+  bind:count
+  bind:index
+  bind:offset
+  bind:progress
+  query="div.step-foreground-container"
+>
+  {#snippet backgroundSnippet()}
+    <!-- Add custom background HTML or component -->
+    <p class="mb-0">
+      Current step: <strong>{index + 1}/{count}</strong>
+    </p>
+    <progress class="mb-4" value={(index + 1) / count}></progress>
+
+    <p class="mb-0">Offset in current step</p>
+    <progress class="mb-4" value={offset}></progress>
+
+    <p class="mb-0">Total progress</p>
+    <progress class="mb-4" value={progress}></progress>
+  {/snippet}
+  {#snippet foregroundSnippet()}
+    <!-- Add custom foreground HTML or component -->
+    <div class="step-foreground-container">Step 1</div>
+    <div class="step-foreground-container">Step 2</div>
+    <div class="step-foreground-container">Step 3</div>
+    <div class="step-foreground-container">Step 4</div>
+    <div class="step-foreground-container">Step 5</div>
+  {/snippet}
+</ScrollerBase>
+
+<style lang="scss">
+  @use '@reuters-graphics/graphics-components/dist/scss/mixins' as mixins;
+
+  .step-foreground-container {
+    height: 100vh;
+    width: 50%;
+    background-color: rgba(0, 0, 0, 0.2);
+    padding: 1em;
+    margin: 0 0 2em 0;
+    position: relative;
+    left: 50%;
+  }
+</style>