From f9aed0b1ca8e09cb15a81513dd215ab280a6cf4b Mon Sep 17 00:00:00 2001 From: Andreas Haller Date: Mon, 18 Dec 2023 16:41:47 +0100 Subject: [PATCH 1/2] first version of flexible column block --- blocks/columns/columns.css | 61 ++++++++++++++++++++++++++++---------- blocks/columns/columns.js | 34 +++++++++++---------- 2 files changed, 65 insertions(+), 30 deletions(-) diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index b6cdee4e..472e99b9 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -7,18 +7,6 @@ width: 100%; } -.columns > div > div { - order: 1; -} - -.columns > div > .columns-img-col { - order: 0; -} - -.columns > div > .columns-img-col img { - display: block; -} - @media (min-width: 900px) { .columns > div { align-items: center; @@ -26,8 +14,51 @@ gap: 32px; } - .columns > div > div { - flex: 1; - order: unset; + .columns > div > div:nth-child(1) { + flex: var(--column0-flex, 0); + } + + .columns > div > div:nth-child(2) { + flex: var(--column1-flex, 0); + } + + .columns > div > div:nth-child(3) { + flex: var(--column2-flex, 0); + } + + .columns > div > div:nth-child(4) { + flex: var(--column3-flex, 0); + } + + .columns > div > div:nth-child(5) { + flex: var(--column4-flex, 0); + } + + .columns > div > div:nth-child(6) { + flex: var(--column5-flex, 0); + } + + .columns > div > div:nth-child(7) { + flex: var(--column6-flex, 0); + } + + .columns > div > div:nth-child(8) { + flex: var(--column7-flex, 0); + } + + .columns > div > div:nth-child(9) { + flex: var(--column8-flex, 0); + } + + .columns > div > div:nth-child(10) { + flex: var(--column9-flex, 0); + } + + .columns > div > div:nth-child(11) { + flex: var(--column10-flex, 0); + } + + .columns > div > div:nth-child(12) { + flex: var(--column11-flex, 0); } } diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index 9b78c812..77432c47 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -1,18 +1,22 @@ export default function decorate(block) { - const cols = [...block.firstElementChild.children]; - block.classList.add(`columns-${cols.length}-cols`); + const id = `gen${crypto.randomUUID().split('-')[0]}`; + block.id = id; + + const columns = block.querySelectorAll(':scope > div > div'); + const columnCount = columns.length; + // following line regex matches partition sizes separated by dashes like 1-2-3 + const columnPartionRegex = /^\d{1,}(?:-\d{1,})*$/; + const columnPartions = [...block.classList].find((c) => columnPartionRegex.test(c))?.split('-') || []; + + let variables = ''; + for(let i = 0; i < columnCount; i+=1) { + const partition = columnPartions.length > i ? columnPartions[i] : 1; + variables += `--column${i}-flex: ${partition};`; + } - // setup image columns - [...block.children].forEach((row) => { - [...row.children].forEach((col) => { - const pic = col.querySelector('picture'); - if (pic) { - const picWrapper = pic.closest('div'); - if (picWrapper && picWrapper.children.length === 1) { - // picture is only content in column - picWrapper.classList.add('columns-img-col'); - } - } - }); - }); + const style = document.createElement('style'); + style.textContent = `#${id} { + ${variables} + }`; + block.parentNode.insertBefore(style, block); } From fb399b36b7d5a47d35a88dba05c51932f7aed5d1 Mon Sep 17 00:00:00 2001 From: Andreas Haller Date: Tue, 19 Dec 2023 07:54:06 +0100 Subject: [PATCH 2/2] fix linting --- blocks/columns/columns.js | 6 +++--- package-lock.json | 4 ++-- package.json | 1 + 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index 77432c47..22747504 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -1,15 +1,15 @@ export default function decorate(block) { const id = `gen${crypto.randomUUID().split('-')[0]}`; block.id = id; - + const columns = block.querySelectorAll(':scope > div > div'); const columnCount = columns.length; // following line regex matches partition sizes separated by dashes like 1-2-3 const columnPartionRegex = /^\d{1,}(?:-\d{1,})*$/; const columnPartions = [...block.classList].find((c) => columnPartionRegex.test(c))?.split('-') || []; - + let variables = ''; - for(let i = 0; i < columnCount; i+=1) { + for (let i = 0; i < columnCount; i += 1) { const partition = columnPartions.length > i ? columnPartions[i] : 1; variables += `--column${i}-flex: ${partition};`; } diff --git a/package-lock.json b/package-lock.json index 84797a11..c23bc9b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@adobe/helix-project-boilerplate", - "version": "1.0.0", + "version": "1.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@adobe/helix-project-boilerplate", - "version": "1.0.0", + "version": "1.2.2", "license": "Apache License 2.0", "devDependencies": { "@babel/core": "7.21.0", diff --git a/package.json b/package.json index 112c3dc9..4587406e 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "lint:js": "eslint .", "lint:css": "stylelint blocks/**/*.css styles/*.css", "lint": "npm run lint:js && npm run lint:css", + "lint:fix": "npm run lint:js -- --fix && npm run lint:css -- --fix", "semantic-release": "semantic-release --debug" }, "repository": {