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

package/dist/components/SEO/analytics.js

@@ -0,0 +1,332 @@
+// @ts-nocheck
+/* eslint-disable */
+const attachScript = function (i, s, o, g, r, a, m) {
+  i.GoogleAnalyticsObject = r;
+  (i[r] =
+    i[r] ||
+    function () {
+      (i[r].q = i[r].q || []).push(arguments);
+    }),
+    (i[r].l = 1 * new Date());
+  (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+  a.async = 1;
+  a.src = g;
+  m.parentNode.insertBefore(a, m);
+};
+/* eslint-enable */
+
+export default (page, title) => {
+  attachScript(
+    window,
+    document,
+    'script',
+    'https://www.google-analytics.com/analytics.js',
+    'ga'
+  );
+
+  window.ga('create', 'UA-41619329-3', { cookieDomain: 'auto' });
+  window.ga('require', 'linkid', 'linkid.js');
+  window.ga('send', 'pageview', {
+    page,
+    title,
+  });
+
+  if (!inIframe()) {
+    //start time on page tracking if not in an iframe
+    riveted.init({
+      reportInterval: 30,
+    });
+  }
+};
+
+
+
+
+// checks if page is in an iframe
+function inIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+}
+
+
+/*
+ * START: Riveted time on page tracking code
+ * see aditional documentation here: https://riveted.parsnip.io/
+ */
+
+var riveted = (function () {
+  var started = false;
+  var stopped = false;
+  var turnedOff = false;
+  var clockTime = 0;
+  var startTime = new Date();
+  var clockTimer = null;
+  var idleTimer = null;
+  var sendEvent;
+  var sendUserTiming;
+  var reportInterval;
+  var idleTimeout;
+  var nonInteraction;
+  var universalGA;
+  var classicGA;
+  var googleTagManager;
+
+  function init(options) {
+    /*
+     * Determine which version of GA is being used
+     * "ga", "_gaq", and "dataLayer" are the possible globals
+     */
+
+    if (typeof ga === 'function') {
+      universalGA = true;
+    }
+
+    if (typeof _gaq !== 'undefined' && typeof _gaq.push === 'function') {
+      classicGA = true;
+    }
+
+    if (
+      typeof dataLayer !== 'undefined' &&
+      typeof dataLayer.push === 'function'
+    ) {
+      googleTagManager = true;
+    }
+
+    // Set up options and defaults
+    options = options || {};
+    reportInterval = parseInt(options.reportInterval, 10) || 5;
+    idleTimeout = parseInt(options.idleTimeout, 10) || 30;
+
+    if (typeof options.eventHandler === 'function') {
+      sendEvent = options.eventHandler;
+    }
+
+    if (typeof options.userTimingHandler === 'function') {
+      sendUserTiming = options.userTimingHandler;
+    }
+
+    if (
+      'nonInteraction' in options &&
+      (options.nonInteraction === false || options.nonInteraction === 'false')
+    ) {
+      nonInteraction = false;
+    } else {
+      nonInteraction = true;
+    }
+
+    // Basic activity event listeners
+    addListener(document, 'keydown', trigger);
+    addListener(document, 'click', trigger);
+    addListener(window, 'mousemove', throttle(trigger, 500));
+    addListener(window, 'scroll', throttle(trigger, 500));
+
+    // Page visibility listeners
+    addListener(document, 'visibilitychange', visibilityChange);
+    addListener(document, 'webkitvisibilitychange', visibilityChange);
+    
+    //sends initial zero value
+    sendEvent(0);
+  }
+
+  /*
+   * Throttle function borrowed from:
+   * Underscore.js 1.5.2
+   * http://underscorejs.org
+   * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+   * Underscore may be freely distributed under the MIT license.
+   */
+
+  function throttle(func, wait) {
+    var context, args, result;
+    var timeout = null;
+    var previous = 0;
+    var later = function () {
+      previous = new Date();
+      timeout = null;
+      result = func.apply(context, args);
+    };
+    return function () {
+      var now = new Date();
+      if (!previous) previous = now;
+      var remaining = wait - (now - previous);
+      context = this;
+      args = arguments;
+      if (remaining <= 0) {
+        clearTimeout(timeout);
+        timeout = null;
+        previous = now;
+        result = func.apply(context, args);
+      } else if (!timeout) {
+        timeout = setTimeout(later, remaining);
+      }
+      return result;
+    };
+  }
+
+  /*
+   * Cross-browser event listening
+   */
+
+  function addListener(element, eventName, handler) {
+    if (element.addEventListener) {
+      element.addEventListener(eventName, handler, false);
+    } else if (element.attachEvent) {
+      element.attachEvent('on' + eventName, handler);
+    } else {
+      element['on' + eventName] = handler;
+    }
+  }
+
+  /*
+   * Function for logging User Timing event on initial interaction
+   */
+
+  sendUserTiming = function (timingValue) {
+    if (googleTagManager) {
+      dataLayer.push({
+        event: 'RivetedTiming',
+        eventCategory: 'Riveted',
+        timingVar: 'First Interaction',
+        timingValue: timingValue,
+      });
+    } else {
+      if (universalGA) {
+        ga('send', 'timing', 'Riveted', 'First Interaction', timingValue);
+      }
+
+      if (classicGA) {
+        _gaq.push([
+          '_trackTiming',
+          'Riveted',
+          'First Interaction',
+          timingValue,
+          null,
+          100,
+        ]);
+      }
+    }
+  };
+
+  /*
+   * Function for logging ping events
+   */
+
+  sendEvent = function (time) {
+    if (googleTagManager) {
+      dataLayer.push({
+        event: 'Riveted',
+        eventCategory: 'Riveted',
+        eventAction: 'Time Spent',
+        eventLabel: time,
+        eventValue: reportInterval,
+        eventNonInteraction: nonInteraction,
+      });
+    } else {
+      if (universalGA) {
+        ga(
+          'send',
+          'event',
+          'Riveted',
+          'Time Spent',
+          time.toString(),
+          reportInterval,
+          { nonInteraction: nonInteraction }
+        );
+      }
+
+      if (classicGA) {
+        _gaq.push([
+          '_trackEvent',
+          'Riveted',
+          'Time Spent',
+          time.toString(),
+          reportInterval,
+          nonInteraction,
+        ]);
+      }
+    }
+  };
+
+  function setIdle() {
+    clearTimeout(idleTimer);
+    stopClock();
+  }
+
+  function visibilityChange() {
+    if (document.hidden || document.webkitHidden) {
+      setIdle();
+    }
+  }
+
+  function clock() {
+    clockTime += 1;
+    if (clockTime > 0 && clockTime % reportInterval === 0) {
+      sendEvent(clockTime);
+    }
+  }
+
+  function stopClock() {
+    stopped = true;
+    clearTimeout(clockTimer);
+  }
+
+  function turnOff() {
+    setIdle();
+    turnedOff = true;
+  }
+
+  function turnOn() {
+    turnedOff = false;
+  }
+
+  function restartClock() {
+    stopped = false;
+    clearTimeout(clockTimer);
+    clockTimer = setInterval(clock, 1000);
+  }
+
+  function startRiveted() {
+    // Calculate seconds from start to first interaction
+    var currentTime = new Date();
+    var diff = currentTime - startTime;
+
+    // Set global
+    started = true;
+
+    // Send User Timing Event
+    sendUserTiming(diff);
+
+    // Start clock
+    clockTimer = setInterval(clock, 1000);
+  }
+
+  function trigger() {
+    if (turnedOff) {
+      return;
+    }
+
+    if (!started) {
+      startRiveted();
+    }
+
+    if (stopped) {
+      restartClock();
+    }
+
+    clearTimeout(idleTimer);
+    idleTimer = setTimeout(setIdle, idleTimeout * 1000 + 100);
+  }
+
+  return {
+    init: init,
+    trigger: trigger,
+    setIdle: setIdle,
+    on: turnOn,
+    off: turnOff,
+  };
+})();
+
+/* END: Riveted time on page tracking code */

