From c4ec9165784ea51f22c16b1c4eab61979ebcb5bf Mon Sep 17 00:00:00 2001 From: thi64146 Date: Fri, 8 Mar 2024 14:17:43 -0700 Subject: [PATCH 1/6] Check for block content and use as header if exists, updated twitter icon ref --- libs/blocks/share/share.css | 6 +++++- libs/blocks/share/share.js | 10 +++++++--- libs/blocks/share/share.svg | 9 ++++++++- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/libs/blocks/share/share.css b/libs/blocks/share/share.css index eb80bbd129..e61f51d8e5 100644 --- a/libs/blocks/share/share.css +++ b/libs/blocks/share/share.css @@ -124,10 +124,14 @@ .share.inline { margin: 0 auto; - text-align: center; + text-align: unset; padding: 8px 0 16px; } +.share.inline .tracking-header { + margin-bottom: 1em; +} + .share.inline p.icon-container { justify-content: flex-start; margin: 0; diff --git a/libs/blocks/share/share.js b/libs/blocks/share/share.js index 5badf5fafb..c8f0d39bb5 100644 --- a/libs/blocks/share/share.js +++ b/libs/blocks/share/share.js @@ -56,7 +56,6 @@ export default async function decorate(block) { 'pinterest', 'reddit', ]; - block.innerHTML = ''; const clipboardSupport = !!navigator.clipboard; if (clipboardSupport) platforms.push('clipboard'); const svgs = await getSVGsfromFile( @@ -101,8 +100,13 @@ export default async function decorate(block) { return null; } }; - if (!block.classList.contains('inline')) { - const heading = toSentenceCase(await replaceKey('share-this-page', config)); + const authoredContent = block.innerText.trim() !== ''; + if (authoredContent) { + const rows = block.querySelectorAll(':scope > div'); + rows[0].classList.add('tracking-header'); + } else if (!authoredContent && !block.classList.contains('inline')) { + const heading = toSentenceCase(await replaceKey('share-this-page', config)); + block.innerHTML = ''; block.append(createTag('p', { class: 'tracking-header' }, heading)); } const container = createTag('p', { class: 'icon-container' }); 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 @@ - + + + + + From 6352cb7fd8efbb1dae7317166ff03a28f6729dfc Mon Sep 17 00:00:00 2001 From: thi64146 Date: Mon, 18 Mar 2024 15:19:15 -0600 Subject: [PATCH 2/6] Refactored to allow for authoring icon discression --- libs/blocks/share/share.css | 4 +-- libs/blocks/share/share.js | 51 +++++++++++++++++++++++++++++-------- 2 files changed, 42 insertions(+), 13 deletions(-) diff --git a/libs/blocks/share/share.css b/libs/blocks/share/share.css index e61f51d8e5..01696f2e3f 100644 --- a/libs/blocks/share/share.css +++ b/libs/blocks/share/share.css @@ -124,12 +124,12 @@ .share.inline { margin: 0 auto; - text-align: unset; + text-align: center; padding: 8px 0 16px; } .share.inline .tracking-header { - margin-bottom: 1em; + text-align: left; } .share.inline p.icon-container { diff --git a/libs/blocks/share/share.js b/libs/blocks/share/share.js index c8f0d39bb5..52dd398559 100644 --- a/libs/blocks/share/share.js +++ b/libs/blocks/share/share.js @@ -35,6 +35,15 @@ export async function getSVGsfromFile(path, selectors) { }); } +function removePlatformEls(el) { + const manualShares = el.querySelectorAll('a'); + if (manualShares.length === 0) return null; + [...manualShares].forEach((share) => { + const parentP = share.closest('p'); + parentP?.remove(); + }); +} + function getPlatforms(el) { const manualShares = el.querySelectorAll('a'); if (manualShares.length === 0) return null; @@ -49,6 +58,7 @@ function getPlatforms(el) { export default async function decorate(block) { const config = getConfig(); const base = config.miloLibs || config.codeRoot; + const rows = block.querySelectorAll(':scope > div'); const platforms = getPlatforms(block) || [ 'facebook', 'twitter', @@ -56,6 +66,34 @@ export default async function decorate(block) { 'pinterest', 'reddit', ]; + /* 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()) : ''; + removePlatformEls(block) + rows[0]?.classList.add('tracking-header'); + const childDiv = rows[0].querySelector(':scope > div'); + const emptyRow = childDiv?.innerText.trim() === ''; + + // wrap innerHTML in

tag if none are present + if (childDiv?.innerHTML !== undefined && !emptyRow) { + const innerPs = childDiv.querySelectorAll(':scope > p'); + if (innerPs.length === 0) { + const text = childDiv.innerHTML; + childDiv.innerHTML = '' + childDiv.append(createTag('p', null, text)); + } + } + + + // add share key title if empty row + if (childDiv && emptyRow) { + if (!block.classList.contains('inline')) { + const heading = toSentenceCase(await replaceKey('share-this-page', config)); + childDiv.append(createTag('p', null, heading)); + } else { + rows[0].innerHTML = ''; + } + } + const clipboardSupport = !!navigator.clipboard; if (clipboardSupport) platforms.push('clipboard'); const svgs = await getSVGsfromFile( @@ -63,8 +101,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; @@ -100,15 +137,7 @@ export default async function decorate(block) { return null; } }; - const authoredContent = block.innerText.trim() !== ''; - if (authoredContent) { - const rows = block.querySelectorAll(':scope > div'); - rows[0].classList.add('tracking-header'); - } else if (!authoredContent && !block.classList.contains('inline')) { - const heading = toSentenceCase(await replaceKey('share-this-page', config)); - block.innerHTML = ''; - block.append(createTag('p', { class: 'tracking-header' }, heading)); - } + const container = createTag('p', { class: 'icon-container' }); svgs.forEach(async (svg) => { if (svg.name === 'clipboard') return; From 0a3a321e2fd161048559b20ec78cec871b7d61ce Mon Sep 17 00:00:00 2001 From: thi64146 Date: Mon, 25 Mar 2024 13:42:16 -0600 Subject: [PATCH 3/6] share.test for new custom title, refactored so .inline doesn't have title support --- libs/blocks/share/share.css | 4 -- libs/blocks/share/share.js | 64 +++++++++++++------------------ test/blocks/share/mocks/body.html | 7 ++++ test/blocks/share/share.test.js | 7 ++++ 4 files changed, 40 insertions(+), 42 deletions(-) diff --git a/libs/blocks/share/share.css b/libs/blocks/share/share.css index 01696f2e3f..eb80bbd129 100644 --- a/libs/blocks/share/share.css +++ b/libs/blocks/share/share.css @@ -128,10 +128,6 @@ padding: 8px 0 16px; } -.share.inline .tracking-header { - text-align: left; -} - .share.inline p.icon-container { justify-content: flex-start; margin: 0; diff --git a/libs/blocks/share/share.js b/libs/blocks/share/share.js index 52dd398559..53fd109226 100644 --- a/libs/blocks/share/share.js +++ b/libs/blocks/share/share.js @@ -35,65 +35,52 @@ export async function getSVGsfromFile(path, selectors) { }); } -function removePlatformEls(el) { - const manualShares = el.querySelectorAll('a'); - if (manualShares.length === 0) return null; - [...manualShares].forEach((share) => { - const parentP = share.closest('p'); - parentP?.remove(); - }); -} - 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); const rows = block.querySelectorAll(':scope > div'); - const platforms = getPlatforms(block) || [ - 'facebook', - 'twitter', - 'linkedin', - 'pinterest', - 'reddit', - ]; - /* 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()) : ''; - removePlatformEls(block) - rows[0]?.classList.add('tracking-header'); const childDiv = rows[0].querySelector(':scope > div'); const emptyRow = childDiv?.innerText.trim() === ''; + /* 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()) : ''; + 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?.innerHTML !== undefined && !emptyRow) { + if (childDiv && !emptyRow) { const innerPs = childDiv.querySelectorAll(':scope > p'); if (innerPs.length === 0) { - const text = childDiv.innerHTML; - childDiv.innerHTML = '' + const text = childDiv.innerText; + childDiv.innerText = '' childDiv.append(createTag('p', null, text)); } } - - // add share key title if empty row - if (childDiv && emptyRow) { - if (!block.classList.contains('inline')) { - const heading = toSentenceCase(await replaceKey('share-this-page', config)); - childDiv.append(createTag('p', null, heading)); - } else { - rows[0].innerHTML = ''; - } - } - const clipboardSupport = !!navigator.clipboard; if (clipboardSupport) platforms.push('clipboard'); const svgs = await getSVGsfromFile( @@ -134,6 +121,7 @@ export default async function decorate(block) { href: `https://reddit.com/submit?url=${url}&title=${title}`, }; default: + /* c8 ignore next 1 */ return null; } }; 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 @@ + +

+