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

package/dist/components/Scroller/Scroller.svelte

@@ -0,0 +1,210 @@
+<script>/**
+ * ID of the scroller container
+ * @type {string}
+ */
+export let id = '';
+/**
+ * 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**
+ * - `foregroundProps` An object of props given to the foreground component
+ *
+ * @required
+ */
+export let steps = [];
+/**
+ * Width of the background
+ */
+export let backgroundWidth = 'fluid';
+/**
+ * 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}
+ */
+export let foregroundPosition = 'middle';
+/**
+ * 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.
+ */
+export let stackBackground = true;
+/**
+ * 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.
+ */
+export let preload = 1;
+/**
+ * Setting to `true` will unroll the scroll experience into a flat layout.
+ */
+export let embedded = false;
+/**
+ * Layout order when `embedded` is `true`.
+ *
+ * - `fb` _default_ Foreground then background
+ * - `bf` Background then foreground
+ *
+ * @type {string}
+ */
+export let embeddedLayout = 'fb';
+/**
+ * Threshold prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+ */
+export let threshold = 0.5;
+/**
+ * Top prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+ */
+export let top = 0;
+/**
+ * Bottom prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+ */
+export let bottom = 1;
+/**
+ * Parallax prop passed to [svelte-scroller](https://github.com/sveltejs/svelte-scroller#parameters)
+ */
+export let parallax = false;
+// @ts-ignore
+import SvelteScroller from '@sveltejs/svelte-scroller';
+import Background from './Background.svelte';
+import Foreground from './Foreground.svelte';
+import Embedded from './Embedded/index.svelte';
+import Block from '../Block/Block.svelte';
+let index = 0;
+let offset;
+let progress;
+</script>
+
+{#if !embedded}
+  <Block width="fluid" cls="scroller-container" id="{id}">
+    <SvelteScroller
+      bind:index
+      bind:offset
+      bind:progress
+      threshold="{threshold}"
+      top="{top}"
+      bottom="{bottom}"
+      parallax="{parallax}"
+      query="div.step-foreground-container"
+    >
+      <div
+        slot="background"
+        class="background"
+        class:right="{foregroundPosition === 'left opposite'}"
+        class:left="{foregroundPosition === 'right opposite'}"
+      >
+        <div class="scroller-graphic-well">
+          <Block
+            width={backgroundWidth}
+            cls="background-container step-{index + 1}"
+          >
+            <Background
+              index="{index}"
+              steps="{steps}"
+              preload="{preload}"
+              stackBackground="{stackBackground}"
+            />
+        </Block>
+        </div>
+      </div>
+
+      <div slot="foreground" class="foreground {foregroundPosition}">
+        <Foreground steps="{steps}" />
+      </div>
+    </SvelteScroller>
+  </Block>
+{:else}
+  <Block width="widest" cls="scroller-container embedded" id="{id}">
+    <Embedded
+      steps="{steps}"
+      embeddedLayout="{embeddedLayout}"
+      backgroundWidth="{backgroundWidth}"
+    />
+  </Block>
+{/if}
+
+<style>.scroller-container {
+  width: calc(100% + 30px);
+  margin-left: -15px;
+  max-width: initial;
+}
+.scroller-container.embedded {
+  width: 100%;
+  padding: 0 15px;
+}
+
+div.background {
+  min-height: 100vh;
+  position: relative;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+}
+div.background.left {
+  width: 50%;
+  float: left;
+}
+@media (max-width: 1200px) {
+  div.background.left {
+    justify-content: center;
+    width: 100%;
+    float: initial;
+  }
+}
+div.background.right {
+  width: 50%;
+  float: right;
+}
+@media (max-width: 1200px) {
+  div.background.right {
+    justify-content: center;
+    width: 100%;
+    float: initial;
+  }
+}
+div.background div.scroller-graphic-well {
+  padding: 0 15px;
+  width: 100%;
+}
+div.background div.scroller-graphic-well :global(div.background-container) {
+  margin-top: 0;
+  margin-bottom: 0;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+div.background div.scroller-graphic-well :global(div.background-container.fluid) {
+  margin: 0 0 0 -15px;
+}
+
+div.foreground {
+  width: 100%;
+}
+div.foreground.right {
+  width: 50%;
+  float: right;
+}
+@media (max-width: 1200px) {
+  div.foreground.right {
+    width: 100%;
+    float: initial;
+  }
+}
+div.foreground.left {
+  width: 50%;
+  float: left;
+}
+@media (max-width: 1200px) {
+  div.foreground.left {
+    width: 100%;
+    float: initial;
+  }
+}</style>

package/dist/components/Sharer/Sharer.svelte

@@ -0,0 +1,157 @@
+<script>
+import Fa from 'svelte-fa/src/fa.svelte';
+import { faShareAlt } from '@fortawesome/free-solid-svg-icons';
+import { faTwitter } from '@fortawesome/free-brands-svg-icons';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons';
+import { throttle } from 'lodash-es';
+import handleTweet from './utils/twitter';
+import handlePost from './utils/facebook';
+import UAParser from 'ua-parser-js';
+import { onMount } from 'svelte';
+
+const uaParser = new UAParser();
+
+const getMetaContent = (property) => {
+  const el = document.querySelector(`meta[property="${property}"]`);
+  if (el) return el.getAttribute('content');
+  return '';
+};
+const handleShare = async function() {
+  if (showSecondaryDialogue) {
+    showSecondaryDialogue = false;
+    return;
+  }
+  if (
+    navigator &&
+    navigator.share &&
+    uaParser.getBrowser().name !== 'Safari'
+  ) {
+    try {
+      await navigator.share({
+        title: getMetaContent('og:title'),
+        text: getMetaContent('og:description'),
+        url: window.location.href,
+      });
+    } catch (err) {
+      console.log('Share error', err);
+    }
+  // Otherwise copy URL to a clipboard
+  } else {
+    showSecondaryDialogue = true;
+  }
+};
+let lastScroll = 0;
+let showShare = false;
+let showSecondaryDialogue = false;
+function handleScroll() {
+  if (lastScroll > window.scrollY) {
+    if (!showShare) {
+      showShare = true;
+    }
+  } else {
+    if (showShare) {
+      if (showSecondaryDialogue) {
+        showSecondaryDialogue = false;
+      } else {
+        showShare = false;
+      }
+    }
+  }
+  lastScroll = window.scrollY;
+}
+onMount(() => {
+  window.addEventListener('scroll', throttle(handleScroll, 250));
+});
+</script>
+
+
+<div class="sharetool" class:active={showShare}>
+  <div class="drawer" class:active={showSecondaryDialogue }>
+    <button
+      on:click={handleShare}
+      title="Share this!"
+      disabled={showSecondaryDialogue}
+      class='box-shadow-low'
+    >
+      <div><Fa fw icon={faShareAlt} /></div>
+    </button>
+    <button on:click={handleTweet} title="Twitter">
+      <div><Fa fw icon={faTwitter} /></div>
+    </button>
+    <button on:click={handlePost} title="Facebook">
+      <div><Fa fw icon={faFacebookF} /></div>
+    </button>
+  </div>
+</div>
+
+
+<style>.sharetool.active {
+  bottom: 10px;
+}
+
+.sharetool {
+  position: fixed;
+  bottom: -5rem;
+  right: 10px;
+  transition: all 0.2s;
+  z-index: 9999;
+}
+
+.sharetool button {
+  background: #333;
+  color: white;
+  border: 1px solid white;
+  border-radius: 50%;
+  font-size: 1.25rem;
+  text-align: center;
+  height: 2.25rem;
+  width: 2.25rem;
+  outline: none !important;
+  transition: color 0.2s;
+  cursor: pointer;
+}
+.sharetool button div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sharetool button:active {
+  transform: translate(1px, 1px);
+}
+
+.sharetool button:disabled {
+  background: white;
+  color: #ddd;
+  cursor: default;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.drawer {
+  width: calc(2.25rem + 4px);
+  overflow-x: hidden;
+  transition: width 0.2s;
+  white-space: nowrap;
+  padding: 2px;
+}
+
+.drawer.active {
+  width: calc(7.25rem + 4px);
+}
+
+@media only screen and (max-width: 600px) {
+  .sharetool button {
+    font-size: 1.75rem;
+    height: 3rem;
+    width: 3rem;
+  }
+  .drawer {
+    width: calc(3rem + 4px);
+  }
+  .drawer.active {
+    width: calc(9.5rem + 4px);
+  }
+}</style>

package/dist/components/Sharer/utils/copyToClipboard.js

@@ -0,0 +1,10 @@
+const copyToClipboard = (str) => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+};
+
+export default copyToClipboard;

package/dist/components/Sharer/utils/facebook.js

@@ -0,0 +1,22 @@
+import { getHref } from './meta';
+
+const handlePost = () => {
+  const windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes';
+  const width = 550;
+  const height = 420;
+  const winHeight = screen.height;
+  const winWidth = screen.width;
+
+  const left = Math.round(winWidth / 2 - width / 2);
+  const top = winHeight > height ? Math.round(winHeight / 2 - height / 2) : 0;
+
+  const target = `https://www.facebook.com/sharer/sharer.php?u=${getHref()}`;
+
+  window.open(
+    target,
+    'intent',
+    `${windowOptions},width=${width},height=${height},left=${left},top=${top}`
+  );
+};
+
+export default handlePost;

package/dist/components/Sharer/utils/meta.js

@@ -0,0 +1,7 @@
+export const getTitle = () => {
+  const ogTag = document.querySelector("meta[property='og:title']");
+  if (ogTag) return encodeURIComponent(ogTag.getAttribute('content'));
+  return encodeURIComponent(document.title);
+};
+
+export const getHref = () => encodeURIComponent(window.location.href);

package/dist/components/Sharer/utils/twitter.js

@@ -0,0 +1,22 @@
+import { getHref, getTitle } from './meta';
+
+const handleTweet = () => {
+  const windowOptions = 'scrollbars=yes,resizable=yes,toolbar=no,location=yes';
+  const width = 550;
+  const height = 420;
+  const winHeight = screen.height;
+  const winWidth = screen.width;
+
+  const left = Math.round(winWidth / 2 - width / 2);
+  const top = winHeight > height ? Math.round(winHeight / 2 - height / 2) : 0;
+
+  const target = `https://twitter.com/intent/tweet?text=${getTitle()}&via=Reuters&url=${getHref()}`;
+
+  window.open(
+    target,
+    'intent',
+    `${windowOptions},width=${width},height=${height},left=${left},top=${top}`
+  );
+};
+
+export default handleTweet;

package/dist/components/SiteFooter/CompanyLinks.svelte

@@ -0,0 +1,173 @@
+<script>
+  import Twitter from './svgs/Twitter.svelte';
+  import YouTube from './svgs/YouTube.svelte';
+  import Facebook from './svgs/Facebook.svelte';
+  import Instagram from './svgs/Instagram.svelte';
+  import LinkedIn from './svgs/LinkedIn.svelte';
+  import { normalizeUrl } from '../SiteHeader/NavBar/utils';
+
+  const symbols = {
+    twitter: Twitter,
+    facebook: Facebook,
+    instagram: Instagram,
+    youtube: YouTube,
+    linkedin: LinkedIn,
+  };
+
+  export let links = {};
+</script>
+
+{#if links.social_links}
+  <section class="company">
+    <div class="content-container">
+      <article class="company-info">
+        <h2>Information you can trust</h2>
+        <p>{links.company_description}</p>
+      </article>
+      <div class="social">
+        <h2>Follow Us</h2>
+        <div>
+          <ul class="links">
+            {#each links.social_links as link}
+              <li class="social-links symbol">
+                <a href="{normalizeUrl(link.url)}">
+                  <div class="button">
+                    <div class="social">
+                      <svelte:component this="{symbols[link.type]}" />
+                    </div>
+                  </div>
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{/if}
+
+<style>.content-container {
+  max-width: 1440px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.company {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  box-sizing: border-box;
+}
+.company .content-container {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 2.2222222222vw;
+}
+@media (max-width: 1023px) {
+  .company .content-container {
+    grid-column-gap: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .company .content-container {
+    grid-column-gap: 32px;
+  }
+}
+@media (max-width: 1023px) {
+  .company .content-container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.company {
+  border-top: 1px solid var(--nav-rules, #d0d0d0);
+}
+.company .content-container {
+  padding-left: 2.2222222222vw;
+  padding-right: 2.2222222222vw;
+  box-sizing: border-box;
+}
+@media (max-width: 1023px) {
+  .company .content-container {
+    padding-left: 4.2666666667vw;
+    padding-right: 4.2666666667vw;
+  }
+}
+@media (min-width: 1440px) {
+  .company .content-container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+.company .content-container {
+  grid-row-gap: 24px;
+}
+.company .content-container .company-info {
+  grid-column: 1/span 5;
+}
+.company .content-container .social {
+  grid-column: 7/span 5;
+}
+@media (max-width: 1023px) {
+  .company .content-container .company-info,
+.company .content-container .social {
+    grid-column: 1/span 4;
+    grid-row: auto;
+  }
+}
+
+.links {
+  padding: 0;
+  margin: 0;
+}
+.links .symbol .button {
+  border-radius: 8px;
+  border: 1px solid var(--nav-rules, #d0d0d0);
+  background: var(--nav-background, #fff);
+  color: var(--nav-primary, #666);
+}
+.links .symbol .button:hover {
+  border: 1px solid var(--nav-primary, #404040);
+}
+.links .social {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: inherit;
+}
+
+.symbol {
+  list-style: none;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 16px;
+}
+.symbol:first-child {
+  margin-left: 0;
+}
+
+section.company {
+  max-width: 100%;
+}
+section.company h2 {
+  margin-bottom: 12px;
+  line-height: 1.333;
+  font-size: 16px;
+  color: var(--nav-primary, #404040);
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+}
+@media (min-width: 1300px) {
+  section.company h2 {
+    font-size: 18px;
+  }
+}
+section.company p {
+  font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
+  line-height: 1.43;
+  font-size: 14px;
+  color: var(--nav-primary, #404040);
+  font-weight: 400;
+}</style>