Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@yesil
yesil committed Jun 3, 2024
1 parent 04ead20 commit 16cb1bb
Show file tree
Hide file tree
Showing 6 changed files with 124 additions and 62 deletions.
172 changes: 113 additions & 59 deletions libs/blocks/merch-card/merch-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,17 @@ import '../../deps/merch-card.js';

const TAG_PATTERN = /^[a-zA-Z0-9_-]+:[a-zA-Z0-9_-]+\/[a-zA-Z0-9_-].*$/;

const CARD_TYPES = ['segment', 'special-offers', 'plans', 'catalog', 'product', 'inline-heading', 'image', 'mini-compare-chart', 'twp'];
const CARD_TYPES = [
'segment',
'special-offers',
'plans',
'catalog',
'product',
'inline-heading',
'image',
'mini-compare-chart',
'twp',
];

const CARD_SIZES = ['wide', 'super-wide'];

Expand Down Expand Up @@ -46,10 +56,10 @@ const getPodType = (styles) => styles?.find((style) => CARD_TYPES.includes(style
const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName);
const isParagraphTag = (tagName) => tagName === 'P';

const appendSlot = (slotEls, slotName, merchCard) => {
if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return;
const appendSlot = (slotEls, slotName, merchCard, nodeName = 'p') => {
if (slotEls.length === 0) return;
const newEl = createTag(
'p',
nodeName,
{ slot: slotName, class: slotName },
);
slotEls.forEach((e) => {
Expand All @@ -72,6 +82,66 @@ export async function loadMnemonicList(foreground) {
}
}

function extractQuantitySelect(el) {
const quantitySelectConfig = [...el.querySelectorAll('ul')]
.find((ul) => ul.querySelector('li')?.innerText?.includes('Quantity'));
const configMarkup = quantitySelectConfig?.querySelector('ul');
if (!configMarkup) return null;
const config = configMarkup.children;
if (config.length !== 2) return null;
const attributes = {};
attributes.title = config[0].textContent.trim();
const values = config[1].textContent.split(',')
.map((value) => value.trim())
.filter((value) => /^\d*$/.test(value))
.map((value) => (value === '' ? undefined : Number(value)));
quantitySelectConfig.remove();
if (![3, 4, 5].includes(values.length)) return null;
import('../../deps/merch-quantity-select.js');
[attributes.min, attributes.max, attributes.step, attributes['default-value'], attributes['max-input']] = values;
const quantitySelect = createTag('merch-quantity-select', attributes);
return quantitySelect;
}

const parseTwpContent = async (el, merchCard) => {
const quantitySelect = extractQuantitySelect(el);
if (quantitySelect) {
merchCard.append(quantitySelect);
}
const allElements = Array.from(el.children[0].children[0].children);
const contentGroups = allElements.reduce((acc, curr) => {
if (curr.tagName.toLowerCase() === 'p' && curr.textContent.trim() === '--') {
acc.push([]);
} else {
acc[acc.length - 1].push(curr);
}
return acc;
}, [[]]);

contentGroups.forEach((group, index) => {
if (index === 0) { // Top section
const headings = group.filter((e) => e.tagName.toLowerCase() === 'h3');
const topBody = group.filter((e) => e.tagName.toLowerCase() === 'p');
appendSlot(headings, 'heading-xs', merchCard);
appendSlot(topBody, 'body-xs-top', merchCard);
} else if (index === 1) { // Body section
const content = group.filter((e) => e.tagName.toLowerCase() === 'p' || e.tagName.toLowerCase() === 'ul');
const bodySlot = createTag('div', { slot: 'body-xs' }, content);
merchCard.append(bodySlot);
} else if (index === 2) { // Footer section
const footerContent = group.filter((e) => ['h5', 'p'].includes(e.tagName.toLowerCase()));
const footer = createTag('div', { slot: 'footer' }, footerContent);
merchCard.append(footer);
}
});

const offerSelection = el.querySelector('ul');
if (offerSelection) {
const { initOfferSelection } = await import('./merch-offer-select.js');
await initOfferSelection(merchCard, offerSelection);
}
};

const parseContent = async (el, merchCard) => {
let bodySlotName = `body-${merchCard.variant !== MINI_COMPARE_CHART ? 'xs' : 'm'}`;
let headingMCount = 0;
Expand Down Expand Up @@ -225,27 +295,6 @@ const simplifyHrs = (el) => {
});
};

async function extractQuantitySelect(el) {
const quantitySelectConfig = el.querySelector('ul');
if (!quantitySelectConfig) return null;
const configMarkup = quantitySelectConfig.querySelector('li');
if (!configMarkup || !configMarkup.textContent.includes('Quantity')) return null;
const config = configMarkup.querySelector('ul').querySelectorAll('li');
if (config.length !== 2) return null;
const attributes = {};
attributes.title = config[0].textContent.trim();
const values = config[1].textContent.split(',')
.map((value) => value.trim())
.filter((value) => /^\d*$/.test(value))
.map((value) => (value === '' ? undefined : Number(value)));
if (![3, 4, 5].includes(values.length)) return null;
await import('../../deps/merch-quantity-select.js');
[attributes.min, attributes.max, attributes.step, attributes['default-value'], attributes['max-input']] = values;
const quantitySelect = createTag('merch-quantity-select', attributes);
quantitySelectConfig.remove();
return quantitySelect;
}

const getMiniCompareChartFooterRows = (el) => {
let footerRows = Array.from(el.children).slice(1);
footerRows = footerRows.filter((row) => !row.querySelector('.footer-row-cell'));
Expand Down Expand Up @@ -421,46 +470,51 @@ export default async function init(el) {
merchCard.setAttribute('filters', categories.join(','));
merchCard.setAttribute('types', types.join(','));

const footer = createTag('div', { slot: 'footer' });
if (ctas) {
if (merchCard.variant === 'mini-compare-chart') {
decorateButtons(ctas, 'button-l');
} else {
decorateButtons(ctas);
}
const links = ctas.querySelectorAll('a');
ctas.remove();
footer.append(...links);
}
merchCard.appendChild(footer);
if (merchCard.variant !== 'twp') {
parseContent(el, merchCard);

if (MULTI_OFFER_CARDS.includes(cardType)) {
if (merchCard.variant === MINI_COMPARE_CHART) {
const miniCompareOffers = createTag('div', { slot: 'offers' });
merchCard.append(miniCompareOffers);
}
const quantitySelect = await extractQuantitySelect(el, cardType);
const offerSelection = el.querySelector('ul');
if (offerSelection) {
const { initOfferSelection } = await import('./merch-offer-select.js');
setMiniCompareOfferSlot(merchCard, undefined);
initOfferSelection(merchCard, offerSelection, quantitySelect);
const footer = createTag('div', { slot: 'footer' });
if (ctas) {
if (merchCard.variant === 'mini-compare-chart') {
decorateButtons(ctas, 'button-l');
} else {
decorateButtons(ctas);
}
footer.append(ctas);
}
if (quantitySelect) {
merchCard.appendChild(footer);

if (MULTI_OFFER_CARDS.includes(cardType)) {
const quantitySelect = extractQuantitySelect(el);
const offerSelection = el.querySelector('ul');
if (merchCard.variant === MINI_COMPARE_CHART) {
setMiniCompareOfferSlot(merchCard, quantitySelect);
} else {
const bodySlot = merchCard.querySelector('div[slot="body-xs"]');
bodySlot.append(quantitySelect);
const miniCompareOffers = createTag('div', { slot: 'offers' });
merchCard.append(miniCompareOffers);
}
if (offerSelection) {
const { initOfferSelection } = await import('./merch-offer-select.js');
setMiniCompareOfferSlot(merchCard, undefined);
initOfferSelection(merchCard, offerSelection, quantitySelect);
}
if (quantitySelect) {
if (merchCard.variant === MINI_COMPARE_CHART) {
setMiniCompareOfferSlot(merchCard, quantitySelect);
} else {
const bodySlot = merchCard.querySelector('div[slot="body-xs"]');
bodySlot.append(quantitySelect);
}
}
}

decorateBlockHrs(merchCard);
simplifyHrs(merchCard);
if (merchCard.classList.contains('has-divider')) {
merchCard.setAttribute('custom-hr', true);
}
decorateFooterRows(merchCard, footerRows);
} else {
parseTwpContent(el, merchCard);
}
decorateBlockHrs(merchCard);
simplifyHrs(merchCard);
if (merchCard.classList.contains('has-divider')) {
merchCard.setAttribute('custom-hr', true);
}
decorateFooterRows(merchCard, footerRows);
el.replaceWith(merchCard);
decorateMerchCardLinkAnalytics(merchCard);
return merchCard;
Expand Down
2 changes: 1 addition & 1 deletion libs/blocks/merch-card/merch-offer-select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const initOfferSelection = (merchCard, offerSelection, quantitySelector)
merchOfferSlot = merchCard.querySelector('div[slot="body-m"]');
break;
case 'twp':
merchOfferSlot = merchCard.querySelector('div[slot="footer"]');
merchOfferSlot = merchCard.querySelector('[slot="footer"]');
break;
default:
merchOfferSlot = merchCard.querySelector('div[slot="body-xs"]');
Expand Down
2 changes: 1 addition & 1 deletion libs/deps/merch-offer-select.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion libs/deps/merch-twp-d2p.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions libs/deps/merch-twp-d2p.js.map
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions libs/deps/merch-twp-d2p.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"inputs":{"../../node_modules/@spectrum-web-components/reactive-controllers/src/MatchMedia.js":{"bytes":800,"imports":[],"format":"esm"},"src/merch-twp-d2p.css.js":{"bytes":3940,"imports":[{"path":"/libs/deps/lit-all.min.js","kind":"import-statement","external":true}],"format":"esm"},"src/media.js":{"bytes":315,"imports":[],"format":"esm"},"src/constants.js":{"bytes":1364,"imports":[],"format":"esm"},"src/deeplink.js":{"bytes":2035,"imports":[],"format":"esm"},"src/merch-twp-d2p.js":{"bytes":15674,"imports":[{"path":"/libs/deps/lit-all.min.js","kind":"import-statement","external":true},{"path":"../../node_modules/@spectrum-web-components/reactive-controllers/src/MatchMedia.js","kind":"import-statement","original":"@spectrum-web-components/reactive-controllers/src/MatchMedia.js"},{"path":"src/merch-twp-d2p.css.js","kind":"import-statement","original":"./merch-twp-d2p.css.js"},{"path":"src/media.js","kind":"import-statement","original":"./media.js"},{"path":"src/constants.js","kind":"import-statement","original":"./constants.js"},{"path":"src/deeplink.js","kind":"import-statement","original":"./deeplink"}],"format":"esm"}},"outputs":{"lib/merch-twp-d2p.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":35506},"lib/merch-twp-d2p.js":{"imports":[{"path":"/libs/deps/lit-all.min.js","kind":"import-statement","external":true},{"path":"/libs/deps/lit-all.min.js","kind":"import-statement","external":true}],"exports":["MerchTwpD2P"],"entryPoint":"src/merch-twp-d2p.js","inputs":{"src/merch-twp-d2p.js":{"bytesInOutput":9688},"../../node_modules/@spectrum-web-components/reactive-controllers/src/MatchMedia.js":{"bytesInOutput":540},"src/merch-twp-d2p.css.js":{"bytesInOutput":3941},"src/media.js":{"bytesInOutput":28},"src/constants.js":{"bytesInOutput":114},"src/deeplink.js":{"bytesInOutput":202}},"bytes":14675}}}

0 comments on commit 16cb1bb

Please sign in to comment.