#461424 #461425 - Improve boilerplate and add component nesting featu…

blocks/accordion/accordion.js

@@ -3,6 +3,23 @@ import ComponentBase from '../../scripts/component-base.js';
 export default class Accordion extends ComponentBase {
   dependencies = ['icon'];
 
+  // extendNestedConfig() {
+  //   return [
+  //     ...super.extendNestedConfig(),
+  //     {
+  //       button: {
+  //         componentName: 'button',
+  //         // active: false,
+  //         loaderConfig: {
+  //           targetsSelectorsPrefix: ':not(.accordion-control) >',
+  //         },
+  //       },
+  //     },
+  //   ];
+  // }
+
+  // nestedComponentsConfig = {};
+
   ready() {
     this.setAttribute('role', 'navigation');
     let children = Array.from(this.children);
@@ -15,7 +32,7 @@ export default class Accordion extends ComponentBase {
       }
       return child;
     });
-    // console.log(children)
+
     this.setupControls(children.filter((_, ind) => ind % 2 === 0));
     this.setupContent(children.filter((_, ind) => ind % 2 === 1));
   }

blocks/breadcrumbs/breadcrumbs.js

@@ -1,17 +1,33 @@
 import ComponentBase from '../../scripts/component-base.js';
+import { getBaseUrl } from '../../scripts/libs.js';
 
