@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -1,175 +1,274 @@
 <!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) -->
-<script>import { throttle } from "lodash-es";
-import { onMount } from "svelte";
-import Block from "../Block/Block.svelte";
-import PaddingReset from "../PaddingReset/PaddingReset.svelte";
-export let width = "normal";
-export let height = 600;
-export let heightRatio = null;
-export let beforeSrc = null;
-export let beforeAlt = null;
-export let afterSrc = null;
-export let afterAlt = null;
-let cls = "";
-export { cls as class };
-export let handleColour = "white";
-export let handleInactiveOpacity = 0.9;
-export let handleMargin = 20;
-export let keyPressStep = 0.05;
-export let offset = 0.5;
-const random4 = () => Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
-export let id = "before-after-" + random4() + random4();
-let img;
-let imgOffset = null;
-let sliding = false;
-let figure;
-let beforeOverlayWidth = 0;
-let isFocused = false;
-let containerWidth;
-$: containerHeight = containerWidth && heightRatio ? containerWidth * heightRatio : height;
-$: w = imgOffset && imgOffset.width || 0;
-$: x = w * offset;
-$: figStyle = `width:100%;height:${containerHeight}px;`;
-$: imgStyle = "width:100%;height:100%;";
-$: beforeOverlayClip = x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0;
-const onFocus = () => isFocused = true;
-const onBlur = () => isFocused = false;
-const handleKeyDown = (e) => {
-  if (!isFocused) return;
-  const { keyCode } = e;
-  const margin = handleMargin / w;
-  if (keyCode === 39) {
-    offset = Math.min(1 - margin, offset + keyPressStep);
-  } else if (keyCode === 37) {
-    offset = Math.max(0 + margin, offset - keyPressStep);
-  }
-};
-const measureImage = () => {
-  if (img && img.complete) imgOffset = img.getBoundingClientRect();
-};
-const resize = () => {
-  measureImage();
-};
-const measureLoadedImage = (e) => {
-  if (e.type === "load") {
-    imgOffset = e.target.getBoundingClientRect();
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+  import { throttle } from 'es-toolkit';
+
+  import Block from '../Block/Block.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import type { ContainerWidth } from '../@types/global';
+  import { random4 } from '../../utils/';
+
+  interface Props {
+    /** Width of the chart within the text well. Options: wide, wider, widest, fluid */
+    width?: ContainerWidth;
+    /** Height of the component */
+    height?: number;
+    /**
+     * If set, makes the height a ratio of the component's width.
+     */
+    heightRatio?: number;
+    /**
+     * Before image source
+     */
+    beforeSrc: string;
+    /**
+     * Before image altText
+     */
+    beforeAlt: string;
+    /**
+     * After image source
+     */
+    afterSrc: string;
+    /**
+     * After image altText
+     */
+    afterAlt: string;
+    /**
+     * Class to target with SCSS.
+     */
+    class?: string;
+    /** Drag handle colour */
+    handleColour?: string;
+    /** Drag handle opacity */
+    handleInactiveOpacity?: number;
+    /** Margin at the edge of the image to stop dragging */
+    handleMargin?: number;
+    /** Percentage of the component width the handle will travel ona key press */
+    keyPressStep?: number;
+    /** Initial offset of the handle, between 0 and 1. */
+    offset?: number;
+    /** ID to target with SCSS. */
+    id?: string;
+    /**
+     * Optional snippet for a custom overlay for the before image.
+     */
+    beforeOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom overlay for the after image.
+     */
+    afterOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom caption.
+     */
+    caption?: Snippet;
+    /** Custom ARIA label language to label the component. */
+    ariaLabel?: string;
   }
-};
-const move = (e) => {
-  if (sliding && imgOffset) {
-    const el = e instanceof TouchEvent && e.touches ? e.touches[0] : e;
-    const figureOffset = figure ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) : 0;
-    let x2 = el.pageX - figureOffset - imgOffset.left;
-    x2 = x2 < handleMargin ? handleMargin : x2 > w - handleMargin ? w - handleMargin : x2;
-    offset = x2 / w;
+
+  let {
+    width = 'normal',
+    height = 600,
+    heightRatio,
+    beforeSrc,
+    beforeAlt,
+    afterSrc,
+    afterAlt,
+    class: cls = '',
+    handleColour = 'white',
+    handleInactiveOpacity = 0.9,
+    handleMargin = 20,
+    keyPressStep = 0.05,
+    offset = 0.5,
+    id = 'before-after-' + random4() + random4(),
+    beforeOverlay,
+    afterOverlay,
+    caption,
+    ariaLabel = 'Stacked before and after images with an adjustable slider',
+  }: Props = $props();
+
+  /** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation.
+   */
+  let img: HTMLImageElement | undefined = $state(undefined);
+
+  /** Defaults with an empty DOMRect with all values set to 0 */
+  let imgOffset: DOMRect = $state(new DOMRect());
+  let sliding = false;
+  let figure: HTMLElement | undefined = $state(undefined);
+  let beforeOverlayWidth = $state(0);
+  let isFocused = false;
+  let containerWidth: number = $state(0); // Defaults to 0
+
+  let containerHeight = $derived(
+    containerWidth && heightRatio ? containerWidth * heightRatio : height
+  );
+
+  let w = $derived(imgOffset.width);
+  let x = $derived(w * offset);
+  let figStyle = $derived(`width:100%;height:${containerHeight}px;`);
+  const imgStyle = 'width:100%;height:100%;';
+  let beforeOverlayClip = $derived(
+    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0
+  );
+
+  /** Toggle `isFocused` */
+  const onfocus = () => (isFocused = true);
+  const onblur = () => (isFocused = false);
+
+  /** Handle left or right arrows being pressed */
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isFocused) return;
+    const { code, key } = e;
+    const margin = handleMargin / w;
+    if (code === 'ArrowRight' || key === 'ArrowRight') {
+      offset = Math.min(1 - margin, offset + keyPressStep);
+    } else if (code === 'ArrowLeft' || key === 'ArrowLeft') {
+      offset = Math.max(0 + margin, offset - keyPressStep);
+    }
+  };
+
+  /** Measure image and set image offset */
+  const measureImage = () => {
+    if (img && img.complete) imgOffset = img.getBoundingClientRect();
+  };
+
+  /** Reset image offset on resize */
+  const resize = () => {
+    measureImage();
+  };
+
+  /** Measure image and set image offset on load */
+  const measureLoadedImage = (e: Event) => {
+    if (e.type === 'load') {
+      imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
+    }
+  };
+
+  /** 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;
+    }
+  };
+
+  /** Starts the slider */
+  const start = (e: MouseEvent | TouchEvent) => {
+    sliding = true;
+    move(e);
+  };
+
+  /** Sets `sliding` to `false`*/
+  const end = () => {
+    sliding = false;
+  };
+
+  /** Keep this warning since these values are often read from an ArchieML doc, which will not trigger typescript errors even if required values don't exist */
+  if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
+    console.warn('Missing required src or alt props for BeforeAfter component');
   }
