Fragment Block added (#232)

Co-authored-by: piyushjindal <[email protected]>
Co-authored-by: Bryan Stopp <[email protected]>

blocks/fragment/fragment.css

@@ -0,0 +1 @@
+/* stylelint-disable-next-line no-empty-source */

blocks/fragment/fragment.js

@@ -0,0 +1,57 @@
+/*
+* Fragment Block
+* Include content on a page as a fragment.
+* https://www.aem.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
+ */
+export async function loadFragment(path) {
+  if (path?.startsWith('/')) {
+    const resp = await fetch(`${path}.plain.html`);
+    if (resp.ok) {
+      const main = document.createElement('main');
+      main.innerHTML = await resp.text();
+
+      // reset base path for media to fragment base
+      const resetAttributeBase = (tag, attr) => {
+        main.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((elem) => {
+          elem[attr] = new URL(elem.getAttribute(attr), new URL(path, window.location)).href;
+        });
+      };
+      resetAttributeBase('img', 'src');
+      resetAttributeBase('source', 'srcset');
+
+      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').replaceWith(...fragment.childNodes);
+    }
+  }
+}