diff --git a/.github/workflows/visual-regression.yml b/.github/workflows/visual-regression.yml index 3fba5625..c73c3e23 100644 --- a/.github/workflows/visual-regression.yml +++ b/.github/workflows/visual-regression.yml @@ -77,3 +77,10 @@ jobs: }); } } + + - uses: actions/upload-artifact@v4 + if: always() + with: + name: visual-regression-report + path: ./test-results/ + retention-days: 5 diff --git a/legacy/src/capi-multiple-hosted/test.json b/legacy/src/capi-multiple-hosted/test.json deleted file mode 100644 index 06be95ac..00000000 --- a/legacy/src/capi-multiple-hosted/test.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "ComponentTitle": "Hosted Content", - "SeriesURL": "advertiser-content/best-of-all-its-in-hong-kong", - "BrandColour": "#201641", - "numberOfElements": "4", - "TrackingID": "", - "Article1URL": "", - "Article2URL": "", - "Article3URL": "", - "Article4URL": "", - "Article1Headline": "", - "Article2Headline": "", - "Article3Headline": "", - "Article4Headline": "", - "Article1Kicker": "", - "Article2Kicker": "", - "Article3Kicker": "", - "Article4Kicker": "", - "Article1Image": "", - "Article2Image": "", - "Article3Image": "", - "Article4Image": "" -} diff --git a/legacy/src/capi-multiple-hosted/web/index.html b/legacy/src/capi-multiple-hosted/web/index.html deleted file mode 100644 index a32bb2bd..00000000 --- a/legacy/src/capi-multiple-hosted/web/index.html +++ /dev/null @@ -1,32 +0,0 @@ - -
-
-

- From our advertisers -

