Skip to content

Commit

Permalink
Merge branch 'adobecom:stage' into MWPW-167164-Flaky-gnav-profile-Uni…
Browse files Browse the repository at this point in the history 
…tTest
  • Loading branch information
@skholkhojaev
skholkhojaev authored Feb 19, 2025
2 parents d1f953a + 88c0568 commit b59cda0
Show file tree
Hide file tree
Showing 75 changed files with 1,408 additions and 395 deletions.
57 changes: 57 additions & 0 deletions libs/blocks/accordion/accordion.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,38 @@ div.accordion:not(.descr-list) {
line-height: var(--type-body-s-lh);
}

.accordion-expand-all {
display: flex;
flex-wrap: wrap;
max-width: var(--grid-container-width);
margin: 0 auto 40px;
}

.accordion-expand-all button {
display: flex;
align-items: center;
box-sizing: content-box;
cursor: pointer;
margin-bottom: 16px;
font-family: var(--body-font-family);
}

.accordion-expand-all button.disabled {
color: var(--color-gray-500);
border-color: var(--color-gray-500);
background-color: #fff;
text-decoration: line-through;
cursor: auto;
}

.accordion-expand-all .expand-btn {
margin-inline-end: 24px;
}

.accordion-expand-all svg {
margin-inline-start: 8px;
}

