removes sharer component and cleans up ads
This commit is contained in:
Jon McClure
parent
7a3744ec06
commit
01db12a987
11 changed files with 22 additions and 272 deletions
|
|
@ -5,14 +5,16 @@
|
|||
import { throttle } from 'lodash-es';
|
||||
|
||||
let lastScroll = 0;
|
||||
let showManagePreferences = false;
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
|
@ -20,12 +22,10 @@
|
|||
const handleScroll = () => {
|
||||
if (lastScroll > window.scrollY) {
|
||||
if (!showManagePreferences) {
|
||||
showManagePreferences = true;
|
||||
togglePrefs(true);
|
||||
}
|
||||
} else {
|
||||
if (showManagePreferences && window.scrollY > 250) {
|
||||
showManagePreferences = false;
|
||||
togglePrefs(false);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,11 +17,7 @@
|
|||
argTypes: {
|
||||
placementName: {
|
||||
control: 'select',
|
||||
options: [
|
||||
'reuters_desktop_leaderboard_atf',
|
||||
'reuters_desktop_native',
|
||||
'reuters_desktop_canvas',
|
||||
],
|
||||
options: ['reuters_desktop_native_1', 'reuters_desktop_canvas'],
|
||||
},
|
||||
dataFreestarAd: {
|
||||
control: 'select',
|
||||
|
|
|
|||
|
|
@ -1,29 +1,28 @@
|
|||
Display a FreeStar Ad Slot
|
||||
Add programmatic ads to your page.
|
||||
|
||||
Note: You must use this domain to access the story book:
|
||||
`http://localhost.arcpublishing.com:3000`
|
||||
|
||||
This domain has been whitelisted on the Ad server. To setup the domain locally, add the following line to `/etc/hosts`:
|
||||
|
||||
```
|
||||
127.0.0.1 localhost localhost.arcpublishing.com
|
||||
```
|
||||
> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { AdSlot, AdScripts } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<!-- Include only ONCE per page -->
|
||||
<AdScripts />
|
||||
<!-- ALWAYS check if in an embed context! -->
|
||||
{#if !embedded}
|
||||
<!-- Include AdScripts only ONCE per page -->
|
||||
<AdScripts />
|
||||
{/if}
|
||||
|
||||
<AdSlot
|
||||
placementName="reuters_desktop_native"
|
||||
slotId="reuters_desktop_native"
|
||||
/>
|
||||
<!-- ... -->
|
||||
|
||||
<AdSlot
|
||||
placementName="reuters_desktop_native"
|
||||
slotId="reuters_desktop_native"
|
||||
/>
|
||||
{#if !embedded}
|
||||
<AdSlot />
|
||||
{/if}
|
||||
|
||||
<!-- ... -->
|
||||
|
||||
{#if !embedded}
|
||||
<!-- Can add multiple ads to your page -->
|
||||
<AdSlot />
|
||||
{/if}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
<script>
|
||||
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
|
||||
|
||||
// @ts-ignore
|
||||
import componentDocs from './stories/docs/component.md?raw';
|
||||
|
||||
import Sharer from './Sharer.svelte';
|
||||
|
||||
import { withComponentDocs } from '$lib/docs/utils/withParams.js';
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="Components/Sharer"
|
||||
component="{Sharer}"
|
||||
{...withComponentDocs(componentDocs)}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<Sharer {...args} />
|
||||
</Template>
|
||||
|
||||
<Story name="Default" />
|
||||
|
|
@ -1,152 +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), {
|
||||
passive: true,
|
||||
});
|
||||
});
|
||||
</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 lang="scss">
|
||||
.sharetool.active {
|
||||
bottom: 10px;
|
||||
}
|
||||
.sharetool {
|
||||
position: fixed;
|
||||
bottom: -5rem;
|
||||
right: 10px;
|
||||
transition: all 300ms ease;
|
||||
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;
|
||||
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>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
Add share tools to a page.
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import { Sharer } from '@reuters-graphics/graphics-components';
|
||||
</script>
|
||||
|
||||
<Sharer />
|
||||
```
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in a new issue