#461424 #461425 - Code clean up and small fixes

hlxsites · Apr 18, 2024 · 1a8d90a · 1a8d90a
1 parent 4b8c4c2
commit 1a8d90a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 47 deletions.
diff --git a/blocks/accordion/accordion.js b/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);
@@ -25,7 +42,7 @@ export default class Accordion extends ComponentBase {
       const icon = document.createElement('raqn-icon');
       icon.setAttribute('icon', 'chevron-right');
       const children = Array.from(control.children);
-      if (!children.length) {
+      if (children.length === 0) {
         const child = document.createElement('span');
         child.textContent = control.textContent;
         control.innerHTML = '';

diff --git a/blocks/breadcrumbs/breadcrumbs.js b/blocks/breadcrumbs/breadcrumbs.js
@@ -9,6 +9,8 @@ export default class Breadcrumbs extends ComponentBase {
     targetsAsContainers: true,
   };
 
+  nestedComponentsConfig = {};
+
   extendConfig() {
     return [
       ...super.extendConfig(),

diff --git a/blocks/button/button.js b/blocks/button/button.js
@@ -6,6 +6,8 @@ export default class Button extends ComponentBase {
     targetsSelectors: ':is(p,div):has(> a:only-child)',
     selectorTest: (el) => el.childNodes.length === 1,
   };
+
+  nestedComponentsConfig = {};
 
   extendConfig() {
     return [

diff --git a/blocks/navigation/navigation.js b/blocks/navigation/navigation.js
@@ -9,28 +9,6 @@ export default class Navigation extends ComponentBase {
     targetsSelectors: ':scope > :is(:first-child)',
   };
 
-  // extendConfig() {
-  //   return [
-  //     ...super.extendConfig(),
-  //     {
-  //       targetsAsContainers: {
-  //         addToTargetMethod: 'append',
-  //       },
-  //     },
-  //   ];
-  // }
-
-  /* nestedComponentsConfig = {
-    columns: {
-      componentName: 'columns',
-      // targets: [this],
-      active: false,
-      loaderConfig: {
-        targetsAsContainers: false,
-      },
-    },
-  }; */
-
   attributesValues = {
     compact: {
       xs: 'true',
@@ -47,7 +25,6 @@ export default class Navigation extends ComponentBase {
     this.navButton.setAttribute('aria-controls', 'navigation');
     this.navButton.setAttribute('aria-haspopup', 'true');
     this.navButton.setAttribute('type', 'button');
-    // this.navButton.setAttribute('tabindex', '0');
     this.navButton.innerHTML = '<raqn-icon icon=menu></raqn-icon>';
     this.navButton.addEventListener('click', () => {
       this.classList.toggle('active');
@@ -90,7 +67,7 @@ export default class Navigation extends ComponentBase {
   async setupCompactedNav() {
     if (!this.navCompactedContentInit) {
       this.navCompactedContentInit = true;
-      await Promise.all([component.init({ componentName: 'accordion' }), component.init({ componentName: 'icon' })]);
+      await Promise.all([component.loadAndDefine('accordion'), component.loadAndDefine('icon')]);
 
       this.setupClasses(this.navCompactedContent, true);
       this.navCompactedContent.addEventListener('click', (e) => this.activate(e));
@@ -120,19 +97,28 @@ export default class Navigation extends ComponentBase {
     return icon;
   }
 
-  createAccordion(replaceChildrenElement) {
+  addIcon(elem) {
     component.init({
-      componentName: 'accordion',
-      targets: [replaceChildrenElement],
+      componentName: 'icon',
+      targets: [elem],
+      rawClasses: 'icon-chevron-right',
       config: {
         addToTargetMethod: 'append',
       },
     });
+  }
 
-    // const accordion = document.createElement('raqn-accordion');
-    // const children = Array.from(replaceChildrenElement.children);
-    // accordion.append(...children);
-    // replaceChildrenElement.append(accordion);
+  createAccordion(elem) {
+    component.init({
+      componentName: 'accordion',
+      targets: [elem],
+      config: {
+        addToTargetMethod: 'append',
+      },
+      nestedComponentsConfig: {
+        button: { active: false },
+      },
+    });
   }
 
   setupClasses(ul, isCompact, level = 1) {
@@ -148,7 +134,7 @@ export default class Navigation extends ComponentBase {
         if (isCompact) {
           this.createAccordion(child);
         } else if (level === 1) {
-          anchor.append(this.createIcon('chevron-right'));
+          this.addIcon(anchor);
         }
         child.classList.add('has-children');
         this.setupClasses(hasChildren, isCompact, level + 1);

diff --git a/scripts/component-base.js b/scripts/component-base.js
@@ -12,11 +12,12 @@ export default class ComponentBase extends HTMLElement {
     this.componentName = null; // set by component loader
     this.webComponentName = null; // set by component loader
     this.fragment = false;
+    this.dependencies = [];
     this.breakpoints = getBreakPoints();
     this.uuid = `gen${crypto.randomUUID().split('-')[0]}`;
     this.attributesValues = {}; // the values are set by the component loader
-    this.nestedComponents = [];
-    this.setConfig();
+    this.setConfig('config', 'extendConfig');
+    this.setConfig('nestedComponentsConfig', 'extendNestedConfig');
     this.setBinds();
   }
 
@@ -58,16 +59,20 @@ export default class ComponentBase extends HTMLElement {
     },
   };
 
-  setConfig() {
-    const configs = this.extendConfig();
-    if (!configs.length) return;
-    this.config = deepMerge({}, ...configs);
+  setConfig(config, method) {
+    const conf = this[method]?.();
+    if (!conf.length) return;
+    this[config] = deepMerge({}, ...conf);
   }
 
   extendConfig() {
     return [...(super.extendConfig?.() || []), this.config];
   }
 
+  extendNestedConfig() {
+    return [...(super.extendNestedConfig?.() || []), this.nestedComponentsConfig];
+  }
+
   setBinds() {
     this.onBreakpointChange = this.onBreakpointChange.bind(this);
   }
@@ -133,7 +138,7 @@ export default class ComponentBase extends HTMLElement {
     this.initSubscriptions(); // must subscribe each time the element is added to the document
     if (!this.initialized) {
       this.setAttribute('id', this.uuid);
-      await this.loadFragment(this.fragment);
+      await Promise.all([this.loadFragment(this.fragment), this.loadDependencies()]);
       await this.connected(); // manipulate/create the html
       await this.initNestedComponents();
       this.addListeners(); // html is ready add listeners
@@ -149,18 +154,24 @@ export default class ComponentBase extends HTMLElement {
       Object.values(this.nestedComponentsConfig).flatMap(async (setting) => {
         if (!setting.active) return [];
         const s = this.fragment
-          ? {
+          ? deepMerge({}, setting, {
               // Content can contain blocks which are going to init their own nestedComponents.
-              targetsSelectorsPrefix: ':scope > div >', // Limit only to default content, exclude blocks.
-              ...setting,
-            }
+              loaderConfig: {
+                targetsSelectorsPrefix: ':scope > div >', // Limit only to default content, exclude blocks.
+              },
+            })
           : setting;
         return component.init(s);
       }),
     );
     this.nestedElements = nested.flat();
   }
 
+  async loadDependencies() {
+    if (!this.dependencies.length) return;
+    await Promise.all(this.dependencies.map((dep) => component.loadAndDefine(dep)));
+  }
+
   async loadFragment(path) {
     if (!path) return;
     const response = await this.getFragment(path);

diff --git a/scripts/component-loader.js b/scripts/component-loader.js
@@ -4,7 +4,7 @@ import { collectAttributes, loadModule, deepMerge, mergeUniqueArrays } from './l
 import ComponentMixin from './component-mixin.js';
 
 export default class ComponentLoader {
-  constructor({ componentName, targets = [], loaderConfig, rawClasses, config, active: isNested }) {
+  constructor({ componentName, targets = [], loaderConfig, rawClasses, config, nestedComponentsConfig, active }) {
     window.raqnComponents ??= {};
     if (!componentName) {
       // eslint-disable-next-line no-console
@@ -16,11 +16,12 @@ export default class ComponentLoader {
     this.loaderConfig = loaderConfig;
     this.rawClasses = rawClasses?.trim?.().split?.(' ') || [];
     this.config = config;
+    this.nestedComponentsConfig = nestedComponentsConfig;
     this.pathWithoutExtension = `/blocks/${this.componentName}/${this.componentName}`;
     this.isWebComponent = null;
     this.isClass = null;
     this.isFn = null;
-    this.isNested = isNested;
+    this.active = active;
   }
 
   get Handler() {
@@ -42,6 +43,7 @@ export default class ComponentLoader {
   }
 
   async init() {
+    if (this.active === false) return null;
     if (!this.componentName) return null;
     const loaded = await this.loadAndDefine();
     if (!loaded) return null;
@@ -135,7 +137,11 @@ export default class ComponentLoader {
       componentElem.setAttribute(key, currentAttributes[key]);
     });
 
-    componentElem.nestedComponentsConfig = deepMerge(nestedComponentsConfig, nestedComponents);
+    componentElem.nestedComponentsConfig = deepMerge(
+      componentElem.nestedComponentsConfig,
+      this.nestedComponentsConfig,
+      nestedComponents,
+    );
 
     Object.keys(nestedComponentsConfig).forEach((key) => {
       const defaults = {