feat(pat navigation): Add URL-based navigation markers.

That feature was also present in the old implementation but is now improved.

Author: thet

src/pat/navigation/navigation.js

@@ -18,7 +18,13 @@ export default Base.extend({
 
         this.init_listeners();
 
-        this.mark_current();
+        if (this.el.querySelector(this.options.currentClass)) {
+            log.debug("Mark navigation items based on existing current class");
+            this.mark_current();
+        } else {
+            log.debug("Mark navigation items based on URL pattern.");
+            this.mark_items_url();
+        }
     },
 
     /**
@@ -50,7 +56,14 @@ export default Base.extend({
         // Re-init when navigation changes.
         const observer = new MutationObserver(() => {
             this.init_listeners();
-            this.mark_current();
+
+            if (this.el.querySelector(this.options.currentClass)) {
+                log.debug("Mark navigation items based on existing current class");
+                this.mark_current();
+            } else {
+                log.debug("Mark navigation items based on URL pattern.");
+                this.mark_items_url();
+            }
         });
         observer.observe(this.el, {
             childList: true,
@@ -123,6 +136,59 @@ export default Base.extend({
         }
     },
 
+    /**
+     * Mark all navigation items that are in the path of the current url.
+     *
+     * @param {String} [url] - The url to check against.
+     *                         If not given, the current url will be used.
+     */
+    mark_items_url(url) {
+        const current_url = url || this.base_url();
+        const current_url_prepared = this.prepare_url(current_url);
+
+        const portal_url = this.prepare_url(document.body.dataset?.portalUrl);
+        const nav_items = this.el.querySelectorAll("a");
+
+        for (const nav_item of nav_items) {
+            // Get the nav item's url and rebase it against the current url to
+            // make absolute or relative URLs FQDN URLs.
+            const nav_url = this.prepare_url(
+                new URL(nav_item.getAttribute("href", ""), current_url)?.href
+            );
+
+            const wrapper = this.options.itemWrapper
+                ? nav_item.closest(this.options.itemWrapper)
+                : nav_item.parentNode;
+
+            if (nav_url === current_url_prepared) {
+                nav_item.classList.add(this.options.currentClass);
+                wrapper.classList.add(this.options.currentClass);
+            } else if (
+                // Compare the current navigation item url with a slash at the
+                // end - if it is "inPath" it must have a slash in it.
+                current_url_prepared.indexOf(`${nav_url}/`) === 0 &&
+                // Do not set inPath for the "Home" url, as this would always
+                // be in the path.
+                nav_url !== portal_url
+            ) {
+                nav_item.classList.add(this.options.inPathClass);
+                wrapper.classList.add(this.options.inPathClass);
+            } else {
+                // Not even in path.
+                continue;
+            }
+
+            // The path was at least found in the current url, so we need to
+            // check the input-openers within the path
+            // Find the first input which is the correct one, even if this
+            // navigation item has many children.
+            // These hidden checkboxes are used to open the navigation item for
+            // mobile navigation.
+            const check = wrapper.querySelector("input");
+            if (check) check.checked = true;
+        }
+    },
+
     /**
      * Clear all navigation items from the inPath and current classes
      */
@@ -135,4 +201,31 @@ export default Base.extend({
             item.classList.remove(this.options.currentClass);
         }
     },
+
+    /**
+     * Prepare a URL for comparison.
+     * Plone-specific "/view" and "@@" will be removed as well as a trailing slash.
+     *
+     * @param {String} url - The url to prepare.
+     *
+     * @returns {String} - The prepared url.
+     */
+    prepare_url(url) {
+        return url?.replace("/view", "").replaceAll("@@", "").replace(/\/$/, "");
+    },
+
+    /**
+     * Get the URL of the current page.
+     * If a ``canonical`` meta tag is found, return this.
+     * Otherwise return the window.location URL.
+     * Already prepare the URL for comparison.
+     *
+     * @returns {String} - The current URL.
+     */
+    base_url() {
+        return this.prepare_url(
+            document.querySelector('head link[rel="canonical"]')?.href ||
+                window.location.href
+        );
+    },
 });

src/pat/navigation/navigation.test.js

@@ -200,3 +200,142 @@ describe("Navigation pattern tests - no predefined structure", function () {
         expect(a11.classList.contains("navigation-in-path")).toBeFalsy();
     });
 });
+
+describe("Navigation pattern tests - Mark items based on URL", () => {
+    let _window_location;
+
+    beforeEach(() => {
+        _window_location = global.window.location;
+        delete global.window.location;
+        document.body.innerHTML = "";
+    });
+
+    afterEach(() => {
+        global.window.location = _window_location;
+    });
+
+    const set_url = (url, portal_url) => {
+        global.window.location = {
+            href: url,
+        };
+
+        portal_url = portal_url || url;
+
+        document.body.dataset.portalUrl = portal_url;
+    };
+
+    it("navigation roundtrip", () => {
+        document.body.innerHTML = `
+          <nav class="pat-navigation"
+               data-pat-navigation="in-path-class: inPath">
+            <ul>
+              <li>
+                <a href="/">Home</a>
+              </li>
+              <li>
+                <a href="/path1">p1</a>
+              </li>
+              <li>
+                <a href="/path2">p2</a>
+                <ul>
+                  <li>
+                    <a href="/path2/path2.1">p2.1</a>
+                  </li>
+                  <li>
+                    <a href="/path2/path2.2">p2.2</a>
+                    <ul>
+                      <li>
+                        <a href="/path2/path2.2/path2.2.1">p2.2.1</a>
+                      </li>
+                      <li>
+                        <a href="/path2/path2.2/path2.2.2">p2.2.2</a>
+                      </li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li>
+                <a href="../../path3">p1</a>
+              </li>
+              <li>
+                <a href="https://patternslib.com/path4">p1</a>
+              </li>
+            </ul>
+          </nav>
+        `;
+
+        set_url("https://patternslib.com/");
+
+        const instance = new Pattern(document.querySelector(".pat-navigation"));
+
+        const it0 = document.querySelector("a[href='/']");
+        const it1 = document.querySelector("a[href='/path1']");
+        const it2 = document.querySelector("a[href='/path2']");
+        const it21 = document.querySelector("a[href='/path2/path2.1']");
+        const it22 = document.querySelector("a[href='/path2/path2.2']");
+        const it221 = document.querySelector("a[href='/path2/path2.2/path2.2.1']");
+        const it222 = document.querySelector("a[href='/path2/path2.2/path2.2.2']");
+        const it3 = document.querySelector("a[href='../../path3']");
+        const it4 = document.querySelector("a[href='https://patternslib.com/path4']");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it0);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path1");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it1);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path2");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it2);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path2/path2.1");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(2);
+        expect(document.querySelector(".current a")).toBe(it21);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path2/path2.2");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(2);
+        expect(document.querySelector(".current a")).toBe(it22);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path2/path2.2/path2.2.1");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(4);
+        expect(document.querySelector(".current a")).toBe(it221);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path2/path2.2/path2.2.2");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(4);
+        expect(document.querySelector(".current a")).toBe(it222);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path3");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it3);
+
+        instance.clear_items();
+        instance.mark_items_url("https://patternslib.com/path4");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it4);
+    });
+});