@reuters-graphics/graphics-components 3.0.25 → 3.0.27

package/dist/components/@types/global.d.ts

@@ -43,6 +43,7 @@ export interface ScrollerStep {
 }
 export type ForegroundPosition = 'middle' | 'left' | 'right' | 'left opposite' | 'right opposite';
 export type ScrollerVideoForegroundPosition = 'top center' | 'top left' | 'top right' | 'bottom center' | 'bottom left' | 'bottom right' | 'center center' | 'center left' | 'center right';
+export type LottieForegroundPosition = 'top center' | 'top left' | 'top right' | 'bottom center' | 'bottom left' | 'bottom right' | 'center center' | 'center left' | 'center right';
 export interface ScrollerVideoInstance {
     container: HTMLElement | null;
     scrollerVideoContainer: Element | string | undefined;

package/dist/components/HorizontalScroller/Debug.svelte

@@ -0,0 +1,345 @@
+<script lang="ts">
+  import { map } from './utils';
+
+  const { componentState } = $props();
+
+  let isMoving = $state(false);
+  let preventDetails = $state(false);
+  let position = $state({ x: 8, y: 8 });
+
+  const fmt = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
+
+  function onMouseDown(e: MouseEvent) {
+    isMoving = true;
+    e.preventDefault();
+  }
+
+  function onMouseMove(e: MouseEvent) {
+    if (isMoving) {
+      position = {
+        x: position.x + e.movementX,
+        y: position.y + e.movementY,
+      };
+      preventDetails = true;
+    }
+    e.preventDefault();
+  }
+
+  function onMouseUp(e: MouseEvent) {
+    if (isMoving) {
+      isMoving = false;
+      setTimeout(() => {
+        preventDetails = false;
+      }, 5);
+      e.stopImmediatePropagation();
+    }
+    e.preventDefault();
+  }
+
+  function onClick(e: MouseEvent) {
+    if (preventDetails) {
+      e.preventDefault();
+    }
+    isMoving = false;
+  }
+
+  let normalisedScrollProgress = $derived(
+    map(
+      componentState.mappedProgress,
+      componentState.mappedStart ?? 0,
+      componentState.mappedEnd ?? 1,
+      0,
+      1
+    )
+  );
+
+  let normalisedProgress = $derived(
+    map(
+      componentState.easedProgress,
+      componentState.mappedStart ?? 0,
+      componentState.mappedEnd ?? 1,
+      0,
+      1
+    )
+  );
+
+  function mappedStop(stop: number): number {
+    return map(
+      stop,
+      componentState.mappedStart ?? 0,
+      componentState.mappedEnd ?? 1,
+      0,
+      1
+    );
+  }
+</script>
+
+<svelte:window onmousemove={onMouseMove} />
+
+{#snippet triggerPoints()}
+  {#if componentState.triggerStops.length > 0}
+    {#if componentState.scrubbed}
+      {@const totalStops = componentState.triggerStops.length}
+      {#each Array(totalStops) as _, index}
+        <span
+          class="stops"
+          style={`left: ${((index + 1) / (totalStops + 1)) * 100}%;`}>|</span
+        >
+      {/each}
+    {:else}
+      {@const stops = componentState.triggerStops.map((x: number) =>
+        mappedStop(x)
+      )}
+      {#each stops as stop, index}
+        {#if index < stops.length - 1}
+          <span
+            class="stops"
+            style={`left: ${(stop + (stops[index + 1] ?? stops[stops.length - 1])) * 0.5 * 100}%;`}
+            >|</span
+          >
+        {/if}
+      {/each}
+    {/if}
+  {/if}
+{/snippet}
+
+<div
+  style="position: absolute; top: {position.y}px; left: {position.x}px; z-index: 5; user-select: none;"
+  role="region"
+>
+  <details class="debug-info" open>
+    <summary
+      class="text-xxs font-sans font-bold title"
+      style="grid-column: span 2;"
+      onmousedown={onMouseDown}
+      onmouseup={onMouseUp}
+      onclick={onClick}
+    >
+      CONSOLE
+    </summary>
+    <div class="state-debug">
+      <!--  -->
+      <p>Progress:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value">
+          {componentState.progress}
+        </p>
+      </div>
+      <!--  -->
+      <p>Mapped progress:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value progress-value">
+          {@render triggerPoints()}
+          <span
+            class="progress-stop"
+            style={`left: ${normalisedScrollProgress * 100}%; transform: translateX(-50%);`}
+            >{fmt.format(componentState.mappedProgress)}</span
+          >
+          &nbsp;
+        </p>
+        <div id="video-progress-bar">
+          <div
+            style="width: {normalisedScrollProgress * 100}%; height: 100%;"
+          ></div>
+        </div>
+      </div>
+      <!--  -->
+      <p>Eased Progress:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value progress-value">
+          {#if componentState.stops.length > 0}
+            {#each componentState.stops as stop}
+              <span class="stops" style={`left: ${mappedStop(stop) * 100}%;`}
+                >{stop}</span
+              >
+            {/each}
+          {/if}
+          <span
+            class="progress-stop"
+            style={`left: ${normalisedProgress * 100}%; transform: translateX(-50%);`}
+            >{fmt.format(componentState.easedProgress)}</span
+          >
+          &nbsp;
+        </p>
+        <div id="video-progress-bar">
+          <div style="width: {normalisedProgress * 100}%; height: 100%;"></div>
+        </div>
+      </div>
+      <!--  -->
+      <p>Direction:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value">
+          <span class="tag">{componentState.direction}</span>
+        </p>
+      </div>
+      <!--  -->
+      {#if componentState.stops.length > 0}
+        <p>Stops:</p>
+        <div style="display: flex; flex-direction: column; gap: 4px;">
+          <p
+            class="state-value"
+            style="display: flex; gap: 4px; flex-wrap: wrap;"
+          >
+            {#each componentState.stops as stop}
+              <span class="tag">{stop}</span>
+            {/each}
+          </p>
+        </div>
+      {/if}
+      <!--  -->
+      <p>Handle scroll:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value">
+          <span class="tag">{componentState.handleScroll}</span>
+        </p>
+      </div>
+      <!--  -->
+      <p>Scrubbed:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value">
+          <span class="tag">{componentState.scrubbed}</span>
+        </p>
+      </div>
+      <!--  -->
+      <p>Easing:</p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value">
+          {componentState.easing}
+        </p>
+      </div>
+      <!--  -->
+      <p>
+        Duration:
+        {#if componentState.scrubbed}
+          <span class="tag not-applicable">NA</span>
+        {/if}
+      </p>
+      <div style="display: flex; flex-direction: column; gap: 4px;">
+        <p class="state-value">
+          <span class="tag">{componentState.duration}</span>
+        </p>
+      </div>
+      <!--  -->
+    </div>
+  </details>
+</div>
+
+<style>* {
+  font-family: monospace;
+  font-weight: 500;
+}
+
+.debug-info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: rgb(0, 0, 0);
+  z-index: 3;
+  margin: 0;
+  width: 50vmin;
+  min-width: 50vmin;
+  padding: 8px;
+  border-radius: 8px;
+  overflow: auto;
+  resize: horizontal;
+  opacity: 0.6;
+  transition: opacity 0.3s ease;
+  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.5));
+}
+@media (prefers-reduced-motion: no-preference) {
+  .debug-info {
+    interpolate-size: allow-keywords;
+  }
+}
+.debug-info::details-content {
+  opacity: 0;
+  block-size: 0;
+  overflow-y: clip;
+  transition: content-visibility 0.4s allow-discrete, opacity 0.4s, block-size 0.4s cubic-bezier(0.87, 0, 0.13, 1);
+}
+.debug-info[open]::details-content {
+  opacity: 1;
+  block-size: auto;
+}
+.debug-info .title {
+  width: 100%;
+  color: white;
+  margin: 0;
+}
+.debug-info * {
+  user-select: none;
+}
+
+.debug-info[open] {
+  opacity: 1;
+}
+
+div.state-debug {
+  display: grid;
+  width: 100%;
+  padding: 8px 8px 16px 8px;
+  grid-template-columns: 20vmin 1fr;
+  align-items: center;
+  gap: 0.75rem 0.25rem;
+  background-color: #1e1e1e;
+  border-radius: 4px;
+  margin-top: 8px;
+}
+
+p {
+  font-size: var(--theme-font-size-xxs);
+  padding: 0;
+  margin: 0;
+  color: rgba(255, 255, 255, 0.7);
+  overflow-wrap: anywhere;
+  line-height: 100%;
+  font-variant: tabular-nums;
+}
+
+.state-value {
+  color: white;
+}
+
+.progress-value {
+  position: relative;
+  height: 100%;
+}
+
+.stops {
+  position: absolute;
+  opacity: 0.5;
+  transform: translateX(-50%);
+}
+
+.progress-stop {
+  position: absolute;
+  opacity: 1;
+  text-wrap: nowrap;
+}
+
+#video-progress-bar {
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.2);
+  height: 2px;
+  border-radius: 50px;
+}
+#video-progress-bar div {
+  background-color: white;
+  border-radius: 50px;
+}
+
+.tag {
+  padding: 0.1rem 0.2rem;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.2);
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
+.not-applicable {
+  background-color: #4a0000;
+  color: #ff8a80;
+}</style>

package/dist/components/HorizontalScroller/Debug.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Debug: import("svelte").Component<{
+    componentState: any;
+}, {}, "">;
+type Debug = ReturnType<typeof Debug>;
+export default Debug;

package/dist/components/HorizontalScroller/HorizontalScroller.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+  import { Tween } from 'svelte/motion';
+  import { clamp, map } from './utils/index';
+  import type { Action } from 'svelte/action';
+
+  import Debug from './Debug.svelte';
+
+  interface Props {
+    /** Optional id for the scroller container */
+    id?: string;
+    /** Optional additional classes for the scroller container */
+    class?: string;
+    /** Height of the scroller container in CSS `vh` units. Set it to `100lvh` when using inside ScrollerBase. */
+    height?: string;
+    /** Bindable progress value. Ideal range: `[0-1]`. Bind ScrollerBase's progress to this prop. */
+    progress?: number;
+    /** Direction of movement*/
+    direction?: 'left' | 'right';
+    /** Content to scroll*/
+    children?: Snippet;
+    /** Array of numbers desired as stops for the scroller */
+    stops?: number[];
+    /** Should the component handle scroll events? Set it to `false` when using inside ScrollerBase. */
+    handleScroll?: boolean;
+    /** Whether the stops should be scrubbed */
+    scrubbed?: boolean;
+    /** Easing function for the progress/stops */
+    easing?: (t: number) => number;
+    /** Duration of the easing animation in milliseconds. Effective only when scrubbed is false. */
+    duration?: number;
+    /** Whether to show debug info */
+    showDebugInfo?: boolean;
+    /** Modified starting scale. Default is 0 */
+    mappedStart?: number;
+    /** Modified ending scale. Default is 1 */
+    mappedEnd?: number;
+  }
+
+  let {
+    id = '',
+    class: cls = '',
+    height = '200lvh',
+    direction = 'right',
+    progress = $bindable(0),
+    mappedStart = 0,
+    mappedEnd = 1,
+    children,
+    stops = [],
+    handleScroll = true,
+    scrubbed = true,
+    easing: ease = (t) => t,
+    duration = 400,
+    showDebugInfo = false,
+  }: Props = $props();
+
+  let easedProgress: Tween<number> = $state(
+    new Tween(mappedStart, { duration, easing: ease })
+  );
+  let container: HTMLDivElement | undefined = $state(undefined);
+  let containerHeight: number = $state(0);
+  let containerWidth: number = $state(0);
+  let content: HTMLDivElement | undefined = $state(undefined);
+  let contentWidth: number = $state(0);
+  let screenHeight: number = $state(0);
+  let divisions: number[] = $derived(
+    [...stops, mappedStart, mappedEnd].sort((a, b) => a - b)
+  );
+  let divisionsCount: number = $derived.by(() => divisions.length - 1);
+
+  let mappedProgress: number = $state(0);
+
+  // handles horizontal translation of the content
+  let translateX: number = $derived.by(() => {
+    let processedProgress = clamp(
+      easedProgress.current,
+      mappedStart,
+      mappedEnd
+    );
+    let normalisedProgress = processedProgress;
+
+    normalisedProgress =
+      direction === 'right' ? processedProgress : mappedEnd - processedProgress;
+
+    const translate = -(contentWidth - containerWidth) * normalisedProgress;
+
+    return translate;
+  });
+
+  let componentState = $derived.by(() => ({
+    progress,
+    mappedProgress,
+    easedProgress: easedProgress.current,
+    direction,
+    mappedStart,
+    mappedEnd,
+    triggerStops: scrubbed ? stops : divisions,
+    stops: stops,
+    handleScroll,
+    scrubbed,
+    easing: ease,
+    duration,
+  }));
+
+  onMount(() => {
+    // Initialize mappedProgress to mappedStart on mount
+    mappedProgress = mappedStart;
+  });
+
+  const scrollListener: Action = () => {
+    if (handleScroll) {
+      window.addEventListener('scroll', handleScrollFunction, {
+        passive: true,
+      });
+    } else {
+      window.addEventListener('scroll', () => handleStops(progress), {
+        passive: true,
+      });
+    }
+  };
+
+  // calculates distance scrolled inside the container
+  function handleScrollFunction() {
+    if (!container) return;
+
+    progress =
+      (-container?.offsetTop + window?.scrollY) /
+      (containerHeight - screenHeight);
+
+    handleStops(progress);
+  }
+
+  // updates easedProgress based on stops and scrubbed settings
+  function handleStops(rawProgress: number) {
+    mappedProgress = map(rawProgress, 0, 1, mappedStart, mappedEnd);
+
+    if (!stops || stops.length === 0) {
+      easedProgress.set(ease(map(rawProgress, 0, 1, mappedStart, mappedEnd)), {
+        duration: 0,
+      });
+      return;
+    }
+
+    if (!scrubbed) {
+      for (let i = 0; i < divisions.length; i++) {
+        if (
+          mappedProgress > divisions[i] &&
+          mappedProgress <=
+            (divisions[i + 1] ?? divisions[divisions.length - 1])
+        ) {
+          const midPoint =
+            divisions[i] +
+            ((divisions[i + 1] ?? divisions[divisions.length - 1]) -
+              divisions[i]) *
+              0.5;
+          if (
+            mappedProgress >= midPoint &&
+            easedProgress.target !==
+              (divisions[i + 1] ?? divisions[divisions.length - 1])
+          ) {
+            easedProgress.set(
+              divisions[i + 1] ?? divisions[divisions.length - 1]
+            );
+            return;
+          } else if (
+            mappedProgress < midPoint &&
+            easedProgress.target !== divisions[i]
+          ) {
+            easedProgress.set(divisions[i]);
+            return;
+          }
+        } else if (
+          mappedProgress <
+          divisions[0] + (divisions[1] ?? mappedStart) * 0.5
+        ) {
+          if (easedProgress.target !== divisions[0]) {
+            easedProgress.set(divisions[0]);
+            return;
+          }
+        } else {
+          continue;
+        }
+      }
+    } else {
+      for (let i = 0; i < divisions.length; i++) {
+        let oneByDivCount = 1 / divisionsCount;
+
+        let normalStart = i == 0 ? mappedStart : oneByDivCount * i;
+        let normalEnd =
+          i == divisionsCount - 1 ? mappedEnd : oneByDivCount * (i + 1);
+
+        if (mappedProgress >= normalStart && mappedProgress < normalEnd) {
+          let stopStart = divisions[i];
+          let stopEnd = divisions[i + 1] ?? mappedEnd;
+          let newProgressVal =
+            stopStart +
+            ease(map(mappedProgress, normalStart, normalEnd, 0, 1)) *
+              (stopEnd - stopStart);
+
+          easedProgress.set(newProgressVal, { duration: 0 });
+          return;
+        } else {
+          continue;
+        }
+      }
+    }
+  }
+</script>
+
+<svelte:window bind:innerHeight={screenHeight} />
+
+<div
+  {id}
+  class="horizontal-scroller-container {cls}"
+  style="height: {height};"
+  bind:this={container}
+  bind:clientHeight={containerHeight}
+  bind:clientWidth={containerWidth}
+>
+  <div
+    class="horizontal-scroller-content"
+    bind:this={content}
+    bind:clientWidth={contentWidth}
+    style="transform: translateX({translateX}px);"
+    use:scrollListener
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+    {#if showDebugInfo}
+      <div
+        class="debug-info"
+        style={`position: absolute; left: ${-translateX}px; top: 0px;`}
+      >
+        <Debug {componentState} />
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>.horizontal-scroller-container {
+  width: 100%;
+  contain: paint;
+}
+
+.horizontal-scroller-content {
+  display: inline-block;
+  height: 100%;
+  max-height: 100lvh;
+  position: sticky;
+  top: 0;
+}</style>

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

@@ -0,0 +1,34 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    /** Optional id for the scroller container */
+    id?: string;
+    /** Optional additional classes for the scroller container */
+    class?: string;
+    /** Height of the scroller container in CSS `vh` units. Set it to `100lvh` when using inside ScrollerBase. */
+    height?: string;
+    /** Bindable progress value. Ideal range: `[0-1]`. Bind ScrollerBase's progress to this prop. */
+    progress?: number;
+    /** Direction of movement*/
+    direction?: 'left' | 'right';
+    /** Content to scroll*/
+    children?: Snippet;
+    /** Array of numbers desired as stops for the scroller */
+    stops?: number[];
+    /** Should the component handle scroll events? Set it to `false` when using inside ScrollerBase. */
+    handleScroll?: boolean;
+    /** Whether the stops should be scrubbed */
+    scrubbed?: boolean;
+    /** Easing function for the progress/stops */
+    easing?: (t: number) => number;
+    /** Duration of the easing animation in milliseconds. Effective only when scrubbed is false. */
+    duration?: number;
+    /** Whether to show debug info */
+    showDebugInfo?: boolean;
+    /** Modified starting scale. Default is 0 */
+    mappedStart?: number;
+    /** Modified ending scale. Default is 1 */
+    mappedEnd?: number;
+}
+declare const HorizontalScroller: import("svelte").Component<Props, {}, "progress">;
+type HorizontalScroller = ReturnType<typeof HorizontalScroller>;
+export default HorizontalScroller;

package/dist/components/HorizontalScroller/utils/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Clamp a number `n` to the inclusive range [low, high].
+ */
+export declare function clamp(n: number, low: number, high: number): number;
+/**
+ * Linearly maps a value `n` from range [inStart, inEnd] to [outStart, outEnd].
+ *
+ * @param {number} n           - The input value to map.
+ * @param {number} inStart     - Input range start.
+ * @param {number} inEnd       - Input range end.
+ * @param {number} outStart    - Output range start.
+ * @param {number} outEnd      - Output range end.
+ * @param {boolean} withinBounds - If true, clamp the mapped value to [outStart, outEnd].
+ * @returns {number}           - Mapped (and optionally clamped) value.
+ */
+export declare function map(n: number, inStart: number, inEnd: number, outStart: number, outEnd: number, withinBounds?: boolean): number;

package/dist/components/HorizontalScroller/utils/index.js

@@ -0,0 +1,30 @@
+/**
+ * Clamp a number `n` to the inclusive range [low, high].
+ */
+export function clamp(n, low, high) {
+    // Ensure low <= high even if caller swaps them
+    const min = Math.min(low, high);
+    const max = Math.max(low, high);
+    return Math.max(min, Math.min(n, max));
+}
+/**
+ * Linearly maps a value `n` from range [inStart, inEnd] to [outStart, outEnd].
+ *
+ * @param {number} n           - The input value to map.
+ * @param {number} inStart     - Input range start.
+ * @param {number} inEnd       - Input range end.
+ * @param {number} outStart    - Output range start.
+ * @param {number} outEnd      - Output range end.
+ * @param {boolean} withinBounds - If true, clamp the mapped value to [outStart, outEnd].
+ * @returns {number}           - Mapped (and optionally clamped) value.
+ */
+export function map(n, inStart, inEnd, outStart, outEnd, withinBounds = true) {
+    // Avoid division by zero: when input range is degenerate, return outStart
+    const inSpan = inEnd - inStart;
+    if (inSpan === 0) {
+        return withinBounds ? clamp(outStart, outStart, outEnd) : outStart;
+    }
+    const t = (n - inStart) / inSpan; // normalized 0..1 in input space (or beyond)
+    const out = t * (outEnd - outStart) + outStart;
+    return withinBounds ? clamp(out, outStart, outEnd) : out;
+}