-};
-const start = (e) => {
-  sliding = true;
-  move(e);
-};
-const end = () => {
-  sliding = false;
-};
-if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
-  console.warn("Missing required src or alt props for BeforeAfter component");
-}
-onMount(() => {
-  const interval = setInterval(() => {
-    if (imgOffset) clearInterval(interval);
-    if (img && img.complete && !imgOffset) measureImage();
-  }, 50);
-});
+
+  /** @TODO - Double check if this onMount is still necessary */
+  // onMount(() => {
+  //   // This is necessary b/c on:load doesn't reliably fire on the image...
+  //   const interval = setInterval(() => {
+  //     if (imgOffset) clearInterval(interval);
+  //     if (img && img.complete && !imgOffset) measureImage();
+  //   }, 50);
+  // });
 </script>
 
 <svelte:window
-  on:touchmove="{move}"
-  on:touchend="{end}"
-  on:mousemove="{move}"
-  on:mouseup="{end}"
-  on:resize="{throttle(resize, 100)}"
-  on:keydown="{handleKeyDown}"
+  ontouchmove={move}
+  ontouchend={end}
+  onmousemove={move}
+  onmouseup={end}
+  onresize={throttle(resize, 100)}
+  onkeydown={handleKeyDown}
 />
 
+<!-- Since we usually read these values from ArchieML, check that they exist -->
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
   <Block {width} {id} class="photo before-after fmy-6 {cls}">
-    <div
-      style="height: {containerHeight}px;"
-      bind:clientWidth="{containerWidth}"
-    >
-      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-      <figure
-        style="{figStyle}"
+    <div style="height: {containerHeight}px;" bind:clientWidth={containerWidth}>
+      <button
+        style={figStyle}
         class="before-after-container relative overflow-hidden my-0 mx-auto"
