From d0b5d1dc101709eb3dccc8ad2f0e89635d10b491 Mon Sep 17 00:00:00 2001 From: Mira Fedas <30750556+mirafedas@users.noreply.github.com> Date: Tue, 1 Oct 2024 10:05:02 +0200 Subject: [PATCH 1/9] MWPW-159157: Update modal to account for new image size (#2975) added styles for space-between in media Co-authored-by: Axel Cureno Basurto --- libs/blocks/media/media.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css index 2131d2c7db..169c6d07e5 100644 --- a/libs/blocks/media/media.css +++ b/libs/blocks/media/media.css @@ -475,7 +475,7 @@ div[class*="-up"] .media .foreground > .media-row { } } -.media.in-modal > .container.foreground > .media-row { +.media.in-modal:not(.space-between) > .container.foreground > .media-row { display: grid; gap: 0; } @@ -503,7 +503,7 @@ div[class*="-up"] .media .foreground > .media-row { } @media (orientation: landscape) { - .media.in-modal > .container.foreground > .media-row { + .media.in-modal:not(.space-between) > .container.foreground > .media-row { grid-template-columns: 1fr 1fr; } From 4b46bd08b5ef02e5f52820bc3bf9e74e11448f56 Mon Sep 17 00:00:00 2001 From: Raghav Sharma <118168183+sharmrj@users.noreply.github.com> Date: Tue, 1 Oct 2024 13:35:09 +0530 Subject: [PATCH 2/9] MWPW-159197 Invoke onReady of standalone gnav when it is rendered #2962 (#2963) * await the gnav init function * Make profile config configurable by client --------- Co-authored-by: Bandana Laishram --- libs/blocks/global-navigation/global-navigation.js | 3 ++- test/blocks/global-navigation/test-utilities.js | 10 +++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index fc87543d06..46ca3fafe0 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -90,6 +90,7 @@ export const CONFIG = { error: (e) => lanaLog({ message: 'Profile Menu error', e, tags: 'errorType=error,module=universalnav' }), }, }, + ...getConfig().unav?.profile?.config, }, }, callbacks: { @@ -1083,7 +1084,7 @@ export default async function init(block) { content, block, }); - gnav.init(); + await gnav.init(); block.setAttribute('daa-im', 'true'); const mepMartech = mep?.martech || ''; block.setAttribute('daa-lh', `gnav|${getExperienceName()}${mepMartech}`); diff --git a/test/blocks/global-navigation/test-utilities.js b/test/blocks/global-navigation/test-utilities.js index fab0999332..6f7df369be 100644 --- a/test/blocks/global-navigation/test-utilities.js +++ b/test/blocks/global-navigation/test-utilities.js @@ -215,9 +215,12 @@ export const createFullGlobalNavigation = async ({ ), ]); - const instance = await initGnav(document.body.querySelector('header')); - instance.imsReady(); - await clock.runAllAsync(); + const instancePromise = initGnav(document.body.querySelector('header')); + + await clock.runToLastAsync(); + const instance = await instancePromise; + const imsPromise = instance.imsReady(); + await clock.runToLastAsync(); // We restore the clock here, because waitForElement uses setTimeout clock.restore(); @@ -242,6 +245,7 @@ export const createFullGlobalNavigation = async ({ waitForElements.push(waitForElement(selectors.breadcrumbsWrapper, document.body)); } await Promise.all(waitForElements); + await imsPromise; window.fetch = ogFetch; window.adobeIMS = undefined; From 5208028c52729ab07bf52ad715b1f8c3d29b2f5f Mon Sep 17 00:00:00 2001 From: Okan Sahin <39759830+mokimo@users.noreply.github.com> Date: Tue, 1 Oct 2024 10:14:58 +0200 Subject: [PATCH 3/9] MWPW-158776 Fix video CLS (#2915) * MWPW-155412: Fix video CLS netting +10 lighthouse points (#2724) * fix cls by adding the videoEl without a source * adapt the video hover and in view port play * Remove no-lazy and return earlier * Fix linting issue * Consolidate duplicated logic * Move functions into the init function * Move root margin and use optional chaining * Only query for the videoEl once * Add default hash at in the right spot * Fix video CLS * Add defaults to not run into any JS errors --- libs/blocks/adobetv/adobetv.js | 34 +++---------- libs/blocks/figure/figure.js | 36 +++++++------- libs/blocks/marquee/marquee.js | 4 +- libs/blocks/video/video.js | 43 +++++------------ libs/utils/decorate.js | 29 ++++++++--- test/blocks/adobetv/adobetv.test.js | 11 ----- test/blocks/adobetv/mocks/body.html | 2 +- test/blocks/figure/figure.test.js | 5 +- test/blocks/figure/mocks/body.html | 16 +----- test/blocks/marquee/marquee.test.js | 21 ++++++-- test/blocks/video/mocks/body.html | 2 +- test/blocks/video/video.test.js | 75 +++++++++++++++-------------- 12 files changed, 126 insertions(+), 152 deletions(-) diff --git a/libs/blocks/adobetv/adobetv.js b/libs/blocks/adobetv/adobetv.js index 31cfc7a368..85928d1c03 100644 --- a/libs/blocks/adobetv/adobetv.js +++ b/libs/blocks/adobetv/adobetv.js @@ -1,22 +1,15 @@ -import { createIntersectionObserver } from '../../utils/utils.js'; -import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js'; +import { decorateAnchorVideo } from '../../utils/decorate.js'; -const ROOT_MARGIN = 1000; - -const loadAdobeTv = (a) => { +export default function init(a) { + a.classList.add('hide-video'); const bgBlocks = ['aside', 'marquee', 'hero-marquee']; if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) { a.classList.add('hide'); - const { href, hash, dataset } = a; - const attrs = getVideoAttrs(hash || 'autoplay', dataset); - const video = ``; if (!a.parentNode) return; - a.insertAdjacentHTML('afterend', video); - const videoElem = document.body.querySelector(`source[src="${href}"]`)?.parentElement; - applyHoverPlay(videoElem); - a.remove(); + decorateAnchorVideo({ + src: a.href, + anchorTag: a, + }); } else { const embed = `