-
-
- -
-
-
- - - - diff --git a/legacy/src/capi-multiple-hosted/web/index.js b/legacy/src/capi-multiple-hosted/web/index.js deleted file mode 100644 index 4f167b47..00000000 --- a/legacy/src/capi-multiple-hosted/web/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import capiMultiple from '../../_shared/js/capi-multiple.js'; -import addColourContrastClass from '../../_shared/js/hosted-colours.js'; - - -function generateLogo(logoUrl) { - return `
-

Advertiser content

- -
` -} - - -capiMultiple("hosted", generateLogo) - .then(() => addColourContrastClass()); diff --git a/legacy/src/capi-multiple-hosted/web/index.scss b/legacy/src/capi-multiple-hosted/web/index.scss deleted file mode 100644 index 978ebf14..00000000 --- a/legacy/src/capi-multiple-hosted/web/index.scss +++ /dev/null @@ -1,31 +0,0 @@ -@import '_core'; -@import '_adverts-capi'; -@import '_hosted'; -@import '_adverts-merchandising'; - -.advert__image-container { - position: relative; - img { - position: absolute; - top: 0; - height: 100%; - width: 100%; - object-fit: cover; - } -} - -.advert__kicker { - color: inherit; - opacity: .5; -} - -.advert__title > .icon { - width: 1.1em; - height: .75em; - fill: #333333; - opacity: .5; - - .hosted-bright & { - fill: #ffffff; - } -} diff --git a/legacy/src/capi-multiple-paidfor/test.json b/legacy/src/capi-multiple-paidfor/test.json deleted file mode 100644 index 64e930ee..00000000 --- a/legacy/src/capi-multiple-paidfor/test.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "ComponentTitle": "Barclays Lets Go Forward", - "SeriesURL": "barclays-lets-go-forward", - "Brand": "Barclays", - "TrackingID": "", - "Article1Headline": "", - "Article1Kicker": "GDPR", - "Article1URL": "", - "Article1Image": "", - - "Article2Headline": "", - "Article2Kicker": "", - "Article2URL": "", - "Article2Image": "", - - "Article3Headline": "", - "Article3Kicker": "", - "Article3URL": "", - "Article3Image": "", - - "Article4Headline": "", - "Article4Kicker": "", - "Article4URL": "", - "Article4Image": "" -} diff --git a/legacy/src/capi-multiple-paidfor/web/index.html b/legacy/src/capi-multiple-paidfor/web/index.html deleted file mode 100644 index 58450da0..00000000 --- a/legacy/src/capi-multiple-paidfor/web/index.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - diff --git a/legacy/src/capi-multiple-paidfor/web/index.js b/legacy/src/capi-multiple-paidfor/web/index.js deleted file mode 100644 index 8da2688a..00000000 --- a/legacy/src/capi-multiple-paidfor/web/index.js +++ /dev/null @@ -1,13 +0,0 @@ -import capiMultiple from '../../_shared/js/capi-multiple.js'; -import { clickMacro } from '../../_shared/js/ads'; - -function generateLogo(logoUrl, brandUrl, customCSS) { - return `
- Paid for by - - - -
`; -} - -capiMultiple("paidfor", generateLogo); diff --git a/legacy/src/capi-multiple-paidfor/web/index.scss b/legacy/src/capi-multiple-paidfor/web/index.scss deleted file mode 100644 index b3153f78..00000000 --- a/legacy/src/capi-multiple-paidfor/web/index.scss +++ /dev/null @@ -1,50 +0,0 @@ -@import '_core'; -@import '_adverts'; -@import '_advert'; -@import '_adverts-capi'; -@import '_paidfor-meta'; -@import '_palette'; -@import '_popup-paidfor'; -@import '_adverts-merchandising'; - -.adverts { - color: $neutral-1; -} - -.advert__title { - @include mq($until: tablet) { - flex: 1 0 50%; - } -} - -.badge { - display: block; -} - -.badge__label { - width: 100%; - text-align: right; -} - -.badge__logo { - margin-left: 10px; - max-width: $gs-gutter * 5; -} - -.adverts__logo:hover { - text-decoration: underline; -} - -.icon--glabs-logo { - width: 75px; - max-height: 31px; -} - -.adverts__stamp { - @include mq($until: tablet) { - position: absolute; - right: $gs-gutter / 2; - top: $gs-baseline / 2; - } - -} diff --git a/legacy/src/capi-single-paidfor/test.json b/legacy/src/capi-single-paidfor/test.json deleted file mode 100644 index 5d6cb598..00000000 --- a/legacy/src/capi-single-paidfor/test.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "SeriesUrl": "/the-future-of-work--forging-an-inclusive-economy/the-future-of-work--forging-an-inclusive-economy", - "ComponentTitle": "The Future of Work: Forging an inclusive economy", - "CustomUrl": "", - "ArticleHeadline": "", - "ArticleUrl": "", - "ArticleImage": "", - "BrandLogo": "" -} diff --git a/legacy/src/capi-single-paidfor/web/index.html b/legacy/src/capi-single-paidfor/web/index.html deleted file mode 100644 index 2f67eff1..00000000 --- a/legacy/src/capi-single-paidfor/web/index.html +++ /dev/null @@ -1,60 +0,0 @@ - - diff --git a/legacy/src/capi-single-paidfor/web/index.js b/legacy/src/capi-single-paidfor/web/index.js deleted file mode 100644 index 675b7a38..00000000 --- a/legacy/src/capi-single-paidfor/web/index.js +++ /dev/null @@ -1,82 +0,0 @@ -import { enableToggles } from '../../_shared/js/ui'; -import { write } from '../../_shared/js/dom'; -import { getIframeId, getWebfonts, resizeIframeHeight, reportClicks, onViewport } from '../../_shared/js/messages'; -import { generatePicture, checkIcon } from '../../_shared/js/capi-images.js'; -import { clickMacro, setEditionLink } from '../../_shared/js/ads'; -import { hideOnError, URLSearchParams } from '../../_shared/js/utils'; - -let container = document.querySelector('.adverts__body'); -let params = new URLSearchParams(); -let keywords = '[%SeriesUrl%]'; -let customUrl = '[%CustomUrl%]'; - -if (customUrl !== '') { - params.append('t', customUrl); -} else { - params.append('k', keywords); -} - -reportClicks(); -enableToggles(); -getIframeId() -.then(({ host }) => Promise.all([ - getWebfonts(), - fetch(`https://api.nextgen.guardianapps.co.uk/commercial/api/capi-single.json?${params}`) - .then(response => response.json()) - .then(json => populateCard(host, json)) - .then(html => write(() => container.innerHTML = html)) -])) -.then(() => { - let lastWidth; - onViewport(({ width }) => { - if( lastWidth !== width ) { - resizeIframeHeight(); - lastWidth = width; - } - }); -}) -.catch( error => hideOnError(error, 'capi-single-paidfor')); - -function getValue(value, fallback) { - return value || fallback; -} - -function populateCard(host, responseJson) { - let icon = checkIcon(responseJson) - setEditionLink(host, responseJson.edition, document.querySelector('.creative__glabs-link')); - let imageUrl = '[%ArticleImage%]'; - - return ` -
- -
`; -} diff --git a/legacy/src/capi-single-paidfor/web/index.scss b/legacy/src/capi-single-paidfor/web/index.scss deleted file mode 100644 index 5a9f0d1a..00000000 --- a/legacy/src/capi-single-paidfor/web/index.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import "_core"; -@import "_adverts"; -@import "_advert"; -@import "_adverts-capi"; -@import "_paidfor-meta"; -@import "_popup-paidfor"; - -.paidfor-meta__more .paidfor-meta__label { - font-weight: normal; -} - -.adverts--legacy-single.adverts--capi.adverts--paidfor { - .adverts__row, - .adverts__body { - padding: 0; - } - - .advert { - @include mq(mobileLandscape) { - flex-grow: 1; - } - } - - .advert__image-container { - flex-basis: 100%; - height: 100%; - - @include mq(tablet) { - flex-basis: 500px; - flex-grow: 0; - } - } - - .advert__text { - justify-content: space-between; - flex-grow: 1; - } - - .badge { - width: 200px; - text-align: left; - - &::before { - display: none; - } - - .badge__logo { - display: block; - max-width: 200px; - margin-left: 0; - } - } -} - -.icon--glabs-logo { - width: 75px; - max-height: 31px; -} diff --git a/legacy/src/fabric-custom/test.json b/legacy/src/fabric-custom/test.json deleted file mode 100644 index dbe163d0..00000000 --- a/legacy/src/fabric-custom/test.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "DapAssetsFolder": "test-creative", - "ThirdPartyTag": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKCrtKGjoAEQARgBMgjYagW3ARF6Fw", - "TrackingPixel": "https://gu.com/tracking-pixel.gif", - "ResearchPixel": "https://gu.com/research-pixel.gif", - "ViewabilityTracker": "", - "thirdPartyJSTracking": " " -} diff --git a/legacy/src/fabric-custom/web/index.html b/legacy/src/fabric-custom/web/index.html deleted file mode 100644 index 78968337..00000000 --- a/legacy/src/fabric-custom/web/index.html +++ /dev/null @@ -1,10 +0,0 @@ -{{#advertisementLabel}}{{/advertisementLabel}} -
- - - - - -
-[%thirdPartyJSTracking%] diff --git a/legacy/src/fabric-custom/web/index.js b/legacy/src/fabric-custom/web/index.js deleted file mode 100644 index 84bba9dd..00000000 --- a/legacy/src/fabric-custom/web/index.js +++ /dev/null @@ -1,50 +0,0 @@ -//@flow -import { getIframeId, resizeIframeHeight, getWebfonts } from '../../_shared/js/messages'; -import { write } from '../../_shared/js/dom'; - -const DapAssetsRoot = `https://s3-eu-west-1.amazonaws.com/adops-assets/dap-fabrics`; -const DapAssetsFolder = '[%DapAssetsFolder%]'; - -const DapAssetsPath = `${DapAssetsRoot}/${DapAssetsFolder}`; -const ThirdPartyTag = '[%ThirdPartyTag%]'; - -const ifThenPromise = (parameter, action) => { - if (parameter === 'true') { - return action(); - } else { - return Promise.resolve(); - } -} - -const fetchTag = (tagUrl: string) => { - return fetch(tagUrl) - .then(response => response.text()) -} - -const replaceAssetLinks = (html: string) => { - const re = /url\('\.\/(.*)'\)/g; - return html.replace(re, `url('${DapAssetsPath}/$1')`); -} - -const generateTag = () => { - if (DapAssetsFolder) { - return fetchTag(`${DapAssetsPath}/index.html`) - .then(replaceAssetLinks) - } else if (ThirdPartyTag) { - return fetchTag(`[%ThirdPartyTag%]`) - } -}; - -const insertTag = (tag) => { - const placeholder = document.getElementById('js-fabric-custom'); - const range = document.createRange(); - range.setStart(placeholder, 0); - range.setEnd(placeholder, 0); - placeholder.appendChild(range.createContextualFragment(tag)); -}; - -getIframeId() -.then(() => getWebfonts()) -.then(() => generateTag()) -.then(tag => insertTag(tag)) -.then(() => resizeIframeHeight()); diff --git a/legacy/src/fabric-custom/web/index.scss b/legacy/src/fabric-custom/web/index.scss deleted file mode 100644 index 9bd3561d..00000000 --- a/legacy/src/fabric-custom/web/index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import '_core'; -@import '_adverts-fabric'; diff --git a/legacy/src/fabric-xl/test.json b/legacy/src/fabric-xl/test.json deleted file mode 100644 index ddc46b3b..00000000 --- a/legacy/src/fabric-xl/test.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "ClickthroughUrl": "http://www.chloe.com/en/content/faye", - "Trackingpixel": "", - "Researchpixel": "", - "Viewabilitypixel": "", - "thirdPartyJSTracking": " ", - "BackgroundScrollType": "none", - "BackgroundColour": "transparent", - "BackgroundImage": "", - "BackgroundImagePosition": "right top", - "BackgroundImageRepeat": "no-repeat", - "Layer1BackgroundImage": "https://tpc.googlesyndication.com/simgad/6970789288532697512?", - "Layer1BackgroundPosition": "center center", - "Layer2BackgroundImage": "https://tpc.googlesyndication.com/simgad/7088419982815615043?", - "Layer2BackgroundPosition": "right top", - "Layer2BackgroundAnimation": "disabled", - "Layer2BackgroundAnimationPosition": "left", - "Layer3BackgroundImage": "", - "Layer3BackgroundPosition": "left bottom", - "MobileBackgroundImage": "", - "MobileBackgroundImagePosition": "center center", - "MobileBackgroundImageRepeat": "repeat-y", - "MobileLayer1BackgroundImage": "", - "MobileLayer1BackgroundPosition": "left top", - "MobileLayer2BackgroundImage": "", - "MobileLayer2BackgroundPosition": "left top", - "MobileLayer3BackgroundImage": "", - "MobileLayer3BackgroundPosition": "left top" -} diff --git a/legacy/src/fabric-xl/web/index.html b/legacy/src/fabric-xl/web/index.html deleted file mode 100644 index 09602033..00000000 --- a/legacy/src/fabric-xl/web/index.html +++ /dev/null @@ -1,47 +0,0 @@ -{{#advertisementLabel}}{{/advertisementLabel}} -
- -
-
-
-
-
-
-
- - - -
-
-
-
-
-
-
- - - - - - -
-[%thirdPartyJSTracking%] diff --git a/legacy/src/fabric-xl/web/index.js b/legacy/src/fabric-xl/web/index.js deleted file mode 100644 index d5781150..00000000 --- a/legacy/src/fabric-xl/web/index.js +++ /dev/null @@ -1,57 +0,0 @@ -import { getIframeId, sendMessage, resizeIframeHeight, reportClicks } from '../../_shared/js/messages.js'; -import { write } from '../../_shared/js/dom.js'; - -let linkDesktop = document.getElementById('linkDesktop'); - - -getIframeId() -.then(() => { - reportClicks(); - resizeIframeHeight(524);//to take into acoount the ad slot label - - const isMobile = window.matchMedia('(max-width: 739px)').matches; - const isTablet = window.matchMedia('(min-width: 740px) and (max-width: 979px)').matches; - handleBackground(isMobile, isTablet); - - -function handleBackground(isMobile, isTablet) { - let scrollType = '[%BackgroundScrollType%]'; - let backgroundColour = '[%BackgroundColour%]'; - let [ 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') : ''; - } -} - -}); - diff --git a/legacy/src/fabric-xl/web/index.scss b/legacy/src/fabric-xl/web/index.scss deleted file mode 100644 index 07370b05..00000000 --- a/legacy/src/fabric-xl/web/index.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import '_core'; - -.creative--fabric { - &, - .creative__link { - height: 500px; - overflow: hidden; - } - .is-parallax { - &.gs-container { - padding: 0 calc(50% - 650px); - } - } - - .creative__layer1 { z-index: 1; } - .creative__layer2 { z-index: 2; } - .creative__layer3 { z-index: 3; } - - .creative__background, - .creative__alt, - .creative__layer { - width: 100%; - height: 500px; - position: absolute; - top: 0; - left: 0; - background-repeat: no-repeat; - background-size: cover; - } - - .creative__background { - background-position: center; - } - -} \ No newline at end of file diff --git a/legacy/src/fabric/test.json b/legacy/src/fabric/test.json deleted file mode 100644 index d3af8b35..00000000 --- a/legacy/src/fabric/test.json +++ /dev/null @@ -1,29 +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", - "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" -} diff --git a/legacy/src/fabric/web/index.html b/legacy/src/fabric/web/index.html deleted file mode 100644 index 45006d6f..00000000 --- a/legacy/src/fabric/web/index.html +++ /dev/null @@ -1,45 +0,0 @@ -{{#advertisementLabel}}{{/advertisementLabel}} -
- -
-
-
-
-
-
-
- - -
-
-
-
-
-
-
- - - - - -
-[%thirdPartyJSTracking%] diff --git a/legacy/src/fabric/web/index.js b/legacy/src/fabric/web/index.js deleted file mode 100644 index 228fa6b0..00000000 --- a/legacy/src/fabric/web/index.js +++ /dev/null @@ -1,74 +0,0 @@ -import { getIframeId, onViewport, onScroll, sendMessage, resizeIframeHeight, reportClicks } from '../../_shared/js/messages.js'; -import { write } from '../../_shared/js/dom.js'; - -let layer2 = document.getElementById('layer2'); -let linkDesktop = document.getElementById('linkDesktop'); - -if( layer2.classList.contains('creative__layer2--animation-disabled') ) { - write(() => layer2.style.backgroundPosition = '[%Layer2BackgroundPosition%]'); -} - -getIframeId() -.then(() => { - reportClicks(); - - let isMobile = window.matchMedia('(max-width: 739px)').matches; - let isTablet = window.matchMedia('(min-width: 740px) and (max-width: 979px)').matches; - handleBackground(isMobile, isTablet); - - - if( !isMobile && layer2.classList.contains('creative__layer2--animation-enabled') ) { - onViewport(({ height }) => { - handleLayer2(height); - return false; - }); - } -}); - -function handleBackground(isMobile, isTablet) { - let scrollType = '[%BackgroundScrollType%]'; - let backgroundColour = '[%BackgroundColour%]'; - let [ 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/legacy/src/fabric/web/index.scss b/legacy/src/fabric/web/index.scss deleted file mode 100644 index 36d997be..00000000 --- a/legacy/src/fabric/web/index.scss +++ /dev/null @@ -1,68 +0,0 @@ -@import '_core'; -@import '_adverts-fabric'; - -.creative--fabric { - &, - .creative__link { - height: 250px; - overflow: hidden; - } - .is-parallax { - &.gs-container { - padding: 0 calc(50% - 650px); - } - } - - .creative__layer1 { z-index: 1; } - .creative__layer2 { z-index: 2; } - .creative__layer3 { z-index: 3; } - - .creative__background, - .creative__alt, - .creative__layer { - width: 100%; - height: 250px; - position: absolute; - top: 0; - left: 0; - background-repeat: no-repeat; - } - - .creative__background { - background-position: center; - } - - .creative__layer2--animation-enabled { - animation-duration: 1.4s; - animation-delay: .4s; - animation-timing-function: ease; - animation-fill-mode: forwards; - animation-play-state: paused; - - &.creative__layer2--animation-pos-left { animation-name: textanimation-left; background-position: left -250px; } - &.creative__layer2--animation-pos-centre { animation-name: textanimation-centre; background-position: center -250px; } - &.creative__layer2--animation-pos-right { animation-name: textanimation-right; background-position: right -250px; } - - &.is-animating { - animation-play-state: running; - } - } -} - -@keyframes textanimation-left { - 0% { background-position: 0 -250px; } - 75% { background-position: 0 0; } - 100% { background-position: 0 0; } -} - -@keyframes textanimation-right { - 0% { background-position: right -250px; } - 75% { background-position: right 0; } - 100% { background-position: right 0; } -} - -@keyframes textanimation-centre { - 0% { background-position: center -250px; } - 75% { background-position: center 0; } - 100% { background-position: center 0; } -} diff --git a/legacy/src/interscroller/test.json b/legacy/src/interscroller/test.json deleted file mode 100644 index 019c01d1..00000000 --- a/legacy/src/interscroller/test.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "BackgroundImage": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDrrun_ZRABGAEyCKFQSaYU8JaG", - "ClickthroughUrl": "https://www.google.co.uk/" -} diff --git a/legacy/src/interscroller/web/index.html b/legacy/src/interscroller/web/index.html deleted file mode 100644 index 4013e7f3..00000000 --- a/legacy/src/interscroller/web/index.html +++ /dev/null @@ -1,5 +0,0 @@ -
- - - -
diff --git a/legacy/src/interscroller/web/index.js b/legacy/src/interscroller/web/index.js deleted file mode 100644 index e9bece1d..00000000 --- a/legacy/src/interscroller/web/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import { getIframeId, sendMessage,resizeIframeHeight, onViewport } from '../../_shared/js/messages.js'; -import { once } from '../../_shared/js/utils'; - -const updateBackground = () => { - - const [ scrollType, - backgroundImage, - backgroundRepeat, - backgroundPosition, - backgroundSize, - ctaUrl ] = [ - 'interscroller', - `url('[%BackgroundImage%]')`, - 'no-repeat', - 'center center', - 'cover', - `%%CLICK_URL_UNESC%%%%DEST_URL%%` - ]; - - sendMessage('background', { - scrollType, - backgroundImage, - backgroundRepeat, - backgroundPosition, - backgroundSize, - ctaUrl - }); -}; - -getIframeId('interscroller') -.then(() => {onViewport(once(updateBackground));}) -.then(() => resizeIframeHeight('85vh')); diff --git a/legacy/src/interscroller/web/index.scss b/legacy/src/interscroller/web/index.scss deleted file mode 100644 index ec82dc11..00000000 --- a/legacy/src/interscroller/web/index.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import '_core'; - -.creative--interscroller { - margin-top: 24px; -} - -.creative__pixel--displayNone { - display: none; -} diff --git a/legacy/src/manual-multiple/test.json b/legacy/src/manual-multiple/test.json deleted file mode 100644 index 6a1d835e..00000000 --- a/legacy/src/manual-multiple/test.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "TrackingId": "", - "Tone": "subs-rebrand", - "NumberofCards": "3", - "Title": "The Guardian Live", - "TitleURL": "", - "Explainer": "Discussions with The Guardian and interviews ", - "ViewAll": "View events", - "IsProminent": "false", - "Offer1Title": "Peter Carey in conversation", - "Offer1Image": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDrkYS0UhABGAEyCDZQMZwoEqIG", - "Offer1Meta": "Wednesday 17 January 2018", - "Offer1LinkText": "Book tickets", - "Offer1URL": "", - "Offer2Title": "Ten years on: the aftermath of the global financial crisis", - "Offer2Image": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDr8fDHyQEQARgBMghrCKnIYHk6ig", - "Offer2Meta": "Tuesday 30 January 2018", - "Offer2LinkText": "Book tickets", - "Offer2URL": "", - "Offer3Title": "Mikhail Khodorkovsky in conversation", - "Offer3Image": "https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDrqYDeAhABGAEyCEyDZAg8RiG5", - "Offer3Meta": "Wednesday 17 January 2018", - "Offer3LinkText": "Book tickets", - "Offer3URL": "", - "Offer4Title": "", - "Offer4Image": "", - "Offer4Meta": "", - "Offer4LinkText": "", - "Offer4URL": "" -} diff --git a/legacy/src/manual-multiple/web/index.html b/legacy/src/manual-multiple/web/index.html deleted file mode 100644 index f9477f9e..00000000 --- a/legacy/src/manual-multiple/web/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - diff --git a/legacy/src/manual-multiple/web/index.js b/legacy/src/manual-multiple/web/index.js deleted file mode 100644 index c4c24ab6..00000000 --- a/legacy/src/manual-multiple/web/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import { getIframeId, getWebfonts, reportClicks, resizeIframeHeight, onViewport } from '../../_shared/js/messages'; -import { cleanupButtons } from '../../_shared/js/creatives'; -import { write } from '../../_shared/js/dom'; - -function injectBranchLogo() { - let componentTone = '[%Tone%]'; - - Array.from(document.getElementsByClassName('brand_logo')).forEach(insertHeaderSvg); - - function insertHeaderSvg(div) { - write( () => div.insertAdjacentHTML('afterbegin', logoSvgs[componentTone]) ); - } -}; - -cleanupButtons(); -injectBranchLogo(); - -getIframeId() - .then(() => Promise.all([getWebfonts(), reportClicks()])) - .then(() => { - let lastWidth; - onViewport(({ width }) => { - if( width !== lastWidth ) { - lastWidth = width; - resizeIframeHeight(); - } - }); - }); diff --git a/legacy/src/manual-multiple/web/index.scss b/legacy/src/manual-multiple/web/index.scss deleted file mode 100644 index bbfb97ea..00000000 --- a/legacy/src/manual-multiple/web/index.scss +++ /dev/null @@ -1,24 +0,0 @@ -@import '_core'; -@import '_adverts'; -@import '_adverts-books'; -@import '_adverts-masterclasses'; -@import '_adverts-jobs'; -@import '_adverts-capi'; -@import '_adverts-brand'; -@import '_adverts-membership'; -@import '_adverts-travel'; -@import '_adverts-subscriptions'; -@import '_adverts-live'; -@import '_adverts-networks'; -@import '_adverts-shop'; -@import '_adverts-money'; -@import '_advert'; -@import '_adverts-futurelearn'; -@import '_adverts-weekly'; -@import '_adverts-members'; -@import '_adverts-patron'; -@import '_adverts-lifestyle'; -@import '_adverts-climate'; -@import '_adverts-support'; -@import '_adverts-subs-rebrand'; -@import '_adverts-merchandising'; diff --git a/legacy/src/manual-single/test.json b/legacy/src/manual-single/test.json deleted file mode 100644 index e75f2661..00000000 --- a/legacy/src/manual-single/test.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "ClickthroughUrl": "", - "OmnitureId": "", - "Tone": "brand-new", - "Title": "The Guardian Live", - "TitleURL": "https://theguardian.com/uk", - "Explainer": "Discussions and interviews", - "OfferTitle": "Peter Carey in conversation", - "OfferURL": "https://theguardian.com/uk", - "OfferImage": "https://media.guim.co.uk/b7c7ff33928095556c0763ae248168862cfb41f0/0_402_2666_1598/2000.jpg", - "OfferText": "Multi-award-winning author Peter Carey has tackled Australian identity and history.", - "OfferLinkText": "Find out more", - "ViewAll": "View all events" -} diff --git a/legacy/src/manual-single/web/index.html b/legacy/src/manual-single/web/index.html deleted file mode 100644 index b019ed9b..00000000 --- a/legacy/src/manual-single/web/index.html +++ /dev/null @@ -1,60 +0,0 @@ - - - - diff --git a/legacy/src/manual-single/web/index.js b/legacy/src/manual-single/web/index.js deleted file mode 100644 index 9bf9c5c2..00000000 --- a/legacy/src/manual-single/web/index.js +++ /dev/null @@ -1,28 +0,0 @@ -import { getIframeId, getWebfonts, reportClicks, resizeIframeHeight, onViewport } from '../../_shared/js/messages'; -import { cleanupButtons } from '../../_shared/js/creatives-single-item'; -import { write } from '../../_shared/js/dom'; - -function injectBranchLogo() { - let componentTone = '[%Tone%]'; - - Array.from(document.getElementsByClassName('brand_logo')).forEach(insertHeaderSvg); - - function insertHeaderSvg(div) { - write( () => div.insertAdjacentHTML('afterbegin', logoSvgs[componentTone]) ); - } -}; - -cleanupButtons(); -injectBranchLogo(); - -getIframeId() - .then(() => Promise.all([getWebfonts(), reportClicks()])) - .then(() => { - let lastWidth; - onViewport(({ width }) => { - if( width !== lastWidth ) { - lastWidth = width; - resizeIframeHeight(); - } - }); - }); diff --git a/legacy/src/manual-single/web/index.scss b/legacy/src/manual-single/web/index.scss deleted file mode 100644 index f13d7ade..00000000 --- a/legacy/src/manual-single/web/index.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import '_core'; -@import '_adverts'; -@import '_adverts-books'; -@import '_adverts-masterclasses'; -@import '_adverts-jobs'; -@import '_adverts-capi'; -@import '_adverts-brand'; -@import '_adverts-brand-new'; -@import '_adverts-membership'; -@import '_adverts-travel'; -@import '_adverts-subscriptions'; -@import '_adverts-live'; -@import '_adverts-networks'; -@import '_adverts-shop'; -@import '_adverts-money'; -@import '_advert'; -@import '_adverts-weekly'; -@import '_adverts-members'; -@import '_adverts-patron'; -@import '_adverts-lifestyle'; -@import '_adverts-climate'; -@import '_adverts-support'; diff --git a/playwright/capi-multiple-hosted.test.ts b/playwright/capi-multiple-hosted.test.ts index ecec3b45..f23ad7a9 100644 --- a/playwright/capi-multiple-hosted.test.ts +++ b/playwright/capi-multiple-hosted.test.ts @@ -14,7 +14,7 @@ test.describe('CAPI Multiple Hosted', () => { for (const width of templatePreviewWidths) { const referenceTemplateLocator = page .frameLocator(`[name='width-${width}']`) - .locator('html'); + .locator('aside'); // check that the template is present on the page expect(referenceTemplateLocator).toBeVisible(); // scroll to it @@ -36,7 +36,7 @@ test.describe('CAPI Multiple Hosted', () => { for (const width of templatePreviewWidths) { const testTemplateLocator = page .frameLocator(`[name='width-${width}']`) - .locator('html'); + .locator('aside'); // check that the template is present on the page expect(testTemplateLocator).toBeVisible(); // scroll to it diff --git a/playwright/capi-multiple-paidfor.test.ts b/playwright/capi-multiple-paidfor.test.ts index d4d290c3..7aa2326c 100644 --- a/playwright/capi-multiple-paidfor.test.ts +++ b/playwright/capi-multiple-paidfor.test.ts @@ -14,7 +14,7 @@ test.describe('CAPI Multiple Paidfor', () => { for (const width of templatePreviewWidths) { const referenceTemplateLocator = page .frameLocator(`[name='width-${width}']`) - .locator('html'); + .locator('aside'); // check that the template is present on the page expect(referenceTemplateLocator).toBeVisible(); // scroll to it @@ -36,7 +36,7 @@ test.describe('CAPI Multiple Paidfor', () => { for (const width of templatePreviewWidths) { const testTemplateLocator = page .frameLocator(`[name='width-${width}']`) - .locator('html'); + .locator('aside'); // check that the template is present on the page expect(testTemplateLocator).toBeVisible(); // scroll to it diff --git a/src/lib/Previews.svelte b/src/lib/Previews.svelte index 7838ed77..8cfd75cd 100644 --- a/src/lib/Previews.svelte +++ b/src/lib/Previews.svelte @@ -88,7 +88,7 @@ frameborder="0" {width} srcdoc={transformed} - height="360" + height="650" name={`width-${width}`} />