120 lines
3.2 KiB
Svelte
120 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
/** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
|
|
|
|
type PlacementName =
|
|
// Disabling leaderboard for now...
|
|
// | 'reuters_desktop_leaderboard_atf'
|
|
// | 'reuters_mobile_leaderboard'
|
|
| 'reuters_desktop_native_1'
|
|
| 'reuters_mobile_mpu_1'
|
|
| 'reuters_sponsorlogo'
|
|
| 'reuters_desktop_canvas';
|
|
|
|
/**
|
|
* The unique placement name from FreeStar dashboard.
|
|
* @required
|
|
*/
|
|
export let placementName: PlacementName = 'reuters_desktop_native_1';
|
|
|
|
/**
|
|
* The unique slot Id from FreeStar dashboard.
|
|
*/
|
|
export let dataFreestarAd: string = '__970x250';
|
|
|
|
/** Add an ID to target with SCSS. */
|
|
export let id: string = '';
|
|
|
|
/** Add a class to target with SCSS. */
|
|
let cls: string = 'my-12';
|
|
export { cls as class };
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
import Block from '../Block/Block.svelte';
|
|
|
|
const random4 = () =>
|
|
Math.floor((1 + Math.random()) * 0x10000)
|
|
.toString(16)
|
|
.substring(1);
|
|
|
|
const randomAdId = 'ad-' + random4() + random4();
|
|
|
|
const getAdType = (placementName: PlacementName) => {
|
|
switch (placementName) {
|
|
// case 'reuters_desktop_leaderboard_atf':
|
|
// case 'reuters_mobile_leaderboard':
|
|
// return 'leaderboard';
|
|
case 'reuters_sponsorlogo':
|
|
return 'Sponsorlogo';
|
|
case 'reuters_mobile_mpu_1':
|
|
return 'mpu';
|
|
default:
|
|
return 'native';
|
|
}
|
|
};
|
|
|
|
onMount(() => {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const adstest = urlParams.get('adstest');
|
|
window.graphicsAdQueue = window.graphicsAdQueue || [];
|
|
window.graphicsAdQueue.push({
|
|
placementName,
|
|
slotId: randomAdId,
|
|
type: getAdType(placementName),
|
|
graphicId: window.location.pathname,
|
|
adstest,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<!-- @component `AdSlot` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-AdSlot--default) -->
|
|
<Block id="{id}" class="freestar-adslot {cls}">
|
|
<div class="ad-block">
|
|
<div class="ad-label">Advertisement · Scroll to continue</div>
|
|
<div class="ad-container">
|
|
<div class="ad-slot__inner">
|
|
<div>
|
|
<div
|
|
data-freestar-ad="{dataFreestarAd || null}"
|
|
id="{randomAdId}"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Block>
|
|
|
|
<style lang="scss">
|
|
div.ad-block {
|
|
border-bottom: 1px solid var(--theme-colour-brand-rules);
|
|
border-top: 1px solid var(--theme-colour-brand-rules);
|
|
div.ad-label {
|
|
font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;
|
|
font-size: 14px;
|
|
margin: 6px 0;
|
|
line-height: 1.333;
|
|
color: var(--theme-colour-text-secondary);
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
div.ad-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 415px;
|
|
@media (max-width: 767.9px) {
|
|
min-height: 320px;
|
|
}
|
|
div.ad-slot__inner {
|
|
margin: auto 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
flex: unset;
|
|
& > div {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|