Feature-16-sidebar-test

.eslintrc.js → .eslintrc.cjs

@@ -3,6 +3,7 @@ module.exports = {
   extends: 'airbnb-base',
   env: {
     browser: true,
+    'jest/globals': true,
   },
   parser: '@babel/eslint-parser',
   parserOptions: {
@@ -19,4 +20,5 @@ module.exports = {
     }],
     'function-paren-newline': 'off',
   },
+  plugins: ['jest'],
 };

.gitignore

@@ -7,3 +7,7 @@ helix-importer-ui
 .DS_Store
 *.bak
 .idea
+
+.vscode/
+.htmlvalidate.json
+.htmlvalidateignore

blocks/fragment/fragment.css

@@ -0,0 +1 @@
+/* nothing here */

blocks/fragment/fragment.js

@@ -0,0 +1,45 @@
+/*
+ * Fragment Block
+ * Include content from one Helix page in another.
+ * https://www.hlx.live/developer/block-collection/fragment
+ */
+
+import {
+  decorateMain,
+} from '../../scripts/scripts.js';
+
+import {
+  loadBlocks,
+} from '../../scripts/aem.js';
+
+/**
+ * Loads a fragment.
+ * @param {string} path The path to the fragment
+ * @returns {HTMLElement} The root element of the fragment
+ */
+async function loadFragment(path) {
+  if (path && path.startsWith('/')) {
+    const resp = await fetch(`${path}.plain.html`);
+    if (resp.ok) {
+      const main = document.createElement('main');
+      main.innerHTML = await resp.text();
+      decorateMain(main);
+      await loadBlocks(main);
+      return main;
+    }
+  }
+  return null;
+}
+
+export default async function decorate(block) {
+  const link = block.querySelector('a');
+  const path = link ? link.getAttribute('href') : block.textContent.trim();
+  const fragment = await loadFragment(path);
+  if (fragment) {
+    const fragmentSection = fragment.querySelector(':scope .section');
+    if (fragmentSection) {
+      block.closest('.section').classList.add(...fragmentSection.classList);
+      block.closest('.fragment-wrapper').replaceWith(...fragmentSection.childNodes);
+    }
+  }
+}

blocks/header/header.js

@@ -133,8 +133,10 @@ export default async function decorate(block) {
     nav.prepend(hamburger);
     nav.setAttribute('aria-expanded', 'false');
     // prevent mobile nav behavior on window resize
-    toggleMenu(nav, navSections, isDesktop.matches);
-    isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+    if (navSections) {
+      toggleMenu(nav, navSections, isDesktop.matches);
+      isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches));
+    }
 
     decorateIcons(nav);
     const navWrapper = document.createElement('div');