Merge pull request #19 from Netcentric/nested-components

Add handling nested components

blocks/columns/columns.css

@@ -13,7 +13,7 @@
   order: 1;
 }
 
-.columns > div > div:not(.columns-img-col, .columns.locations > div > div) {
+.columns:not(.locations) > div > div:not(.columns-img-col) {
   max-width: 750px;
   margin-left: auto;
   margin-right: auto;
@@ -137,7 +137,7 @@
 }
 
 /* ratio variants */
-.columns.ratio > div > div {
+.columns.ratio.block > div > div {
   margin: unset;
 }
 

blocks/form/form-fields.js

@@ -160,6 +160,7 @@ const createSubmit = (fd) => {
 
   const fieldWrapper = createFieldWrapper(fd);
   fieldWrapper.append(button);
+  button.disabled = true;
   return { field: button, fieldWrapper };
 };
 

blocks/form/form.js

@@ -99,8 +99,18 @@ export default async function decorate(block) {
   if (!formLink) return;
 
   const form = await createForm(formLink.href);
+  const submitButton = form.querySelector('button[type="submit"]');
   block.replaceChildren(form);
 
+  /* enabling the submit button only when all of the checkboxes are checked */
+  const checkboxList = [...form.querySelectorAll('input[type="checkbox"]')];
+  checkboxList.forEach((checkbox) => {
+    checkbox.addEventListener('input', () => {
+      const disabled = checkboxList.length !== checkboxList.filter((ch) => ch.checked).length;
+      submitButton.disabled = disabled;
+    });
+  });
+
   form.addEventListener('submit', (e) => {
     e.preventDefault();
     const valid = form.checkValidity();

blocks/table/table.css

@@ -1,6 +1,7 @@
 .table {
   overflow: auto;
   width: 100%;
+  text-align: left;
 }
 
 .table .table-element {

scripts/scripts.js

@@ -76,6 +76,24 @@ function customDecorateBlocks(main) {
   });
 }
 
+function swappingPlacesBlock(main) {
+  const idLinks = [...main.querySelectorAll('a[href*="#id-"]')];
+  const elWithId = [...main.querySelectorAll('.block, .section')]
+    .filter((el) => [...el.classList].find((className) => className.startsWith('id-')));
+
+  idLinks.forEach((link) => {
+    const id = link.href.split('#')[1];
+    const selectedEl = elWithId.find((el) => el.classList.contains(id));
+    let targetEl = link;
+
+    if (link.closest('.button-container')) {
+      targetEl = link.closest('.button-container');
+    }
+
+    targetEl.replaceWith(selectedEl);
+  });
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -90,6 +108,7 @@ export function decorateMain(main) {
   customDecorateSections(main);
   decorateBlocks(main);
   customDecorateBlocks(main);
+  swappingPlacesBlock(main);
 }
 
 /**