From fb928e33fc689e4204c30417fa7c4998750ae04b Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 18 Dec 2023 15:34:07 +0000 Subject: [PATCH 01/25] Start migrating fabric template Co-authored-by: Dominik Lander Co-authored-by: Dina Hafez Co-authored-by: Emma Imber <108270776+emma-imber@users.noreply.github.com> Co-authored-by: Demetrios Skamiotis --- src/lib/gam.ts | 4 +- src/lib/messenger.ts | 35 ++-- src/lib/messenger/on-scroll.ts | 39 +++++ src/lib/messenger/on-viewport.ts | 27 ++++ .../csr/capi-single-paidfor/index.svelte | 4 +- src/templates/ssr/fabric/index.svelte | 153 ++++++++++++++++++ src/templates/ssr/fabric/index.ts | 101 ++++++++++++ src/templates/ssr/fabric/test.json | 29 ++++ 8 files changed, 366 insertions(+), 26 deletions(-) create mode 100644 src/lib/messenger/on-scroll.ts create mode 100644 src/lib/messenger/on-viewport.ts create mode 100644 src/templates/ssr/fabric/index.svelte create mode 100644 src/templates/ssr/fabric/index.ts create mode 100644 src/templates/ssr/fabric/test.json diff --git a/src/lib/gam.ts b/src/lib/gam.ts index e1fe5047..2d377e4d 100644 --- a/src/lib/gam.ts +++ b/src/lib/gam.ts @@ -22,7 +22,7 @@ const replaceGAMVariables = ( return output; }; -const addTrackingPixel = (url: string) => { +const addPixel = (url: string) => { const pixel = new Image(); pixel.src = url + CACHE_BUST; }; @@ -36,7 +36,7 @@ export type { GAMVariable }; export { CACHE_BUST, CLICK_MACRO, - addTrackingPixel, + addPixel, gamVar, isValidReplacedVariable, replaceGAMVariables, diff --git a/src/lib/messenger.ts b/src/lib/messenger.ts index e3e07520..31ce0c5f 100644 --- a/src/lib/messenger.ts +++ b/src/lib/messenger.ts @@ -19,8 +19,6 @@ type ResizeMessage = StandardMessage< { width?: number | string; height?: number | string } >; -type StringMessage = StandardMessage<'message', string>; - type BackgroundMessage = StandardMessage< 'background', { @@ -34,23 +32,21 @@ type BackgroundMessage = StandardMessage< } >; -type TypeMessage = StandardMessage<'type', string>; - -type GetPageURLMessage = StandardMessage<'get-page-url', string>; - -type PassbackRefreshMessage = StandardMessage<'passback-refresh', string>; +type StringMessage = StandardMessage< + | 'message' + | 'type' + | 'get-page-url' + | 'passback-refresh' + | 'viewport' + | 'scroll', + string +>; -type Message = - | ResizeMessage - | StringMessage - | BackgroundMessage - | TypeMessage - | GetPageURLMessage - | PassbackRefreshMessage; +type Message = ResizeMessage | StringMessage | BackgroundMessage; type MessengerResponse = { id: string; - result: string; + result: unknown; }; const generateId = () => { @@ -79,12 +75,7 @@ const post = (arg: Message): void => { const isReplyFromMessenger = (json: unknown): json is MessengerResponse => { const reply = json as MessengerResponse; - return ( - 'result' in reply && - typeof reply.result === 'string' && - 'id' in reply && - typeof reply.id === 'string' - ); + return 'result' in reply && 'id' in reply && typeof reply.id === 'string'; }; const decodeReply = (e: MessageEvent): MessengerResponse | void => { @@ -101,7 +92,7 @@ const decodeReply = (e: MessageEvent): MessengerResponse | void => { } }; -const postAndListen = (arg: Message): Promise => +const postAndListen = (arg: Message): Promise => timeout( new Promise((resolve) => { const id = generateId(); diff --git a/src/lib/messenger/on-scroll.ts b/src/lib/messenger/on-scroll.ts new file mode 100644 index 00000000..d7536470 --- /dev/null +++ b/src/lib/messenger/on-scroll.ts @@ -0,0 +1,39 @@ +import { postAndListen } from '$lib/messenger'; + +interface ScrollResponse { + width: number; + height: number; + top: number; + bottom: number; + left: number; + right: number; +} + +const isScrollReply = (json: unknown): json is ScrollResponse => { + const reply = json as ScrollResponse; + return ( + 'width' in reply && + 'height' in reply && + 'top' in reply && + 'bottom' in reply && + 'left' in reply && + 'right' in reply && + typeof reply.width === 'number' && + typeof reply.height === 'number' && + typeof reply.top === 'number' && + typeof reply.bottom === 'number' && + typeof reply.left === 'number' && + typeof reply.right === 'number' + ); +}; +const onScroll = async () => { + const response = await postAndListen({ type: 'scroll', value: '' }); + + if (!isScrollReply(response)) { + throw new Error('Invalid onScroll response'); + } + + return response; +}; + +export { onScroll }; diff --git a/src/lib/messenger/on-viewport.ts b/src/lib/messenger/on-viewport.ts new file mode 100644 index 00000000..9d1f4c9f --- /dev/null +++ b/src/lib/messenger/on-viewport.ts @@ -0,0 +1,27 @@ +import { postAndListen } from '$lib/messenger'; + +interface ViewportResponse { + width: number; + height: number; +} + +const isViewportReply = (json: unknown): json is ViewportResponse => { + const reply = json as ViewportResponse; + return ( + 'width' in reply && + 'height' in reply && + typeof reply.width === 'number' && + typeof reply.height === 'number' + ); +}; +const onViewport = async () => { + const response = await postAndListen({ type: 'viewport', value: '' }); + + if (!isViewportReply(response)) { + throw new Error('Invalid onViewport response'); + } + + return response; +}; + +export { onViewport }; diff --git a/src/templates/csr/capi-single-paidfor/index.svelte b/src/templates/csr/capi-single-paidfor/index.svelte index 73f9cf24..dfbe115e 100644 --- a/src/templates/csr/capi-single-paidfor/index.svelte +++ b/src/templates/csr/capi-single-paidfor/index.svelte @@ -11,14 +11,14 @@ import CapiCard from '$templates/components/CapiCard.svelte'; import PaidForHeader from '$templates/components/PaidForHeader.svelte'; - import { addTrackingPixel, isValidReplacedVariable } from '$lib/gam'; import SetHeightResizer from '$templates/components/SetHeightResizer.svelte'; + import { addPixel, isValidReplacedVariable } from '$lib/gam'; export let SeriesUrl: GAMVariable; export let ComponentTitle: GAMVariable; export let Trackingpixel: GAMVariable; - if (isValidReplacedVariable(Trackingpixel)) addTrackingPixel(Trackingpixel); + if (isValidReplacedVariable(Trackingpixel)) addPixel(Trackingpixel); const promise: Promise = fetch( `${api}?k=${encodeURI(SeriesUrl)}`, diff --git a/src/templates/ssr/fabric/index.svelte b/src/templates/ssr/fabric/index.svelte new file mode 100644 index 00000000..ef7c2e60 --- /dev/null +++ b/src/templates/ssr/fabric/index.svelte @@ -0,0 +1,153 @@ + + + +
+
+ Advertisement +
+
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ +
+{thirdPartyJSTracking} + + diff --git a/src/templates/ssr/fabric/index.ts b/src/templates/ssr/fabric/index.ts new file mode 100644 index 00000000..01d25b6c --- /dev/null +++ b/src/templates/ssr/fabric/index.ts @@ -0,0 +1,101 @@ +import { onScroll } from '$lib/messenger/on-scroll.js'; +import { onViewport } from '$lib/messenger/on-viewport.js'; +import { + getIframeId, + reportClicks, + resizeIframeHeight, + sendMessage, +} from '../../../../legacy/src/_shared/js/messages.js'; +import { write } from '../../_shared/js/dom.js'; + +const layer2 = document.getElementById('layer2'); +const linkDesktop = document.getElementById('linkDesktop'); + +if (layer2.classList.contains('creative__layer2--animation-disabled')) { + write(() => (layer2.style.backgroundPosition = '{Layer2BackgroundPosition}')); +} + +const isMobile = window.matchMedia('(max-width: 739px)').matches; +const isTablet = window.matchMedia( + '(min-width: 740px) and (max-width: 979px)', +).matches; +handleBackground(isMobile, isTablet); + +if ( + !isMobile && + layer2.classList.contains('creative__layer2--animation-enabled') +) { + onViewport() + .then(async ({ height }) => { + const { top, bottom } = await onScroll(); + if (0 <= top && bottom <= height) { + layer2.classList.add('is-animating'); + return Promise.resolve(); + } + }) + .catch((error) => { + console.log(error); + }); +} + +function handleBackground(isMobile, isTablet) { + const scrollType = '{BackgroundScrollType}'; + const backgroundColour = '{BackgroundColour}'; + const [backgroundImage, backgroundPosition, backgroundRepeat, creativeLink] = + isMobile + ? [ + '{MobileBackgroundImage}', + '{MobileBackgroundImagePosition}', + '{MobileBackgroundImageRepeat}', + document.getElementById('linkMobile'), + ] + : [ + '{BackgroundImage}', + '{BackgroundImagePosition}', + '{BackgroundImageRepeat}', + document.getElementById('linkDesktop'), + ]; + + handlePadding(scrollType); + + if (backgroundColour) { + document.documentElement.style.backgroundColor = backgroundColour; + } + + if (!backgroundImage) return; + if (scrollType === 'none') { + write(() => { + Object.assign(creativeLink.style, { + backgroundImage: `url('${backgroundImage}')`, + backgroundPosition, + backgroundRepeat, + }); + }); + } else { + sendMessage('background', { + scrollType: + scrollType === 'parallax' && (isMobile || isTablet) + ? 'fixed' + : scrollType, + backgroundColour, + backgroundImage: `url('${backgroundImage}')`, + backgroundRepeat, + backgroundPosition, + }); + } +} + +function handlePadding(scrollType) { + if (scrollType === 'parallax') { + linkDesktop !== undefined ? linkDesktop.classList.add('is-parallax') : ''; + } +} + +function handleLayer2(height) { + onScroll(({ top, bottom }) => { + if (0 <= top && bottom <= height) { + layer2.classList.add('is-animating'); + return false; + } + }); +} diff --git a/src/templates/ssr/fabric/test.json b/src/templates/ssr/fabric/test.json new file mode 100644 index 00000000..2b68ef95 --- /dev/null +++ b/src/templates/ssr/fabric/test.json @@ -0,0 +1,29 @@ +{ + "ClickthroughUrl": "http://www.chloe.com/en/content/faye", + "Trackingpixel": "", + "Researchpixel": "", + "Viewabilitypixel": "", + "thirdPartyJSTracking": " ", + "BackgroundScrollType": "fixed", + "BackgroundColour": "transparent", + "BackgroundImage": "", + "BackgroundImagePosition": "right top", + "BackgroundImageRepeat": "no-repeat", + "Layer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkMOfzwEQARgBMggbYy-x5U-ffg", + "Layer1BackgroundPosition": "center center", + "Layer2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", + "Layer2BackgroundPosition": "right top", + "Layer2BackgroundAnimation": "disabled", + "Layer2BackgroundAnimationPosition": "left", + "Layer3BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", + "Layer3BackgroundPosition": "left bottom", + "MobileBackgroundImage": "", + "MobileBackgroundImagePosition": "center center", + "MobileBackgroundImageRepeat": "repeat-y", + "MobileLayer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOPmLBABGAEyCNJtt5a-pC0F", + "MobileLayer1BackgroundPosition": "left top", + "MobileLayer2BackgroundImage": "", + "MobileLayer2BackgroundPosition": "left top", + "MobileLayer3BackgroundImage": "", + "MobileLayer3BackgroundPosition": "left top" + } From 1493c7bd4fa4f0522d03f756d882bb16d2d2c21e Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 27 Dec 2023 12:48:21 +0000 Subject: [PATCH 02/25] Add AdvertisementLabel component and test.json --- .../components/AdvertisementLabel.svelte | 45 +++++++++++++++++++ src/templates/ssr/fabric/test.json | 4 +- 2 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 src/templates/components/AdvertisementLabel.svelte diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte new file mode 100644 index 00000000..c7b636da --- /dev/null +++ b/src/templates/components/AdvertisementLabel.svelte @@ -0,0 +1,45 @@ + + +
+
Advertisement
+
+ + diff --git a/src/templates/ssr/fabric/test.json b/src/templates/ssr/fabric/test.json index 2b68ef95..2a9553e1 100644 --- a/src/templates/ssr/fabric/test.json +++ b/src/templates/ssr/fabric/test.json @@ -13,8 +13,6 @@ "Layer1BackgroundPosition": "center center", "Layer2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", "Layer2BackgroundPosition": "right top", - "Layer2BackgroundAnimation": "disabled", - "Layer2BackgroundAnimationPosition": "left", "Layer3BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", "Layer3BackgroundPosition": "left bottom", "MobileBackgroundImage": "", @@ -26,4 +24,4 @@ "MobileLayer2BackgroundPosition": "left top", "MobileLayer3BackgroundImage": "", "MobileLayer3BackgroundPosition": "left top" - } +} From dba760848e83627d0bdb0c102e802ed95289713a Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 27 Dec 2023 17:26:38 +0000 Subject: [PATCH 03/25] Add Pixel component and fabric index.svelte --- .../components/AdvertisementLabel.svelte | 54 ++-- src/templates/components/Pixel.svelte | 18 ++ src/templates/components/colours/palette.scss | 128 +++++++++ src/templates/ssr/fabric/index.svelte | 244 +++++++++--------- src/templates/ssr/fabric/index.ts | 101 -------- 5 files changed, 302 insertions(+), 243 deletions(-) create mode 100644 src/templates/components/Pixel.svelte create mode 100644 src/templates/components/colours/palette.scss diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte index c7b636da..9c638a05 100644 --- a/src/templates/components/AdvertisementLabel.svelte +++ b/src/templates/components/AdvertisementLabel.svelte @@ -1,45 +1,51 @@ -
-
Advertisement
+
+
Advertisement
diff --git a/src/templates/components/Pixel.svelte b/src/templates/components/Pixel.svelte new file mode 100644 index 00000000..3a75730c --- /dev/null +++ b/src/templates/components/Pixel.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/src/templates/components/colours/palette.scss b/src/templates/components/colours/palette.scss new file mode 100644 index 00000000..a640e6a2 --- /dev/null +++ b/src/templates/components/colours/palette.scss @@ -0,0 +1,128 @@ +$guardian-brand: #c70000; +$guardian-brand-light: #94b1ca; +$guardian-brand-dark: #121212; + +$error: #d61d00; +$success: #4a7801; + +// Neutral palette +$neutral-1: #333333; +$neutral-2: #767676; +$neutral-3: #bdbdbd; +$neutral-4: #dcdcdc; +$neutral-5: #dfdfdf; +$neutral-6: #eaeaea; +$neutral-7: #f1f1f1; +$neutral-8: #f6f6f6; +$neutral-2-contrasted: darken($neutral-2, 3%); + +// News palette +$news-main-1: #005689; +$news-main-2: #4bc6df; +$news-support-1: #aad8f1; +$news-support-2: #197caa; +$news-support-3: #69d1ca; +$news-support-4: #66a998; +$news-support-5: #aad801; +$news-support-6: #63717a; +$news-support-7: #484f53; + +// Features palette +$features-main-1: #7d0068; +$features-main-2: #b82266; +$features-support-1: #951c55; +$features-support-2: #4e0375; +$features-support-3: #fdadba; +$features-support-4: #dc2a7d; + +// Comment palette +$comment-main-1: #c05303; +$comment-main-2: #ff9b0b; +$comment-support-1: #7d7569; +$comment-support-2: #efefec; +$comment-support-3: #ffce4b; +$comment-support-4: #e6711b; + +// Multimedia palette +$multimedia-main-1: #333333; +$multimedia-main-2: #c70000; +$multimedia-support-1: #c5d4ea; +$multimedia-support-2: #507892; +$multimedia-support-3: #002c59; +$multimedia-support-4: #484848; +$multimedia-support-5: #161616; + +// Futurelearn palette +$futurelearn-main-1: #333333; +$futurelearn-main-2: #f18b00; +$futurelearn-support-1: #c5d4ea; +$futurelearn-support-2: #507892; +$futurelearn-support-3: #002c59; +$futurelearn-support-4: #484848; +$futurelearn-support-5: #161616; + +// Live palette +$live-main-1: #f5b3c7; +$live-main-2: #e71c77; +$live-support-1: #ff5b3a; +$live-support-2: #800c0c; +$live-support-3: #a60947; + +// Maps palette +$maps-main-1: #1c6326; +$maps-main-2: #298422; +$maps-support-1: #ceb41d; +$maps-support-2: #a9af2b; +$maps-support-3: #5ebfba; +$maps-support-4: #72af7e; + +// External content palette +$external-main-1: #1c6326; +$external-support-1: #a9af2b; + +$paid-article: #d9d9d9; +$paid-article-bg: #d1d1d1; +$paid-article-header: #bfbfbf; +$paid-article-header-bg: #b8b8b8; +$paid-article-subheader: #f6f6f6; +$paid-article-subheader-bg: #c4c4c4; +$paid-article-media-bg: #bbb7b1; +$paid-article-icon: #767676; +$paid-article-brand: #69d1ca; +$paid-article-mpu: #cccccc; +$paidfor-background: $news-support-3; +$rainbow-red: #ed1c24; // from Guss +$paid-card-kicker: #626262; + +$media-background: $multimedia-support-5; + +// Membership +// ============================================================================= + +$membership-default: #2d4391; + +// Lifestyle (magenta) +$lifestyle-dark: #7d0068; +$lifestyle-main: #bb3b80; +$lifestyle-bright: #ffabdb; +$lifestyle-pastel: #fec8d3; +$lifestyle-faded: #feeef7; + +// New garnett colours +// ============================================================================= + +$guardian-books-rebrand: #8e246f; +$guardian-live-rebrand: #c83877; +$guardian-jobs-rebrand: #469d93; +$guardian-travel-rebrand: #007ba6; +$guardian-money-rebrand: #b39069; +$guardian-masterclasses-rebrand: #f4bc44; +$guardian-subscriptions-rebrand: #d01317; +$guardian-subscriptions-rebrand-blue: #005689; +$guardian-generic-rebrand: #012937; +$guardian-weekly-rebrand: #2c363b; +$guardian-members-rebrand: #bb3a7f; +$news-garnett-highlight: #ffe500; +$guardian-patron: #4f5249; +$guardian-highlight-hover: #f2ae00; +$guardian-support: #ff7f0f; diff --git a/src/templates/ssr/fabric/index.svelte b/src/templates/ssr/fabric/index.svelte index ef7c2e60..4daca6b9 100644 --- a/src/templates/ssr/fabric/index.svelte +++ b/src/templates/ssr/fabric/index.svelte @@ -1,153 +1,161 @@ -
-
- Advertisement -
-
+
- -
-
-
+
+
+
-
-
+
-
-
- - -
-
-
+
+
+
-
-
-
-
- + /> +
+
+ + {#if isValidReplacedVariable(Trackingpixel)} + + {:else if isValidReplacedVariable(Researchpixel)} + + {:else if isValidReplacedVariable(Viewabilitypixel)} + + {/if}
+ {thirdPartyJSTracking} diff --git a/src/templates/ssr/fabric/index.ts b/src/templates/ssr/fabric/index.ts index 01d25b6c..e69de29b 100644 --- a/src/templates/ssr/fabric/index.ts +++ b/src/templates/ssr/fabric/index.ts @@ -1,101 +0,0 @@ -import { onScroll } from '$lib/messenger/on-scroll.js'; -import { onViewport } from '$lib/messenger/on-viewport.js'; -import { - getIframeId, - reportClicks, - resizeIframeHeight, - sendMessage, -} from '../../../../legacy/src/_shared/js/messages.js'; -import { write } from '../../_shared/js/dom.js'; - -const layer2 = document.getElementById('layer2'); -const linkDesktop = document.getElementById('linkDesktop'); - -if (layer2.classList.contains('creative__layer2--animation-disabled')) { - write(() => (layer2.style.backgroundPosition = '{Layer2BackgroundPosition}')); -} - -const isMobile = window.matchMedia('(max-width: 739px)').matches; -const isTablet = window.matchMedia( - '(min-width: 740px) and (max-width: 979px)', -).matches; -handleBackground(isMobile, isTablet); - -if ( - !isMobile && - layer2.classList.contains('creative__layer2--animation-enabled') -) { - onViewport() - .then(async ({ height }) => { - const { top, bottom } = await onScroll(); - if (0 <= top && bottom <= height) { - layer2.classList.add('is-animating'); - return Promise.resolve(); - } - }) - .catch((error) => { - console.log(error); - }); -} - -function handleBackground(isMobile, isTablet) { - const scrollType = '{BackgroundScrollType}'; - const backgroundColour = '{BackgroundColour}'; - const [backgroundImage, backgroundPosition, backgroundRepeat, creativeLink] = - isMobile - ? [ - '{MobileBackgroundImage}', - '{MobileBackgroundImagePosition}', - '{MobileBackgroundImageRepeat}', - document.getElementById('linkMobile'), - ] - : [ - '{BackgroundImage}', - '{BackgroundImagePosition}', - '{BackgroundImageRepeat}', - document.getElementById('linkDesktop'), - ]; - - handlePadding(scrollType); - - if (backgroundColour) { - document.documentElement.style.backgroundColor = backgroundColour; - } - - if (!backgroundImage) return; - if (scrollType === 'none') { - write(() => { - Object.assign(creativeLink.style, { - backgroundImage: `url('${backgroundImage}')`, - backgroundPosition, - backgroundRepeat, - }); - }); - } else { - sendMessage('background', { - scrollType: - scrollType === 'parallax' && (isMobile || isTablet) - ? 'fixed' - : scrollType, - backgroundColour, - backgroundImage: `url('${backgroundImage}')`, - backgroundRepeat, - backgroundPosition, - }); - } -} - -function handlePadding(scrollType) { - if (scrollType === 'parallax') { - linkDesktop !== undefined ? linkDesktop.classList.add('is-parallax') : ''; - } -} - -function handleLayer2(height) { - onScroll(({ top, bottom }) => { - if (0 <= top && bottom <= height) { - layer2.classList.add('is-animating'); - return false; - } - }); -} From b69da95d857ba5d50b6ccc8479c76f9a4e2712c5 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 27 Dec 2023 17:49:00 +0000 Subject: [PATCH 04/25] Add export to index.ts to pass CI --- src/templates/ssr/fabric/index.svelte | 7 ------- src/templates/ssr/fabric/index.ts | 1 + 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/templates/ssr/fabric/index.svelte b/src/templates/ssr/fabric/index.svelte index 4daca6b9..3eebb146 100644 --- a/src/templates/ssr/fabric/index.svelte +++ b/src/templates/ssr/fabric/index.svelte @@ -99,13 +99,6 @@ .blink { display: block; text-decoration: none; - - &:hover, - &:focus { - .blink__anchor { - text-decoration: underline; - } - } } .creative-container { position: relative; diff --git a/src/templates/ssr/fabric/index.ts b/src/templates/ssr/fabric/index.ts index e69de29b..cb0ff5c3 100644 --- a/src/templates/ssr/fabric/index.ts +++ b/src/templates/ssr/fabric/index.ts @@ -0,0 +1 @@ +export {}; From 5aa41c79b157dca7facad18a57cda79165b8e043 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Thu, 28 Dec 2023 09:59:37 +0000 Subject: [PATCH 05/25] Remove unnecessary files from this PR but adding the old func name --- src/lib/gam.ts | 4 ++-- src/templates/csr/capi-single-paidfor/index.svelte | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/gam.ts b/src/lib/gam.ts index 2d377e4d..e1fe5047 100644 --- a/src/lib/gam.ts +++ b/src/lib/gam.ts @@ -22,7 +22,7 @@ const replaceGAMVariables = ( return output; }; -const addPixel = (url: string) => { +const addTrackingPixel = (url: string) => { const pixel = new Image(); pixel.src = url + CACHE_BUST; }; @@ -36,7 +36,7 @@ export type { GAMVariable }; export { CACHE_BUST, CLICK_MACRO, - addPixel, + addTrackingPixel, gamVar, isValidReplacedVariable, replaceGAMVariables, diff --git a/src/templates/csr/capi-single-paidfor/index.svelte b/src/templates/csr/capi-single-paidfor/index.svelte index dfbe115e..864fa2ff 100644 --- a/src/templates/csr/capi-single-paidfor/index.svelte +++ b/src/templates/csr/capi-single-paidfor/index.svelte @@ -12,13 +12,13 @@ import CapiCard from '$templates/components/CapiCard.svelte'; import PaidForHeader from '$templates/components/PaidForHeader.svelte'; import SetHeightResizer from '$templates/components/SetHeightResizer.svelte'; - import { addPixel, isValidReplacedVariable } from '$lib/gam'; + import { addTrackingPixel, isValidReplacedVariable } from '$lib/gam'; export let SeriesUrl: GAMVariable; export let ComponentTitle: GAMVariable; export let Trackingpixel: GAMVariable; - if (isValidReplacedVariable(Trackingpixel)) addPixel(Trackingpixel); + if (isValidReplacedVariable(Trackingpixel)) addTrackingPixel(Trackingpixel); const promise: Promise = fetch( `${api}?k=${encodeURI(SeriesUrl)}`, From 239996950ebc2c9a8e7924bd30b7868727f0b56f Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Thu, 28 Dec 2023 10:44:51 +0000 Subject: [PATCH 06/25] Remove the unused key/value in test.json --- src/templates/ssr/fabric/test.json | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/templates/ssr/fabric/test.json b/src/templates/ssr/fabric/test.json index 2a9553e1..d7d7d4ea 100644 --- a/src/templates/ssr/fabric/test.json +++ b/src/templates/ssr/fabric/test.json @@ -4,20 +4,12 @@ "Researchpixel": "", "Viewabilitypixel": "", "thirdPartyJSTracking": " ", - "BackgroundScrollType": "fixed", - "BackgroundColour": "transparent", - "BackgroundImage": "", - "BackgroundImagePosition": "right top", - "BackgroundImageRepeat": "no-repeat", "Layer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkMOfzwEQARgBMggbYy-x5U-ffg", "Layer1BackgroundPosition": "center center", "Layer2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", "Layer2BackgroundPosition": "right top", "Layer3BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", "Layer3BackgroundPosition": "left bottom", - "MobileBackgroundImage": "", - "MobileBackgroundImagePosition": "center center", - "MobileBackgroundImageRepeat": "repeat-y", "MobileLayer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOPmLBABGAEyCNJtt5a-pC0F", "MobileLayer1BackgroundPosition": "left top", "MobileLayer2BackgroundImage": "", From f088aa0ef572b848dae6187db0f25d065434c0ff Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Fri, 29 Dec 2023 11:09:39 +0000 Subject: [PATCH 07/25] Addressed review comments --- .../components/AdvertisementLabel.svelte | 8 +-- src/templates/components/Pixel.svelte | 2 +- src/templates/ssr/fabric/index.svelte | 64 +++++++++++-------- 3 files changed, 40 insertions(+), 34 deletions(-) diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte index 9c638a05..f945b8e6 100644 --- a/src/templates/components/AdvertisementLabel.svelte +++ b/src/templates/components/AdvertisementLabel.svelte @@ -1,11 +1,9 @@ - - -
+
Advertisement
From d93467ac27fee5b86a88e22717ad461889d77a8c Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy Date: Fri, 29 Dec 2023 12:44:20 +0000 Subject: [PATCH 09/25] Add a 100% width preview --- src/lib/Previews.svelte | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/lib/Previews.svelte b/src/lib/Previews.svelte index 66887426..519a1b4a 100644 --- a/src/lib/Previews.svelte +++ b/src/lib/Previews.svelte @@ -28,6 +28,7 @@ ].join(''); export const widths = { + '100%': '100%', 1300: 'wide', 980: 'desktop', 740: 'tablet', @@ -70,7 +71,7 @@
{#each Object.keys(widths) as width} -
+

{widths[width]} size ({width})

@@ -107,7 +108,7 @@
- From cd3cc485c78ab471c0f48b9e51ea2c01957422de Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Thu, 11 Jan 2024 09:33:55 +0000 Subject: [PATCH 15/25] Relocate fabric web to csr for parallax functionality --- src/lib/gam.ts | 2 + src/lib/messenger.ts | 17 ++++- src/styles/helpers.scss | 16 +++-- .../{ssr => csr}/fabric/index.svelte | 71 +++++++++++++++---- src/templates/csr/fabric/test.json | 26 +++++++ src/templates/ssr/fabric/index.ts | 1 - src/templates/ssr/fabric/test.json | 19 ----- 7 files changed, 114 insertions(+), 38 deletions(-) rename src/templates/{ssr => csr}/fabric/index.svelte (54%) create mode 100644 src/templates/csr/fabric/test.json delete mode 100644 src/templates/ssr/fabric/index.ts delete mode 100644 src/templates/ssr/fabric/test.json diff --git a/src/lib/gam.ts b/src/lib/gam.ts index e1fe5047..c82a9c70 100644 --- a/src/lib/gam.ts +++ b/src/lib/gam.ts @@ -1,5 +1,6 @@ const CLICK_MACRO = '%%CLICK_URL_UNESC%%'; const CACHE_BUST = '%%CACHEBUSTER%%'; +const DEST_URL = '%%DEST_URL%%'; type GAMVariable = T; @@ -36,6 +37,7 @@ export type { GAMVariable }; export { CACHE_BUST, CLICK_MACRO, + DEST_URL, addTrackingPixel, gamVar, isValidReplacedVariable, diff --git a/src/lib/messenger.ts b/src/lib/messenger.ts index 31ce0c5f..689bb288 100644 --- a/src/lib/messenger.ts +++ b/src/lib/messenger.ts @@ -32,6 +32,17 @@ type BackgroundMessage = StandardMessage< } >; +type FabricBackgroundMessage = StandardMessage< + 'background', + { + scrollType: string; + backgroundColor: string; + backgroundImage: string; + backgroundRepeat: string; + backgroundPosition: string; + } +>; + type StringMessage = StandardMessage< | 'message' | 'type' @@ -42,7 +53,11 @@ type StringMessage = StandardMessage< string >; -type Message = ResizeMessage | StringMessage | BackgroundMessage; +type Message = + | ResizeMessage + | StringMessage + | BackgroundMessage + | FabricBackgroundMessage; type MessengerResponse = { id: string; diff --git a/src/styles/helpers.scss b/src/styles/helpers.scss index 682aa098..cca983e2 100644 --- a/src/styles/helpers.scss +++ b/src/styles/helpers.scss @@ -1,20 +1,28 @@ +$gs-gutter: 20px; +$gs-max-columns: 16; +$gs-column-width: 60px; + +@function gs-span($n-columns) { + @return $n-columns * $gs-column-width + $gs-gutter * ($n-columns - 1); +} + .gs-container { position: relative; margin: 0 auto; @media (min-width: 740px) { - max-width: 740px; + padding: 0 calc(50% - #{(gs-span(9) + $gs-gutter * 2) / 2}); } @media (min-width: 980px) { - max-width: 980px; + padding: 0 calc(50% - #{(gs-span(12) + $gs-gutter * 2) / 2}); } @media (min-width: 1140px) { - max-width: 1140px; + padding: 0 calc(50% - #{(gs-span(14) + $gs-gutter * 2) / 2}); } @media (min-width: 1300px) { - max-width: 1300px; + padding: 0 calc(50% - #{(gs-span($gs-max-columns) + $gs-gutter * 2) / 2}); } } diff --git a/src/templates/ssr/fabric/index.svelte b/src/templates/csr/fabric/index.svelte similarity index 54% rename from src/templates/ssr/fabric/index.svelte rename to src/templates/csr/fabric/index.svelte index c7b03288..5f3b6898 100644 --- a/src/templates/ssr/fabric/index.svelte +++ b/src/templates/csr/fabric/index.svelte @@ -1,6 +1,7 @@ +
@@ -67,10 +104,13 @@ {/if}
-{thirdPartyJSTracking} +{@html thirdPartyJSTracking} diff --git a/src/templates/ssr/fabric/index.ts b/src/templates/ssr/fabric/index.ts new file mode 100644 index 00000000..01d25b6c --- /dev/null +++ b/src/templates/ssr/fabric/index.ts @@ -0,0 +1,101 @@ +import { onScroll } from '$lib/messenger/on-scroll.js'; +import { onViewport } from '$lib/messenger/on-viewport.js'; +import { + getIframeId, + reportClicks, + resizeIframeHeight, + sendMessage, +} from '../../../../legacy/src/_shared/js/messages.js'; +import { write } from '../../_shared/js/dom.js'; + +const layer2 = document.getElementById('layer2'); +const linkDesktop = document.getElementById('linkDesktop'); + +if (layer2.classList.contains('creative__layer2--animation-disabled')) { + write(() => (layer2.style.backgroundPosition = '{Layer2BackgroundPosition}')); +} + +const isMobile = window.matchMedia('(max-width: 739px)').matches; +const isTablet = window.matchMedia( + '(min-width: 740px) and (max-width: 979px)', +).matches; +handleBackground(isMobile, isTablet); + +if ( + !isMobile && + layer2.classList.contains('creative__layer2--animation-enabled') +) { + onViewport() + .then(async ({ height }) => { + const { top, bottom } = await onScroll(); + if (0 <= top && bottom <= height) { + layer2.classList.add('is-animating'); + return Promise.resolve(); + } + }) + .catch((error) => { + console.log(error); + }); +} + +function handleBackground(isMobile, isTablet) { + const scrollType = '{BackgroundScrollType}'; + const backgroundColour = '{BackgroundColour}'; + const [backgroundImage, backgroundPosition, backgroundRepeat, creativeLink] = + isMobile + ? [ + '{MobileBackgroundImage}', + '{MobileBackgroundImagePosition}', + '{MobileBackgroundImageRepeat}', + document.getElementById('linkMobile'), + ] + : [ + '{BackgroundImage}', + '{BackgroundImagePosition}', + '{BackgroundImageRepeat}', + document.getElementById('linkDesktop'), + ]; + + handlePadding(scrollType); + + if (backgroundColour) { + document.documentElement.style.backgroundColor = backgroundColour; + } + + if (!backgroundImage) return; + if (scrollType === 'none') { + write(() => { + Object.assign(creativeLink.style, { + backgroundImage: `url('${backgroundImage}')`, + backgroundPosition, + backgroundRepeat, + }); + }); + } else { + sendMessage('background', { + scrollType: + scrollType === 'parallax' && (isMobile || isTablet) + ? 'fixed' + : scrollType, + backgroundColour, + backgroundImage: `url('${backgroundImage}')`, + backgroundRepeat, + backgroundPosition, + }); + } +} + +function handlePadding(scrollType) { + if (scrollType === 'parallax') { + linkDesktop !== undefined ? linkDesktop.classList.add('is-parallax') : ''; + } +} + +function handleLayer2(height) { + onScroll(({ top, bottom }) => { + if (0 <= top && bottom <= height) { + layer2.classList.add('is-animating'); + return false; + } + }); +} diff --git a/src/templates/ssr/fabric/test.json b/src/templates/ssr/fabric/test.json new file mode 100644 index 00000000..2b68ef95 --- /dev/null +++ b/src/templates/ssr/fabric/test.json @@ -0,0 +1,29 @@ +{ + "ClickthroughUrl": "http://www.chloe.com/en/content/faye", + "Trackingpixel": "", + "Researchpixel": "", + "Viewabilitypixel": "", + "thirdPartyJSTracking": " ", + "BackgroundScrollType": "fixed", + "BackgroundColour": "transparent", + "BackgroundImage": "", + "BackgroundImagePosition": "right top", + "BackgroundImageRepeat": "no-repeat", + "Layer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkMOfzwEQARgBMggbYy-x5U-ffg", + "Layer1BackgroundPosition": "center center", + "Layer2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", + "Layer2BackgroundPosition": "right top", + "Layer2BackgroundAnimation": "disabled", + "Layer2BackgroundAnimationPosition": "left", + "Layer3BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", + "Layer3BackgroundPosition": "left bottom", + "MobileBackgroundImage": "", + "MobileBackgroundImagePosition": "center center", + "MobileBackgroundImageRepeat": "repeat-y", + "MobileLayer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOPmLBABGAEyCNJtt5a-pC0F", + "MobileLayer1BackgroundPosition": "left top", + "MobileLayer2BackgroundImage": "", + "MobileLayer2BackgroundPosition": "left top", + "MobileLayer3BackgroundImage": "", + "MobileLayer3BackgroundPosition": "left top" + } From 60ce79e04d1f9a38b9e9968140d33e8c149c5f39 Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Wed, 27 Dec 2023 12:48:21 +0000 Subject: [PATCH 19/25] Add AdvertisementLabel component and test.json --- src/templates/components/AdvertisementLabel.svelte | 2 ++ src/templates/ssr/fabric/test.json | 4 +--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte index 7a75f787..d0e2b10e 100644 --- a/src/templates/components/AdvertisementLabel.svelte +++ b/src/templates/components/AdvertisementLabel.svelte @@ -6,9 +6,11 @@ @import './fonts/Sans.css'; @import './colours/palette.scss'; @import '../../styles/helpers.scss'; + $gs-gutter: 20px; $f-sans-serif-text: 'Guardian Text Sans Web', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif !default; + .label { background-color: $neutral-8; border-top: 1px solid $neutral-5; diff --git a/src/templates/ssr/fabric/test.json b/src/templates/ssr/fabric/test.json index 2b68ef95..2a9553e1 100644 --- a/src/templates/ssr/fabric/test.json +++ b/src/templates/ssr/fabric/test.json @@ -13,8 +13,6 @@ "Layer1BackgroundPosition": "center center", "Layer2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", "Layer2BackgroundPosition": "right top", - "Layer2BackgroundAnimation": "disabled", - "Layer2BackgroundAnimationPosition": "left", "Layer3BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", "Layer3BackgroundPosition": "left bottom", "MobileBackgroundImage": "", @@ -26,4 +24,4 @@ "MobileLayer2BackgroundPosition": "left top", "MobileLayer3BackgroundImage": "", "MobileLayer3BackgroundPosition": "left top" - } +} From 571bbb01ae0bc59a719ff55e678e9714d932b04f Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Thu, 28 Dec 2023 09:59:37 +0000 Subject: [PATCH 20/25] Remove unnecessary files from this PR but adding the old func name --- src/lib/gam.ts | 4 ++-- src/templates/csr/capi-single-paidfor/index.svelte | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/lib/gam.ts b/src/lib/gam.ts index 64b17989..c82a9c70 100644 --- a/src/lib/gam.ts +++ b/src/lib/gam.ts @@ -23,7 +23,7 @@ const replaceGAMVariables = ( return output; }; -const addPixel = (url: string) => { +const addTrackingPixel = (url: string) => { const pixel = new Image(); pixel.src = url + CACHE_BUST; }; @@ -38,7 +38,7 @@ export { CACHE_BUST, CLICK_MACRO, DEST_URL, - addPixel, + addTrackingPixel, gamVar, isValidReplacedVariable, replaceGAMVariables, diff --git a/src/templates/csr/capi-single-paidfor/index.svelte b/src/templates/csr/capi-single-paidfor/index.svelte index dfbe115e..73f9cf24 100644 --- a/src/templates/csr/capi-single-paidfor/index.svelte +++ b/src/templates/csr/capi-single-paidfor/index.svelte @@ -11,14 +11,14 @@ import CapiCard from '$templates/components/CapiCard.svelte'; import PaidForHeader from '$templates/components/PaidForHeader.svelte'; + import { addTrackingPixel, isValidReplacedVariable } from '$lib/gam'; import SetHeightResizer from '$templates/components/SetHeightResizer.svelte'; - import { addPixel, isValidReplacedVariable } from '$lib/gam'; export let SeriesUrl: GAMVariable; export let ComponentTitle: GAMVariable; export let Trackingpixel: GAMVariable; - if (isValidReplacedVariable(Trackingpixel)) addPixel(Trackingpixel); + if (isValidReplacedVariable(Trackingpixel)) addTrackingPixel(Trackingpixel); const promise: Promise = fetch( `${api}?k=${encodeURI(SeriesUrl)}`, From f3da325426d8402c0124655ef9d7094d84506a3a Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 25 Jan 2024 13:01:55 +0000 Subject: [PATCH 21/25] Update advertisement label not to use pallette (will be reinstated in follow-up PR) Co-authored-by: Jake Lee Kennedy --- .../components/AdvertisementLabel.svelte | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte index d0e2b10e..4236e52f 100644 --- a/src/templates/components/AdvertisementLabel.svelte +++ b/src/templates/components/AdvertisementLabel.svelte @@ -1,30 +1,28 @@ -
-
Advertisement
+
+
Advertisement
From 0b11f10584ac09124bd4e7502bcbddee1a55815b Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 25 Jan 2024 13:10:44 +0000 Subject: [PATCH 22/25] Use simpler class names. Remove helpers file. Co-authored-by: Jake Lee Kennedy --- src/templates/csr/fabric/index.svelte | 156 ++++++++++++++------------ 1 file changed, 84 insertions(+), 72 deletions(-) diff --git a/src/templates/csr/fabric/index.svelte b/src/templates/csr/fabric/index.svelte index 7b2f7c59..614748df 100644 --- a/src/templates/csr/fabric/index.svelte +++ b/src/templates/csr/fabric/index.svelte @@ -64,93 +64,105 @@ -
- -
-
-
-
-
- - {#if isValidReplacedVariable(Trackingpixel)} - - {:else if isValidReplacedVariable(Researchpixel)} - - {:else if isValidReplacedVariable(Viewabilitypixel)} - - {/if} -
+ +
+
+
+
+
+ +{#if isValidReplacedVariable(Trackingpixel)} + +{:else if isValidReplacedVariable(Researchpixel)} + +{:else if isValidReplacedVariable(Viewabilitypixel)} + +{/if} {@html thirdPartyJSTracking} From 91486d06211a471e5ef621285ff87b28727243ec Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 25 Jan 2024 13:11:09 +0000 Subject: [PATCH 23/25] delete superfluous files Co-authored-by: Jake Lee Kennedy --- src/lib/messenger/on-scroll.ts | 39 ------- src/lib/messenger/on-viewport.ts | 27 ----- src/styles/helpers.scss | 20 ---- src/templates/ssr/fabric/index.svelte | 153 -------------------------- src/templates/ssr/fabric/index.ts | 101 ----------------- src/templates/ssr/fabric/test.json | 27 ----- 6 files changed, 367 deletions(-) delete mode 100644 src/lib/messenger/on-scroll.ts delete mode 100644 src/lib/messenger/on-viewport.ts delete mode 100644 src/styles/helpers.scss delete mode 100644 src/templates/ssr/fabric/index.svelte delete mode 100644 src/templates/ssr/fabric/index.ts delete mode 100644 src/templates/ssr/fabric/test.json diff --git a/src/lib/messenger/on-scroll.ts b/src/lib/messenger/on-scroll.ts deleted file mode 100644 index d7536470..00000000 --- a/src/lib/messenger/on-scroll.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { postAndListen } from '$lib/messenger'; - -interface ScrollResponse { - width: number; - height: number; - top: number; - bottom: number; - left: number; - right: number; -} - -const isScrollReply = (json: unknown): json is ScrollResponse => { - const reply = json as ScrollResponse; - return ( - 'width' in reply && - 'height' in reply && - 'top' in reply && - 'bottom' in reply && - 'left' in reply && - 'right' in reply && - typeof reply.width === 'number' && - typeof reply.height === 'number' && - typeof reply.top === 'number' && - typeof reply.bottom === 'number' && - typeof reply.left === 'number' && - typeof reply.right === 'number' - ); -}; -const onScroll = async () => { - const response = await postAndListen({ type: 'scroll', value: '' }); - - if (!isScrollReply(response)) { - throw new Error('Invalid onScroll response'); - } - - return response; -}; - -export { onScroll }; diff --git a/src/lib/messenger/on-viewport.ts b/src/lib/messenger/on-viewport.ts deleted file mode 100644 index 9d1f4c9f..00000000 --- a/src/lib/messenger/on-viewport.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { postAndListen } from '$lib/messenger'; - -interface ViewportResponse { - width: number; - height: number; -} - -const isViewportReply = (json: unknown): json is ViewportResponse => { - const reply = json as ViewportResponse; - return ( - 'width' in reply && - 'height' in reply && - typeof reply.width === 'number' && - typeof reply.height === 'number' - ); -}; -const onViewport = async () => { - const response = await postAndListen({ type: 'viewport', value: '' }); - - if (!isViewportReply(response)) { - throw new Error('Invalid onViewport response'); - } - - return response; -}; - -export { onViewport }; diff --git a/src/styles/helpers.scss b/src/styles/helpers.scss deleted file mode 100644 index 682aa098..00000000 --- a/src/styles/helpers.scss +++ /dev/null @@ -1,20 +0,0 @@ -.gs-container { - position: relative; - margin: 0 auto; - - @media (min-width: 740px) { - max-width: 740px; - } - - @media (min-width: 980px) { - max-width: 980px; - } - - @media (min-width: 1140px) { - max-width: 1140px; - } - - @media (min-width: 1300px) { - max-width: 1300px; - } -} diff --git a/src/templates/ssr/fabric/index.svelte b/src/templates/ssr/fabric/index.svelte deleted file mode 100644 index ef7c2e60..00000000 --- a/src/templates/ssr/fabric/index.svelte +++ /dev/null @@ -1,153 +0,0 @@ - - - -
-
- Advertisement -
-
-
- -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
- -
-{thirdPartyJSTracking} - - diff --git a/src/templates/ssr/fabric/index.ts b/src/templates/ssr/fabric/index.ts deleted file mode 100644 index 01d25b6c..00000000 --- a/src/templates/ssr/fabric/index.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { onScroll } from '$lib/messenger/on-scroll.js'; -import { onViewport } from '$lib/messenger/on-viewport.js'; -import { - getIframeId, - reportClicks, - resizeIframeHeight, - sendMessage, -} from '../../../../legacy/src/_shared/js/messages.js'; -import { write } from '../../_shared/js/dom.js'; - -const layer2 = document.getElementById('layer2'); -const linkDesktop = document.getElementById('linkDesktop'); - -if (layer2.classList.contains('creative__layer2--animation-disabled')) { - write(() => (layer2.style.backgroundPosition = '{Layer2BackgroundPosition}')); -} - -const isMobile = window.matchMedia('(max-width: 739px)').matches; -const isTablet = window.matchMedia( - '(min-width: 740px) and (max-width: 979px)', -).matches; -handleBackground(isMobile, isTablet); - -if ( - !isMobile && - layer2.classList.contains('creative__layer2--animation-enabled') -) { - onViewport() - .then(async ({ height }) => { - const { top, bottom } = await onScroll(); - if (0 <= top && bottom <= height) { - layer2.classList.add('is-animating'); - return Promise.resolve(); - } - }) - .catch((error) => { - console.log(error); - }); -} - -function handleBackground(isMobile, isTablet) { - const scrollType = '{BackgroundScrollType}'; - const backgroundColour = '{BackgroundColour}'; - const [backgroundImage, backgroundPosition, backgroundRepeat, creativeLink] = - isMobile - ? [ - '{MobileBackgroundImage}', - '{MobileBackgroundImagePosition}', - '{MobileBackgroundImageRepeat}', - document.getElementById('linkMobile'), - ] - : [ - '{BackgroundImage}', - '{BackgroundImagePosition}', - '{BackgroundImageRepeat}', - document.getElementById('linkDesktop'), - ]; - - handlePadding(scrollType); - - if (backgroundColour) { - document.documentElement.style.backgroundColor = backgroundColour; - } - - if (!backgroundImage) return; - if (scrollType === 'none') { - write(() => { - Object.assign(creativeLink.style, { - backgroundImage: `url('${backgroundImage}')`, - backgroundPosition, - backgroundRepeat, - }); - }); - } else { - sendMessage('background', { - scrollType: - scrollType === 'parallax' && (isMobile || isTablet) - ? 'fixed' - : scrollType, - backgroundColour, - backgroundImage: `url('${backgroundImage}')`, - backgroundRepeat, - backgroundPosition, - }); - } -} - -function handlePadding(scrollType) { - if (scrollType === 'parallax') { - linkDesktop !== undefined ? linkDesktop.classList.add('is-parallax') : ''; - } -} - -function handleLayer2(height) { - onScroll(({ top, bottom }) => { - if (0 <= top && bottom <= height) { - layer2.classList.add('is-animating'); - return false; - } - }); -} diff --git a/src/templates/ssr/fabric/test.json b/src/templates/ssr/fabric/test.json deleted file mode 100644 index 2a9553e1..00000000 --- a/src/templates/ssr/fabric/test.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "ClickthroughUrl": "http://www.chloe.com/en/content/faye", - "Trackingpixel": "", - "Researchpixel": "", - "Viewabilitypixel": "", - "thirdPartyJSTracking": " ", - "BackgroundScrollType": "fixed", - "BackgroundColour": "transparent", - "BackgroundImage": "", - "BackgroundImagePosition": "right top", - "BackgroundImageRepeat": "no-repeat", - "Layer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkMOfzwEQARgBMggbYy-x5U-ffg", - "Layer1BackgroundPosition": "center center", - "Layer2BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", - "Layer2BackgroundPosition": "right top", - "Layer3BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOOaNBABGAEyCO6_HUzgllVz", - "Layer3BackgroundPosition": "left bottom", - "MobileBackgroundImage": "", - "MobileBackgroundImagePosition": "center center", - "MobileBackgroundImageRepeat": "repeat-y", - "MobileLayer1BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDLkOPmLBABGAEyCNJtt5a-pC0F", - "MobileLayer1BackgroundPosition": "left top", - "MobileLayer2BackgroundImage": "", - "MobileLayer2BackgroundPosition": "left top", - "MobileLayer3BackgroundImage": "", - "MobileLayer3BackgroundPosition": "left top" -} From d7e616e6e782fb0c2120e9019ba6960d204931b1 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Thu, 25 Jan 2024 17:45:18 +0000 Subject: [PATCH 24/25] fix ad label positioning. Remove unneeded media queries --- .../components/AdvertisementLabel.svelte | 4 ++- src/templates/csr/fabric/index.svelte | 25 +++---------------- 2 files changed, 6 insertions(+), 23 deletions(-) diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte index 4236e52f..39f05219 100644 --- a/src/templates/components/AdvertisementLabel.svelte +++ b/src/templates/components/AdvertisementLabel.svelte @@ -6,6 +6,9 @@ @import './fonts/Sans.css'; .container { + position: relative; + padding: 0 calc(50% - 650px); + height: 2em; background-color: #f6f6f6; border-top: 1px solid #dcdcdc; color: #707070; @@ -14,7 +17,6 @@ font-size: 0.75rem; line-height: 1.9; font-weight: 400; - height: 2em; box-sizing: border-box; } diff --git a/src/templates/csr/fabric/index.svelte b/src/templates/csr/fabric/index.svelte index 614748df..163cdaad 100644 --- a/src/templates/csr/fabric/index.svelte +++ b/src/templates/csr/fabric/index.svelte @@ -116,29 +116,10 @@ margin: 0 auto; height: 250px; overflow: hidden; + padding: 0 calc(50% - 650px); - @media (min-width: 740px) { - max-width: 740px; - } - - @media (min-width: 980px) { - max-width: 980px; - } - - @media (min-width: 1140px) { - max-width: 1140px; - } - - @media (min-width: 1300px) { - max-width: 1300px; - } - - &.is-parallax { - padding: 0 calc(50% - 650px); - - .layer { - background-size: auto; - } + &.is-parallax .layer { + background-size: auto; } } From 833aff91162e06f0543ea644d0863fa655a7463d Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Mon, 29 Jan 2024 13:20:37 +0000 Subject: [PATCH 25/25] Correct width of ad and ad label --- .../components/AdvertisementLabel.svelte | 27 +++++++- src/templates/csr/fabric/index.svelte | 63 ++++++++++--------- 2 files changed, 60 insertions(+), 30 deletions(-) diff --git a/src/templates/components/AdvertisementLabel.svelte b/src/templates/components/AdvertisementLabel.svelte index 39f05219..07f50553 100644 --- a/src/templates/components/AdvertisementLabel.svelte +++ b/src/templates/components/AdvertisementLabel.svelte @@ -1,4 +1,8 @@ -
+ + +
Advertisement
@@ -7,7 +11,6 @@ .container { position: relative; - padding: 0 calc(50% - 650px); height: 2em; background-color: #f6f6f6; border-top: 1px solid #dcdcdc; @@ -18,6 +21,26 @@ line-height: 1.9; font-weight: 400; box-sizing: border-box; + + &.fullWidth { + padding: 0 calc(50% - 650px); // Keep the label central for large screens + } + + &:not(.fullWidth) { + margin: 0 auto; + @media (min-width: 740px) { + max-width: 740px; + } + @media (min-width: 980px) { + max-width: 980px; + } + @media (min-width: 1140px) { + max-width: 1140px; + } + @media (min-width: 1300px) { + max-width: 1300px; + } + } } .text { diff --git a/src/templates/csr/fabric/index.svelte b/src/templates/csr/fabric/index.svelte index 163cdaad..b9c0d41c 100644 --- a/src/templates/csr/fabric/index.svelte +++ b/src/templates/csr/fabric/index.svelte @@ -63,37 +63,36 @@ - + -
-
-
-
-
+
+
+
+ {#if isValidReplacedVariable(Trackingpixel)} {:else if isValidReplacedVariable(Researchpixel)} @@ -116,15 +115,23 @@ margin: 0 auto; height: 250px; overflow: hidden; - padding: 0 calc(50% - 650px); &.is-parallax .layer { background-size: auto; } - } - .creative-container { - position: relative; + @media (min-width: 740px) { + max-width: 740px; + } + @media (min-width: 980px) { + max-width: 980px; + } + @media (min-width: 1140px) { + max-width: 1140px; + } + @media (min-width: 1300px) { + max-width: 1300px; + } } .layer {