diff --git a/libs/blocks/section-metadata/sticky-section.js b/libs/blocks/section-metadata/sticky-section.js index db2a757554..2db43622ea 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)')) 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)').classList.contains('no-delay')) + || (delay && section.classList.contains('popup'))) { hasScrollControl = true; } if (!hasScrollControl && main.children[0] !== section) { @@ -39,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) { @@ -52,7 +55,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)')) { 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 0482e40505..d3ace3c5f5 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((v, i) => (cols === 2 ? [0, 3].includes(i) : i !== 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); });