Toolbar /w navigate event support

package.json

@@ -51,6 +51,7 @@
         "@11ty/eleventy-navigation": "^1.0.4",
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
         "@patternslib/dev": "^3.8.1",
+        "@plone/plonetheme-barceloneta-base": "^3.3.3",
         "@testing-library/jest-dom": "^6.8.0",
         "@types/sinon": "^10.0.20",
         "css.escape": "^1.5.1",

src/pat/toolbar/toolbar.js

@@ -1,48 +1,102 @@
 import $ from "jquery";
-import Base from "@patternslib/patternslib/src/core/base";
+import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
+import events from "@patternslib/patternslib/src/core/events";
+import logging from "@patternslib/patternslib/src/core/logging";
+import Parser from "@patternslib/patternslib/src/core/parser";
 import registry from "@patternslib/patternslib/src/core/registry";
-import utils from "../../core/utils";
+import utils from "@patternslib/patternslib/src/core/utils";
 import Cookies from "js-cookie";
 
-export default Base.extend({
-    name: "toolbar",
-    trigger: ".pat-toolbar",
-    parser: "mockup",
-    defaults: {},
-
-    init: function () {
-        $("body").on("structure-url-changed", (e, path) => {
-            $.ajax({
-                url: $("body").attr("data-portal-url") + path + "/@@render-toolbar",
-            }).done((data) => {
-                const wrapper = $(utils.parseBodyTag(data));
-                const $main_toolbar = wrapper.find("#edit-zone .plone-toolbar-main");
-                const $personal_tools = wrapper.find(
-                    "#edit-zone #collapse-personaltools"
-                );
-                // setup modals
-                registry.scan($main_toolbar);
-                $(".plone-toolbar-main", this.$el).replaceWith($main_toolbar);
-                $("#collapse-personaltools", this.$el).replaceWith($personal_tools);
-            });
-        });
+const log = logging.getLogger("pat-toolbar");
+
+export const parser = new Parser("toolbar");
+parser.addArgument("render-view", "@@render-toolbar");
+
+class Pattern extends BasePattern {
+    static name = "toolbar";
+    static trigger = ".pat-toolbar";
+    static parser = parser;
+
+    parser_group_options = false;
+
+    previous_toolbar_url = null;
+
+    async init() {
+        if (window.__patternslib_import_styles) {
+            //import("./toolbar.scss");
+        }
+
+        // Reload the toolbar on history change.
+        events.add_event_listener(
+            window.navigation,
+            "navigate",
+            "pat-toolbar--history-changed",
+            async () => {
+                // Wait a tick to let other Patterns set the `data-base-url`.
+                await utils.timeout(1);
+                await this.reload_toolbar();
+            }
+        );
+
+        const $el = $(this.el);
 
         // unpin toolbar and save state
-        this.$el.on("click", ".toolbar-collapse", () => {
-            $("body").removeClass("plone-toolbar-left-expanded");
+        $el.on("click", ".toolbar-collapse", () => {
+            document.body.classList.remove("plone-toolbar-left-expanded");
             Cookies.set("plone-toolbar", JSON.stringify({ expanded: false }), {
                 path: "/",
             });
         });
 
         // pin toolbar and save state
-        this.$el.on("click", ".toolbar-expand", () => {
-            $("body").addClass("plone-toolbar-left-expanded");
+        $el.on("click", ".toolbar-expand", () => {
+            document.body.classList.add("plone-toolbar-left-expanded");
             Cookies.set("plone-toolbar", JSON.stringify({ expanded: true }), {
                 path: "/",
             });
         });
 
         this.el.classList.add("initialized");
-    },
-});
+    }
+
+    async reload_toolbar() {
+        const render_view = this.options["render-view"];
+        let url = document.body.dataset.baseUrl;
+        // Ensure a trailing slash in the URL.
+        url = url[url.length - 1] === "/" ? url : `${url}/`
+        url = `${url}${render_view}`;
+
+        if (this.previous_toolbar_url === url) {
+            // no need to reload same url
+            log.debug("No URL change, no reload.");
+            return;
+        }
+
+        // fetch toolbar
+        log.debug("Reload toolbar on: ", url);
+        const response = await fetch(url);
+        const data = await response.text();
+
+        this.previous_toolbar_url = url;
+
+        // Find toolbar nodes
+        const div = document.createElement("div");
+        div.innerHTML = data;
+        const main_toolbar = div.querySelector("#edit-zone .plone-toolbar-main");
+        const personal_tools = div.querySelector("#edit-zone #collapse-personaltools");
+
+        // setup modals
+        registry.scan(main_toolbar);
+        registry.scan(personal_tools);
+        document.querySelector(".plone-toolbar-main")?.replaceWith(main_toolbar);
+        document.querySelector("#collapse-personaltools")?.replaceWith(personal_tools);
+        log.debug("Re-scanned.");
+
+        // Notify others that the toolbar has been reloaded.
+        this.el.dispatchEvent(events.generic_event("pat-toolbar--reloaded"));
+        log.debug("Event pat-toolbar--reloaded dispatched.");
+    }
+}
+registry.register(Pattern);
+export default Pattern;
+export { Pattern };

src/pat/toolbar/toolbar.scss

@@ -0,0 +1,2 @@
+@import "bootstrap/scss/bootstrap";
+@import "@plone/plonetheme-barceloneta-base/scss/_toolbar.scss";