Fix popup and remove popup-config support and fix component creation …

…without component.ini()
hlxsites · Aug 9, 2024 · d3d1bd5 · d3d1bd5
1 parent 40f2005
commit d3d1bd5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 54 deletions.
diff --git a/blocks/popup-trigger/popup-trigger.js b/blocks/popup-trigger/popup-trigger.js
@@ -53,7 +53,7 @@ export default class PopupTrigger extends ComponentBase {
     if (anchorUrl.hash === closePopupIdentifier) {
       this.isClosePopupTrigger = true;
     } else {
-      this.dataset.url = anchorUrl.href;
+      this.dataset.url = anchorUrl.pathname;
     }
 
     if (anchor.hasAttribute('aria-label')) {
@@ -84,8 +84,16 @@ export default class PopupTrigger extends ComponentBase {
   onAttributeUrlChanged({ oldValue, newValue }) {
     if (this.isClosePopupTrigger) return;
     if (oldValue === newValue) return;
+    let sourceUrl;
+
+    try {
+      sourceUrl = new URL(newValue, window.location.origin);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn('The value provided is not a valid path', error);
+      return;
+    }
 
-    const sourceUrl = new URL(newValue);
     this.popupSourceUrl = sourceUrl.pathname;
 
     if (this.popup) {
@@ -123,24 +131,14 @@ export default class PopupTrigger extends ComponentBase {
   }
 
   async createPopup() {
-    const {
-      instances: [popup],
-    } = await component.init({
-      componentName: 'popup',
-      attributesValues: {
-        url: { all: this.popupSourceUrl },
-        active: { all: true },
-      },
-      componentConfig: {
-        contentFromTargets: false,
-        addToTargetMethod: 'append',
-      },
-      props: {
-        popupTrigger: this,
-      },
-      targets: [null],
-    });
+    await component.loadAndDefine('popup');
+    const popup = document.createElement('raqn-popup');
+
+    popup.dataset.url = this.popupSourceUrl;
+    popup.dataset.active = true;
+    popup.dataset.type = 'flyout';
 
+    popup.popupTrigger = this;
     return popup;
   }
 

diff --git a/blocks/popup/popup.js b/blocks/popup/popup.js
@@ -56,7 +56,6 @@ export default class Popup extends ComponentBase {
   setDefaults() {
     super.setDefaults();
     this.popupTrigger = null;
-    this.getConfigFromFragment = true;
   }
 
   setBinds() {
@@ -88,7 +87,7 @@ export default class Popup extends ComponentBase {
 
   template() {
     return `
-    <div class="popup__base">
+    <div class="popup__base ${this.dataset.type === 'flyout' ? this.config.classes.popupFlyout : ''}">
       <div class="popup__overlay"></div>
       <div class="popup__container"
         role="dialog"
@@ -133,44 +132,16 @@ export default class Popup extends ComponentBase {
   }
 
   async addFragmentContent() {
-    if (this.getConfigFromFragment) {
-      // ! needs to be run when the url changes
-      this.initFromFragment();
-      this.getConfigFromFragment = false;
-      if (this.initialized) return;
-    }
-
     this.elements.popupContent.innerHTML = await this.fragmentContent;
   }
 
-  async initFromFragment() {
-    const hostEl = document.createElement('div');
-    hostEl.innerHTML = await this.fragmentContent;
-    const configEl = hostEl.querySelector('.config-popup');
-
-    if (!configEl) return;
-    configEl.remove();
-    this.fragmentContent = hostEl.innerHTML;
-    const configByClass = (configEl.classList.toString()?.trim?.().split?.(' ') || []).filter(
-      (c) => c !== 'config-popup',
-    );
-
-    const configPopupAttributes = ['data-type', 'data-size', 'data-offset', 'data-height'];
-    await this.buildExternalConfig(null, configByClass, configPopupAttributes);
-
-    this.mergeConfigs();
-    this.setAttributesClassesAndProps();
-    this.addDefaultsToNestedConfig();
-  }
-
   setInnerBlocks() {
     const innerBlocks = [...this.elements.popupContent.querySelectorAll(globalConfig.blockSelector)];
     this.innerBlocks = innerBlocks;
   }
 
   onAttributeUrlChanged({ oldValue, newValue }) {
     if (newValue === oldValue) return;
-    this.getConfigFromFragment = true;
     this.fragmentPath = `${newValue}.plain.html`;
     if (!this.initialized) return;
     this.loadFragment(this.fragmentPath);
@@ -215,6 +186,8 @@ export default class Popup extends ComponentBase {
       console.warn(`Values for attribute "${name}" must be "${modal}" or "${flyout}"`, this);
       return;
     }
+
+    if (!this.elements.popupBase) return;
     this.elements.popupBase.classList.toggle(this.config.classes.popupFlyout, newValue === flyout);
   }
 

diff --git a/scripts/component-base.js b/scripts/component-base.js
@@ -130,6 +130,7 @@ export default class ComponentBase extends HTMLElement {
     try {
       this.wasInitBeforeConnected = true;
       this.initOptions = initOptions || {};
+      this.setInitialAttributesValues();
       await this.buildExternalConfig();
       this.runConfigsByViewport();
       this.addDefaultsToNestedConfig();
@@ -147,6 +148,29 @@ export default class ComponentBase extends HTMLElement {
     }
   }
 
+  /**
+   * When the element was created with data attributes before the ini() method is called
+   * use the data attr values as default for attributesValues
+   */
+  setInitialAttributesValues() {
+    const initialAttributesValues = { all: {} };
+
+    this.Handler.observedAttributes.map((dataAttr) => {
+      const [, key] = dataAttr.split('data-');
+      const value = this.dataset[key];
+      if (typeof value === 'undefined') return {};
+      initialAttributesValues.all[key] = value;
+      return initialAttributesValues;
+    });
+
+    this.attributesValues = deepMerge(
+      {},
+      this.attributesValues,
+      this.initOptions?.attributesValues || {},
+      initialAttributesValues,
+    );
+  }
+
   async connectComponent() {
     if (!this.initOptions.target) return this;
     const { targetsAsContainers } = this.initOptions.loaderConfig || {};
@@ -196,13 +220,9 @@ export default class ComponentBase extends HTMLElement {
 
   async initOnConnected() {
     if (this.wasInitBeforeConnected) return;
-
+    this.setInitialAttributesValues();
     await this.buildExternalConfig();
-
     this.runConfigsByViewport();
-    delete this.dataset.configName;
-    delete this.dataset.configByClasses;
-
     this.addDefaultsToNestedConfig();
     // Add extra functionality to be run on init.
     await this.onInit();