feat(pat navigationmarker): Also mark the anchor with current and in-…

…path classes. Previously only the wrapper was marked.
plone · Feb 13, 2023 · ef0bfb1 · ef0bfb1
1 parent 5d46d28
commit ef0bfb1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/src/pat/navigationmarker/navigationmarker.js b/src/pat/navigationmarker/navigationmarker.js
@@ -36,6 +36,7 @@ export default Base.extend({
                 : nav_item.parentNode;
 
             if (nav_url === current_url_prepared) {
+                nav_item.classList.add(this.options.currentClass);
                 wrapper.classList.add(this.options.currentClass);
             } else if (
                 // Compare the current navigation item url with a slash at the
@@ -45,6 +46,7 @@ export default Base.extend({
                 // be in the path.
                 nav_url !== portal_url
             ) {
+                nav_item.classList.add(this.options.inPathClass);
                 wrapper.classList.add(this.options.inPathClass);
             } else {
                 // Not even in path.

diff --git a/src/pat/navigationmarker/navigationmarker.test.js b/src/pat/navigationmarker/navigationmarker.test.js
@@ -76,63 +76,63 @@ describe("pat-navigationmarker", () => {
         const it3 = document.querySelector("a[href='../../path3']");
         const it4 = document.querySelector("a[href='https://patternslib.com/path4']");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
+        expect(document.querySelectorAll(".current").length).toBe(2);
         expect(document.querySelectorAll(".inPath").length).toBe(0);
         expect(document.querySelector(".current a")).toBe(it0);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path1");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
+        expect(document.querySelectorAll(".current").length).toBe(2);
         expect(document.querySelectorAll(".inPath").length).toBe(0);
         expect(document.querySelector(".current a")).toBe(it1);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path2");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
+        expect(document.querySelectorAll(".current").length).toBe(2);
         expect(document.querySelectorAll(".inPath").length).toBe(0);
         expect(document.querySelector(".current a")).toBe(it2);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path2/path2.1");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
-        expect(document.querySelectorAll(".inPath").length).toBe(1);
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(2);
         expect(document.querySelector(".current a")).toBe(it21);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path2/path2.2");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
-        expect(document.querySelectorAll(".inPath").length).toBe(1);
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(2);
         expect(document.querySelector(".current a")).toBe(it22);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path2/path2.2/path2.2.1");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
-        expect(document.querySelectorAll(".inPath").length).toBe(2);
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(4);
         expect(document.querySelector(".current a")).toBe(it221);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path2/path2.2/path2.2.2");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
-        expect(document.querySelectorAll(".inPath").length).toBe(2);
+        expect(document.querySelectorAll(".current").length).toBe(2);
+        expect(document.querySelectorAll(".inPath").length).toBe(4);
         expect(document.querySelector(".current a")).toBe(it222);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path3");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
+        expect(document.querySelectorAll(".current").length).toBe(2);
         expect(document.querySelectorAll(".inPath").length).toBe(0);
         expect(document.querySelector(".current a")).toBe(it3);
 
         instance.clear_items();
         instance.mark_items("https://patternslib.com/path4");
 
-        expect(document.querySelectorAll(".current").length).toBe(1);
+        expect(document.querySelectorAll(".current").length).toBe(2);
         expect(document.querySelectorAll(".inPath").length).toBe(0);
         expect(document.querySelector(".current a")).toBe(it4);
     });