From d0818e93fcaa02766e46a7df68fc030df6ee7b18 Mon Sep 17 00:00:00 2001 From: Luca Date: Thu, 1 Feb 2024 15:54:36 +0100 Subject: [PATCH 1/3] add promotion banner block --- .../promotion-banner/promotion-banner.css | 54 +++++++++ .../promotion-banner/promotion-banner.js | 103 ++++++++++++++++++ 2 files changed, 157 insertions(+) create mode 100644 cigaradvisor/blocks/promotion-banner/promotion-banner.css create mode 100644 cigaradvisor/blocks/promotion-banner/promotion-banner.js diff --git a/cigaradvisor/blocks/promotion-banner/promotion-banner.css b/cigaradvisor/blocks/promotion-banner/promotion-banner.css new file mode 100644 index 0000000..04c05e3 --- /dev/null +++ b/cigaradvisor/blocks/promotion-banner/promotion-banner.css @@ -0,0 +1,54 @@ +.promotion-banner.block > a { + display: block; + margin: 0 auto; +} + +.promotion-banner.block > a > picture { + display: block; + position: relative; + width: 100%; + height: 100%; + margin: 0 auto; +} + +.promotion-banner.block > a > picture > img { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; +} + +.section[data-layout="50/50"] .promotion-banner-wrapper { + display: flex; +} + +.section[data-layout="50/50"].article-teaser-container .promotion-banner-wrapper { + flex-basis: 100%; +} + +.section.promotion-banner-container.separator-container:not([class*=""]) .layout-wrapper > div { + justify-content: flex-start; +} + +.section[data-layout="50/50"] .promotion-banner.block { + display: flex; + flex-basis: 100%; +} + +.section[data-layout="50/50"] .promotion-banner.block > a { + flex-basis: 100%; +} + +@media screen and (min-width: 1200px) { + .section[data-layout="50/50"] .promotion-banner.block > a > picture > img { + border: 1px solid #000; + } + + /* removing border for 2 column videos section */ + .two-column-section[data-layout="50/50"] .promotion-banner.block > a > picture > img { + border: none; + } +} diff --git a/cigaradvisor/blocks/promotion-banner/promotion-banner.js b/cigaradvisor/blocks/promotion-banner/promotion-banner.js new file mode 100644 index 0000000..ccf1820 --- /dev/null +++ b/cigaradvisor/blocks/promotion-banner/promotion-banner.js @@ -0,0 +1,103 @@ +// noinspection JSUnusedGlobalSymbols + +import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; +import { isInternal } from '../../scripts/scripts.js'; + +const sheetURL = '/cigaradvisor/promotions.json?sheet=promotions'; + +let promotions; + +async function fetchPromotions() { + try { + // fetch the JSON data + const response = await fetch(sheetURL); + + if (!response.ok) { + promotions = []; + return; + } + + const { data } = await response.json(); + promotions = data; + } catch (error) { + promotions = []; // so we don't try to fetch again + } +} + +function convertToDate(input) { + if (!input || Number.isNaN(+input)) { + return null; + } + + // from https://github.com/adobe/helix-sidekick-extension/blob/main/src/extension/view/json.js#L31 + const date = +input > 99999 + ? new Date(+input * 1000) + : new Date(Math.round((+input - (1 + 25567 + 1)) * 86400 * 1000)); + + return date.toString() !== 'Invalid Date' ? date : null; +} + +async function getActivePromotions(group) { + // fetch promotions once, otherwise use cached version + if (!promotions) { + await fetchPromotions(); + } + + const date = Date.now(); + return promotions.filter((item) => { + // check position + if (item.group.toLocaleLowerCase() !== group.toLocaleLowerCase()) { + return false; + } + + // check dates + const dateFrom = convertToDate(item['start date']); + const dateTo = convertToDate(item['end date']); + return (!dateFrom || dateFrom <= date) && (!dateTo || dateTo >= date); + }); +} + +function getImageDimensions(url) { + return new Promise((resolve, reject) => { + const img = new Image(); + img.onload = () => resolve({ + width: img.width, + height: img.height, + }); + img.onerror = (error) => reject(error); + img.src = url; + }); +} + +export default async function decorate(block) { + // read block config + const configs = readBlockConfig(block); + const { group } = configs; + block.innerHTML = ''; + + // fetch promotion + const activePromotions = await getActivePromotions(group); + if (!activePromotions.length) { + return; + } + const promotion = activePromotions[Math.floor(Math.random() * activePromotions.length)]; + + // create anchor + const anchor = document.createElement('a'); + + // add image and CLS placeholder + const picture = createOptimizedPicture(promotion.image, promotion.alt || ''); + const img = await getImageDimensions(promotion.image); + const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100; + // noinspection JSUnresolvedVariable + picture.style.paddingBottom = `${ratio}%`; + anchor.style.maxWidth = `${img.width}px`; + anchor.append(picture); + + // populate anchor + anchor.setAttribute('href', promotion.url); + anchor.setAttribute('target', !isInternal(promotion.url) ? '_blank' : '_self'); + anchor.setAttribute('title', promotion.alt); + + block.appendChild(anchor); +} From f76e70341ecaf0d36b09d2121d84d8ec762f43e0 Mon Sep 17 00:00:00 2001 From: Luca Date: Thu, 1 Feb 2024 16:13:11 +0100 Subject: [PATCH 2/3] improve image fetching --- .../promotion-banner/promotion-banner.js | 26 ++++++++----------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/cigaradvisor/blocks/promotion-banner/promotion-banner.js b/cigaradvisor/blocks/promotion-banner/promotion-banner.js index ccf1820..6f6473e 100644 --- a/cigaradvisor/blocks/promotion-banner/promotion-banner.js +++ b/cigaradvisor/blocks/promotion-banner/promotion-banner.js @@ -57,15 +57,13 @@ async function getActivePromotions(group) { }); } -function getImageDimensions(url) { +function getImageDimensions(img) { return new Promise((resolve, reject) => { - const img = new Image(); img.onload = () => resolve({ width: img.width, height: img.height, }); img.onerror = (error) => reject(error); - img.src = url; }); } @@ -84,20 +82,18 @@ export default async function decorate(block) { // create anchor const anchor = document.createElement('a'); - - // add image and CLS placeholder - const picture = createOptimizedPicture(promotion.image, promotion.alt || ''); - const img = await getImageDimensions(promotion.image); - const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100; - // noinspection JSUnresolvedVariable - picture.style.paddingBottom = `${ratio}%`; - anchor.style.maxWidth = `${img.width}px`; - anchor.append(picture); - - // populate anchor + block.appendChild(anchor); anchor.setAttribute('href', promotion.url); anchor.setAttribute('target', !isInternal(promotion.url) ? '_blank' : '_self'); anchor.setAttribute('title', promotion.alt); - block.appendChild(anchor); + // add image and CLS placeholder + const picture = createOptimizedPicture(promotion.image, promotion.alt || ''); + anchor.appendChild(picture); + getImageDimensions(picture.querySelector('img')).then((img) => { + const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100; + // noinspection JSUnresolvedVariable + picture.style.paddingBottom = `${ratio}%`; + anchor.style.maxWidth = `${img.width}px`; + }); } From 25a85e9fc5d4fa96a64d328cfeba560743ebe044 Mon Sep 17 00:00:00 2001 From: kailasnadh790 <53608019+kailasnadh790@users.noreply.github.com> Date: Fri, 5 Apr 2024 16:18:01 -0400 Subject: [PATCH 3/3] Update helix-query.yaml --- helix-query.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/helix-query.yaml b/helix-query.yaml index f541894..9e49d27 100644 --- a/helix-query.yaml +++ b/helix-query.yaml @@ -196,7 +196,7 @@ indices: select: head > meta[property="og:description"] value: attribute(el, "content") blurb: - select: head > meta[property="articleblurb"] + select: head > meta[name="articleblurb"] value: attribute(el, "content") heading: select: main h1:first-of-type