-        on:touchstart="{start}"
-        on:mousedown="{start}"
-        bind:this="{figure}"
-        aria-labelledby="{($$slots.caption && `${id}-caption`) || undefined}"
+        ontouchstart={start}
+        onmousedown={start}
+        bind:this={figure}
+        aria-label={ariaLabel}
       >
         <img
-          bind:this="{img}"
-          src="{afterSrc}"
-          alt="{afterAlt}"
-          on:load="{measureLoadedImage}"
-          on:mousedown|preventDefault
-          style="{imgStyle}"
+          bind:this={img}
+          src={afterSrc}
+          alt={afterAlt}
+          onload={measureLoadedImage}
+          style={imgStyle}
           class="after absolute block m-0 max-w-full object-cover"
-          aria-describedby="{($$slots.beforeOverlay && `${id}-before`) ||
-            undefined}"
+          aria-describedby={beforeOverlay ?
+            `${id}-before-description`
+          : undefined}
         />
 
         <img
-          src="{beforeSrc}"
-          alt="{beforeAlt}"
-          on:mousedown|preventDefault
+          src={beforeSrc}
+          alt={beforeAlt}
           style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
           class="before absolute block m-0 max-w-full object-cover"
-          aria-describedby="{($$slots.afterOverlay && `${id}-after`) ||
-            undefined}"
+          aria-describedby={afterOverlay ?
+            `${id}-after-description`
+          : undefined}
         />
