Merge pull request #1058 from Patternslib/navigation-mark-after-inject

feat(pat navigation): Mark the navigation items after injection.

Author: thet

src/pat/navigation/navigation.js

@@ -45,11 +45,15 @@ export default Base.extend({
         this.$el.on("patterns-inject-triggered", "a", (ev) => {
             // Remove all set current classes
             this.clear_items();
-
             // Mark the current item
             this.mark_current(ev.target);
         });
 
+        // Mark the navigation items after pat-inject injected into this navigation menu.
+        this.$el.on("patterns-injected-scanned", () => {
+            this.init_markings();
+        });
+
         // Automatically and recursively load the ``.current`` item.
         if (this.el.classList.contains("navigation-load-current")) {
             // Check for current elements injected here.

src/pat/navigation/navigation.test.js

@@ -3,7 +3,7 @@ import Pattern from "./navigation";
 import Registry from "../../core/registry";
 import utils from "../../core/utils";
 
-describe("Navigation pattern tests", function () {
+describe("1 - Navigation pattern tests", function () {
     beforeEach(function () {
         document.body.innerHTML = `
             <div id="page_wrapper">
@@ -152,7 +152,80 @@ describe("Navigation pattern tests", function () {
     });
 });
 
-describe("Navigation pattern tests - Mark items based on URL", () => {
+describe("2 - Navigation pattern tests - mark after navigation injection", function () {
+    let _window_location;
+
+    beforeEach(() => {
+        _window_location = global.window.location;
+        delete global.window.location;
+        document.body.innerHTML = "";
+    });
+
+    afterEach(() => {
+        global.window.location = _window_location;
+        document.body.innerHTML = "";
+    });
+
+    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", async () => {
+        document.body.innerHTML = `
+          <div id="injected_nav">
+            <div class="w1">
+              <a href="/path/to" class="a1">link a1</a>
+              <div class="w11">
+                <a href="/path/to/test" class="a11">link a11</a>
+              </div>
+            </div>
+          </div>
+          <a
+              href="#injected_nav"
+              class="pat-inject load-nav"
+              data-pat-inject="target: #injection_target">load navigation</a>
+          <nav
+              id="injection_target"
+              class="pat-navigation nav"
+              data-pat-navigation="item-wrapper: div">
+          </nav>
+        `;
+
+        set_url("https://patternslib.com/path/to/test");
+
+        Registry.scan(document.body);
+
+        const nav = document.querySelector("nav");
+        const load_nav = document.querySelector(".load-nav");
+        load_nav.click();
+
+        await utils.timeout(1); // wait for MutationObserver
+
+        const w1 = nav.querySelector(".w1");
+        const a1 = nav.querySelector(".a1");
+        const w11 = nav.querySelector(".w11");
+        const a11 = nav.querySelector(".a11");
+
+        console.log(document.body.innerHTML);
+
+        expect(w1.classList.contains("current")).toBeFalsy();
+        expect(w1.classList.contains("navigation-in-path")).toBeTruthy();
+        expect(a1.classList.contains("current")).toBeFalsy();
+        expect(a1.classList.contains("navigation-in-path")).toBeTruthy();
+        expect(w11.classList.contains("current")).toBeTruthy();
+        expect(w11.classList.contains("navigation-in-path")).toBeFalsy();
+        expect(a11.classList.contains("current")).toBeTruthy();
+        expect(a11.classList.contains("navigation-in-path")).toBeFalsy();
+    });
+});
+
+describe("3 - Navigation pattern tests - Mark items based on URL", () => {
     let _window_location;
 
     beforeEach(() => {
@@ -304,7 +377,7 @@ describe("Navigation pattern tests - Mark items based on URL", () => {
     });
 });
 
-describe("Navigation pattern tests - Mark items based based clicking without pat-inject.", () => {
+describe("4 - Navigation pattern tests - Mark items based based clicking without pat-inject.", () => {
     beforeEach(() => {
         document.body.innerHTML = "";
     });