.accordion .descr-term button {
align-items: center;
background: none;
Expand Down Expand Up @@ -209,6 +241,16 @@ div.media-p {
padding: 0;
}

@media screen and (min-width: 600px) {
.accordion-expand-all .con-button.button-l {
border-radius: 25px;
font-size: 19px;
line-height: 24px;
min-height: 28px;
padding: 10px 24px 8px;
}
}

@media screen and (min-width: 1200px) {
.editorial {
display: flex;
Expand Down Expand Up @@ -236,4 +278,19 @@ div.media-p {
overflow: hidden;
margin: 0;
}

.editorial.expand-all-button {
display: grid;
grid-template-columns: minmax(41.67%, 1fr) minmax(400px, 700px);
row-gap: 0;
}

.editorial.expand-all-button > * {
width: 100%;
}

.editorial.expand-all-button .accordion-expand-all {
grid-column: span 2;
max-width: 100%;
}
}
183 changes: 138 additions & 45 deletions libs/blocks/accordion/accordion.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { createTag } from '../../utils/utils.js';
import { createTag, getConfig } from '../../utils/utils.js';
import { decorateButtons } from '../../utils/decorate.js';
import { processTrackingLabels } from '../../martech/attributes.js';
import { replaceKey } from '../../features/placeholders.js';

const chevronIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd" d="M16.0001 12C16.0002 12.1745 15.9657 12.3474 15.8988 12.5086C15.8319 12.6698 15.7338 12.8162 15.6101 12.9393L10.2881 18.2593C10.1704 18.3991 10.0252 18.5131 9.8616 18.5944C9.69798 18.6757 9.51939 18.7225 9.33693 18.7319C9.15447 18.7413 8.97203 18.713 8.80092 18.649C8.62982 18.5849 8.4737 18.4864 8.34227 18.3595C8.21083 18.2326 8.10688 18.08 8.03686 17.9113C7.96684 17.7425 7.93225 17.5612 7.93524 17.3785C7.93822 17.1958 7.97872 17.0157 8.05422 16.8493C8.12971 16.683 8.2386 16.5339 8.37411 16.4113L8.40678 16.3787L12.7874 12L8.40611 7.62C8.17954 7.36922 8.05666 7.04176 8.06232 6.70383C8.06798 6.36591 8.20175 6.04274 8.43659 5.79969C8.67143 5.55664 8.98981 5.41183 9.32733 5.39457C9.66486 5.3773 9.99636 5.48885 10.2548 5.70667L10.2874 5.73933L15.6094 11.0593C15.7334 11.1826 15.8317 11.3292 15.8987 11.4906C15.9658 11.6521 16.0002 11.8252 16.0001 12Z"/></svg>';
const closeIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd" d="M13.6113 12L17.2647 8.34668C17.71 7.90186 17.71 7.18018 17.2647 6.73535C16.8193 6.29004 16.0986 6.29004 15.6533 6.73535L12 10.3887L8.34668 6.73535C7.90137 6.29004 7.18066 6.29004 6.73535 6.73535C6.29004 7.18017 6.29004 7.90185 6.73535 8.34668L10.3887 12L6.73535 15.6533C6.29004 16.0981 6.29004 16.8198 6.73535 17.2647C6.95801 17.4873 7.24951 17.5986 7.54101 17.5986C7.83251 17.5986 8.12402 17.4873 8.34667 17.2647L12 13.6113L15.6533 17.2647C15.876 17.4873 16.167 17.5986 16.459 17.5986C16.751 17.5986 17.042 17.4873 17.2646 17.2647C17.7099 16.8198 17.7099 16.0982 17.2646 15.6533L13.6113 12Z"/></svg>';
const faq = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: [] };
const mediaCollection = {};

Expand All @@ -12,59 +15,102 @@ function setSEO(questions) {
document.head.append(script);
}

function toggleMedia(con, trig, status) {
if (status === 'open') {
trig.setAttribute('hidden', '');
trig.setAttribute('aria-expanded', 'false');
con.setAttribute('hidden', '');
} else {
trig.setAttribute('aria-expanded', 'true');
trig.removeAttribute('hidden');
con.removeAttribute('hidden');
/* c8 ignore next 8 */
function playVideo(video) {
if (!video) return;
if (video.getAttribute('autoplay') === null) return;
const playBtn = video.nextElementSibling;
const isPlaying = playBtn.getAttribute('aria-pressed') === 'true';
if (isPlaying || video.readyState === 0) return;
playBtn.click();
}

/* c8 ignore next 11 */
function pauseVideo(video) {
if (!video) return;
if (video.getAttribute('controls') !== null) {
video.pause();
return;
}
const pauseBtn = video.nextElementSibling;
const isPlaying = pauseBtn?.getAttribute('aria-pressed') === 'true';
if (!isPlaying || video.readyState === 0) return;
pauseBtn.click();
}

function displayMedia(displayArea, el, dd, i, expanded) {
const id = el.getAttribute('aria-controls').split('-')[1];
[...mediaCollection[id]].forEach(
(mediaCollectionItem, idx, total) => {
mediaCollectionItem.classList.remove('expanded');
function openPanel(btn, panel) {
const analyticsValue = btn.getAttribute('daa-ll');
btn.setAttribute('aria-expanded', 'true');
btn.setAttribute('daa-ll', analyticsValue.replace(/open-/, 'close-'));
panel.removeAttribute('hidden');
}

total.forEach((element, index) => {
const trigger = document.querySelector(`#accordion-${id}-trigger-${index + 1}`);
const content = document.querySelector(`#accordion-${id}-content-${index + 1}`);
toggleMedia(content, trigger, 'open');
});
toggleMedia(dd, el);
displayArea.childNodes[i - 1].classList.add('expanded');

if (expanded) {
toggleMedia(dd, el, 'open');
displayArea.childNodes[i - 1]?.classList.remove('expanded');
}
},
);
function closePanel(btn, panel) {
const analyticsValue = btn.getAttribute('daa-ll');
btn.setAttribute('aria-expanded', 'false');
btn.setAttribute('daa-ll', analyticsValue.replace(/close-/, 'open-'));
panel.setAttribute('hidden', '');
}

function closeMediaPanel(displayArea, el, dd, clickedId) {
closePanel(el, dd);
const clickedMedia = displayArea.childNodes[clickedId - 1];
const video = clickedMedia.querySelector('video');
if (video) pauseVideo(video);
const otherExpandedPanels = el.closest('.accordion').querySelectorAll('.accordion-trigger[aria-expanded="true"]');
if (!otherExpandedPanels.length) return;
clickedMedia.classList.remove('expanded');
const newExpandedId = otherExpandedPanels[0].id.split('trigger-')[1] - 1;
displayArea.childNodes[newExpandedId].classList.add('expanded');
}

function openMediaPanel(displayArea, el, dd, clickedId) {
const accordionId = el.getAttribute('aria-controls').split('-')[1];
[...mediaCollection[accordionId]].forEach((mediaCollectionItem, idx) => {
const video = mediaCollectionItem.querySelector('video');
if (idx === clickedId - 1) {
openPanel(el, dd);
displayArea.childNodes[idx].classList.add('expanded');
if (video) playVideo(video);
return;
}
mediaCollectionItem.classList.remove('expanded');
const trigger = document.querySelector(`#accordion-${accordionId}-trigger-${idx + 1}`);
const content = document.querySelector(`#accordion-${accordionId}-content-${idx + 1}`);
closePanel(trigger, content);
if (video) pauseVideo(video);
});
}

function handleClick(el, dd, num) {
const expanded = el.getAttribute('aria-expanded') === 'true';
const analyticsValue = el.getAttribute('daa-ll');
if (expanded) {
el.setAttribute('aria-expanded', 'false');
el.setAttribute('daa-ll', analyticsValue.replace(/close-/, 'open-'));
dd.setAttribute('hidden', '');
} else {
el.setAttribute('aria-expanded', 'true');
el.setAttribute('daa-ll', analyticsValue.replace(/open-/, 'close-'));
dd.removeAttribute('hidden');
const expandAllBtns = el.closest('.accordion-container')?.querySelectorAll('.accordion-expand-all button');
if (expandAllBtns.length) {
expandAllBtns.forEach((btn) => {
btn.setAttribute('aria-pressed', 'mixed');
btn.classList.remove('fill', 'disabled');
});
}

const closestEditorial = el.closest('.editorial');
if (closestEditorial) displayMedia(closestEditorial.querySelector('.accordion-media'), el, dd, num, expanded);
const expanded = el.getAttribute('aria-expanded') === 'true';
if (closestEditorial) {
if (expanded) {
closeMediaPanel(closestEditorial.querySelector('.accordion-media'), el, dd, num);
return;
}
openMediaPanel(closestEditorial.querySelector('.accordion-media'), el, dd, num);
return;
}

if (expanded) {
closePanel(el, dd);
return;
}
openPanel(el, dd);
}

function defalutOpen(accordion) {
handleClick(accordion.querySelector('.accordion-trigger'), accordion.querySelector('.descr-details'), 1, 0);
function defaultOpen(accordion) {
handleClick(accordion.querySelector('.accordion-trigger'), accordion.querySelector('.descr-details'), 1);
}

function createItem(accordion, id, heading, num, edit) {
Expand Down Expand Up @@ -103,7 +149,7 @@ function createItem(accordion, id, heading, num, edit) {
button.addEventListener('click', (e) => { handleClick(e.target, dd, num, id); });
accordion.append(dt, dd);

return { name: heading.textContent, text };
return { name: heading.textContent, text, dt, dd };
}

function getUniqueId(el) {
Expand All @@ -116,12 +162,55 @@ function populateMedia(accordion, id, num, collection) {
accordion.append(mediaCollection[id][num]);
}

export default function init(el) {
async function createExpandAllContainer(accordionItems, isEditorial, mediaEl) {
const config = getConfig();
const expandText = await replaceKey('expand-all', config);
const collapseText = await replaceKey('collapse-all', config);
const expandBtn = createTag('button', { class: 'expand-btn con-button button-l', 'aria-pressed': 'false' }, expandText);
expandBtn.insertAdjacentHTML('beforeend', chevronIcon);
const collapseBtn = createTag('button', { class: 'collapse-btn con-button button-l', 'aria-pressed': 'false' }, collapseText);
collapseBtn.insertAdjacentHTML('beforeend', closeIcon);
const container = createTag('div', { class: 'accordion-expand-all foreground' }, [expandBtn, collapseBtn]);
const toggleAll = (targetBtn, action) => {
if (targetBtn.getAttribute('aria-pressed') === 'true') return;
targetBtn.setAttribute('aria-pressed', 'true');
targetBtn.classList.remove('fill');
targetBtn.classList.add('disabled');
const siblingBtn = targetBtn.nextElementSibling || targetBtn.previousElementSibling;
siblingBtn.setAttribute('aria-pressed', 'false');
siblingBtn.classList.remove('disabled');
siblingBtn.classList.add('fill');
if (action === 'expand') {
accordionItems.forEach(({ dt, dd }) => openPanel(dt.querySelector('button'), dd));
if (!isEditorial) return;
[...mediaEl.childNodes].forEach((node, idx) => {
if (idx === 0) {
node.classList.add('expanded');
const video = node.querySelector('video');
if (video) playVideo(node.querySelector('video'));
return;
}
node.classList.remove('expanded');
});
return;
}
accordionItems.forEach(({ dt, dd }) => closePanel(dt.querySelector('button'), dd));
if (!isEditorial) return;
const video = mediaEl.querySelector('.expanded video');
if (video) pauseVideo(video);
};
expandBtn.addEventListener('click', ({ currentTarget }) => toggleAll(currentTarget, 'expand'));
collapseBtn.addEventListener('click', ({ currentTarget }) => toggleAll(currentTarget, 'collapse'));
return container;
}

export default async function init(el) {
const id = getUniqueId(el);
const accordion = createTag('div', { class: 'descr-list accordion', id: `accordion-${id}`, role: 'presentation' });
const accordionMedia = createTag('div', { class: 'accordion-media', id: `accordion-media-${id}` });
const isSeo = el.classList.contains('seo');
const isEditorial = el.classList.contains('editorial');
const hasExpandAll = el.classList.contains('expand-all-button');
decorateButtons(el);

if (isEditorial) {
Expand Down Expand Up @@ -153,6 +242,10 @@ export default function init(el) {
el.append(accordion);
if (isEditorial) {
el.append(accordionMedia);
defalutOpen(el);
defaultOpen(el);
}
if (hasExpandAll) {
const expandAllContainer = await createExpandAllContainer(items, isEditorial, accordionMedia);
el.prepend(expandAllContainer);
}
}
36 changes: 31 additions & 5 deletions libs/blocks/adobetv/adobetv.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { decorateAnchorVideo } from '../../utils/decorate.js';
import { createTag } from '../../utils/utils.js';

export default function init(a) {
a.classList.add('hide-video');
Expand All @@ -11,11 +12,36 @@ export default function init(a) {
anchorTag: a,
});
} else {
const embed = `<div class="milo-video">
<iframe src="${a.href}" class="adobetv" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" allow="encrypted-media" title="Adobe Video Publishing Cloud Player" loading="lazy">
</iframe>
</div>`;
a.insertAdjacentHTML('afterend', embed);
const iframe = createTag('iframe', {
src: a.href,
class: 'adobetv',
scrolling: 'no',
allow: 'encrypted-media; fullscreen',
title: 'Adobe Video Publishing Cloud Player',
loading: 'lazy',
});
const embed = createTag('div', { class: 'milo-video' }, iframe);
a.insertAdjacentElement('afterend', embed);

window.addEventListener('message', (event) => {
if (event.origin !== 'https://video.tv.adobe.com' || !event.data) return;
const { state, id } = event.data;
if (!['play', 'pause'].includes(state)
|| !Number.isInteger(id)
|| !iframe.src.startsWith(`${event.origin}/v/${id}`)) return;

iframe.setAttribute('data-playing', state === 'play');
});

const io = new IntersectionObserver((entries) => {
entries.forEach(({ isIntersecting, target }) => {
if (!isIntersecting && target.getAttribute('data-playing') === 'true') {
target.contentWindow.postMessage({ type: 'mpcAction', action: 'pause' }, target.src);
}
});
}, { rootMargin: '0px' });
io.observe(iframe);

a.remove();
}
}
2 changes: 1 addition & 1 deletion libs/blocks/aside/aside.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -567,7 +567,7 @@
}

.aside.promobar .action-area .con-button {
flex-shrink: 0;
white-space: nowrap;
}

.aside.promobar .promo-text.desktop-up,
Expand Down
8 changes: 8 additions & 0 deletions libs/blocks/figure/figure.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ function decorateVideo(clone, figEl) {
applyAccessibilityEvents(videoTag);
decoratePausePlayWrapper(videoTag, 'autoplay');
}
if (videoTag.controls) {
const io = new IntersectionObserver((entries) => {
entries.forEach(({ isIntersecting, target }) => {
if (!isIntersecting && !target.paused) target.pause();
});
}, { rootMargin: '0px' });
io.observe(videoTag);
}
figEl.prepend(clone.querySelector('.video-container, .pause-play-wrapper, video'));
}
}
Expand Down
Loading

0 comments on commit b59cda0

Please sign in to comment.