-        {#if $$slots.beforeOverlay}
+        {#if beforeOverlay}
           <div
-            id="image-before-label"
+            id="{id}-before-description"
             class="overlay-container before absolute"
-            bind:clientWidth="{beforeOverlayWidth}"
+            bind:clientWidth={beforeOverlayWidth}
             style="clip-path: inset(0 {beforeOverlayClip}px 0 0);"
           >
             <!-- Overlay for before image -->
-            <slot
-              name="beforeOverlay"
-              description="{`${id}-before-description`}"
-            />
+            {@render beforeOverlay()}
           </div>
         {/if}
-        {#if $$slots.afterOverlay}
-          <div id="image-after-label" class="overlay-container after absolute">
+        {#if afterOverlay}
+          <div
+            id="{id}-after-description"
+            class="overlay-container after absolute"
+          >
             <!-- Overlay for after image -->
-            <slot
-              name="afterOverlay"
-              description="{`${id}-after-description`}"
-            />
+            {@render afterOverlay()}
           </div>
         {/if}
         <div
           tabindex="0"
           role="slider"
-          aria-valuenow="{Math.round(offset * 100)}"
+          aria-valuenow={Math.round(offset * 100)}
           class="handle"
           style="left: calc({offset *
             100}% - 20px); --before-after-handle-colour: {handleColour}; --before-after-handle-inactive-opacity: {handleInactiveOpacity};"
-          on:focus="{onFocus}"
-          on:blur="{onBlur}"
+          {onfocus}
+          {onblur}
         >
           <div class="arrow-left"></div>
           <div class="arrow-right"></div>
         </div>
-      </figure>
+      </button>
     </div>
-    {#if $$slots.caption}
-      <PaddingReset containerIsFluid="{width === 'fluid'}">
-        <aside class="before-after-caption mx-auto" id="{`${id}-caption`}">
+    {#if caption}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <aside class="before-after-caption mx-auto" id={`${id}-caption`}>
           <!-- Caption for image credits -->
-          <slot name="caption" />
+          {@render caption()}
         </aside>
       </PaddingReset>
     {/if}
@@ -183,35 +282,35 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
 */
 /* Scales by 1.125 */
-figure.before-after-container {
+button.before-after-container {
   box-sizing: content-box;
 }
-figure.before-after-container img {
+button.before-after-container img {
   top: 0;
   left: 0;
   z-index: 20;
   user-select: none;
 }
-figure.before-after-container img.after {
+button.before-after-container img.after {
   z-index: 21;
 }
-figure.before-after-container img.before {
+button.before-after-container img.before {
   z-index: 22;
 }
-figure.before-after-container .overlay-container {
-  position: absolute;
+button.before-after-container .overlay-container {
+  top: 0;
 }
-figure.before-after-container .overlay-container :global(:first-child) {
+button.before-after-container .overlay-container :global(:first-child) {
   margin-top: 0;
 }
-figure.before-after-container .overlay-container :global(:last-child) {
+button.before-after-container .overlay-container :global(:last-child) {
   margin-bottom: 0;
 }
-figure.before-after-container .overlay-container.before {
+button.before-after-container .overlay-container.before {
   left: 0;
   z-index: 23;
 }
-figure.before-after-container .overlay-container.after {
+button.before-after-container .overlay-container.after {
   right: 0;
   z-index: 21;
 }
@@ -267,7 +366,7 @@ figure.before-after-container .overlay-container.after {
   border-right: 10px solid var(--before-after-handle-colour);
 }
 
-aside.before-after-caption :global(p) {
+.before-after-caption :global(p) {
   font-family: var(--theme-font-family-note);
   color: var(--theme-colour-text-secondary);
   font-size: var(--theme-font-size-xs);

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

@@ -1,64 +1,62 @@
-import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
 import type { ContainerWidth } from '../@types/global';
-declare const __propDef: {
-    props: {
-        /** Width of the chart within the text well. */ width?: ContainerWidth;
-        /** Height of the component */ height?: number;
-        /**
-           * If set, makes the height a ratio of the component's width.
-           * @type {number}
-           */ heightRatio?: number | null;
-        /**
-           * Before image src
-           * @required
-           */ beforeSrc?: string | null;
-        /**
-           * Before image altText
-           * @required
-           */ beforeAlt?: string | null;
-        /**
-           * After image src
-           * @required
-           */ afterSrc?: string | null;
-        /**
-           * After image altText
-           * @required
-           */ afterAlt?: string | null;
-        /**
-           * Set a class to target with SCSS.
-           * @type {string}
-           */ class?: string;
-        /** Drag handle colour */ handleColour?: string;
-        /** Drag handle opacity */ handleInactiveOpacity?: number;
-        /** Margin at the edge of the image to stop dragging */ handleMargin?: number;
-        /** Percentage of the component width the handle will travel ona key press */ keyPressStep?: number;
-        /** Initial offset of the handle, between 0 and 1. */ offset?: number;
-        /**
-           * Add an ID to target with SCSS.
-           * @type {string}
-           */ id?: string;
-    };
-    events: {
-        mousedown: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        beforeOverlay: {
-            description: string;
-        };
-        afterOverlay: {
-            description: string;
-        };
-        caption: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BeforeAfterProps = typeof __propDef.props;
-export type BeforeAfterEvents = typeof __propDef.events;
-export type BeforeAfterSlots = typeof __propDef.slots;
-/** `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) */
-export default class BeforeAfter extends SvelteComponent<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
+interface Props {
+    /** Width of the chart within the text well. Options: wide, wider, widest, fluid */
+    width?: ContainerWidth;
+    /** Height of the component */
+    height?: number;
+    /**
+     * If set, makes the height a ratio of the component's width.
+     */
+    heightRatio?: number;
+    /**
+     * Before image source
+     */
+    beforeSrc: string;
+    /**
+     * Before image altText
+     */
+    beforeAlt: string;
+    /**
+     * After image source
+     */
+    afterSrc: string;
+    /**
+     * After image altText
+     */
+    afterAlt: string;
+    /**
+     * Class to target with SCSS.
+     */
+    class?: string;
+    /** Drag handle colour */
+    handleColour?: string;
+    /** Drag handle opacity */
+    handleInactiveOpacity?: number;
+    /** Margin at the edge of the image to stop dragging */
+    handleMargin?: number;
+    /** Percentage of the component width the handle will travel ona key press */
+    keyPressStep?: number;
+    /** Initial offset of the handle, between 0 and 1. */
+    offset?: number;
+    /** ID to target with SCSS. */
+    id?: string;
+    /**
+     * Optional snippet for a custom overlay for the before image.
+     */
+    beforeOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom overlay for the after image.
+     */
+    afterOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom caption.
+     */
+    caption?: Snippet;
+    /** Custom ARIA label language to label the component. */
+    ariaLabel?: string;
 }
-export {};
+/** `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) */
+declare const BeforeAfter: import("svelte").Component<Props, {}, "">;
+type BeforeAfter = ReturnType<typeof BeforeAfter>;
+export default BeforeAfter;