Fix scrollbars, popup and dataset and component init

blocks/navigation/navigation.css

@@ -26,7 +26,7 @@ raqn-navigation .level-1 a:hover {
 }
 
 raqn-navigation > nav > ul {
-  overflow-y: auto;
+  overflow-y: hidden;
   max-height: calc(100vh - var(--header-height));
 }
 

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;
   }
 

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);
   }
 

blocks/sidekick-tools-palette/sidekick-tools-palette.css

@@ -11,8 +11,9 @@ raqn-sidekick-tools-palette ul {
   list-style: none;
   padding: 0;
   margin: 0;
-  overflow: scroll;
-  transition: transform .2s ease-in-out;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: transform 0.2s ease-in-out;
 }
 
 raqn-sidekick-tools-palette h3,
@@ -28,7 +29,7 @@ raqn-sidekick-tools-palette li {
 }
 
 raqn-sidekick-tools-palette h3.hidden {
-    display: none;
+  display: none;
 }
 
 raqn-sidekick-tools-palette .menu-wrapper {
@@ -49,7 +50,7 @@ raqn-sidekick-tools-palette h4::after {
   padding: 3px;
   position: absolute;
   right: 14px;
-  transition: transform .2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
   transform: rotate(-45deg);
 }
 
@@ -72,7 +73,7 @@ raqn-sidekick-tools-palette h3::before {
   display: inline-block;
   padding: 3px;
   margin: auto 10px;
-  transition: transform .2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
   transform: rotate(-45deg);
 }
 
@@ -81,8 +82,8 @@ raqn-sidekick-tools-palette .submenu ul.hidden {
 }
 
 raqn-sidekick-tools-palette ul:first-child li:hover,
-raqn-sidekick-tools-palette h3:hover, 
-raqn-sidekick-tools-palette h4:hover, 
+raqn-sidekick-tools-palette h3:hover,
+raqn-sidekick-tools-palette h4:hover,
 raqn-sidekick-tools-palette .submenu ul li:hover,
 raqn-sidekick-tools-palette .submenu .selectable:hover {
   cursor: pointer;
@@ -115,5 +116,5 @@ raqn-sidekick-tools-palette .submenu p {
 }
 
 raqn-sidekick-tools-palette .submenu p.details {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }

blocks/sidekick-tools-palette/sidekick-tools-palette.js

@@ -182,8 +182,7 @@ function decorateImages(element) {
 function getTable(block) {
   const name = getBlockName(block);
   const rows = [...block.children];
-  const maxCols = rows.reduce((cols, row) => (
-    row.children.length > cols ? row.children.length : cols), 0);
+  const maxCols = rows.reduce((cols, row) => (row.children.length > cols ? row.children.length : cols), 0);
   const table = document.createElement('table');
   table.setAttribute('border', 1);
   const headerRow = document.createElement('tr');
@@ -224,13 +223,12 @@ function getHtml(container) {
 }
 
 export default class SidekickToolsPalette extends ComponentBase {
-
   createEntry(name) {
     const subHeader = document.createElement('h3');
     subHeader.classList.add('hidden');
     subHeader.innerText = name;
     this.menuWrapper.before(subHeader);
-    
+
     const menuItem = document.createElement('li');
     menuItem.innerText = name;
     this.menuRoot.append(menuItem);
@@ -258,54 +256,55 @@ export default class SidekickToolsPalette extends ComponentBase {
     const subMenu = this.createEntry(title);
 
     const blocksResponse = await fetch(url);
-    if(!blocksResponse.ok) return;
+    if (!blocksResponse.ok) return;
     const blocks = await blocksResponse.json();
-    await Promise.all(blocks.data.map(async (block) => {
-      const blockResponse = await fetch(`${block.path}.plain.html`);
-      if (!blockResponse.ok) return;
+    await Promise.all(
+      blocks.data.map(async (block) => {
+        const blockResponse = await fetch(`${block.path}.plain.html`);
+        if (!blockResponse.ok) return;
 
-      const html = await blockResponse.text();
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(html, 'text/html');
-      const containers = getContainers(doc);
-      if(!containers.length) return;
-      const item = document.createElement('li');
-      item.innerHTML = `<h4>${block.name}</h4><ul class="hidden"></ul>`;
-      const itemHeader = item.querySelector('h4');
-      const wrapper = item.querySelector('ul');
-      itemHeader.addEventListener('click', () => {
-        if(itemHeader.classList.contains('active')) {
-          itemHeader.classList.remove('active');
-          wrapper.classList.add('hidden');
-        } else {
-          subMenu.querySelectorAll('h4').forEach((h) => h.classList.remove('active'));
-          subMenu.querySelectorAll('ul').forEach((ul) => ul.classList.add('hidden'));
-          itemHeader.classList.add('active');
-          wrapper.classList.remove('hidden');
-        }
-      });
-      containers.forEach((container) => {
-        const copyOption = document.createElement('li');
-        copyOption.innerHTML = `<span>${getContainerName(container)}</span>`;
-        wrapper.append(copyOption);
-        copyOption.addEventListener('click', () => {
-          const blob = new Blob([`<br>${getHtml(container)}<br>`], { type: 'text/html' });
-          const data = [new ClipboardItem({ [blob.type]: blob })];
-          navigator.clipboard.write(data);
-          copyOption.classList.add('copied');
-          setTimeout(() => copyOption.classList.remove('copied'), 1000);
+        const html = await blockResponse.text();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const containers = getContainers(doc);
+        if (!containers.length) return;
+        const item = document.createElement('li');
+        item.innerHTML = `<h4>${block.name}</h4><ul class="hidden"></ul>`;
+        const itemHeader = item.querySelector('h4');
+        const wrapper = item.querySelector('ul');
+        itemHeader.addEventListener('click', () => {
+          if (itemHeader.classList.contains('active')) {
+            itemHeader.classList.remove('active');
+            wrapper.classList.add('hidden');
+          } else {
+            subMenu.querySelectorAll('h4').forEach((h) => h.classList.remove('active'));
+            subMenu.querySelectorAll('ul').forEach((ul) => ul.classList.add('hidden'));
+            itemHeader.classList.add('active');
+            wrapper.classList.remove('hidden');
+          }
         });
-      });
-      subMenu.append(item);
-    }));
-
+        containers.forEach((container) => {
+          const copyOption = document.createElement('li');
+          copyOption.innerHTML = `<span>${getContainerName(container)}</span>`;
+          wrapper.append(copyOption);
+          copyOption.addEventListener('click', () => {
+            const blob = new Blob([`<br>${getHtml(container)}<br>`], { type: 'text/html' });
+            const data = [new ClipboardItem({ [blob.type]: blob })];
+            navigator.clipboard.write(data);
+            copyOption.classList.add('copied');
+            setTimeout(() => copyOption.classList.remove('copied'), 1000);
+          });
+        });
+        subMenu.append(item);
+      }),
+    );
   }
 
   async initPlaceholders({ title, url }) {
     const subMenu = this.createEntry(title);
 
     const placeholdersResponse = await fetch(url);
-    if(!placeholdersResponse.ok) return;
+    if (!placeholdersResponse.ok) return;
     const placeholders = await placeholdersResponse.json();
 
     placeholders.data.forEach((placeholder) => {
@@ -326,12 +325,16 @@ export default class SidekickToolsPalette extends ComponentBase {
   async initPalette() {
     const { searchParams } = new URL(window.location.href);
     this.innerHTML = 'loading ...';
-    if(!searchParams.has('ref') || !searchParams.has('repo') || !searchParams.has('owner')) {
+    if (!searchParams.has('ref') || !searchParams.has('repo') || !searchParams.has('owner')) {
       this.innerHTML = 'loading ... failed.';
       return;
     }
-    const configResponse = await fetch(`https://admin.hlx.page/sidekick/${searchParams.get('owner')}/${searchParams.get('repo')}/${searchParams.get('ref')}/config.json`);
-    if(!configResponse.ok) {
+    const configResponse = await fetch(
+      `https://admin.hlx.page/sidekick/${searchParams.get('owner')}/${searchParams.get('repo')}/${searchParams.get(
+        'ref',
+      )}/config.json`,
+    );
+    if (!configResponse.ok) {
       this.innerHTML = 'loading ... failed.';
       return;
     }
@@ -346,28 +349,34 @@ export default class SidekickToolsPalette extends ComponentBase {
     this.menuWrapper = this.querySelector('.menu-wrapper');
     this.menuRoot = this.querySelector('ul');
 
-    const thisPlugin = config.plugins.find((plugin) => 
-      plugin.url === window.location.pathname || plugin.url === `${window.location.origin}${window.location.pathname}`);
-    if(!thisPlugin) {
+    const thisPlugin = config.plugins.find(
+      (plugin) =>
+        plugin.url === window.location.pathname ||
+        plugin.url === `${window.location.origin}${window.location.pathname}`,
+    );
+    if (!thisPlugin) {
       this.innerHTML = 'loading ... failed.';
       return;
     }
-    config.plugins.filter((plugin) => plugin.containerId === thisPlugin.id).forEach((plugin) => {
-      switch (plugin.id) {
-        case `${thisPlugin.id}-blocks`:
-          this.initBlocks(plugin);
-          break;
-        case `${thisPlugin.id}-placeholders`:
-          this.initPlaceholders(plugin);
-          break;
-        default:
-          console.warn('failed to load plugin', plugin);
-          break;
-      }
-    });
+    config.plugins
+      .filter((plugin) => plugin.containerId === thisPlugin.id)
+      .forEach((plugin) => {
+        switch (plugin.id) {
+          case `${thisPlugin.id}-blocks`:
+            this.initBlocks(plugin);
+            break;
+          case `${thisPlugin.id}-placeholders`:
+            this.initPlaceholders(plugin);
+            break;
+          default:
+            // eslint-disable-next-line no-console
+            console.warn('failed to load plugin', plugin);
+            break;
+        }
+      });
   }
 
   connected() {
     this.initPalette();
   }
-}
+}