feat(pat-base-url): Add new pattern to update data-base-url on the body tag when the URL changes.

Author: thet

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/patterns.js

@@ -19,6 +19,7 @@ import "@patternslib/patternslib/src/pat/depends/depends";
 // Import all used patterns for the bundle to be generated
 import "./pat/autotoc/autotoc";
 import "./pat/backdrop/backdrop";
+import "./pat/base-url/base-url";
 import "./pat/contentloader/contentloader";
 import "./pat/contentbrowser/contentbrowser";
 import "./pat/cookietrigger/cookietrigger";