@reuters-graphics/graphics-components 1.0.11 → 1.0.13

package/dist/@types/index.d.ts

@@ -28,7 +28,6 @@ export { default as ReutersLogo } from "./components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from "./components/Scroller/Scroller.svelte";
 export { default as SearchInput } from "./components/SearchInput/SearchInput.svelte";
 export { default as SEO } from "./components/SEO/SEO.svelte";
-export { default as Sharer } from "./components/Sharer/Sharer.svelte";
 export { default as SimpleTimeline } from "./components/SimpleTimeline/SimpleTimeline.svelte";
 export { default as SiteFooter } from "./components/SiteFooter/SiteFooter.svelte";
 export { default as SiteHeader } from "./components/SiteHeader/SiteHeader.svelte";

package/dist/components/AdSlot/AdScripts.svelte

@@ -2,6 +2,35 @@
   import { onMount } from 'svelte';
   import { loadBootstrap } from './adScripts/bootstrap';
   import { loadScript } from './adScripts/loadScript';
+  import { throttle } from 'lodash-es';
+
+  let lastScroll = 0;
+  let showManagePreferences = true;
+
+  const togglePrefs = (on = true) => {
+    const btn = document.getElementById('ot-sdk-btn-floating');
+    if (!btn) return;
+    if (on) {
+      showManagePreferences = true;
+      btn.style.bottom = '';
+    } else {
+      showManagePreferences = false;
+      btn.style.bottom = '-5rem';
+    }
+  };
+
+  const handleScroll = () => {
+    if (lastScroll > window.scrollY) {
+      if (!showManagePreferences) {
+        togglePrefs(true);
+      }
+    } else {
+      if (showManagePreferences && window.scrollY > 250) {
+        togglePrefs(false);
+      }
+    }
+    lastScroll = window.scrollY;
+  };
 
   onMount(() => {
     window.graphicsAdQueue = window.graphicsAdQueue || [];
@@ -9,6 +38,9 @@
       'https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js',
       loadBootstrap
     );
+    window.addEventListener('scroll', throttle(handleScroll, 250), {
+      passive: true,
+    });
   });
 </script>
 

package/dist/index.js

@@ -35,7 +35,6 @@ export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SearchInput } from './components/SearchInput/SearchInput.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';
-export { default as Sharer } from './components/Sharer/Sharer.svelte';
 export { default as SimpleTimeline } from './components/SimpleTimeline/SimpleTimeline.svelte';
 export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -186,11 +186,6 @@
     "./components/SearchInput/MagnifyingGlass.svelte": "./dist/components/SearchInput/MagnifyingGlass.svelte",
     "./components/SearchInput/SearchInput.svelte": "./dist/components/SearchInput/SearchInput.svelte",
     "./components/SearchInput/X.svelte": "./dist/components/SearchInput/X.svelte",
-    "./components/Sharer/Sharer.svelte": "./dist/components/Sharer/Sharer.svelte",
-    "./components/Sharer/utils/copyToClipboard": "./dist/components/Sharer/utils/copyToClipboard.js",
-    "./components/Sharer/utils/facebook": "./dist/components/Sharer/utils/facebook.js",
-    "./components/Sharer/utils/meta": "./dist/components/Sharer/utils/meta.js",
-    "./components/Sharer/utils/twitter": "./dist/components/Sharer/utils/twitter.js",
     "./components/SimpleTimeline/SimpleTimeline.svelte": "./dist/components/SimpleTimeline/SimpleTimeline.svelte",
     "./components/SiteFooter/CompanyLinks.svelte": "./dist/components/SiteFooter/CompanyLinks.svelte",
     "./components/SiteFooter/LegalLinks.svelte": "./dist/components/SiteFooter/LegalLinks.svelte",

package/dist/@types/components/Sharer/Sharer.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  SharerProps */
-/** @typedef {typeof __propDef.events}  SharerEvents */
-/** @typedef {typeof __propDef.slots}  SharerSlots */
-export default class Sharer extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SharerProps = typeof __propDef.props;
-export type SharerEvents = typeof __propDef.events;
-export type SharerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/@types/components/Sharer/utils/copyToClipboard.d.ts

@@ -1,2 +0,0 @@
-export default copyToClipboard;
-declare function copyToClipboard(str: any): void;

package/dist/@types/components/Sharer/utils/facebook.d.ts

@@ -1,2 +0,0 @@
-export default handlePost;
-declare function handlePost(): void;

package/dist/@types/components/Sharer/utils/meta.d.ts

@@ -1,2 +0,0 @@
-export function getTitle(): string;
-export function getHref(): string;

package/dist/@types/components/Sharer/utils/twitter.d.ts

@@ -1,2 +0,0 @@
-export default handleTweet;
-declare function handleTweet(): void;

package/dist/components/Sharer/Sharer.svelte

@@ -1,155 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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;