@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Scroller/Scroller.svelte.d.ts

@@ -1,84 +1,67 @@
-import { SvelteComponent } from "svelte";
-import type { ContainerWidth, ScrollerStep } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /**
-           * ID of the scroller container
-           * @type {string}
-           */ id?: string;
-        /**
-           * An array of step objects that define the steps in your scroller.
-           *
-           * Each step object in the array can have:
-           *
-           * - `background` A background component. **REQUIRED**
-           * - `backgroundProps` An object of props given to the background component
-           * - `foreground` Either a markdown-formatted string or a foreground component **REQUIRED**
-           * - `altText` A string describing the background graphic, which is read aloud after the foreground blurb. You can add it to each step or, if you want to add just one alt text to describe all graphics in the scroll section, add it to just the first step. **RECOMMENDED**
-           * - `foregroundProps` An object of props given to the foreground component
-           *
-           * @required
-           */ steps?: ScrollerStep[];
-        /**
-           * Width of the background
-           */ backgroundWidth?: ContainerWidth;
-        /**
-           * Position of the foreground. One of: middle, left, right, left opposite or right opposite.
-           *
-           * "opposite" options push the background to the other side on larger viewports.
-           *
-           * @type {string}
-           */ foregroundPosition?: "left" | "right" | "middle" | "left opposite" | "right opposite";
-        /**
-           * Whether previous background steps should stack below the current one.
-           *
-           * - `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.
-           * - `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.
-           */ stackBackground?: boolean;
-        /**
-           * How many background steps to load before and after the currently active one, effectively lazy-loading them.
-           *
-           * Setting to `0` disables lazy-loading and loads all backgrounds at once.
-           */ preload?: number;
-        /**
-           * Setting to `true` will unroll the scroll experience into a flat layout.
-           */ embedded?: boolean;
-        /**
-           * Layout order when `embedded` is `true`.
-           *
-           * - `fb` _default_ Foreground then background
-           * - `bf` Background then foreground
-           *
-           * @type {string}
-           */ embeddedLayout?: "fb" | "bf";
-        /**
-           * Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-           */ threshold?: number;
-        /**
-           * Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-           */ top?: number;
-        /**
-           * Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-           */ bottom?: number;
-        /**
-           * Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
-           */ parallax?: boolean;
-        /**
-           * Set a class to target with SCSS.
-           * @type {string}
-           */ class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ScrollerProps = typeof __propDef.props;
-export type ScrollerEvents = typeof __propDef.events;
-export type ScrollerSlots = typeof __propDef.slots;
-/** `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) */
-export default class Scroller extends SvelteComponent<ScrollerProps, ScrollerEvents, ScrollerSlots> {
+import type { ContainerWidth, ForegroundPosition, ScrollerStep } from '../@types/global';
+interface Props {
+    /**
+     * An array of step objects that define the steps in your scroller.
+     *
+     * Each step object in the array can have:
+     *
+     * - `background` A background component. **REQUIRED**
+     * - `backgroundProps` Optional props for background component.
+     * - `foreground` A component or markdown-formatted string. **REQUIRED**
+     * - `foregroundProps` Optional props for foreground component.
+     * - `altText` Optional alt text for the background, read aloud after the foreground text. You can add it to each step or just to the first step to describe the entire scroller graphic. **RECOMMENDED**
+     *
+     */
+    steps: ScrollerStep[];
+    /** Width of the background */
+    backgroundWidth?: ContainerWidth;
+    /** Position of the foreground */
+    foregroundPosition?: ForegroundPosition;
+    /**
+     * Whether previous background steps should stack below the current one.
+     *
+     * - `true` _default_ Background graphics from previous steps will remain visible below the active one, allowing you to stack graphics with transparent backgrounds.
+     * - `false` Only the background graphic from the current step will show and backgrounds from previous steps are hidden.
+     */
+    stackBackground?: boolean;
+    /**
+     * How many background steps to load before and after the currently active one, effectively lazy-loading them.
+     *
+     * Setting to `0` disables lazy-loading and loads all backgrounds at once.
+     */
+    preload?: number;
+    /** Setting to `true` will unroll the scroll experience into a flat layout */
+    embedded?: boolean;
+    /**
+     * Layout order when `embedded` is `true`.
+     *
+     * - `fb` _default_ Foreground then background
+     * - `bf` Background then foreground
+     *
+     */
+    embeddedLayout?: 'fb' | 'bf';
+    /**
+     * Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    threshold?: number;
+    /**
+     * Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    top?: number;
+    /**
+     * Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    bottom?: number;
+    /**
+     * Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+     */
+    parallax?: boolean;
+    /** ID of the scroller container */
+    id?: string;
+    /** Set a class to target with SCSS */
+    class?: string;
 }
-export {};
+/** `Scroller` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-scroller--docs) */
+declare const Scroller: import("svelte").Component<Props, {}, "">;
+type Scroller = ReturnType<typeof Scroller>;
+export default Scroller;

package/dist/components/Scroller/ScrollerBase/index.svelte

@@ -0,0 +1,267 @@
+<!-- This is a Svelte 5 version of [svelte-scroller](https://github.com/sveltejs/svelte-scroller) -->
+<script module lang="ts">
+  const handlers: Array<() => void> = [];
+
+  interface ManagerParams {
+    outer: Element;
+    update: () => void;
+  }
+
+  let manager: {
+    add: (params: ManagerParams) => void;
+    remove: (params: ManagerParams) => void;
+  };
+
+  if (typeof window !== 'undefined') {
+    const run_all = () => handlers.forEach((fn) => fn());
+
+    window.addEventListener('scroll', run_all);
+    window.addEventListener('resize', run_all);
+  }
+
+  if (typeof IntersectionObserver !== 'undefined') {
+    const map = new Map();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const update = map.get(entry.target);
+          const index = handlers.indexOf(update);
+
+          if (entry.isIntersecting) {
+            if (index === -1) handlers.push(update);
+          } else {
+            update();
+            if (index !== -1) handlers.splice(index, 1);
+          }
+        });
+      },
+      {
+        rootMargin: '400px 0px', // TODO why 400?
+      }
+    );
+
+    manager = {
+      add: ({ outer, update }) => {
+        const { top, bottom } = outer.getBoundingClientRect();
+
+        if (top < window.innerHeight && bottom > 0) handlers.push(update);
+
+        map.set(outer, update);
+        observer.observe(outer);
+      },
+
+      remove: ({ outer, update }) => {
+        const index = handlers.indexOf(update);
+        if (index !== -1) handlers.splice(index, 1);
+
+        map.delete(outer);
+        observer.unobserve(outer);
+      },
+    };
+  } else {
+    manager = {
+      add: ({ update }) => {
+        handlers.push(update);
+      },
+
+      remove: ({ update }) => {
+        const index = handlers.indexOf(update);
+        if (index !== -1) handlers.splice(index, 1);
+      },
+    };
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { type Snippet } from 'svelte';
+
+  interface Props {
+    /** Config */
+    /** The vertical position that the top of the foreground must scroll past before the background becomes fixed, as a proportion of window height. **Value between 0 and 1.** */
+    top?: number;
+    /** The inverse of top — once the bottom of the foreground passes this point, the background becomes unfixed. **Value between 0 and 1.** */
+    bottom?: number;
+    /** Once a section crosses this point, it becomes 'active'. **Value between 0 and 1.** */
+    threshold?: number;
+    /** A CSS selector that describes the individual sections of your foreground. */
+    query?: string;
+    /** If `true`, the background will scroll such that the bottom edge reaches the bottom at the same time as the foreground. This effect can be unpleasant for people with high motion sensitivity, so use it advisedly. */
+    parallax?: boolean;
+    /** The background snippet. */
+    backgroundSnippet: Snippet;
+    /** The foreground snippet. */
+    foregroundSnippet: Snippet;
+    /** Bindings */
+    /** The currently active section. **Bindable** */
+    index?: number;
+    /**  How far the section has scrolled past the threshold, as a value between 0 and 1. **Bindable**. */
+    offset?: number;
+    /** How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom. **Bindable**. */
+    progress?: number;
+    /** Number of sections */
+    count?: number;
+    /** Whether the foreground is visible */
+    visible?: boolean;
+  }
+
+  let {
+    // Bindings
+    index = $bindable(0),
+    count = $bindable(0),
+    offset = $bindable(0),
+    progress = $bindable(0),
+    visible = $bindable(false),
+    // Config
+    top = 0,
+    bottom = 1,
+    threshold = 0.5,
+    query = 'section',
+    parallax = false,
+    backgroundSnippet,
+    foregroundSnippet,
+  }: Props = $props();
+
+  let outer: HTMLElement;
+  let foreground: HTMLElement;
+  let background: HTMLElement;
+  let left;
+  // Target compiler option to es6 or higher for NodeListOf<T> to be iterable.
+  let sections: ReturnType<typeof document.querySelectorAll> | undefined =
+    $state();
+  let wh = $state(0);
+  let fixed = $state(false);
+  let offset_top = 0;
+  let width = 1;
+
+  let top_px = $derived(Math.round(top * wh));
+  let bottom_px = $derived(Math.round(bottom * wh));
+  let threshold_px = $derived(Math.round(threshold * wh));
+
+  let style = $derived(`
+		position: ${fixed ? 'fixed' : 'absolute'};
+		transform: translate(0, ${offset_top}px);
+	`);
+
+  let widthStyle = $derived(fixed ? `width:${width}px;` : '');
+
+  onMount(() => {
+    sections = foreground.querySelectorAll(query);
+    count = sections.length;
+
+    update();
+
+    const scroller = { outer, update };
+
+    manager.add(scroller);
+    return () => manager.remove(scroller);
+  });
+
+  function update() {
+    if (!foreground) return;
+
+    // re-measure outer container
+    const bcr = outer.getBoundingClientRect();
+    left = bcr.left;
+    width = bcr.right - left;
+
+    // determine fix state
+    const fg = foreground.getBoundingClientRect();
+    const bg = background.getBoundingClientRect();
+
+    visible = fg.top < wh && fg.bottom > 0;
+
+    const foreground_height = fg.bottom - fg.top;
+    const background_height = bg.bottom - bg.top;
+
+    const available_space = bottom_px - top_px;
+    progress = (top_px - fg.top) / (foreground_height - available_space);
+
+    if (progress <= 0) {
+      offset_top = 0;
+      fixed = false;
+    } else if (progress >= 1) {
+      offset_top =
+        parallax ?
+          foreground_height - background_height
+        : foreground_height - available_space;
+      fixed = false;
+    } else {
+      offset_top =
+        parallax ?
+          Math.round(top_px - progress * (background_height - available_space))
+        : top_px;
+      fixed = true;
+    }
+
+    for (let i = 0; i < sections!.length; i++) {
+      const section = sections![i];
+      const { top } = section.getBoundingClientRect();
+
+      const next = sections![i + 1];
+      const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
+
+      offset = (threshold_px - top) / (bottom - top);
+      if (bottom >= threshold_px) {
+        index = i;
+        break;
+      }
+    }
+  }
+</script>
+
+<svelte:window bind:innerHeight={wh} />
+
+<svelte-scroller-outer bind:this={outer}>
+  <svelte-scroller-background-container
+    class="background-container"
+    style="{style}{widthStyle}"
+  >
+    <svelte-scroller-background bind:this={background}>
+      {@render backgroundSnippet()}
+    </svelte-scroller-background>
+  </svelte-scroller-background-container>
+
+  <svelte-scroller-foreground bind:this={foreground}>
+    {@render foregroundSnippet()}
+  </svelte-scroller-foreground>
+</svelte-scroller-outer>
+
+<style>svelte-scroller-outer {
+  display: block;
+  position: relative;
+}
+
+svelte-scroller-background {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+svelte-scroller-foreground {
+  display: block;
+  position: relative;
+  z-index: 2;
+}
+
+svelte-scroller-foreground::after {
+  content: " ";
+  display: block;
+  clear: both;
+}
+
+svelte-scroller-background-container {
+  display: block;
+  position: absolute;
+  width: 100%;
+  max-width: 100%;
+  pointer-events: none;
+  z-index: 1;
+  top: 0;
+  /* in theory this helps prevent jumping */
+  will-change: transform;
+  /* -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0); */
+}</style>

package/dist/components/Scroller/ScrollerBase/index.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    /** Config */
+    /** The vertical position that the top of the foreground must scroll past before the background becomes fixed, as a proportion of window height. **Value between 0 and 1.** */
+    top?: number;
+    /** The inverse of top — once the bottom of the foreground passes this point, the background becomes unfixed. **Value between 0 and 1.** */
+    bottom?: number;
+    /** Once a section crosses this point, it becomes 'active'. **Value between 0 and 1.** */
+    threshold?: number;
+    /** A CSS selector that describes the individual sections of your foreground. */
+    query?: string;
+    /** If `true`, the background will scroll such that the bottom edge reaches the bottom at the same time as the foreground. This effect can be unpleasant for people with high motion sensitivity, so use it advisedly. */
+    parallax?: boolean;
+    /** The background snippet. */
+    backgroundSnippet: Snippet;
+    /** The foreground snippet. */
+    foregroundSnippet: Snippet;
+    /** Bindings */
+    /** The currently active section. **Bindable** */
+    index?: number;
+    /**  How far the section has scrolled past the threshold, as a value between 0 and 1. **Bindable**. */
+    offset?: number;
+    /** How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom. **Bindable**. */
+    progress?: number;
+    /** Number of sections */
+    count?: number;
+    /** Whether the foreground is visible */
+    visible?: boolean;
+}
+declare const Index: import("svelte").Component<Props, {}, "progress" | "offset" | "index" | "count" | "visible">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/Scroller/demo/components/ai2svelte/ai-foreground.svelte

@@ -0,0 +1,118 @@
+<script>
+  // Hard-coding for demo purposes only...
+  import stepXs from './images/Body-issues-key-xs.png';
+  let width = $state();
+</script>
+
+<div id="g-Body-issues-key-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0}
+    <div id="g-Body-issues-key-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 48.4848% 0;"></div>
+      <div
+        id="g-Body-issues-key-xs-img"
+        class="g-aiImg"
+        style="background-image: url({stepXs});"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:19.4775%;margin-top:-10.2px;left:8.1818%;width:276px;"
+      >
+        <p class="g-pstyle0">Likelihood of something happening</p>
+      </div>
+
+      <div
+        id="g-ai0-3"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:55.1025%;margin-top:-10.2px;left:27.2727%;width:68px;"
+      >
+        <p class="g-pstyle1">0-25%</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:55.1025%;margin-top:-10.2px;left:74.2424%;width:75px;"
+      >
+        <p class="g-pstyle1">50-75%</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:79.4775%;margin-top:-10.2px;left:74.2424%;width:82px;"
+      >
+        <p class="g-pstyle1">75-100%</p>
+      </div>
+      <div
+        id="g-ai0-6"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:83.2275%;margin-top:-10.2px;left:27.2727%;width:77px;"
+      >
+        <p class="g-pstyle1">25-50%</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2025-03-17 09:52 -->
+
+<!-- Generated by ai2html v0.100.0 - 2025-03-17 09:52 -->
+<!-- ai file: Body-issues-key.ai -->
+<style>#g-Body-issues-key-box,
+#g-Body-issues-key-box .g-artboard {
+  margin: 0 auto;
+}
+
+#g-Body-issues-key-box p {
+  margin: 0;
+}
+
+#g-Body-issues-key-box .g-aiAbs {
+  position: absolute;
+}
+
+#g-Body-issues-key-box .g-aiImg {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 100% !important;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+#g-Body-issues-key-box .g-aiPointText p {
+  white-space: nowrap;
+}
+
+#g-Body-issues-key-xs {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-Body-issues-key-xs p {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  font-weight: 500;
+  line-height: 19px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(64, 64, 64);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-Body-issues-key-xs .g-pstyle0 {
+  height: 19px;
+}
+
+#g-Body-issues-key-xs .g-pstyle1 {
+  font-weight: 400;
+  height: 19px;
+}</style>

