Skip to content

Commit

Permalink
Sync main branch from pricefx-eds, excluding fstab.yaml
Browse files Browse the repository at this point in the history
  • Loading branch information
@actions-user
actions-user committed Jul 1, 2024
2 parents 39eebf5 + b2fc3c7 commit 5780851
Show file tree
Hide file tree
Showing 7 changed files with 264 additions and 291 deletions.
24 changes: 11 additions & 13 deletions blocks/button-pfx/button-pfx.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export default async function decorate(block) {
const [link, target, buttonLabel, type] = block.children;
block.textContent = '';
const [link, target, type] = block.children;
const targetValue = target.textContent.trim() === 'true' ? '_blank' : '_self';

if (type.textContent.trim() === 'left-arrow') {
Expand All @@ -9,17 +8,16 @@ export default async function decorate(block) {
block.classList.add('right-arrow');
}

if (link.textContent.trim() === '') {
const buttonEl = document.createElement('button');
buttonEl.classList.add('button');
buttonEl.textContent = buttonLabel.textContent.trim();
block.appendChild(buttonEl);
} else {
const buttonEl = document.createElement('a');
buttonEl.classList.add('button');
buttonEl.textContent = buttonLabel.textContent.trim();
buttonEl.href = link.textContent.trim();
if (link.textContent.trim() !== '') {
const buttonEl = document.querySelector('a');
buttonEl.setAttribute('target', targetValue);
block.appendChild(buttonEl);
}

if (target.textContent.trim() !== '') {
target.classList.add('hidden');
}

if (type.textContent.trim() !== '') {
type.classList.add('hidden');
}
}
21 changes: 9 additions & 12 deletions blocks/cards/cards.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
import { createOptimizedPicture } from '../../scripts/aem.js';

function decorateCTA(cta, ctaLabel, ctaTarget, isClickable) {
function decorateCTA(cta, ctaTarget, isClickable) {
const link = cta.querySelector('a');
if (link && isClickable?.textContent.trim() !== 'true') {
if (ctaLabel.textContent.trim()) {
const label = ctaLabel.textContent.trim();
link.textContent = label;
if (link.textContent.trim()) {
const label = link.textContent.trim();
link.title = label;
}

if (ctaTarget.textContent.trim() === 'true') {
link.target = '_blank';
}

return link;
return cta.firstElementChild.firstElementChild;
}

return ctaLabel.children.length > 0 ? ctaLabel?.firstElementChild : ctaLabel;
cta.innerHTML = `<p>${link.textContent.trim()}</p>`;
return cta;
}

function generateCardDom(props, block) {
const [imageContainer, cardTopContent, eyebrow, title, description, cta, ctaLabel, ctaTarget, isClickable] = props;
const [imageContainer, cardTopContent, eyebrow, title, description, cta, ctaTarget, isClickable] = props;
const picture = imageContainer.querySelector('picture');
const cardImPricing = block.classList.contains('card-im-pricing');

Expand All @@ -34,7 +31,7 @@ function generateCardDom(props, block) {
${eyebrow?.textContent.trim() !== '' ? `<div class='cards-card-eyebrow'>${eyebrow.textContent.trim().toUpperCase()}</div>` : ``}
${title?.children.length > 0 ? `<div class='cards-card-title'><h6>${title.textContent.trim()}</h6></div>` : ``}
${description?.children.length > 0 ? `<div class='cards-card-description'>${description.innerHTML}</div>` : ``}
${ctaLabel.textContent.trim() ? `<div class='cards-card-cta'>${decorateCTA(cta, ctaLabel, ctaTarget, isClickable).outerHTML}</div>` : ``}
${cta.textContent.trim() ? `<div class='cards-card-cta'>${decorateCTA(cta, ctaTarget, isClickable).outerHTML}</div>` : ``}
</div>
</a>
`;
Expand All @@ -46,7 +43,7 @@ function generateCardDom(props, block) {
${eyebrow?.textContent.trim() !== '' ? `<div class='cards-card-eyebrow'>${eyebrow.textContent.trim().toUpperCase()}</div>` : ``}
${title?.children.length > 0 ? `<div class='cards-card-title'><h6>${title.textContent.trim()}</h6></div>` : ``}
${description?.children.length > 0 ? `<div class='cards-card-description'>${description.innerHTML}</div>` : ``}
${ctaLabel.textContent.trim() ? `<div class='cards-card-cta'>${decorateCTA(cta, ctaLabel, ctaTarget).outerHTML}</div>` : ``}
${cta.textContent.trim() ? `<div class='cards-card-cta'>${decorateCTA(cta, ctaTarget).outerHTML}</div>` : ``}
</div>
`;
return cardDOM;
Expand Down
213 changes: 105 additions & 108 deletions blocks/hero/hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,74 +4,12 @@ import { environmentMode, replaceBasePath } from '../../scripts/global-functions
import { BASE_CONTENT_PATH } from '../../scripts/url-constants.js';
import { createOptimizedPicture } from '../../scripts/aem.js';

function decorateButton(heroLeftContainer) {
heroLeftContainer.querySelectorAll('div.button-container').forEach((btn) => {
const btnStyle = btn.children[0]?.textContent || 'primary';
const btnLink = btn.children[1]?.textContent;
const btnLabel = btn.children[2]?.textContent;
const btnTarget = btn.children[3]?.textContent;
btn.textContent = '';
if (btnLabel === '') {
btn.remove();
} else {
const heroButton = document.createElement('a');
heroButton.classList.add('button', btnStyle);
heroButton.innerHTML = btnLabel;
if (btnLink) {
const isPublishEnvironment = environmentMode() === 'publish';
heroButton.href = replaceBasePath(isPublishEnvironment, btnLink, BASE_CONTENT_PATH);
}

if (btnTarget === 'true') {
heroButton.target = '_blank';
}
btn.append(heroButton);
}
});
}

function decorateRightContainer(heroRightContainer) {
const heroVariation = heroRightContainer.firstElementChild.textContent || 'imageVariation';
if (heroVariation === 'imageVariation') {
const heroImageContainer = document.createElement('div');
heroImageContainer.classList.add('hero-image-container');
const heroImage = heroRightContainer.children[1];
if (window.matchMedia('(min-width:986px)').matches && heroImage.querySelector('img') !== null) {
heroImageContainer.setAttribute('style', `background-image:url(${heroImage.querySelector('img').src})`);
}
heroImageContainer.append(heroImage);
heroRightContainer.textContent = '';
heroRightContainer.append(heroImageContainer);
} else if (heroVariation === 'videoVariation') {
const heroRightContainerInner = document.createElement('div');
heroRightContainerInner.classList.add('embed');
const placeholder = heroRightContainer.children[2];
const link = heroRightContainer.children[3];
const overlayText = heroRightContainer.children[4];
const isPopup = heroRightContainer.children[5];
heroRightContainer.textContent = '';
if (link.textContent !== '') {
heroRightContainerInner.append(placeholder);
heroRightContainerInner.append(link);
heroRightContainerInner.append(overlayText);
heroRightContainerInner.append(isPopup);

decorateEmbed(heroRightContainerInner);
heroRightContainer.append(heroRightContainerInner);
}
} else {
heroRightContainer.textContent = '';
}
}

async function loadStats(statsData, heroLeftContainerInner) {
if (statsData.querySelector('a')) {
const link = statsData.querySelector('a').href;

if (link.includes('/fragments/')) {
const url = new URL(link);
const fragmentPath = url.pathname;

const fragmentBlock = await loadFragment(fragmentPath);
if (fragmentBlock) {
const lastChild = statsData.lastElementChild;
Expand All @@ -93,62 +31,121 @@ export default async function decorate(block) {
const heroRightContainer = document.createElement('div');
const heroLeftContainerInner = document.createElement('div');
heroLeftContainerInner.classList.add('hero-content');
let buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');
let count = 1;
[...block.children].forEach((row, index) => {
if (index < 6) {
/* Image / Video */
if (index === 0) {
const variationOption = row.firstElementChild?.textContent;
if (variationOption === 'noVariation') {
heroContainer.classList.add('hero-no-bg-image');
} else if (variationOption === 'videoVariation') {
heroContainer.classList.add('hero-video');
}
const [
variation,
imageContainer,
videoPlaceHolder,
videoUrl,
videoOverlay,
videoPopup,
heroHeight,
eyebrow,
description,
button1,
target1,
button2,
target2,
button3,
target3,
stats,
] = block.children;

const variationOption = variation?.textContent.trim();
if (variationOption === 'noVariation') {
heroContainer.classList.add('hero-no-bg-image');
heroRightContainer.textContent = '';
} else if (variationOption === 'videoVariation') {
heroContainer.classList.add('hero-video');
const heroRightContainerInner = document.createElement('div');
heroRightContainerInner.classList.add('embed');
const placeholder = videoPlaceHolder;
const link = videoUrl;
const overlayText = videoOverlay;
const isPopup = videoPopup;
heroRightContainer.textContent = '';
if (link.textContent !== '') {
heroRightContainerInner.append(placeholder);
heroRightContainerInner.append(link);
heroRightContainerInner.append(overlayText);
heroRightContainerInner.append(isPopup);
decorateEmbed(heroRightContainerInner);
heroRightContainer.append(heroRightContainerInner);
}
} else {
const heroImageContainer = document.createElement('div');
heroImageContainer.classList.add('hero-image-container');
const heroImage = imageContainer;
if (heroImage !== undefined && window.matchMedia('(min-width:986px)').matches) {
if (heroImage?.querySelector('img') !== null) {
const imageUrl = heroImage?.querySelector('img').src;
heroImageContainer.setAttribute('style', `background-image:url(${imageUrl})`);
}
heroRightContainer.append(row.firstElementChild);
heroRightContainer.classList.add('hero-right-container');
} else if (index === 6) {
/* Height Variation */
heroContainer.classList.add(row.firstElementChild?.textContent || 'hero-primary-height');
} else if (index === 7) {
/* Eyebrow Text */
if (row.firstElementChild?.textContent !== '') {
const heroPreHeader = document.createElement('span');
heroPreHeader.classList.add('eyebrow-text');
heroPreHeader.append(row.firstElementChild);
heroLeftContainerInner.append(heroPreHeader);
heroImageContainer.append(heroImage);
heroRightContainer.textContent = '';
heroRightContainer.append(heroImageContainer);
}
}
heroRightContainer.classList.add('hero-right-container');
if (heroHeight.textContent.trim() !== '') {
heroContainer.classList.add(heroHeight.textContent.trim() || 'hero-primary-height');
}

if (eyebrow.textContent.trim() !== '') {
const heroPreHeader = document.createElement('span');
heroPreHeader.classList.add('eyebrow-text');
heroPreHeader.append(eyebrow);
heroLeftContainerInner.append(heroPreHeader);
}

if (description.textContent.trim() !== '') {
description?.classList.add('hero-content-container');
heroLeftContainerInner.append(description || '');
}
const isPublishEnvironment = environmentMode() === 'publish';

if (button1.textContent.trim() !== '') {
const button1Link = button1.querySelector('a');
if (button1Link !== null) {
if (target1 === true) {
button1Link.querySelector('a').target = '_blank';
}
} else if (index === 8) {
/* Hero Content */
row.firstElementChild?.classList.add('hero-content-container');
heroLeftContainerInner.append(row.firstElementChild || '');
} else if (index >= 9 && index <= 20) {
/* Hero Buttons */
if (buttonContainer.children.length >= 0 && count === 5) {
heroLeftContainerInner.append(buttonContainer);
buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');
count = 1;
button1Link.href = replaceBasePath(isPublishEnvironment, button1Link.href, BASE_CONTENT_PATH);
heroLeftContainerInner.append(button1.firstElementChild);
}
}
if (button2.textContent.trim() !== '') {
const button2Link = button2.querySelector('a');
if (button2Link !== null) {
if (target2 === true) {
button2Link.querySelector('a').target = '_blank';
}
count += 1;
buttonContainer.append(row.firstElementChild);
heroLeftContainerInner.append(buttonContainer);
heroLeftContainer.append(heroLeftContainerInner);
} else if (index === 21) {
const statsData = row.firstElementChild;
loadStats(statsData, heroLeftContainerInner);
button2Link.href = replaceBasePath(isPublishEnvironment, button2Link.href, BASE_CONTENT_PATH);
heroLeftContainerInner.append(button2.firstElementChild);
}
});
}
if (button3.textContent.trim() !== '') {
const button3Link = button3.querySelector('a');
if (button3Link !== null) {
if (target3 === true) {
button3Link.querySelector('a').target = '_blank';
}
button3Link.href = replaceBasePath(isPublishEnvironment, button3Link.href, BASE_CONTENT_PATH);
heroLeftContainerInner.append(button3.firstElementChild);
}
}

if (stats !== '') {
const statsData = stats.firstElementChild;
loadStats(statsData, heroLeftContainerInner);
}
heroLeftContainer.append(heroLeftContainerInner);

decorateButton(heroLeftContainer);
decorateRightContainer(heroRightContainer);
heroRightContainer
.querySelectorAll('img')
.forEach((img) =>
img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])),
);

heroContainer.append(heroLeftContainer);
heroContainer.append(heroRightContainer);
block.textContent = '';
Expand Down
Loading

0 comments on commit 5780851

Please sign in to comment.