Skip to content

Commit 83f3339

Browse files
thetthet
committed
feat(pat-navigationmarker): Add in-path-class and current-class parameters to customize the marker CSS classes.
1 parent 8c1e1cb commit 83f3339

2 files changed

Lines changed: 72 additions & 8 deletions

File tree

‎src/pat/navigationmarker/navigationmarker.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@ import registry from "@patternslib/patternslib/src/core/registry";
44

55
export const parser = new Parser("navigationmarker");
66
parser.addArgument("portal-url", undefined);
7+
parser.addArgument("in-path-class", "inPath");
8+
parser.addArgument("current-class", "current");
79

810
class Pattern extends BasePattern {
911
static name = "navigationmarker";
1012
static trigger = ".pat-navigationmarker";
1113
static parser = parser;
1214

15+
parser_group_options = false;
16+
1317
init() {
14-
this.portal_url = this.options.portalUrl || document.body.dataset.portalUrl;
18+
this.portal_url = this.options["portal-url"] || document.body.dataset.portalUrl;
1519

1620
this.scan_navigation();
1721
}
@@ -62,7 +66,7 @@ class Pattern extends BasePattern {
6266

6367
// Set the class
6468
if (in_path) {
65-
parent.classList.add("inPath");
69+
parent.classList.add(this.options["in-path-class"]);
6670
// Don't mark the nav_item as inPath:
6771
// - An <a>nchor element cannot have sub-items, so this is not needed anyways.
6872
// - Having a parent nav_item marked as inPath and thus multiple
@@ -71,19 +75,19 @@ class Pattern extends BasePattern {
7175

7276
// set "current" to the current selected nav item, if it is in the navigation structure.
7377
if (current_url === nav_url) {
74-
parent.classList.add("current");
75-
nav_item.classList.add("current");
78+
parent.classList.add(this.options["current-class"]);
79+
nav_item.classList.add(this.options["current-class"]);
7680
}
7781
}
7882
}
7983

8084
clear(element) {
8185
// Clear all classes
82-
if (element.classList.contains("inPath")) {
83-
element.classList.remove("inPath");
86+
if (element.classList.contains(this.options["in-path-class"])) {
87+
element.classList.remove(this.options["in-path-class"]);
8488
}
85-
if (element.classList.contains("current")) {
86-
element.classList.remove("current");
89+
if (element.classList.contains(this.options["current-class"])) {
90+
element.classList.remove(this.options["current-class"]);
8791
}
8892
}
8993
}

‎src/pat/navigationmarker/navigationmarker.test.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,66 @@ describe("Navigation Marker", function () {
240240
);
241241
expect(current_link.classList.contains("current")).toBe(true);
242242
});
243+
244+
it("uses custom in-path-class and current-class when specified via pattern arguments", async function () {
245+
// Set up custom class names via data attributes
246+
document.body.innerHTML = `
247+
<nav class="pat-navigationmarker" data-pat-navigationmarker="in-path-class: in-path; current-class: active">
248+
<ul>
249+
<li>
250+
<a href="http://example.com">Home</a>
251+
</li>
252+
<li>
253+
<input type="checkbox" id="news-toggle">
254+
<a href="http://example.com/news">News</a>
255+
<ul>
256+
<li>
257+
<a href="http://example.com/news/article-1">Article 1</a>
258+
</li>
259+
<li>
260+
<a href="http://example.com/news/article-2">Article 2</a>
261+
</li>
262+
</ul>
263+
</li>
264+
<li>
265+
<a href="http://example.com/about">About</a>
266+
</li>
267+
</ul>
268+
</nav>
269+
`;
270+
271+
this.nav_element = document.querySelector(".pat-navigationmarker");
272+
registry.scan(document.body);
273+
await utils.timeout(1);
274+
275+
// Test custom current-class "active"
276+
const current_link = this.nav_element.querySelector(
277+
"a[href='http://example.com/news/article-1']",
278+
);
279+
const current_item = current_link.parentElement;
280+
expect(current_link.classList.contains("active")).toBe(true);
281+
expect(current_item.classList.contains("active")).toBe(true);
282+
// Should NOT contain the default "current" class
283+
expect(current_link.classList.contains("current")).toBe(false);
284+
expect(current_item.classList.contains("current")).toBe(false);
285+
286+
// Test custom in-path-class "in-path"
287+
const news_link = this.nav_element.querySelector(
288+
"a[href='http://example.com/news']",
289+
);
290+
const news_item = news_link.parentElement;
291+
expect(news_item.classList.contains("in-path")).toBe(true);
292+
// Should NOT contain the default "inPath" class
293+
expect(news_item.classList.contains("inPath")).toBe(false);
294+
295+
// Verify other items don't have the custom classes
296+
const home_link = this.nav_element.querySelector("a[href='http://example.com']");
297+
const about_link = this.nav_element.querySelector("a[href='http://example.com/about']");
298+
expect(home_link.classList.contains("in-path")).toBe(false);
299+
expect(home_link.classList.contains("active")).toBe(false);
300+
expect(about_link.classList.contains("in-path")).toBe(false);
301+
expect(about_link.classList.contains("active")).toBe(false);
302+
});
243303
});
244304

245305
describe("Navigation Marker - Portal URL Edge Cases", function () {

0 commit comments

Comments
 (0)