Skip to content

Commit

Permalink
MWPW-157024 - Editorial card authoring refinement for the 'open' vari…
Browse files Browse the repository at this point in the history 
…ant. (#2853)

* updated authoring experience for 'open' card so they support 3 rows and expects no background

* pass false as defat func bool && early return

* fixed test 404 and example for open 3 rows
  • Loading branch information
@ryanmparrish
ryanmparrish committed Sep 18, 2024
1 parent 9323f28 commit c2f4696
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 28 deletions.
49 changes: 31 additions & 18 deletions libs/blocks/editorial-card/editorial-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,15 @@ const decorateForeground = async (el, rows) => {
});
};

const decorateBgRow = (el, background) => {
decorateBlockBg(el, background);
const decorateBgRow = (el, background, remove = false) => {
const rows = background.querySelectorAll(':scope > div');
const bgRowsEmpty = [...rows].every((row) => row.innerHTML.trim() === '');
if (bgRowsEmpty) {
if (bgRowsEmpty || remove) {
el.classList.add('no-bg');
background.remove();
return;
}
decorateBlockBg(el, background);
};

function handleClickableCard(el) {
Expand All @@ -80,38 +81,50 @@ function handleClickableCard(el) {

const init = async (el) => {
el.classList.add('con-block');
if (el.className.includes('open')) {
el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
}
if (el.className.includes('rounded-corners')) {
loadStyle(`${base}/styles/rounded-corners.css`);
}
const hasOpenClass = el.className.includes('open');
if (hasOpenClass) el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
if (el.className.includes('rounded-corners')) loadStyle(`${base}/styles/rounded-corners.css`);
if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup');
let rows = el.querySelectorAll(':scope > div');
const [head, middle, ...tail] = rows;
if (rows.length === 4) el.classList.add('equal-height');
if (rows.length >= 1) {
const count = rows.length >= 3 ? 'three-plus' : rows.length;
const count = rows.length >= 4 ? 'four-plus' : rows.length;
switch (count) {
case 'three-plus':
// 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
decorateBgRow(el, head);
case 'four-plus':
// 4+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
// 4+ rows.open (0:bg[removed], 1:media, 2:copy, ...3:static, last:card-footer)
decorateBgRow(el, head, hasOpenClass);
rows = tail;
await decorateForeground(el, rows);
decorateMedia(el, middle);
await decorateForeground(el, rows);
break;
case 3:
// 3 rows (0:bg, 1:media, last:copy)
// 3 rows.open (0:media, 1:copy, last:card-footer)
if (hasOpenClass) {
el.classList.add('no-bg');
rows = [middle, tail[0]];
decorateMedia(el, head);
} else {
rows = tail;
decorateBgRow(el, head);
decorateMedia(el, middle);
}
await decorateForeground(el, rows);
break;
case 2:
// 2 rows (0:media, 1:copy)
rows = middle;
await decorateForeground(el, [rows]);
rows = [middle];
decorateMedia(el, head);
el.classList.add('no-bg');
await decorateForeground(el, rows);
break;
case 1:
// 1 row (0:copy)
rows = head;
await decorateForeground(el, [rows]);
rows = [head];
el.classList.add('no-bg', 'no-media');
await decorateForeground(el, rows);
break;
default:
}
Expand Down
48 changes: 38 additions & 10 deletions test/blocks/editorial-card/mocks/body.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ <h3 id="row---media-copy">2 Row - [media, copy]</h3>
</div>
<div>
<div>
<video playsinline="" poster="main--milo--adobecom.hlx.page/drafts/rparrish/cards/media_146a1d94ffd4b0939df71108642d05f544e909bb0.jpeg?width=750&amp;format=jpeg&amp;optimize=medium" muted="" data-hoverplay="" data-mouseevent="true">
<source src="main--milo--adobecom.hlx.page/libs/media_137656c3ef8484feb7bbc5cd88b23dd3dc31755b0.mp4" type="video/mp4">
<video playsinline="" poster="./" muted="" data-hoverplay="" data-mouseevent="true">
<source src="./" type="video/mp4">
</video>
</div>
</div>
Expand All @@ -45,10 +45,7 @@ <h3 id="row---bg-media-copy">3 Row - [bg, media, copy]</h3>
<div>
<div>
<picture>
<source type="image/webp" srcset="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=2000&amp;format=webply&amp;optimize=medium" media="(min-width: 600px)">
<source type="image/webp" srcset="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=750&amp;format=webply&amp;optimize=medium">
<source type="image/png" srcset="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=2000&amp;format=png&amp;optimize=medium" media="(min-width: 600px)">
<img loading="lazy" alt="" src="./media_167a2846a082544b90a92df270196720b7fd00fbc.png?width=750&amp;format=png&amp;optimize=medium" width="480" height="296">
<img loading="lazy" alt="" src="./" width="480" height="296">
</picture>
</div>
</div>
Expand Down Expand Up @@ -89,20 +86,51 @@ <h2>Variants: open, click w/ lockup content</h2>
<div>
<div>
<picture>
<img loading="lazy" alt="" src="./media.png" width="480" height="296">
<img loading="lazy" alt="" src="./" width="480" height="296">
</picture>
</div>
<div>
<picture>
<img loading="lazy" alt="" src="./media.png" width="480" height="296">
<img loading="lazy" alt="" src="./" width="480" height="296">
</picture>
</div>
<div><a href="./media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay">https://main--milo--adobecom.hlx.page/media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay</a></div>
</div>
<div>
<div>
<p>
<picture><img loading="lazy" src="/libs/img/icons/app/aftereffects.svg"></picture>
<picture><img loading="lazy" src="./"></picture>
Lockup
</p>
<p>per-breakpoint media - mobile image, tablet image, desktop video</p>
<p>Open<br>'no-border', 'l-rounded-corners-image', 'static-links-copy', 'underline-links-footer'</p>
<h3 id="open-key-variant-per-breakpoint-media-has-footer-row">Open key-variant, PER BREAKPOINT Media, Has Footer row</h3>
<p>Editorial Card (static links copy) <a href="http://adobe.com/static-links">Static link</a></p>
<p>TODO: the footer should have its own footer-static-links variant</p>
</div>
</div>
<div>
<div data-align="justify"><strong><a href="http://adobe.com/learn">Learn More</a></strong> <em><a href="">Watch the Video</a></em> <a href="">another link</a></div>
</div>
</div>
<div class="editorial-card open 3-rows">
<div>
<div>
<picture>
<img loading="lazy" alt="" src="./" width="480" height="296">
</picture>
</div>
<div>
<picture>
<img loading="lazy" alt="" src="./" width="480" height="296">
</picture>
</div>
<div><a href="./media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay">https://main--milo--adobecom.hlx.page/media_13a2002b9279a0df970ee999ad8dd54c4b2a7244d.mp4#_hoverplay</a></div>
</div>
<div>
<div>
<p>
<picture><img loading="lazy" src="./"></picture>
Lockup
</p>
<p>per-breakpoint media - mobile image, tablet image, desktop video</p>
Expand All @@ -125,7 +153,7 @@ <h2>Empty footer row and extra static row</h2>
<div>
<div>
<picture>
<img loading="lazy" alt="" src="./media.png" width="480" height="296">
<img loading="lazy" alt="" src="./" width="480" height="296">
</picture>
</div>
</div>
Expand Down

0 comments on commit c2f4696

Please sign in to comment.