Merge pull request #52 from hlxsites/render-dom-template-v2

[READY] Render dom template v2

blocks/button/button.js

@@ -7,11 +7,7 @@ export default class Button extends ComponentBase {
     selectorTest: (el) => el.childNodes.length === 1,
   };
 
-  nestedComponentsConfig = {
-    popupTrigger: {
-      componentName: 'popup-trigger',
-    },
-  };
+  nestedComponentsConfig = {};
 
   extendConfig() {
     return [
@@ -49,6 +45,7 @@ export default class Button extends ComponentBase {
     const { anchor, ariaText } = this.elements;
     const wrap = document.createElement('span');
     if (ariaText) return;
+    if (!anchor.childNodes) return;
     const label = [...anchor.childNodes].find(({ nodeName }) => nodeName === '#text');
     if (!label) return;
     wrap.textContent = label.textContent;

blocks/card/card.css

@@ -28,7 +28,7 @@ raqn-card > div img {
 }
 
 /* Make entire item clickable */
-raqn-card div > div:first-child > p > em:only-child > a:only-child {
+raqn-card div > div:first-child > em:first-child > a:only-child {
   position: absolute;
   inset-block-end: 0;
   inset-inline-end: 0;
@@ -39,10 +39,6 @@ raqn-card div > div:first-child > p > em:only-child > a:only-child {
   z-index: 1;
 }
 
-raqn-card div > div:first-child > p:has(> em:only-child > a:only-child) {
-  margin: 0;
-}
-
 raqn-card div > div {
   display: flex;
   flex-direction: column;
@@ -51,12 +47,12 @@ raqn-card div > div {
   inset-inline-end: 0;
 }
 
-raqn-card div > div p:last-child:has(> raqn-button, raqn-icon) {
+raqn-card div > div > :where(raqn-button, raqn-icon):last-child {
   flex-grow: 1;
   display: flex;
   align-items: flex-end;
 }
 
-raqn-card div > div p:last-child:has(> raqn-icon) {
+raqn-card div > div > raqn-icon:last-child {
   justify-content: flex-end;
 }

blocks/card/card.editor.js

@@ -1,7 +1,7 @@
 export default function config() {
   return {
     attributes: {
-      data: {
+      grid: {
         ratio: {
           type: 'select',
           options: [

blocks/footer/footer.css

@@ -1,7 +1,5 @@
 footer {
   background: var(--background-color);
-  width: var(--max-width);
-  margin: 0 auto;
 }
 
 raqn-footer {

blocks/grid-item/grid-item.js

@@ -1,6 +1,6 @@
 import ComponentBase from '../../scripts/component-base.js';
 
-export default class Grid extends ComponentBase {
+export default class GridItem extends ComponentBase {
   static observedAttributes = [
     'data-level',
     'data-order',

blocks/grid/grid.css

@@ -1,5 +1,6 @@
 raqn-grid {
   /* Set to initial to prevent inheritance for nested grids */
+  --grid-gap: initial;
   --grid-height: initial;
   --grid-width: 100%;
   --grid-justify-items: initial;
@@ -29,12 +30,5 @@ raqn-grid {
   height: var(--grid-height);
   background: var(--grid-background);
   color: var(--grid-color);
-}
-
-/* 
- * First level grids will (as any other block) will act as a container
- * and width should not be applied.
- */
-raqn-grid:not(main > div > raqn-grid) {
   width: var(--grid-width);
 }

blocks/grid/grid.editor.js

@@ -24,8 +24,6 @@ export default function config() {
           helpText: 'The gap between the grid items.',
           value: '20px',
         },
-      },
-      data: {
         height: {
           type: 'text',
           label: 'Height',
@@ -57,36 +55,6 @@ export default function config() {
           label: 'Reverse',
           helpText: 'Reverse the order of the grid items.',
         },
-        columns: {
-          type: 'text',
-          label: 'Columns',
-          helpText: 'Number of columns in the grid.',
-          value: 'auto',
-        },
-        rows: {
-          type: 'text',
-          label: 'Rows',
-          helpText: 'Number of rows in the grid.',
-          value: 'auto',
-        },
-        'auto-columns': {
-          type: 'text',
-          label: 'Auto Columns',
-          helpText: 'The width of the columns.',
-          value: 'auto',
-        },
-        'auto-rows': {
-          type: 'text',
-          label: 'Auto Rows',
-          helpText: 'The height of the rows.',
-          value: 'auto',
-        },
-        areas: {
-          type: 'text',
-          label: 'Areas',
-          helpText: 'The grid areas.',
-          value: '',
-        },
         'justify-items': {
           type: 'select',
           options: [

blocks/grid/grid.js

@@ -8,7 +8,11 @@ export default class Grid extends ComponentBase {
   attributesValues = {
     all: {
       grid: {
-        gap: '20px',
+        template: {
+          columns: 'repeat(auto-fill, 200px)',
+          rows: 'auto',
+        },
+        height: 'initial',
       },
     },
   };

blocks/icon/icon.js

@@ -28,8 +28,7 @@ export default class Icon extends ComponentBase {
     ];
   }
 
-  constructor() {
-    super();
+  onInit() {
     this.setupSprite();
   }
 

blocks/popup-trigger/popup-trigger.js

@@ -1,18 +1,17 @@
 import ComponentBase from '../../scripts/component-base.js';
-
+import { componentList } from '../../scripts/component-list/component-list.js';
 import { popupState } from '../../scripts/libs.js';
+import { loadModules } from '../../scripts/render/dom-reducers.js';
 
 export default class PopupTrigger extends ComponentBase {
-  static observedAttributes = ['data-active', 'data-url'];
+  static observedAttributes = ['data-active', 'data-action'];
 
   static loaderConfig = {
     ...ComponentBase.loaderConfig,
     targetsSelectors: 'a:is([href*="#popup-trigger"],[href*="#popup-close"])',
     targetsAsContainers: true,
   };
 
-  dependencies = ['popup'];
-
   nestedComponentsConfig = {};
 
   get isActive() {
@@ -23,8 +22,9 @@ export default class PopupTrigger extends ComponentBase {
     return [
       ...super.extendConfig(),
       {
-        elements: {
+        selectors: {
           popupBtn: 'button',
+          triggerIcon: 'raqn-icon',
         },
         closePopupIdentifier: '#popup-close',
       },
@@ -39,50 +39,31 @@ export default class PopupTrigger extends ComponentBase {
   }
 
   onInit() {
-    this.createButton();
-    this.popupBtn.append(...this.childNodes);
-    this.append(this.popupBtn);
-    this.processTargetAnchor();
+    this.setAction();
+    this.queryElements();
   }
 
-  processTargetAnchor() {
-    const { target: anchor } = this.initOptions;
+  setAction() {
     const { closePopupIdentifier } = this.config;
-    const anchorUrl = new URL(anchor.href);
+    const anchorUrl = new URL(this.dataset.action, window.location.origin);
 
     if (anchorUrl.hash === closePopupIdentifier) {
       this.isClosePopupTrigger = true;
-    } else {
-      this.dataset.url = anchorUrl.pathname;
-    }
-
-    if (anchor.hasAttribute('aria-label')) {
-      this.ariaLabel = anchor.getAttribute('aria-label');
-      this.popupBtn.setAttribute('aria-label', this.ariaLabel);
+      this.dataset.action = anchorUrl.hash;
     }
   }
 
-  addContentFromTarget() {
-    const { target } = this.initOptions;
-    this.popupBtn.append(...target.childNodes);
-  }
-
-  createButton() {
-    this.popupBtn = document.createElement('button');
-    this.popupBtn.setAttribute('aria-expanded', 'false');
-    this.popupBtn.setAttribute('aria-haspopup', 'true');
-    this.popupBtn.setAttribute('type', 'button');
-  }
-
   addListeners() {
-    this.popupBtn.addEventListener('click', (e) => {
+    this.elements.popupBtn.addEventListener('click', (e) => {
       e.preventDefault();
       this.dataset.active = !this.isActive;
     });
   }
 
-  onAttributeUrlChanged({ oldValue, newValue }) {
-    if (this.isClosePopupTrigger) return;
+  onAttributeActionChanged({ oldValue, newValue }) {
+    if (this.isClosePopupTrigger) {
+      return;
+    }
     if (oldValue === newValue) return;
     let sourceUrl;
 
@@ -123,30 +104,33 @@ export default class PopupTrigger extends ComponentBase {
     this.popup = await this.createPopup();
     this.addPopupToPage();
     // the icon is initialize async by page loader
-    this.triggerIcon = this.querySelector('raqn-icon');
+    // this.triggerIcon = this.querySelector('raqn-icon');
 
     // Reassign to just toggle after the popup is created;
     this.loadPopup = this.togglePopup;
     this.togglePopup();
   }
 
   async createPopup() {
-    const popup = document.createElement('raqn-popup');
-    popup.dataset.url = this.popupSourceUrl;
-    popup.dataset.active = true;
+    const { popup } = componentList;
+    loadModules(null, { popup });
+
+    const popupEl = document.createElement('raqn-popup');
+    popupEl.dataset.action = this.popupSourceUrl;
+    popupEl.dataset.active = true;
     // Set the popupTrigger property of the popup component to this trigger instance
-    popup.popupTrigger = this;
-    return popup;
+    popupEl.popupTrigger = this;
+    return popupEl;
   }
 
   togglePopup() {
     this.popup.dataset.active = this.isActive;
-    this.popupBtn.setAttribute('aria-expanded', this.isActive);
-    if (this.triggerIcon) {
-      this.triggerIcon.dataset.active = this.isActive;
+    this.elements.popupBtn.setAttribute('aria-expanded', this.isActive);
+    if (this.elements.triggerIcon) {
+      this.elements.triggerIcon.dataset.active = this.isActive;
     }
     if (!this.isActive) {
-      this.popupBtn.focus();
+      this.elements.popupBtn.focus();
     }
   }
 

blocks/theming/theming.editor.js

@@ -1,15 +1,15 @@
 import { MessagesEvents } from '../../scripts/editor.js';
 import { readValue } from '../../scripts/libs.js';
 import { publish } from '../../scripts/pubsub.js';
-import Theming from './theming.js';
 
 let listener = false;
 let themeInstance = null;
 
 export default function config() {
   // init editor if message from parent
   if (!listener) {
-    [themeInstance] = window.raqnInstances[Theming.name.toLowerCase()];
+    const name = 'raqn-theming';
+    [themeInstance] = window.raqnInstances[name];
 
     publish(
       MessagesEvents.theme,
@@ -22,7 +22,7 @@ export default function config() {
       if (e && e.data) {
         const { message, params } = e.data;
         if (message && message === MessagesEvents.themeUpdate) {
-          [themeInstance] = window.raqnInstances[Theming.name.toLowerCase()];
+          [themeInstance] = window.raqnInstances[name];
           const { data } = params;
           const row = Object.keys(data).map((key) => data[key]);
           readValue(row, themeInstance.variations);