From c0b462b1e7c01d7fd67dc5b0768a66f94cb539fb Mon Sep 17 00:00:00 2001 From: Dina Hafez Date: Tue, 19 Dec 2023 15:21:42 +0000 Subject: [PATCH] Remove legacy events multiple template and js file --- legacy/README.md | 8 +- legacy/src/_shared/js/events-multiple.js | 172 ---------------------- legacy/src/events-multiple/test.json | 26 ---- legacy/src/events-multiple/web/index.html | 51 ------- legacy/src/events-multiple/web/index.js | 3 - legacy/src/events-multiple/web/index.scss | 6 - 6 files changed, 2 insertions(+), 264 deletions(-) delete mode 100644 legacy/src/_shared/js/events-multiple.js delete mode 100644 legacy/src/events-multiple/test.json delete mode 100644 legacy/src/events-multiple/web/index.html delete mode 100644 legacy/src/events-multiple/web/index.js delete mode 100644 legacy/src/events-multiple/web/index.scss diff --git a/legacy/README.md b/legacy/README.md index 5c07868b..5f7be816 100644 --- a/legacy/README.md +++ b/legacy/README.md @@ -4,7 +4,7 @@ - Create a `src/template-name` for the template you're migrating - Generate `index.html`, `index.scss` and `index.js` following current standards and the specification doc - Ensure that you are running at least `node` version 6. (You might want to run `nvm use 6`.) -- At the root of the repository run `npm install` and `npm run build`. +- At the root of the repository run `npm install` and `npm run build`. This will generate HTML and CSS artefacts under `/build/`, which can be copied into native styles in GAM. - You should now be able to test your templates. @@ -43,10 +43,6 @@ This will require you to use: - the [`portify`](https://github.com/guardian/commercial-templates/blob/master/src/_shared/js/dev.js) method in `src/_shared/js/dev.js` to programmatically switch between 7000 and 9000 when making outbound requests. - the [`JsonComponent`](https://github.com/guardian/frontend/blob/master/common/app/common/JsonComponent.scala) method to serve the JSON response from the frontend controller. This method wraps the JSON response in a [CORS](https://github.com/guardian/frontend/blob/master/common/app/model/Cors.scala) header which allows cross-origin requests. -### Automated ads - -A number of ads (`events-multiple` and `masterclass-multiple`) use a reader revenue endpoint. In their associated `test.json` files you will see that the URL's refer to `mem.thegulocal.com` as the domain. The `_src/js/events-multiple.js` needs to be updated to reflect this domain also. This requires the [`membership-frontend`](https://github.com/guardian/membership-frontend) to be running and using the `nginx` server. Make sure to set this up before testing these ads. - ## Testing on Frontend (Prod) There will shortly be an easier way to preview, but for now: @@ -63,7 +59,7 @@ There will shortly be an easier way to preview, but for now: ## Code conventions and pre-commit hooks -This project uses [stylelint](https://github.com/stylelint/). +This project uses [stylelint](https://github.com/stylelint/). To make stylelint list **ALL** errors and warnings, use: diff --git a/legacy/src/_shared/js/events-multiple.js b/legacy/src/_shared/js/events-multiple.js deleted file mode 100644 index a7d78387..00000000 --- a/legacy/src/_shared/js/events-multiple.js +++ /dev/null @@ -1,172 +0,0 @@ -import { - getIframeId, - getWebfonts, - resizeIframeHeight, - onViewport, - reportClicks -} from "./messages.js"; -import { write } from "./dom.js"; -import { enableToggles } from "./ui.js"; -import { generatePicture } from "./capi-images.js"; -import { clickMacro, setEditionLink } from "./ads"; -import { hideOnError, URLSearchParams } from "./utils"; - -const ENDPOINTS = { - live: "https://membership.theguardian.com/events.json", - masterclass: "https://membership.theguardian.com/masterclasses.json" -}; - -const OVERRIDES = { - urls: ["[%Offer1URL%]", "[%Offer2URL%]", "[%Offer3URL%]", "[%Offer4URL%]"], - metas: [ - "[%Offer1Meta%]", - "[%Offer2Meta%]", - "[%Offer3Meta%]", - "[%Offer4Meta%]" - ], - headlines: [ - "[%Offer1Title%]", - "[%Offer2Title%]", - "[%Offer3Title%]", - "[%Offer4Title%]" - ], - images: [ - "[%Offer1Image%]", - "[%Offer2Image%]", - "[%Offer3Image%]", - "[%Offer4Image%]" - ] -}; - -const getEventsData = ENDPOINT => { - return fetch(`${ENDPOINT}`) - .then(response => response.json()) - .then(json => json.events.filter(f => OVERRIDES.urls.includes(f.url))); -}; - -// Either from template, or workaround for IE (sigh). -function importCard(adType) { - const cardTemplate = document.getElementById(`${adType}-card`); - - // Modern browsers. - if (cardTemplate.content) { - return document.importNode(cardTemplate.content, true); - } else { - // Internet Explorer doesn't support templates. - const cardFragment = document.createDocumentFragment(); - const tempDiv = document.createElement("div"); - - tempDiv.innerHTML = cardTemplate.innerHTML; - while (tempDiv.firstChild) cardFragment.appendChild(tempDiv.firstChild); - return cardFragment; - } -} - -const boldTitle = title => { - return title.split(":")[1] - ? `${title.split(":")[0]}:${title.split(":")[1]}` - : `${title}`; -}; - -// Constructs the title part of the card: headline and media icon. -function buildTitle(card, cardInfo, cardNumber) { - let title = card.querySelector(".advert__title"); - let meta = card.querySelector(".advert__meta"); - let metaText = OVERRIDES.metas[cardNumber]; - - let headline = OVERRIDES.headlines[cardNumber] || boldTitle(cardInfo.title); - card.classList.add("advert--text"); - - card.setAttribute("data-link-name", headline); - - title.insertAdjacentHTML("beforeend", headline); - meta.insertAdjacentHTML("beforeend", metaText || ""); -} - -function injectBranchLogo() { - let componentTone = "[%Tone%]"; - - Array.from(document.getElementsByClassName("brand_logo")).forEach( - insertHeaderSvg - ); - - function insertHeaderSvg(div) { - write(() => div.insertAdjacentHTML("afterbegin", logoSvgs[componentTone])); - } -} - -function buildClickthroughUrl(originalUrl) { - const parsedUrl = new URL(originalUrl); - parsedUrl.searchParams.set("INTCMP", "[%TrackingId%]"); - const clickthroughUrl = `${clickMacro}${parsedUrl.toString()}`; - return clickthroughUrl; -} - -// Constructs an individual card. -function buildCard(cardInfo, cardNum, adType, cardsInfo) { - const cardFragment = importCard(adType); - const card = cardFragment.querySelector(`.advert--${adType}`); - const imgContainer = card.querySelector(".advert__image-container"); - const clickthroughUrl = buildClickthroughUrl(`${OVERRIDES.urls[cardNum]}`); - card.href = clickthroughUrl; - - buildTitle(card, cardInfo, cardNum); - const image = generatePicture({ - url: OVERRIDES.images[cardNum] || cardInfo.socialImageUrl, - classes: ["advert__image"] - }); - - imgContainer.insertAdjacentHTML("afterbegin", image); - - if (cardNum > 1) { - card.classList.add("hide-until-tablet"); - } - - return cardFragment; -} - -// Uses API data to build the ad content. -function buildFromApi(host, cardsInfo, adType) { - const cardList = document.createDocumentFragment(); - // Constructs an array of cards from an array of data. - cardsInfo.forEach((info, idx) => { - cardList.appendChild(buildCard(info, idx, adType, cardsInfo)); - }); - - const adClickthrough = document.querySelector(".adverts__ctas a"); - adClickthrough.href = buildClickthroughUrl("[%TitleURL%]"); - - return write(() => { - // Takes branding from last possible card, in case earlier ones overridden. - injectBranchLogo(); - let advertRow = document.querySelector(".adverts__row"); - advertRow.appendChild(cardList); - }); -} - -export default function apiMultiple(adType) { - let lastWidth; - const ENDPOINT = ENDPOINTS[adType]; - - enableToggles(); - - return getIframeId() - .then(({ host }) => - Promise.all([ - reportClicks(), - getWebfonts(), - getEventsData(ENDPOINT).then(apiData => - buildFromApi(host, apiData, adType) - ) - ]) - ) - .then(() => { - onViewport(({ width }) => { - if (width != lastWidth) { - resizeIframeHeight(); - lastWidth = width; - } - }); - }) - .catch(error => hideOnError(error, `events-multiple-${adType}`)); -} diff --git a/legacy/src/events-multiple/test.json b/legacy/src/events-multiple/test.json deleted file mode 100644 index 55bca49c..00000000 --- a/legacy/src/events-multiple/test.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "TrackingId": "", - "Tone": "live", - "NumberofCards": "4", - "Title": "The Guardian Live", - "TitleURL": "", - "Explainer": "Live Events at The Guardian", - "ViewAll": "Browse", - "IsProminent": "false", - "Offer1Title": "", - "Offer1Image": "", - "Offer1Meta": "", - "Offer1URL": "https://mem.thegulocal.com/event/david-lammy-in-conversation-96087744029", - "Offer2Title": "", - "Offer2Image": "", - "Offer2Meta": "", - "Offer2URL": "", - "Offer3Title": "", - "Offer3Image": "", - "Offer3Meta": "", - "Offer3URL": "", - "Offer4Title": "", - "Offer4Image": "", - "Offer4Meta": "", - "Offer4URL": "" -} diff --git a/legacy/src/events-multiple/web/index.html b/legacy/src/events-multiple/web/index.html deleted file mode 100644 index b4274cfd..00000000 --- a/legacy/src/events-multiple/web/index.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/legacy/src/events-multiple/web/index.js b/legacy/src/events-multiple/web/index.js deleted file mode 100644 index d63c7e92..00000000 --- a/legacy/src/events-multiple/web/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import apiMultiple from '../../_shared/js/events-multiple' - -apiMultiple('[%Tone%]') diff --git a/legacy/src/events-multiple/web/index.scss b/legacy/src/events-multiple/web/index.scss deleted file mode 100644 index ce745e4e..00000000 --- a/legacy/src/events-multiple/web/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import '_core'; -@import '_adverts'; -@import '_adverts-masterclasses'; -@import '_adverts-live'; -@import '_advert'; -@import '_adverts-merchandising';