MWPW-158014 - [Notification] bugs (#2996)

* adjust notification sticky defaults and fix multiport decoration * remove popup for notificcations they arent needed * only hide at footer * small change
adobecom · Oct 21, 2024 · f72bd60 · f72bd60
1 parent 2479ccb
commit f72bd60
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git 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
@@ -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);
     });