From bcba476b57def4fea968a695925bc63d19db6849 Mon Sep 17 00:00:00 2001 From: Sartxi Date: Wed, 2 Oct 2024 10:42:55 -0600 Subject: [PATCH 1/4] adjust notification sticky defaults and fix multiport decoration --- libs/blocks/section-metadata/sticky-section.js | 7 ++++--- libs/utils/decorate.js | 18 +++++++++--------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/libs/blocks/section-metadata/sticky-section.js b/libs/blocks/section-metadata/sticky-section.js index db2a757554..5dbb305955 100644 --- a/libs/blocks/section-metadata/sticky-section.js +++ b/libs/blocks/section-metadata/sticky-section.js @@ -27,10 +27,11 @@ function promoIntersectObserve(el, stickySectionEl, options = {}) { function handleStickyPromobar(section, delay) { const main = document.querySelector('main'); section.classList.add('promo-sticky-section', 'hide-sticky-section'); - if (section.querySelector('.popup:is(.promobar, .notification.pill)')) section.classList.add('popup'); + if (section.querySelector('.popup:is(.promobar, .notification)')) section.classList.add('popup'); let stickySectionEl = null; let hasScrollControl; - if ((section.querySelector(':is(.promobar, .notification.pill)').classList.contains('no-delay')) || (delay && section.classList.contains('popup'))) { + if ((section.querySelector(':is(.promobar, .notification:not(.no-hide))').classList.contains('no-delay')) + || (delay && section.classList.contains('popup'))) { hasScrollControl = true; } if (!hasScrollControl && main.children[0] !== section) { @@ -52,7 +53,7 @@ export default async function handleStickySection(sticky, section) { break; } case 'sticky-bottom': { - if (section.querySelector(':is(.promobar, .notification.pill.popup)')) { + if (section.querySelector(':is(.promobar, .notification:not(.no-hide))')) { const metadata = getMetadata(section.querySelector('.section-metadata')); const delay = getDelayTime(metadata.delay?.text); if (delay) setTimeout(() => { handleStickyPromobar(section, delay); }, delay); diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js index 57159f61fd..59167e0017 100644 --- a/libs/utils/decorate.js +++ b/libs/utils/decorate.js @@ -294,18 +294,18 @@ function applyInViewPortPlay(video) { } export function decorateMultiViewport(el) { - const viewports = [ - '(max-width: 599px)', - '(min-width: 600px) and (max-width: 1199px)', - '(min-width: 1200px)', - ]; const foreground = el.querySelector('.foreground'); - if (foreground.childElementCount === 2 || foreground.childElementCount === 3) { + const cols = foreground.childElementCount; + if (cols === 2 || cols === 3) { + const viewports = [ + '(max-width: 599px)', + '(min-width: 600px) and (max-width: 1199px)', + '(min-width: 1200px)', + '(min-width: 600px)', + ].filter((vp, id) => (cols === 2 ? [0, 3].includes(id) : id !== 3)); [...foreground.children].forEach((child, index) => { const mq = window.matchMedia(viewports[index]); - const setContent = () => { - if (mq.matches) foreground.replaceChildren(child); - }; + const setContent = () => mq.matches && foreground.replaceChildren(child); setContent(); mq.addEventListener('change', setContent); }); From b1317b3d2e0ad9352eac3e341af96094ce8e3d04 Mon Sep 17 00:00:00 2001 From: Sartxi Date: Wed, 2 Oct 2024 11:07:27 -0600 Subject: [PATCH 2/4] remove popup for notificcations they arent needed --- libs/blocks/section-metadata/sticky-section.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/section-metadata/sticky-section.js b/libs/blocks/section-metadata/sticky-section.js index 5dbb305955..c0b4d1edb2 100644 --- a/libs/blocks/section-metadata/sticky-section.js +++ b/libs/blocks/section-metadata/sticky-section.js @@ -27,7 +27,7 @@ function promoIntersectObserve(el, stickySectionEl, options = {}) { function handleStickyPromobar(section, delay) { const main = document.querySelector('main'); section.classList.add('promo-sticky-section', 'hide-sticky-section'); - if (section.querySelector('.popup:is(.promobar, .notification)')) section.classList.add('popup'); + if (section.querySelector('.popup:is(.promobar)')) section.classList.add('popup'); let stickySectionEl = null; let hasScrollControl; if ((section.querySelector(':is(.promobar, .notification:not(.no-hide))').classList.contains('no-delay')) From 1ec87521952f5d7a0e3bf425ed7e5ca426d8b560 Mon Sep 17 00:00:00 2001 From: Sartxi Date: Wed, 9 Oct 2024 11:36:50 -0600 Subject: [PATCH 3/4] only hide at footer --- libs/blocks/section-metadata/sticky-section.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/libs/blocks/section-metadata/sticky-section.js b/libs/blocks/section-metadata/sticky-section.js index c0b4d1edb2..2db43622ea 100644 --- a/libs/blocks/section-metadata/sticky-section.js +++ b/libs/blocks/section-metadata/sticky-section.js @@ -30,7 +30,7 @@ function handleStickyPromobar(section, delay) { if (section.querySelector('.popup:is(.promobar)')) section.classList.add('popup'); let stickySectionEl = null; let hasScrollControl; - if ((section.querySelector(':is(.promobar, .notification:not(.no-hide))').classList.contains('no-delay')) + if ((section.querySelector(':is(.promobar, .notification)').classList.contains('no-delay')) || (delay && section.classList.contains('popup'))) { hasScrollControl = true; } @@ -40,7 +40,9 @@ function handleStickyPromobar(section, delay) { } const io = promoIntersectObserve(section, stickySectionEl); if (stickySectionEl) io.observe(stickySectionEl); - io.observe(document.querySelector('footer')); + if (section.querySelector(':is(.promobar, .notification:not(.no-hide))')) { + io.observe(document.querySelector('footer')); + } } export default async function handleStickySection(sticky, section) { @@ -53,7 +55,7 @@ export default async function handleStickySection(sticky, section) { break; } case 'sticky-bottom': { - if (section.querySelector(':is(.promobar, .notification:not(.no-hide))')) { + if (section.querySelector(':is(.promobar, .notification)')) { const metadata = getMetadata(section.querySelector('.section-metadata')); const delay = getDelayTime(metadata.delay?.text); if (delay) setTimeout(() => { handleStickyPromobar(section, delay); }, delay); From 7ba28811d2a053a7f9b58a66c20d1f5a0a1b8001 Mon Sep 17 00:00:00 2001 From: Sartxi Date: Wed, 9 Oct 2024 19:39:09 -0600 Subject: [PATCH 4/4] small change --- libs/utils/decorate.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/utils/decorate.js b/libs/utils/decorate.js index 59167e0017..267b3fadcb 100644 --- a/libs/utils/decorate.js +++ b/libs/utils/decorate.js @@ -302,7 +302,7 @@ export function decorateMultiViewport(el) { '(min-width: 600px) and (max-width: 1199px)', '(min-width: 1200px)', '(min-width: 600px)', - ].filter((vp, id) => (cols === 2 ? [0, 3].includes(id) : id !== 3)); + ].filter((v, i) => (cols === 2 ? [0, 3].includes(i) : i !== 3)); [...foreground.children].forEach((child, index) => { const mq = window.matchMedia(viewports[index]); const setContent = () => mq.matches && foreground.replaceChildren(child);