package/dist/components/Scroller/demo/components/ai2svelte/ai-foreground.svelte.d.ts

@@ -0,0 +1,6 @@
+export default AiForeground;
+type AiForeground = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const AiForeground: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/Scroller/{stories → demo}/components/ai2svelte/ai-scroller-1.svelte

@@ -1,21 +1,16 @@
-<script>
+<script lang="ts">
   // Hard-coding for demo purposes only...
-  // @ts-ignore img
   import stepXl from './images/step-1-xl.png';
-  // @ts-ignore img
   import stepLg from './images/step-1-lg.png';
-  // @ts-ignore img
   import stepMd from './images/step-1-md.png';
-  // @ts-ignore img
   import stepSm from './images/step-1-sm.png';
-  // @ts-ignore img
   import stepXs from './images/step-1-xs.png';
-  let width;
+  let width = $state<number>();
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:21 -->
 
-<div id="g-step-1-box" bind:clientWidth="{width}">
+<div id="g-step-1-box" bind:clientWidth={width}>
   <!-- Artboard: XL -->
   {#if width && width >= 1200}
     <div id="g-step-1-xl" class="g-artboard" style="">
@@ -23,7 +18,6 @@
       <div
         id="g-step-1-xl-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXl});"
       ></div>
     </div>
@@ -35,7 +29,6 @@
       <div
         id="g-step-1-lg-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepLg});"
       ></div>
     </div>
@@ -47,7 +40,6 @@
       <div
         id="g-step-1-md-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepMd});"
       ></div>
     </div>
@@ -59,7 +51,6 @@
       <div
         id="g-step-1-sm-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepSm});"
       ></div>
     </div>
@@ -71,7 +62,6 @@
       <div
         id="g-step-1-xs-img"
         class="g-aiImg"
-        alt=""
         style="background-image: url({stepXs});"
       ></div>
     </div>
@@ -82,7 +72,7 @@
 
 <!-- ai file: step-1.ai -->
 
-<!-- svelte-ignore css-unused-selector -->
+<!-- svelte-ignore css_unused_selector -->
 <style>#g-step-1-box,
 #g-step-1-box .g-artboard {
   margin: 0 auto;

package/dist/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AiScroller_1: import("svelte").Component<Record<string, never>, {}, "">;
+type AiScroller_1 = ReturnType<typeof AiScroller_1>;
+export default AiScroller_1;

package/dist/components/Scroller/{stories → demo}/components/ai2svelte/ai-scroller-2.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   // Hard-coding for demo purposes only...
   // @ts-ignore img
   import stepXl from './images/step-2-xl.png';
@@ -10,12 +10,12 @@
   import stepSm from './images/step-2-sm.png';
   // @ts-ignore img
   import stepXs from './images/step-2-xs.png';
-  let width = null;
+  let width = $state<null | number>(null);
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:20 -->
 
-<div id="g-step-2-box" bind:clientWidth="{width}">
+<div id="g-step-2-box" bind:clientWidth={width}>
   <!-- Artboard: XL -->
   {#if width && width >= 1200}
     <div id="g-step-2-xl" class="g-artboard" style="">

package/dist/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AiScroller_2: import("svelte").Component<Record<string, never>, {}, "">;
+type AiScroller_2 = ReturnType<typeof AiScroller_2>;
+export default AiScroller_2;