@reuters-graphics/graphics-components 0.0.1-beta.1

package/dist/actions/cssVariables/index.js

@@ -0,0 +1,20 @@
+// Shamelessly stolen from: https://github.com/kaisermann/svelte-css-vars
+export default (node, props) => {
+  Object.entries(props).forEach(([key, value]) => {
+    node.style.setProperty(`--${key}`, value);
+  });
+
+  return {
+    update(newProps) {
+      Object.entries(newProps).forEach(([key, value]) => {
+        node.style.setProperty(`--${key}`, value);
+        delete props[key];
+      });
+
+      Object.keys(props).forEach((name) => {
+        node.style.removeProperty(`--${name}`);
+      });
+      props = newProps;
+    },
+  };
+};

package/dist/actions/resizeObserver/index.js

@@ -0,0 +1,25 @@
+// Shamelessly stolen from https://github.com/sveltejs/svelte/issues/7583#issue-1260717165
+let observer;
+let callbacks;
+
+export default (element, onResize) => {
+   if (!observer) {
+      callbacks = new WeakMap();
+      observer = new ResizeObserver(entries => {
+         for (const entry of entries) {
+            const onResize = callbacks.get(entry.target);
+            if (onResize) onResize(entry.target);
+         }
+      });
+   }
+
+   callbacks.set(element, onResize);
+   observer.observe(element);
+
+   return {
+      destroy: () => {
+         callbacks.delete(element);
+         observer.unobserve(element);
+      },
+   };
+}

package/dist/components/@types/global.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Article/Article.svelte

