feat(pat navigation): Support click-only markings.

Mark the navigation items also on clicks on anchors without pat-inject.

Author: thet

src/pat/navigation/index.html

@@ -93,6 +93,28 @@ <h3>Example 2</h3>
             <div id="content-tab-2">Example 2 Content will appear here</div>
         </section>
 
+        <section>
+            <header>
+                <h3>Example 3 - nested nav, but no injection</h3>
+            </header>
+            <ul class="pat-navigation">
+                <li>
+                    <a href="#10">Tab 1</a>
+                    <ul>
+                        <li>
+                            <a href="#11">Link 1.1</a>
+                        </li>
+                        <li>
+                            <a href="#12">Link 1.2</a>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#2">Tab 2</a>
+                </li>
+            </ul>
+        </section>
+
         <template id="inject-tab-1">Content for tab 1</template>
         <template id="inject-tab-2">Content for tab 2</template>
         <template id="inject-tab-1-1">Content for tab 1.1</template>

src/pat/navigation/navigation.js

@@ -1,6 +1,7 @@
 import Base from "../../core/base";
 import Parser from "../../core/parser";
 import logging from "../../core/logging";
+import events from "../../core/events";
 
 const log = logging.getLogger("navigation");
 
@@ -42,6 +43,17 @@ export default Base.extend({
             this.mark_current(ev.target);
         });
 
+        const items_non_inject = this.el.querySelectorAll("a:not(.pat-inject)");
+        for (const it of items_non_inject) {
+            events.add_event_listener(it, "click", "pat_nav_item_non_inject", (ev) => {
+                // Remove all set current classes
+                this.clear_items();
+
+                // Mark the current item
+                this.mark_current(ev.target);
+            });
+        }
+
         // 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

@@ -352,3 +352,104 @@ describe("Navigation pattern tests - Mark items based on URL", () => {
         expect(document.querySelector(".current a")).toBe(it4);
     });
 });
+
+describe("Navigation pattern tests - Mark items based based clicking without pat-inject.", () => {
+    beforeEach(() => {
+        document.body.innerHTML = "";
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+
+    it("navigation roundtrip", () => {
+        document.body.innerHTML = `
+          <nav class="pat-navigation"
+               data-pat-navigation="in-path-class: inPath">
+            <ul>
+              <li class="current">
+                <a class="current" href="/home">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>
+            </ul>
+          </nav>
+        `;
+
+        const instance = new Pattern(document.querySelector(".pat-navigation"));
+
+        const it0 = document.querySelector("a[href='/home']");
+        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']");
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it0);
+
+        instance.clear_items();
+        it1.click();
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it1);
+
+        instance.clear_items();
+        it2.click();
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(0);
+        expect(document.querySelector(".current a")).toBe(it2);
+
+        instance.clear_items();
+        it21.click();
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(2);
+        expect(document.querySelector(".current a")).toBe(it21);
+
+        instance.clear_items();
+        it22.click();
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(2);
+        expect(document.querySelector(".current a")).toBe(it22);
+
+        instance.clear_items();
+        it221.click();
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(4);
+        expect(document.querySelector(".current a")).toBe(it221);
+
+        instance.clear_items();
+        it222.click();
+
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(4);
+        expect(document.querySelector(".current a")).toBe(it222);
+    });
+});