"navigate" event support in toolbar and navigationmarker + other stuff

package.json

@@ -12,6 +12,7 @@
         "@11ty/eleventy-upgrade-help": "3.0.2",
         "@patternslib/pat-code-editor": "4.0.1",
         "@patternslib/patternslib": "9.10.4",
+        "@plone/plonetheme-barceloneta-base": "^3.3.0",
         "@plone/registry": "^2.7.0",
         "backbone": "1.6.1",
         "backbone.paginator": "2.0.8",

src/pat/base-url/README.md

@@ -0,0 +1,4 @@
+# pat-base-url
+
+Update the `data-base-url` attribute on the body tag when a `navigate` event is
+thrown and thus the browser's URL has changed.

src/pat/base-url/base-url.js

@@ -0,0 +1,49 @@
+// Set the base URL based on the current location, listening on navigation changes.
+import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
+import registry from "@patternslib/patternslib/src/core/registry";
+import events from "@patternslib/patternslib/src/core/events";
+
+class Pattern extends BasePattern {
+    static name = "pat-base-url";
+    static trigger = "body";
+
+    init() {
+        events.add_event_listener(
+            window.navigation,
+            "navigate",
+            "thet-base-url--set",
+            this.set_base_url.bind(this)
+        );
+    }
+
+    set_base_url() {
+        let url = window.location.href;
+
+        // Split the following words from the URL as we want to get the
+        // contents absolute URL.
+        const split_words = [
+            // NOTE: order matters.
+            "/@@", // also catches @@folder_contents and @@edit
+            "/++", // traversal urls.
+            "/folder_contents",
+            "/edit",
+            "/view",
+            "#",
+            "?",
+        ];
+
+        // Split all split words out of url
+        url = split_words.reduce((url_, split_) => url_.split(split_)[0], url);
+        // Remove the trailing slash
+        if (url[url.length -1] === "/") {
+            url = url.substring(0, url.length - 1)
+        }
+
+        // Set the contents absolute URL on `data-base-url`.
+        document.body.dataset.baseUrl = url;
+    }
+}
+
+registry.register(Pattern);
+export default Pattern;
+export { Pattern };

src/pat/base-url/base-url.test.js

@@ -0,0 +1,49 @@
+import "@patternslib/patternslib/src/core/polyfills";
+import utils from "@patternslib/patternslib/src/core/utils";
+import Pattern from "./base-url";
+
+describe("pat-base-url tests", () => {
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+
+    it("is initialized correctly", async () => {
+        document.body.dataset.baseUrl = "http://localhost/not/okay"
+
+        new Pattern(document.body);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/not/okay");
+        history.pushState(null, "", "/okay/okay");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay/okay");
+    });
+
+    it("Cleans the URL from views and traversal URLs.", async () => {
+        new Pattern(document.body);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        history.pushState(null, "", "/okay/@@okay");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+
+        history.pushState(null, "", "/okay/++okay");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+
+        history.pushState(null, "", "/okay/folder_contents");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+
+        history.pushState(null, "", "/okay/edit");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+
+        history.pushState(null, "", "/okay/view");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+
+        history.pushState(null, "", "/okay/#okay");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+
+        history.pushState(null, "", "/okay/?okay");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+
+        history.pushState(null, "", "/okay/?okay#okay");
+        expect(document.body.dataset.baseUrl).toBe("http://localhost/okay");
+    });
+});

src/pat/navigationmarker/navigationmarker.js

