From b75d2dfb4506b39637a8ee7563d2c2f7c890e4ef Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Tue, 5 Sep 2023 08:29:17 +0200 Subject: [PATCH] #41 Refactor column block to support multiple text columns --- blocks/v2-columns/v2-columns.css | 47 +++++++++++---------- blocks/v2-columns/v2-columns.js | 72 +++++++++++++++++--------------- 2 files changed, 64 insertions(+), 55 deletions(-) diff --git a/blocks/v2-columns/v2-columns.css b/blocks/v2-columns/v2-columns.css index dcaf4ed7e..fcbb59703 100644 --- a/blocks/v2-columns/v2-columns.css +++ b/blocks/v2-columns/v2-columns.css @@ -1,72 +1,77 @@ -.v2-columns { - display: flex; +.v2-columns__row { flex-direction: column; + display: flex; + gap: 0; + width: 100%; + justify-content: center; align-items: center; } -.v2-columns__image, -.v2-columns-content { +.v2-columns__column--with-image, +.v2-columns__column--with-text { max-width: 343px; } -.v2-columns__image img { +.v2-columns__column--with-image img { display: block; } -.v2-columns-content { +.v2-columns__column--with-text { display: flex; flex-direction: column; padding: 40px 0; } -.v2-columns-content .v2-columns-content__pretitle { +.v2-columns__column--with-text .v2-columns__pretitle { font-family: var(--ff-accents-regular); font-size: var(--accent-2-font-size); line-height: var(--accent-2-line-height); margin: 0; } -.v2-columns-content .v2-columns-content__heading { +.v2-columns__column--with-text .v2-columns__heading { font-size: var(--headline-1-font-size); line-height: var(--headline-1-line-height); letter-spacing: var(--headline-1-letter-spacing); margin: 12px 0; } -.v2-columns-content .v2-columns-content__body { +.v2-columns__column--with-text .v2-columns__body { font-size: var(--body-1-font-size); margin: 0 0 32px; } -.v2-columns-content a.button { +.v2-columns__column--with-text a.button { width: fit-content; margin: 0; } -.v2-columns-content a.button:not(a.button:first-of-type) { +.v2-columns__column--with-text a.button:not(a.button:first-of-type) { margin: 5px 0 0; } @media (min-width: 744px) { .v2-columns { - flex-direction: row; - justify-content: center; width: 100%; - column-gap: 56px; } - - .v2-columns-content, - .v2-columns__image { + + .v2-columns__row { + flex-direction: row; + gap: 56px; + } + + .v2-columns__column--with-text, + .v2-columns__column--with-image { flex-direction: column; - width: 50%; + width: 100%; padding: 0; } - .v2-columns-content .v2-columns-content__heading { + .v2-columns__column--with-text .v2-columns__heading { margin: 24px 0 12px; } - .v2-columns-content .v2-columns-content__body { + .v2-columns__column--with-text .v2-columns__body { margin: 0 0 24px; } -} \ No newline at end of file +} diff --git a/blocks/v2-columns/v2-columns.js b/blocks/v2-columns/v2-columns.js index 316876b11..faa0b9a30 100644 --- a/blocks/v2-columns/v2-columns.js +++ b/blocks/v2-columns/v2-columns.js @@ -2,50 +2,54 @@ import { createElement } from '../../scripts/common.js'; export default async function decorate(block) { const blockName = 'v2-columns'; - const columnsImage = createElement('div', { classes: `${blockName}__image` }); - const columnsText = createElement('div', { classes: `${blockName}-content` }); + const rows = [...block.querySelectorAll(':scope > div')]; + const columns = [...block.querySelectorAll(':scope > div > div')]; - const columns = [...block.querySelector(':scope > div').children]; - - const imageFirst = columns[0].querySelector('picture'); - // block.classList.add(`image-${imageFirst ? 'first' : 'last'}`); + rows.forEach((row) => { + row.classList.add(`${blockName}__row`); + }); - const picture = block.querySelector('picture'); + columns.forEach((col) => { + col.classList.add(`${blockName}__column`); - const allTextElmts = block.querySelectorAll('p'); - const bodyElmts = []; + const picture = col.querySelector('picture'); + const allTextElmts = col.querySelectorAll('p'); + const bodyElmts = []; - allTextElmts.forEach((e) => { - const nextElmt = e.nextElementSibling; + if (picture) { + col.classList.add(`${blockName}__column--with-image`); + } else { + col.classList.add(`${blockName}__column--with-text`); + } - const isButton = [...e.classList].includes('button-container'); - const isPretitle = nextElmt?.tagName.toLowerCase()[0] === 'h'; + allTextElmts.forEach((e) => { + const nextElmt = e.nextElementSibling; - if (!isPretitle && !isButton) bodyElmts.push(e); - }); - bodyElmts.forEach((e) => e.classList.add(`${blockName}-content__body`)); + const isButton = [...e.classList].includes('button-container'); + const isPretitle = nextElmt?.tagName.toLowerCase()[0] === 'h'; - const buttons = [...block.querySelectorAll('a')]; - buttons.forEach((btn) => btn.classList.add('button', 'button--large', 'button--primary')); + if (!isPretitle && !isButton) bodyElmts.push(e); + }); + bodyElmts.forEach((e) => e.classList.add(`${blockName}__body`)); - const headings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')]; - headings.forEach((heading) => heading.classList.add(`${blockName}-content__heading`)); + const buttons = [...col.querySelectorAll('a')]; + buttons.forEach((btn) => { + btn.classList.add('button', 'button--large', 'button--primary'); - const pretitleText = headings[0].previousElementSibling; + if (btn.parentElement.classList.contains('button-container')) { + btn.parentElement.replaceWith(btn); + } + }); - if (pretitleText) { - const pretitle = createElement('span', { classes: `${blockName}-content__pretitle` }); - pretitle.textContent = pretitleText.textContent; - columnsText.append(pretitle); - } + const headings = [...col.querySelectorAll('h1, h2, h3, h4, h5, h6')]; + headings.forEach((heading) => heading.classList.add(`${blockName}__heading`)); - columnsImage.append(picture); - columnsText.append(...headings, ...bodyElmts, ...buttons); + const pretitleText = headings[0]?.previousElementSibling; - block.textContent = ''; - if (imageFirst) { - block.append(columnsImage, columnsText); - } else { - block.append(columnsText, columnsImage); - } + if (pretitleText) { + const pretitle = createElement('span', { classes: `${blockName}__pretitle` }); + pretitle.textContent = pretitleText.textContent; + pretitleText.replaceWith(pretitle); + } + }); }