@@ -80,32 +82,32 @@ export default async function decorate(block) { const template = parseFragment(HTML_TEMPLATE); // Identify slots - assignSlot(block, "heading", "h1"); - assignSlot(block, "image", "picture"); + assignSlot(block, 'heading', 'h1'); + assignSlot(block, 'image', 'picture'); - const description = [...block.querySelectorAll("h1 ~ p")].find((p) => !p.querySelector("picture")); + const description = [...block.querySelectorAll('h1 ~ p')].find((p) => !p.querySelector('picture')); if (description) { - description.setAttribute("slot", "description"); + description.setAttribute('slot', 'description'); } // Pre-processing - block.querySelectorAll(".template-section-metadata").forEach((metadataEl) => { + block.querySelectorAll('.template-section-metadata').forEach((metadataEl) => { const section = metadataEl.parentElement; const sectionMetadata = parseSectionMetadata(metadataEl); if (sectionMetadata.photoCredit) { - const picture = section.querySelector("picture"); + const picture = section.querySelector('picture'); if (picture) { - picture.insertAdjacentHTML("afterend", `
${sectionMetadata.photoCredit}
`); + picture.insertAdjacentHTML('afterend', `
${sectionMetadata.photoCredit}
`); } } }); - block.querySelectorAll(":scope > div > div > div:not(:first-of-type):not(:last-of-type)").forEach((section) => { - section.append(document.createElement("hr")); + block.querySelectorAll(':scope > div > div > div:not(:first-of-type):not(:last-of-type)').forEach((section) => { + section.append(document.createElement('hr')); }); - const share = buildBlock("social-share", { elems: [] }); - share.setAttribute("slot", "share"); + const share = buildBlock('social-share', { elems: [] }); + share.setAttribute('slot', 'share'); block.append(share); replaceLinksWithEmbed(block); @@ -114,49 +116,49 @@ export default async function decorate(block) { render(template, block, ARTICLE_TEMPLATES.LongForm); // Post-processing - removeEmptyElements(template, "p"); - template.querySelector(".article-body div > p").classList.add("highlight"); + removeEmptyElements(template, 'p'); + template.querySelector('.article-body div > p').classList.add('highlight'); - const pictures = template.querySelectorAll(".article-body p > picture"); + const pictures = template.querySelectorAll('.article-body p > picture'); addPhotoCredit(pictures); // Update block with rendered template - block.innerHTML = ""; + block.innerHTML = ''; block.append(template); // Inner block loading block - .querySelectorAll(".social-share, .embed, .more-cards, .courses") + .querySelectorAll('.social-share, .embed, .more-cards, .courses') .forEach((innerBlock) => decorateBlock(innerBlock)); - loadBlocks(document.querySelector("main")); + loadBlocks(document.querySelector('main')); // Toggle dark theme on scroll - const article = block.querySelector(".article-content"); + const article = block.querySelector('.article-content'); requestAnimationFrame(() => { new IntersectionObserver((entries) => { const { bottom, top } = entries[0].boundingClientRect; const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight); - article.classList.toggle("dark", !(bottom < 0 || top - viewHeight >= 0)); - }).observe(block.querySelector(".lead .image")); + article.classList.toggle('dark', !(bottom < 0 || top - viewHeight >= 0)); + }).observe(block.querySelector('.lead .image')); }); // creating auto carousels const autoCarouselGroups = []; const potentialArticleImageGroups = block.querySelectorAll( - ".article-body *:not(:has(picture)) + p:has(> picture img)" + '.article-body *:not(:has(picture)) + p:has(> picture img)', ); potentialArticleImageGroups.forEach((imageParagraph) => { // this element is followed by at least 2 other images if ( - imageParagraph.nextElementSibling.querySelector("picture > img") && - imageParagraph.nextElementSibling.nextElementSibling.querySelector("picture > img") + imageParagraph.nextElementSibling.querySelector('picture > img') + && imageParagraph.nextElementSibling.nextElementSibling.querySelector('picture > img') ) { const imageGroup = []; let nextElementToProcess = imageParagraph; while (nextElementToProcess) { - const hasImage = nextElementToProcess.querySelector("picture > img"); + const hasImage = nextElementToProcess.querySelector('picture > img'); if (hasImage) { imageGroup.push(nextElementToProcess); nextElementToProcess = nextElementToProcess.nextElementSibling; @@ -170,8 +172,8 @@ export default async function decorate(block) { autoCarouselGroups.forEach((imageArray) => { const prevNode = imageArray[0].previousSibling; - const autoCarouselBlock = buildBlock("carousel", { elems: imageArray }); - autoCarouselBlock.classList.add("auto-carousel"); + const autoCarouselBlock = buildBlock('carousel', { elems: imageArray }); + autoCarouselBlock.classList.add('auto-carousel'); prevNode.parentElement.insertBefore(autoCarouselBlock, prevNode.nextElementSibling); decorateBlock(autoCarouselBlock); }); diff --git a/blocks/more-cards/more-cards.css b/blocks/more-cards/more-cards.css index 3b888b2..43bfb3f 100644 --- a/blocks/more-cards/more-cards.css +++ b/blocks/more-cards/more-cards.css @@ -5,6 +5,10 @@ justify-content: center; } +.more-cards a { + text-decoration: none; +} + .more-cards.multiple { background-color: #f6f6f6; } diff --git a/blocks/product-listing/product-listing.css b/blocks/product-listing/product-listing.css index 4fd117d..27bcec1 100644 --- a/blocks/product-listing/product-listing.css +++ b/blocks/product-listing/product-listing.css @@ -102,7 +102,7 @@ } .product-listing-wrapper .product-listing.block .article-content .details .separator, -.product-listing-wrapper .product-listing.block .article-content .details .separator + span { +.product-listing-wrapper .product-listing.block .article-content .details .advertiser { color: #adb4b7; } diff --git a/blocks/product-listing/product-listing.js b/blocks/product-listing/product-listing.js index 97552ce..f208a2a 100644 --- a/blocks/product-listing/product-listing.js +++ b/blocks/product-listing/product-listing.js @@ -42,7 +42,7 @@ export default async function decorate(block) {