@@ -1,52 +1,119 @@
-import $ from "jquery";
-import Base from "@patternslib/patternslib/src/core/base";
-
-export default Base.extend({
-    name: "navigationmarker",
-    trigger: ".pat-navigationmarker",
-    parser: "mockup",
-    init: function () {
-        const portal_url = document.body.dataset.portalUrl;
-        var href =
-            document.querySelector('head link[rel="canonical"]').href ||
+import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
+import events from "@patternslib/patternslib/src/core/events";
+import Parser from "@patternslib/patternslib/src/core/parser";
+import registry from "@patternslib/patternslib/src/core/registry";
+
+export const parser = new Parser("navigationmarker");
+parser.addArgument("portal-url", undefined);
+parser.addArgument("parent-selector", undefined);
+
+class Pattern extends BasePattern {
+    static name = "navigationmarker";
+    static trigger = ".pat-navigationmarker";
+    static parser = parser;
+
+    async init() {
+        this.portal_url = this.options.portalUrl || document.body.dataset.portalUrl;
+
+        events.add_event_listener(
+            window.navigation,
+            "navigate",
+            "pat-navigationmarker--history-changed",
+            (e) => {
+                this.scan_navigation(e);
+            },
+        );
+
+        this.scan_navigation();
+    }
+
+    scan_navigation(e) {
+        // TODO:‌Check, if all these ways to get the current URL are valid.
+        // TODO:Also check, if we could move that method to a core utility module, where it can be reused by other patterns, retrieving the current URL.
+        // TODO: Maybe even a central current-url store?
+        const href =
+            e?.destination?.url ||
+            document.body.dataset.baseUrl || // NOTE: TODO: Attention: If this is not yet updated, there would be an outdated URL.
+            document.querySelector('head link[rel="canonical"]')?.href ||
             window.location.href;
 
-        $("a", this.$el).each(function () {
-            var navlink = this.href.replace("/view", "");
-            if (href.indexOf(navlink) !== -1) {
-                var parent = $(this).parent();
+        const anchors = this.el.querySelectorAll("a");
 
-                // check the input-openers within the path
-                var check = parent.find("> input");
-                if (check.length) {
-                    check[0].checked = true;
-                }
+        for (const anchor of anchors) {
+            //const parent = anchor.parentElement;
+            const parent = this.options.parentSelector
+                ? anchor.closest(this.options.parentSelector)
+                : anchor.parentElement;
+            const navlink = anchor.href.replace("/view", "");
 
-                // set "inPath" to all nav items which are within the current path
-                // check if parts of navlink are in canonical url parts
-                var hrefParts = href.split("/");
-                var navParts = navlink.split("/");
-                var inPath = false;
-                for (var i = 0, size = navParts.length; i < size; i++) {
-                    // The last path-part must match.
-                    inPath = false;
-                    if (navParts[i] === hrefParts[i]) {
-                        inPath = true;
-                    }
-                }
-                if (navlink === portal_url && href !== portal_url) {
-                    // Avoid marking "Home" with "inPath", when not actually there
-                    inPath = false;
-                }
-                if (inPath) {
-                    parent.addClass("inPath");
-                }
+            // We can exit early, if the navlink is not part of the current URL.
+            if (href.indexOf(navlink) === -1) {
+                this.clear(parent);
+                this.clear(anchor);
+                continue;
+            }
+
+            //// BBB
+            //// check the input-openers within the path
+            //const check = parent.querySelector(":scope > input");
+            //if (check) {
+            //    check.checked = true;
+            //}
 
-                // set "current" to the current selected nav item, if it is in the navigation structure.
-                if (href === navlink) {
-                    parent.addClass("current");
+            // set "inPath" to all nav items which are within the current path
+            // check if parts of navlink are in canonical url parts
+            //
+            const href_parts = href.split("/");
+            const nav_parts = navlink.split("/");
+            let inPath = false;
+
+            // The last part of the URL must match.
+            const nav_compare = nav_parts[nav_parts.length - 1];
+            const href_compare = href_parts[nav_parts.length - 1];
+            if (nav_compare === href_compare) {
+                inPath = true;
+            }
+
+            // Avoid marking "Home" with "inPath", when not actually there
+            if (navlink === this.portal_url && href !== this.portal_url) {
+                inPath = false;
+            }
+
+            // Set the class
+            if (inPath) {
+                // inPath is set along with current | TODO: OR NOT, verify.
+                parent.classList.add("inPath");
+                if (parent.tagName === "DETAILS") {
+                    parent.open = true;
                 }
             }
-        });
-    },
-});
+
+            // set "current" to the current selected nav item, if it is in the navigation structure.
+            if (href === navlink) {
+                parent.classList.add("current");
+                anchor.classList.add("current");
+            }
+        }
+
+        this.el.dispatchEvent(events.generic_event(`${this.name}.scanned`));
+    }
+
+    clear(element) {
+        // Clear all classes
+        if (element.classList.contains("inPath")) {
+            element.classList.remove("inPath");
+        }
+        if (element.classList.contains("current")) {
+            element.classList.remove("current");
+        }
+        if (element.tagName === "DETAILS") {
+            element.open = false;
+        }
+    }
+}
+
+// Register Pattern class in the global pattern registry
+registry.register(Pattern);
+
+// Make it available
+export default Pattern;