package/dist/components/SEO/publisherTags.js

@@ -0,0 +1,26 @@
+export default () => {
+  const googletag = window.googletag || {};
+  googletag.cmd = googletag.cmd || [];
+  (function() {
+    const gads = document.createElement('script');
+    gads.async = true;
+    gads.type = 'text/javascript';
+    const useSSL = document.location.protocol === 'https:';
+    gads.src =
+      (useSSL ? 'https:' : 'http:') +
+      '//www.googletagservices.com/tag/js/gpt.js';
+    const node = document.getElementsByTagName('script')[0];
+    node.parentNode.insertBefore(gads, node);
+  })();
+  googletag.cmd.push(function() {
+    googletag
+      .defineSlot(
+        '/4735792/reuters_investigates',
+        [[300, 250]],
+        'div-gpt-ad-1441822201033-0'
+      )
+      .addService(googletag.pubads());
+    googletag.pubads().enableSingleRequest();
+    googletag.enableServices();
+  });
+};

package/dist/components/Scroller/Background.svelte

@@ -0,0 +1,30 @@
+<script>export let index;
+export let steps = [];
+export let preload = 1;
+export let stackBackground = true;
+</script>
+
+{#each steps as step, i}
+  <!-- Load the step(s) before and after the active one, only -->
+  {#if preload === 0 || (i >= index - preload && i <= index + preload)}
+    <div
+      class="step-background step-{i + 1}"
+      class:visible="{stackBackground ? i <= index : i === index}"
+      class:hidden="{stackBackground ? i > index : i !== index}"
+    >
+      <svelte:component
+        this="{step.background}"
+        {...step.backgroundProps || {}}
+      />
+    </div>
+  {/if}
+{/each}
+
+<style>.step-background {
+  width: 100%;
+  position: absolute;
+  transition: 0.5s opacity ease;
+}
+.step-background.hidden {
+  opacity: 0;
+}</style>

package/dist/components/Scroller/Embedded/Background.svelte

@@ -0,0 +1,14 @@
+<script>export let step;
+export let backgroundWidth;
+export let index;
+import Block from '../../Block/Block.svelte';
+</script>
+
+<Block width={backgroundWidth} cls="background-container step-{index + 1}">
+  <div class="embedded-background step-{index + 1}">
+    <svelte:component
+      this="{step.background}"
+      {...step.backgroundProps || {}}
+    />
+  </div>
+</Block>

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -0,0 +1,203 @@
+<script>export let step;
+export let index;
+import { marked } from 'marked';
+import Block from '../../Block/Block.svelte';
+</script>
+
+{#if step.foreground === '' || !step.foreground}
+  <!-- Empty foreground -->
+  <div class="empty-step-foreground step-{index + 1}"></div>
+{:else if typeof step.foreground === 'string'}
+  <Block cls="body-text step-{index + 1}">
+    <div class="embedded-foreground step-{index + 1}">
+      {@html marked.parse(step.foreground)}
+    </div>
+  </Block>
+{:else}
+  <div class="embedded-foreground step-{index + 1}">
+    <svelte:component
+      this="{step.foreground}"
+      {...step.foregroundProps || {}}
+    />
+  </div>
+{/if}
+
+<style>.paragraph-size, div.embedded-foreground :global(p), div.embedded-foreground :global(ul) :global(li), div.embedded-foreground :global(ul) :global(li) :global(p), div.embedded-foreground :global(ol) :global(li), div.embedded-foreground :global(ol) :global(li) :global(p) {
+  font-size: 1.3rem;
+  line-height: 2.1rem;
+}
+.paragraph-size.font-sans, div.embedded-foreground :global(p.font-sans), div.embedded-foreground :global(ul) :global(li.font-sans), div.embedded-foreground :global(ol) :global(li.font-sans) {
+  font-size: 1.1rem;
+  line-height: 1.75rem;
+}
+@media (max-width: 540px) {
+  .paragraph-size, div.embedded-foreground :global(p), div.embedded-foreground :global(ul) :global(li), div.embedded-foreground :global(ul) :global(li) :global(p), div.embedded-foreground :global(ol) :global(li), div.embedded-foreground :global(ol) :global(li) :global(p) {
+    font-size: 1.1rem;
+    line-height: 1.8rem;
+  }
+  .paragraph-size.font-sans, div.embedded-foreground :global(p.font-sans), div.embedded-foreground :global(ul) :global(li.font-sans), div.embedded-foreground :global(ol) :global(li.font-sans) {
+    font-size: 1rem;
+    line-height: 1.6rem;
+  }
+}
+.paragraph-size.important, div.embedded-foreground :global(p.important), div.embedded-foreground :global(ul) :global(li.important), div.embedded-foreground :global(ol) :global(li.important) {
+  font-size: 1.3rem !important;
+  line-height: 2.1rem !important;
+}
+.paragraph-size.important.font-sans, div.embedded-foreground :global(p.important.font-sans), div.embedded-foreground :global(ul) :global(li.important.font-sans), div.embedded-foreground :global(ol) :global(li.important.font-sans) {
+  font-size: 1.1rem !important;
+  line-height: 1.8rem !important;
+}
+@media (max-width: 540px) {
+  .paragraph-size.important, div.embedded-foreground :global(p.important), div.embedded-foreground :global(ul) :global(li.important), div.embedded-foreground :global(ol) :global(li.important) {
+    font-size: 1.1rem !important;
+    line-height: 1.8rem !important;
+  }
+  .paragraph-size.important.font-sans, div.embedded-foreground :global(p.important.font-sans), div.embedded-foreground :global(ul) :global(li.important.font-sans), div.embedded-foreground :global(ol) :global(li.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, div.embedded-foreground :global(blockquote) :global(p) {
+  font-size: 1.6rem;
+  line-height: 2.1rem;
+}
+@media (max-width: 540px) {
+  .blockquote-size, div.embedded-foreground :global(blockquote) :global(p) {
+    font-size: 1.3rem;
+    line-height: 1.9rem;
+  }
+}
+.blockquote-size.important, div.embedded-foreground :global(blockquote) :global(p.important) {
+  font-size: 1.6rem !important;
+  line-height: 2rem !important;
+}
+@media (max-width: 540px) {
+  .blockquote-size.important, div.embedded-foreground :global(blockquote) :global(p.important) {
+    font-size: 1.3rem !important;
+    line-height: 1.8rem !important;
+  }
+}
+
+div.embedded-foreground :global(h2),
+div.embedded-foreground :global(h3),
+div.embedded-foreground :global(h4),
+div.embedded-foreground :global(h5),
+div.embedded-foreground :global(h6),
+div.embedded-foreground :global(p),
+div.embedded-foreground :global(li),
+div.embedded-foreground :global(blockquote) {
+  color: var(--theme-colour-text-primary, #404040);
+}
+div.embedded-foreground :global(p),
+div.embedded-foreground :global(ul) :global(li),
+div.embedded-foreground :global(ul) :global(li) :global(p),
+div.embedded-foreground :global(ol) :global(li),
+div.embedded-foreground :global(ol) :global(li) :global(p) {
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
+  color: var(--theme-colour-text-primary, #404040);
+}
+div.embedded-foreground :global(p) :global(a),
+div.embedded-foreground :global(ul) :global(li) :global(a),
+div.embedded-foreground :global(ul) :global(li) :global(p) :global(a),
+div.embedded-foreground :global(ol) :global(li) :global(a),
+div.embedded-foreground :global(ol) :global(li) :global(p) :global(a) {
+  color: currentColor;
+  background-size: 1px 1px;
+  background-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="2" y2="2" style="stroke: currentColor; opacity: 0.8;" /></svg>');
+  background-position: 0 1.3rem;
+  background-repeat: repeat-x;
+  text-decoration: none;
+  text-shadow: 1px 1px var(--theme-colour-background, #ffffff), 1px -1px var(--theme-colour-background, #ffffff), -1px 1px var(--theme-colour-background, #ffffff), -1px -1px var(--theme-colour-background, #ffffff);
+}
+@media (max-width: 540px) {
+  div.embedded-foreground :global(p) :global(a),
+div.embedded-foreground :global(ul) :global(li) :global(a),
+div.embedded-foreground :global(ul) :global(li) :global(p) :global(a),
+div.embedded-foreground :global(ol) :global(li) :global(a),
+div.embedded-foreground :global(ol) :global(li) :global(p) :global(a) {
+    background-position: 0 1.1rem;
+  }
+}
+div.embedded-foreground :global(p) :global(a:hover),
+div.embedded-foreground :global(ul) :global(li) :global(a:hover),
+div.embedded-foreground :global(ul) :global(li) :global(p) :global(a:hover),
+div.embedded-foreground :global(ol) :global(li) :global(a:hover),
+div.embedded-foreground :global(ol) :global(li) :global(p) :global(a:hover) {
+  text-decoration: none;
+}
+div.embedded-foreground :global(h2) {
+  margin: 4rem 0 2rem;
+  text-align: center;
+  font-weight: 600;
+}
+div.embedded-foreground :global(h2::after) {
+  display: block;
+  content: "";
+  background: var(--theme-colour-text-secondary, #666666);
+  height: 3px;
+  width: 100px;
+  margin: 10px auto 2rem;
+}
+div.embedded-foreground :global(ul) {
+  padding-left: 1.75rem;
+  list-style-type: square;
+}
+div.embedded-foreground :global(p) + :global(ul) {
+  margin-top: -0.75rem;
+}
+div.embedded-foreground :global(blockquote) {
+  margin: 30px 0;
+  border-left: 2px solid var(--theme-colour-text-secondary, #666666);
+  padding-left: 15px;
+}
+div.embedded-foreground :global(blockquote) :global(p) {
+  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
+}
+div.embedded-foreground :global(blockquote) :global(blockquote) {
+  border: 0;
+  padding: 0;
+  margin: -5px 0 0;
+}
+div.embedded-foreground :global(blockquote) :global(blockquote) :global(p) {
+  font-family: var(--theme-font-family-body, var(--theme-font-family-serif, "freight-book", serif));
+  color: var(--theme-colour-text-primary, #404040);
+  font-size: 1rem;
+}
+@media (max-width: 540px) {
+  div.embedded-foreground :global(blockquote) :global(blockquote) :global(p) {
+    font-size: 0.9rem;
+  }
+}
+div.embedded-foreground :global(blockquote) :global(blockquote) :global(blockquote) {
+  display: none;
+}
+div.embedded-foreground :global(.font-sans) {
+  font-family: var(--theme-font-family-sans-serif, var(--theme-font-family-sans-serif, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif)) !important;
+}
+div.embedded-foreground :global(p:last-child) {
+  margin-bottom: 0;
+}</style>

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

@@ -0,0 +1,18 @@
+<script>export let steps = [];
+export let embeddedLayout = 'fb';
+export let backgroundWidth = 'fluid';
+import Background from './Background.svelte';
+import Foreground from './Foreground.svelte';
+</script>
+
+{#each steps as step, index}
+  <!-- Background first -->
+  {#if embeddedLayout === 'bf'}
+    <Background {step} {index} {backgroundWidth} />
+    <Foreground {step} {index} />
+  <!-- Foreground first, default -->
+  {:else}
+    <Foreground {step} {index} />
+    <Background {step} {index} {backgroundWidth} />
+  {/if}
+{/each}

package/dist/components/Scroller/Foreground.svelte

@@ -0,0 +1,42 @@
+<script>export let steps = [];
+import { marked } from 'marked';
+</script>
+
+{#each steps as step, i}
+  <div class="step-foreground-container step-{i + 1}">
+    {#if step.foreground === '' || !step.foreground}
+      <!-- Empty foreground -->
+      <div class="empty-step-foreground"></div>
+    {:else}
+      <div class="step-foreground">
+        {#if typeof step.foreground === 'string'}
+          {@html marked.parse(step.foreground)}
+        {:else}
+          <svelte:component
+            this="{step.foreground}"
+            {...step.foregroundProps || {}}
+          />
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/each}
+
+<style>div.step-foreground-container {
+  height: 100vh;
+  width: initial;
+  max-width: initial;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 5rem;
+}
+div.step-foreground-container .step-foreground {
+  max-width: 550px;
+  width: 100%;
+  padding: 1.2rem 30px;
+  background: rgba(255, 255, 255, 0.8);
+}
+div.step-foreground-container .step-foreground :global(p:last-child) {
+  margin-bottom: 0;
+}</style>