diff --git a/libs/blocks/share/share.js b/libs/blocks/share/share.js index 5badf5fafb..45f2e116ce 100644 --- a/libs/blocks/share/share.js +++ b/libs/blocks/share/share.js @@ -37,26 +37,53 @@ export async function getSVGsfromFile(path, selectors) { function getPlatforms(el) { const manualShares = el.querySelectorAll('a'); - if (manualShares.length === 0) return null; - return [...manualShares].map((link) => { - const { href } = link; + if (manualShares.length === 0) return ['facebook', 'twitter', 'linkedin', 'pinterest', 'reddit']; + const platforms = []; + [...manualShares].forEach((share) => { + const { href } = share; const url = new URL(href); const parts = url.host.split('.'); - return parts[parts.length - 2]; + platforms.push(parts[parts.length - 2]); + const parentP = share.closest('p'); + parentP?.remove(); }); + return platforms; } export default async function decorate(block) { const config = getConfig(); const base = config.miloLibs || config.codeRoot; - const platforms = getPlatforms(block) || [ - 'facebook', - 'twitter', - 'linkedin', - 'pinterest', - 'reddit', - ]; - block.innerHTML = ''; + const platforms = getPlatforms(block); + const rows = block.querySelectorAll(':scope > div'); + const childDiv = rows[0].querySelector(':scope > div'); + const emptyRow = childDiv?.innerText.trim() === ''; + const toSentenceCase = (str) => { + if (!str || typeof str !== 'string') return ''; + /* eslint-disable-next-line no-useless-escape */ + return str.toLowerCase().replace(/(^\s*\w|[\.\!\?]\s*\w)/g, (c) => c.toUpperCase()); + }; + + if (block.classList.contains('inline')) { + rows[0].innerHTML = ''; + } else { + rows[0]?.classList.add('tracking-header'); + // add share placeholder if empty row + if (childDiv && emptyRow) { + const heading = toSentenceCase(await replaceKey('share-this-page', config)); + childDiv.append(createTag('p', null, heading)); + } + } + + // wrap innerHTML in

tag if none are present + if (childDiv && !emptyRow) { + const innerPs = childDiv.querySelectorAll(':scope > p'); + if (innerPs.length === 0) { + const text = childDiv.innerText; + childDiv.innerText = ''; + childDiv.append(createTag('p', null, text)); + } + } + const clipboardSupport = !!navigator.clipboard; if (clipboardSupport) platforms.push('clipboard'); const svgs = await getSVGsfromFile( @@ -64,8 +91,7 @@ export default async function decorate(block) { platforms, ); if (!svgs) return; - /* eslint-disable no-confusing-arrow,no-useless-escape */ - const toSentenceCase = (str) => str && typeof str === 'string' ? str.toLowerCase().replace(/(^\s*\w|[\.\!\?]\s*\w)/g, (c) => c.toUpperCase()) : ''; + const shareToText = toSentenceCase(await replaceKey('share-to', config)); const url = encodeURIComponent(window.location.href); const title = document.title ?? url; @@ -98,13 +124,11 @@ export default async function decorate(block) { href: `https://reddit.com/submit?url=${url}&title=${title}`, }; default: + /* c8 ignore next 1 */ return null; } }; - if (!block.classList.contains('inline')) { - const heading = toSentenceCase(await replaceKey('share-this-page', config)); - block.append(createTag('p', { class: 'tracking-header' }, heading)); - } + const container = createTag('p', { class: 'icon-container' }); svgs.forEach(async (svg) => { if (svg.name === 'clipboard') return; diff --git a/libs/blocks/share/share.svg b/libs/blocks/share/share.svg index 29fc982f2e..53a5ecc825 100644 --- a/libs/blocks/share/share.svg +++ b/libs/blocks/share/share.svg @@ -10,7 +10,14 @@ - + + + + + diff --git a/test/blocks/share/mocks/body.html b/test/blocks/share/mocks/body.html index 0587a56ebb..6548ac1178 100644 --- a/test/blocks/share/mocks/body.html +++ b/test/blocks/share/mocks/body.html @@ -43,6 +43,13 @@ + +

+
+
Custom Title
+
+
+
diff --git a/test/blocks/share/share.test.js b/test/blocks/share/share.test.js index 2849bbf840..6492ac8b3c 100644 --- a/test/blocks/share/share.test.js +++ b/test/blocks/share/share.test.js @@ -61,6 +61,12 @@ describe('Share', () => { expect(re).to.exist; expect(tw).to.not.exist; }); + it('Share w/ custom title exists', async () => { + const shareEl = document.querySelector('.share.title'); + await init(shareEl); + const p = shareEl.querySelector('.tracking-header p'); + expect(p).to.exist; + }); it('Inline variant (with inline siblings) creates an inline-wrapper element', async () => { const section = document.querySelector('.section.inline-has-siblings'); const shareEls = section.querySelectorAll('.share.inline');