From 81fff6c7e9547bf15c9de241513f699b4f7d89c5 Mon Sep 17 00:00:00 2001 From: "Felix W. Dekker" Date: Mon, 20 Jul 2020 12:54:32 +0200 Subject: [PATCH] Add option to highlight current entry Fixes #2. --- package-lock.json | Bin 233828 -> 214143 bytes package.json | 8 +++---- src/main/css/common.css | 5 ++++- src/main/css/nav.css | 48 ++++++++++++++++++++++------------------ src/main/js/Template.js | 26 +++++++++++++++------- 5 files changed, 53 insertions(+), 34 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4431c91b60015a1d192a32b1dcc8cbb9ded79271..cc88a3f204d1bd03bcbd65e50946b4ff77be3c64 100644 GIT binary patch delta 2827 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 it.json()) - .then(json => json.entries.forEach(entry => base.appendChild(unpackEntry(entry)))) + .then(json => json.entries.forEach(entry => base.appendChild(unpackEntry(entry, "/", highlightPath)))) .catch(e => { console.error("Failed to fetch navigation elements", e); return []; @@ -61,18 +62,27 @@ export const nav = function () { * Unpacks a navigation entry returned from the navigation API into an HTML element. * * @param entry {Object} the entry to unpack - * @param [depth] {Object} the current nesting level + * @param [path] {number} the current path traversed, found by joining the names of the entries with `/`s; always starts + * and ends with a `/` + * @param [highlightPath] {String} the path to highlight together with its parents * @returns {HTMLElement} the navigation list entry as HTML, described by its children */ -const unpackEntry = function (entry, depth = 0) { - if (entry.entries.length === 0) - return h("li", h("a", {href: entry.link, innerHTML: entry.name})); +const unpackEntry = function (entry, path = "/", highlightPath = "") { + const shouldHighlight = highlightPath.startsWith(`${path + entry.name}/`); - const arrow = depth === 0 ? "▾" : "▸" + if (entry.entries.length === 0) + return h("li", + h("a", {href: entry.link, innerHTML: entry.name}), + {className: shouldHighlight ? "currentPage" : ""} + ); + + const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/` + const arrow = depth === 0 ? "▾" : "▸"; return h("li", h("a", {href: entry.link, innerHTML: `${entry.name} ${arrow}`}), - h("ul", entry.entries.map(it => unpackEntry(it, depth + 1))) + h("ul", entry.entries.map(it => unpackEntry(it, `${path + entry.name}/`, highlightPath))), + {className: shouldHighlight ? "currentPage" : ""} ); };