Merge pull request #1 from hlxsites/columns

first version of flexible column block

blocks/columns/columns.css

@@ -7,27 +7,58 @@
   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;
     flex-direction: unset;
     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);
   }
 }

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;
 
-  // 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 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};`;
+  }
+
+  const style = document.createElement('style');
+  style.textContent = `#${id} {
+    ${variables}
+  }`;
+  block.parentNode.insertBefore(style, block);
 }

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": {