feat(pat-navigationmarker): Rebase URLs to agains the portal URL.

thet · thet · commit fcb4c9cc8f7c · 2026-03-21T13:51:39.000+01:00
Closes: #1217
diff --git a/src/pat/navigationmarker/navigationmarker.js b/src/pat/navigationmarker/navigationmarker.js
@@ -28,7 +28,10 @@ class Pattern extends BasePattern {
      * url which all links are compared to.
      */
     mark_items(url) {
-        const current_url = this.cleanup_url(url || this.current_url());
+        const current_url = this.rebase_url(
+            this.cleanup_url(url || this.current_url()),
+            this.portal_url,
+        );
 
         const nav_items = this.el.querySelectorAll("a");
 
@@ -37,7 +40,10 @@ class Pattern extends BasePattern {
                 ? nav_item.closest(this.options.itemWrapper)
                 : nav_item.parentElement;
 
-            const nav_url = this.cleanup_url(nav_item.href);
+            const nav_url = this.rebase_url(
+                this.cleanup_url(nav_item.href),
+                this.portal_url,
+            );
 
             // We can exit early, if the nav_url is not part of the current URL.
             if (current_url.indexOf(nav_url) === -1) {
@@ -88,6 +94,15 @@ class Pattern extends BasePattern {
         }
     }
 
+    /**
+     * Rebase URL agains a base URL. Do nothing,
+     *
+     * @param {String} url: The Url to clean up.
+     */
+    rebase_url(url, base_url) {
+        return new URL(url, base_url)?.href;
+    }
+
     /**
      * Cleanup the URL from parts, which use brittle and useless to compare.
      *
diff --git a/src/pat/navigationmarker/navigationmarker.test.js b/src/pat/navigationmarker/navigationmarker.test.js
@@ -487,6 +487,45 @@ describe("Navigation Marker", function () {
         );
         expect(news_link.parentElement.classList.contains("inPath")).toBe(false);
     });
+
+    it("handles URL rebasing correctly", async function () {
+        // Test absolute URLs that should work directly
+        const canonical_link = document.querySelector('head link[rel="canonical"]');
+        canonical_link.href = "http://example.com/site/news/article-1";
+
+        // Set a portal URL
+        document.body.dataset.portalUrl = "http://example.com/site";
+
+        document.body.innerHTML = `
+            <nav class="pat-navigationmarker">
+                <ul>
+                    <li><a href="http://example.com/site">Home</a></li>
+                    <li><a href="http://example.com/site/news">News</a></li>
+                    <li><a href="http://example.com/site/news/article-1">Article 1</a></li>
+                </ul>
+            </nav>
+        `;
+
+        this.nav_element = document.querySelector(".pat-navigationmarker");
+        registry.scan(document.body);
+        await utils.timeout(1);
+
+        // Test with absolute URLs that match the canonical structure
+        const article_link = this.nav_element.querySelector(
+            "a[href='http://example.com/site/news/article-1']",
+        );
+        const news_link = this.nav_element.querySelector(
+            "a[href='http://example.com/site/news']",
+        );
+        const home_link = this.nav_element.querySelector(
+            "a[href='http://example.com/site']",
+        );
+
+        expect(article_link.classList.contains("current")).toBe(true);
+        expect(news_link.parentElement.classList.contains("inPath")).toBe(true);
+        // Home should not be in-path since we're on a sub-page
+        expect(home_link.parentElement.classList.contains("inPath")).toBe(false);
+    });
 });
 
 describe("Navigation Marker - Portal URL Edge Cases", function () {