-export default class BreadCrumbs extends ComponentBase {
-  capitalize(string) {
-    return string
-      .split('-')
-      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
-      .join(' ');
+export default class Breadcrumbs extends ComponentBase {
+  static loaderConfig = {
+    ...ComponentBase.loaderConfig,
+    targetsSelectors: 'main > div',
+    targetsSelectorsLimit: 1,
+    targetsAsContainers: true,
+  };
+
+  nestedComponentsConfig = {};
+
+  extendConfig() {
+    return [
+      ...super.extendConfig(),
+      {
+        contentFromTargets: false,
+        addToTargetMethod: 'replaceWith',
+        targetsAsContainers: {
+          addToTargetMethod: 'prepend',
+        },
+      },
+    ];
   }
 
-  ready() {
+  connected() {
     this.classList.add('full-width');
     this.classList.add('breadcrumbs');
-    this.path = window.location.pathname.split('/');
+    this.path = window.location.href.split(getBaseUrl()).join('/').split('/');
     this.innerHTML = `
     <ul>
         ${this.path
@@ -28,4 +44,11 @@ export default class BreadCrumbs extends ComponentBase {
           .join('<li class="separator">›</li>')}
     </ul>`;
   }
+
+  capitalize(string) {
+    return string
+      .split('-')
+      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+      .join(' ');
+  }
 }

blocks/button/button.css

@@ -2,7 +2,6 @@ raqn-button {
   width: 100%;
   display: grid;
   align-content: center;
-  justify-content: center;
   align-items: center;
   justify-items: var(--scope-justify, start);
 }

blocks/button/button.js

@@ -1,8 +1,22 @@
 import ComponentBase from '../../scripts/component-base.js';
 
 export default class Button extends ComponentBase {
-  ready() {
-    this.setAttribute('role', 'button');
-    this.setAttribute('tabindex', '0');
+  static loaderConfig = {
+    ...ComponentBase.loaderConfig,
+    targetsSelectors: ':is(p,div):has(> a:only-child)',
+    selectorTest: (el) => el.childNodes.length === 1,
+  };
+
+  nestedComponentsConfig = {};
+
+  extendConfig() {
+    return [
+      ...super.extendConfig(),
+      {
+        targetsAsContainers: {
+          addToTargetMethod: 'append',
+        },
+      },
+    ];
   }
 }

blocks/card/card.css

@@ -8,20 +8,9 @@ raqn-card {
   padding: var(--scope-padding, 20px 0);
 }
 
-raqn-card a {
-  font-size: var(--raqn-font-size-3, 1.2em);
-  font-weight: bold;
-}
-
-raqn-card p a {
-  margin-block: 0;
-}
-
-raqn-card > picture {
-  grid-column: span var(--card-columns, 1fr);
-}
-
 raqn-card > div {
+  display: flex;
+  gap: var(--scope-gap, 20px);
   position: relative;
   background: var(--scope-inner-background, transparent);
   padding: var(--scope-inner-padding, 20px);
@@ -31,33 +20,42 @@ raqn-card > div {
   border-inline-end: var(--scope-border-inline-end, none);
 }
 
-raqn-card > div div:last-child > a {
+raqn-card :where(a, button) {
+  position: relative;
+  z-index: 2;
+}
+
+/* Make entire item clickable */
+raqn-card div > div:first-child > p > em:only-child > a:only-child {
   position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-end: 0;
   width: 100%;
   height: 100%;
-  cursor: pointer;
-  text-indent: -10000px;
-  margin: 0;
-  padding: 0;
+  color: transparent;
+  user-select: none;
+  z-index: 1;
 }
 
-raqn-card > div:has(raqn-icon) {
-  padding-block-end: 0;
-  padding-block-end: var(--scope-icon-size, 20px);
+raqn-card div > div:first-child > p:has(> em:only-child > a:only-child) {
+  margin: 0;
 }
 
-raqn-card p:has(raqn-icon) {
-  display: inline-grid;
-}
 
-raqn-card raqn-icon {
-  width: 100%;
+raqn-card div > div {
   display: flex;
-  position: absolute;
+  flex-direction: column;
+  height: 100%;
   inset-block-end: 0;
   inset-inline-end: 0;
-  box-sizing: border-box;
-  padding: var(--scope-inner-padding, 20px);
+}
+
+raqn-card div > div p:last-child:has(> raqn-button, raqn-icon) {
+  flex-grow: 1;
+  display: flex;
+  align-items: flex-end;
+}
+
+raqn-card div > div p:last-child:has(> raqn-icon) {
+  justify-content: flex-end;
 }

blocks/card/card.js

@@ -5,9 +5,6 @@ export default class Card extends ComponentBase {
   static observedAttributes = ['columns', 'ratio', 'eager', 'background', 'button'];
 
   ready() {
-    if (this.getAttribute('button') === 'true') {
-      Array.from(this.querySelectorAll('a')).forEach((a) => this.convertLink(a));
-    }
     this.eager = parseInt(this.getAttribute('eager') || 0, 10);
     this.classList.add('inner');
     if (this.eager) {

blocks/column/column.css

@@ -0,0 +1,5 @@
+raqn-column {
+  margin: var(--scope-margin, 0);
+  width: 100%;
+  display: grid;
+}

blocks/column/column.js

@@ -0,0 +1,71 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+// ! Solution 1 to remove mixins
+export default class ColumnN extends ComponentBase {
+  static observedAttributes = ['position', 'size', 'justify'];
+
+  connected() {
+    this.position = parseInt(this.getAttribute('position'), 10);
+    this.size = this.getAttribute('size');
+    this.justify = this.getAttribute('justify') || 'stretch';
+    this.calculateGridTemplateColumns();
+  }
+
+  calculateGridTemplateColumns() {
+    this.style.setProperty('justify-content', this.justify);
+    if (this.position) {
+      const parent = this.parentElement;
+      const children = Array.from(parent.children);
+      parent.classList.add('raqn-grid');
+      let parentGridTemplateColumns = parent.style.getPropertyValue(
+        '--grid-template-columns',
+      );
+      if (!parentGridTemplateColumns) {
+        // we have no grid template columns yet
+        parentGridTemplateColumns = children
+          .map((child, index) => {
+            if (this.position === index + 1) {
+              return this.size || 'auto';
+            }
+            return 'auto';
+          })
+          .join(' ');
+        // set the new grid template columns
+        parent.style.setProperty(
+          '--grid-template-columns',
+          parentGridTemplateColumns,
+        );
+      } else {
+        const { position } = this;
+        const prio = children.indexOf(this) + 1;
+        parentGridTemplateColumns = parentGridTemplateColumns
+          .split(' ')
+          .map((size, i) => {
+            // we have a non standard value for this position
+            const hasValue = size !== 'auto';
+            // we are at the position
+            const isPosition = i + 1 === position;
+            // we are at a position before the prio
+            const isBeforePrio = i + 1 <= prio;
+            // we have a non standard value for this position and we are at the position
+            if (!hasValue && isPosition) {
+              return this.size || 'auto';
+            }
+            // we have a non standard value for this position and we are at a position before the prio
+            if (hasValue && isPosition && isBeforePrio) {
+              return this.size || size;
+            }
+            return size;
+          })
+          .join(' ');
+        // set the new grid template columns
+        parent.style.setProperty(
+          '--grid-template-columns',
+          parentGridTemplateColumns,
+        );
+      }
+      this.style.gridColumn = this.position;
+      this.style.gridRow = 1;
+    }
+  }
+}

blocks/columns/columns.css

@@ -0,0 +1,3 @@
+raqn-column {
+  margin: var(--scope-margin, 0);
+}

blocks/columns/columns.js

@@ -0,0 +1,94 @@
+import { collectAttributes } from '../../scripts/libs.js';
+
+// ! Solution 2 to remove mixins
+export default class Columns {
+  static observedAttributes = ['position', 'size', 'justify'];
+
+  constructor(data) {
+    this.element = data.target;
+
+    const { currentAttributes } = collectAttributes(
+      data.componentName,
+      data.rawClasses,
+      [],
+      Columns.observedAttributes,
+      this.element,
+    );
+
+    Object.keys(currentAttributes).forEach((key) => {
+      this.element.setAttribute(key, currentAttributes[key]);
+    });
+
+    this.position = parseInt(this.getAttribute('position'), 10);
+    this.size = this.getAttribute('size');
+    this.justify = this.getAttribute('justify') || 'stretch';
+    this.calculateGridTemplateColumns();
+  }
+
+  calculateGridTemplateColumns() {
+    if (this.justify) {
+      this.element.style.justifyContent = this.justify;
+    }
+    if (this.position) {
+      const parent = this.element.parentElement;
+      const children = Array.from(parent.children);
+      parent.classList.add('raqn-grid');
+      let parentGridTemplateColumns = parent.style.getPropertyValue(
+        '--grid-template-columns',
+      );
+      if (!parentGridTemplateColumns) {
+        // we have no grid template columns yet
+        parentGridTemplateColumns = children
+          .map((child, index) => {
+            if (this.position === index + 1) {
+              return this.size || 'auto';
+            }
+            return 'auto';
+          })
+          .join(' ');
+        // set the new grid template columns
+        parent.style.setProperty(
+          '--grid-template-columns',
+          parentGridTemplateColumns,
+        );
+      } else {
+        const { position } = this;
+        const prio = children.indexOf(this.element) + 1;
+        parentGridTemplateColumns = parentGridTemplateColumns
+          .split(' ')
+          .map((size, i) => {
+            // we have a non standard value for this position
+            const hasValue = size !== 'auto';
+            // we are at the position
+            const isPosition = i + 1 === position;
+            // we are at a position before the prio
+            const isBeforePrio = i + 1 <= prio;
+            // we have a non standard value for this position and we are at the position
+            if (!hasValue && isPosition) {
+              return this.size || 'auto';
+            }
+            // we have a non standard value for this position and we are at a position before the prio
+            if (hasValue && isPosition && isBeforePrio) {
+              return this.size || size;
+            }
+            return size;
+          })
+          .join(' ');
+        // set the new grid template columns
+        parent.style.setProperty(
+          '--grid-template-columns',
+          parentGridTemplateColumns,
+        );
+      }
+      this.element.style.gridColumn = this.position;
+      this.element.style.gridRow = 1;
+    }
+  }
+
+  getAttribute(name) {
+    return (
+      this.element.getAttribute(name) ||
+      this.element.getAttribute(`data-${name}`)
+    );
+  }
+}