MWPW-139127 - Relative Fragment Media (#1523)

* MWPW-139127 - Relative Fragment Media * Make media URLs relative to fragment path * Update libs/blocks/fragment/fragment.js Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: Blaine Gunn <Blainegunn@gmail.com> Co-authored-by: Sean Choi <seanchoi@adobe.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
adobecom · Dec 4, 2023 · 7b3d1b6 · 7b3d1b6
1 parent edb5260
commit 7b3d1b6
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/libs/blocks/fragment/fragment.js b/libs/blocks/fragment/fragment.js
@@ -47,6 +47,16 @@ const insertInlineFrag = (sections, a) => {
   }
 };
 
+function replaceDotMedia(path, doc) {
+  const resetAttributeBase = (tag, attr) => {
+    doc.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((el) => {
+      el[attr] = new URL(el.getAttribute(attr), new URL(path, window.location)).href;
+    });
+  };
+  resetAttributeBase('img', 'src');
+  resetAttributeBase('source', 'srcset');
+}
+
 export default async function init(a) {
   const { expFragments, decorateArea } = getConfig();
   let relHref = localizeLink(a.href);
@@ -72,7 +82,7 @@ export default async function init(a) {
 
   const html = await resp.text();
   const doc = new DOMParser().parseFromString(html, 'text/html');
-
+  replaceDotMedia(a.href, doc);
   if (decorateArea) decorateArea(doc);
 
   const sections = doc.querySelectorAll('body > div');

diff --git a/test/blocks/fragment/fragment.test.js b/test/blocks/fragment/fragment.test.js
@@ -64,6 +64,13 @@ describe('Fragments', () => {
     expect(cols.innerHTML.includes('Hello World!!!')).to.be.true;
   });
 
+  it('Makes media relative to fragment', async () => {
+    const section = document.querySelector('.default-section');
+    await loadArea(section);
+    expect(section.querySelector('source[srcset^="http://localhost:2000/test/blocks/fragment/mocks/fragments/media_15"]')).to.exist;
+    expect(section.querySelector('img[src^="http://localhost:2000/test/blocks/fragment/mocks/fragments/media_15"]')).to.exist;
+  });
+
   it('"decorated" class added by decorateArea()', async () => {
     const a = document.querySelector('a.frag-image');
     await getFragment(a);

diff --git a/test/blocks/fragment/mocks/body.html b/test/blocks/fragment/mocks/body.html
@@ -31,4 +31,9 @@
     </div>
   </div>
 </div>
+<div class="default-section">
+  <div>
+    <p><a href="/test/blocks/fragment/mocks/fragments/media">./fragments/media</a></p>
+  </div>
+</div>
 </div>
diff --git a/test/blocks/fragment/mocks/fragments/media.plain.html b/test/blocks/fragment/mocks/fragments/media.plain.html
@@ -0,0 +1,8 @@
+<div>
+  <picture>
+    <source type="image/webp" srcset="./media_15.png?width=2000&#x26;format=webply&#x26;optimize=medium" media="(min-width: 600px)">
+    <source type="image/webp" srcset="./media_15.png?width=750&#x26;format=webply&#x26;optimize=medium">
+    <source type="image/png" srcset="./media_15.png?width=2000&#x26;format=png&#x26;optimize=medium" media="(min-width: 600px)">
+    <img loading="lazy" alt="" src="./media_15.png?width=750&#x26;format=png&#x26;optimize=medium" width="1011" height="1098">
+  </picture>
+</div>