@@ -0,0 +1,47 @@
+<script>/** Set to true for embeddables. */
+export let embedded = false;
+/** Add an id to the article tag to target it with custom CSS. */
+export let id = null;
+/** ARIA role of the article. */
+export let role = null;
+/** Set custom widths for the normal, wide and wider column dimensions */
+export let columnWidths = {
+    narrower: 330,
+    narrow: 510,
+    normal: 660,
+    wide: 930,
+    wider: 1200,
+};
+import cssVariables from '$lib/actions/cssVariables/index.js';
+$: columnWidthVars = {
+    'narrower-column-width': columnWidths.narrower + 'px',
+    'narrow-column-width': columnWidths.narrow + 'px',
+    'normal-column-width': columnWidths.normal + 'px',
+    'wide-column-width': columnWidths.wide + 'px',
+    'wider-column-width': columnWidths.wider + 'px',
+};
+</script>
+
+<main>
+  <article
+    id="{id}"
+    class:embedded
+    role="{role}"
+    use:cssVariables="{columnWidthVars}"
+  >
+    <!-- Article content -->
+    <slot />
+  </article>
+</main>
+
+<style>article {
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0 15px;
+  overflow-x: hidden;
+  background-color: var(--theme-colour-background, transparent);
+}
+article.embedded {
+  overflow: auto;
+}</style>

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -0,0 +1,341 @@
+<script>import { throttle } from 'lodash-es';
+import { onMount } from 'svelte';
+import Block from '../Block/Block.svelte';
+/** Width of the chart within the text well. */
+export let width = 'normal'; // options: wide, wider, widest, fluid
+/** Height of the component */
+export let height = 600;
+/**
+ * If set, makes the height a ratio of the component's width.
+ * @type {number}
+ */
+export let heightRatio = null;
+/**
+ * Before image src
+ * @required
+ */
+export let beforeSrc = null;
+/**
+ * Before image altText
+ * @required
+ */
+export let beforeAlt = null;
+/**
+ * After image src
+ * @required
+ */
+export let afterSrc = null;
+/**
+ * After image altText
+ * @required
+ */
+export let afterAlt = null;
+/** Drag handle colour */
+export let handleColour = 'white';
+/** Drag handle opacity */
+export let handleInactiveOpacity = 0.6;
+/** Margin at the edge of the image to stop dragging */
+export let handleMargin = 20;
+/** Percentage of the component width the handle will travel ona key press */
+export let keyPressStep = 0.05;
+/** Initial offset of the handle, between 0 and 1. */
+export let offset = 0.5;
+const random4 = () => Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+/**
+ * Add an ID to target with SCSS.
+ * @type {string}
+ */
+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;
+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();
+    }
+};
+const move = (e) => {
+    if (sliding && imgOffset) {
+        const el = e.touches ? e.touches[0] : e;
+        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;
+    }
+};
+const start = (e) => {
+    sliding = true;
+    move(e);
+};
+const end = () => {
+    sliding = false;
+};
+$: 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;
+if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
+    console.warn('Missing required src or alt props for BeforeAfter component');
+}
+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}"
+/>
+
+{#if beforeSrc && beforeAlt && afterSrc && afterAlt}
+  <Block width="{width}" id="{id}" cls="photo before-after">
+    <div
+      style="height: {containerHeight}px;"
+      bind:clientWidth="{containerWidth}"
+    >
+      <figure
+        style="{figStyle}"
+        class="before-after-container"
+        on:touchstart="{start}"
+        on:mousedown="{start}"
+        bind:this="{figure}"
+        aria-labelledby="{$$slots.caption && `${id}-caption`}"
+      >
+        <img
+          bind:this="{img}"
+          src="{afterSrc}"
+          alt="{afterAlt}"
+          on:load="{measureLoadedImage}"
+          on:mousedown|preventDefault
+          style="{imgStyle}"
+          class="after"
+          aria-describedby="{$$slots.beforeOverlay && `${id}-before`}"
+        />
+
+        <img
+          src="{beforeSrc}"
+          alt="{beforeAlt}"
+          on:mousedown|preventDefault
+          style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
+          class="before"
+          aria-describedby="{$$slots.afterOverlay && `${id}-after`}"
+        />
+        {#if $$slots.beforeOverlay}
+          <div
+            id="image-before-label"
+            class="overlay-container before"
+            bind:clientWidth="{beforeOverlayWidth}"
+            style="clip-path: inset(0 {beforeOverlayClip}px 0 0);"
+          >
+            <!-- Overlay for before image -->
+            <slot
+              name="beforeOverlay"
+              description="{`${id}-before-description`}"
+            />
+          </div>
+        {/if}
+        {#if $$slots.afterOverlay}
+          <div id="image-after-label" class="overlay-container after">
+            <!-- Overlay for after image -->
+            <slot
+              name="afterOverlay"
+              description="{`${id}-after-description`}"
+            />
+          </div>
+        {/if}
+        <div
+          tabindex="0"
+          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}"
+        >
+          <div class="arrow-left"></div>
+          <div class="arrow-right"></div>
+        </div>
+      </figure>
+    </div>
+    {#if $$slots.caption}
+      <aside class="before-after-caption" id="{`${id}-caption`}">
+        <!-- Caption for image credits -->
+        <slot name="caption" />
+      </aside>
+    {/if}
+  </Block>
+{/if}
+
+<style>figure.before-after-container {
+  overflow: hidden;
+  position: relative;
+  box-sizing: content-box;
+  margin: 0 auto;
+}
+figure.before-after-container img {
+  top: 0;
+  left: 0;
+  z-index: 20;
+  margin: 0;
+  display: block;
+  max-width: 100%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -o-object-fit: cover;
+     object-fit: cover;
+  position: absolute;
+}
+figure.before-after-container img.after {
+  z-index: 21;
+}
+figure.before-after-container img.before {
+  z-index: 22;
+}
+figure.before-after-container .overlay-container {
+  position: absolute;
+}
+figure.before-after-container .overlay-container :global(p) {
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  font-size: 1rem;
+  line-height: 1.2rem;
+}
+figure.before-after-container .overlay-container :global(p:last-child) {
+  margin-bottom: 0;
+}
+figure.before-after-container .overlay-container.before {
+  left: 0;
+  z-index: 23;
+}
+figure.before-after-container .overlay-container.after {
+  right: 0;
+  z-index: 21;
+}
+
+.handle {
+  z-index: 30;
+  width: 40px;
+  height: 40px;
+  cursor: move;
+  background: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  position: absolute;
+  border-radius: 50px;
+  top: calc(50% - 20px);
+  border: 4px solid var(--before-after-handle-colour);
+  opacity: var(--before-after-handle-inactive-opacity, 0.6);
+}
+.handle:hover, .handle:active, .handle:focus {
+  opacity: 1;
+}
+.handle:before, .handle:after {
+  content: "";
+  height: 9999px;
+  position: absolute;
+  left: calc(50% - 2px);
+  border: 2px solid var(--before-after-handle-colour);
+}
+.handle:before {
+  top: 40px;
+}
+.handle:after {
+  bottom: 40px;
+}
+.handle .arrow-right,
+.handle .arrow-left {
+  width: 0;
+  height: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  position: relative;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+}
+.handle .arrow-right {
+  left: 19px;
+  bottom: 14px;
+  border-left: 10px solid var(--before-after-handle-colour);
+}
+.handle .arrow-left {
+  left: 3px;
+  top: 6px;
+  border-right: 10px solid var(--before-after-handle-colour);
+}
+
+aside.before-after-caption {
+  margin: 0 auto;
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-secondary, #666666);
+}
+aside.before-after-caption :global(p) {
+  font-family: var(--theme-font-family-note, "Knowledge", "Source Sans Pro", Arial, sans-serif);
+  color: var(--theme-colour-text-secondary, #666666);
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+aside.before-after-caption :global(p:last-of-type) {
+  margin-bottom: 0;
+}
+@media (max-width: 540px) {
+  aside.before-after-caption :global(p) {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+aside.before-after-caption :global(p) :global(a) {
+  color: currentColor;
+  text-decoration: underline;
+}
+aside.before-after-caption :global(p) :global(a:hover) {
+  text-decoration: underline;
+}</style>

package/dist/components/Block/Block.svelte

@@ -0,0 +1,177 @@
+<script>/** Width of the block within the article well. */
+export let width = 'normal';
+/** Add an id to the block tag to target it with custom CSS. */
+export let id = '';
+/** Add extra classes to the block tag to target it with custom CSS. */
+export let cls = '';
+/** Snap block to column widths, rather than fluidly resizing them. */
+export let snap = false;
+/** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */
+export let role = null;
+/** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */
+export let ariaLabel = null;
+</script>
+
+<div
+  id="{id}"
+  class="article-block {width} {cls}"
+  class:snap="{snap && width !== 'fluid' && width !== 'widest'}"
+  role="{role}"
+  aria-label="{ariaLabel}"
+>
+  <!-- block content -->
+  <slot />
+</div>
+
+<style>.paragraph-size {
+  font-size: 1.3rem;
+  line-height: 2.1rem;
+}
+.paragraph-size.font-sans {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+}
+@media (max-width: 540px) {
+  .paragraph-size {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+  .paragraph-size.font-sans {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+}
+.paragraph-size.important {
+  font-size: 1.3rem !important;
+  line-height: 2.1rem !important;
+}
+.paragraph-size.important.font-sans {
+  font-size: 1.1rem !important;
+  line-height: 1.8rem !important;
+}
+@media (max-width: 540px) {
+  .paragraph-size.important {
+    font-size: 1.1rem !important;
+    line-height: 1.8rem !important;
+  }
+  .paragraph-size.important.font-sans {
+    font-size: 1rem !important;
+    line-height: 1.6rem !important;
+  }
+}
+
+.small-size {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+}
+@media (max-width: 540px) {
+  .small-size {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+  }
+}
+.small-size.important {
+  font-size: 0.9rem !important;
+  line-height: 1.2rem !important;
+}
+@media (max-width: 540px) {
+  .small-size.important {
+    font-size: 0.8rem !important;
+    line-height: 1.1rem !important;
+  }
+}
+
+.blockquote-size {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
+}
+@media (max-width: 540px) {
+  .blockquote-size {
+    font-size: 1.3rem;
+    line-height: 1.9rem;
+  }
+}
+.blockquote-size.important {
+  font-size: 1.6rem !important;
+  line-height: 2rem !important;
+}
+@media (max-width: 540px) {
+  .blockquote-size.important {
+    font-size: 1.3rem !important;
+    line-height: 1.8rem !important;
+  }
+}
+
+div.article-block {
+  max-width: var(--normal-column-width, 660px);
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+}
+div.article-block:not(:last-child) {
+  margin-bottom: 3rem;
+}
+div.article-block.narrower {
+  max-width: var(--narrower-column-width, 330px);
+}
+div.article-block.narrow {
+  max-width: var(--narrow-column-width, 510px);
+}
+div.article-block.wide {
+  max-width: var(--wide-column-width, 930px);
+}
+div.article-block.wider {
+  max-width: var(--wider-column-width, 1200px);
+}
+div.article-block.widest {
+  max-width: 100%;
+}
+div.article-block.fluid {
+  width: calc(100% + 30px);
+  margin-left: -15px;
+  max-width: none;
+}
+div.article-block.snap {
+  width: 330px;
+}
+@media (min-width: 540px) {
+  div.article-block.snap:not(.skip-narrow) {
+    width: 510px;
+  }
+}
+@media (min-width: 690px) {
+  div.article-block.snap:not(.skip-normal) {
+    width: 660px;
+  }
+}
+@media (min-width: 360px) {
+  div.article-block.snap.narrower {
+    width: 330px;
+  }
+}
+@media (min-width: 540px) {
+  div.article-block.snap.narrow {
+    width: 510px;
+  }
+}
+@media (min-width: 960px) {
+  div.article-block.snap.wide {
+    width: 930px;
+  }
+}
+@media (min-width: 960px) {
+  div.article-block.snap.wider:not(.skip-wide) {
+    width: 930px;
+  }
+}
+@media (min-width: 1230px) {
+  div.article-block.snap.wider:not(.skip-wider) {
+    width: 1200px;
+  }
+}
+div.article-block.snap.widest, div.article-block.snap.fluid {
+  width: inherit;
+}
+div.article-block.snap.fluid {
+  width: calc(100% + 30px);
+}</style>