fwdekker.com
/
template
1
0
Fork 0
Code Issues 2 Pull Requests Releases 90 Activity

Support linkess nav elements

This commit is contained in:
Florine W. Dekker 2022-11-24 16:22:29 +01:00
parent dc50ad5859
commit eb83cfa97c
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
3 changed files with 41 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@fwdekker/template",
"version": "3.3.4",
"version": "3.3.5",
"description": "The base template for pages on fwdekker.com.",
"author": "Florine W. Dekker",
"license": "MIT",

12
src/main/css/snippets/nav.css
View File

@ -29,6 +29,10 @@ nav.fwd-nav li > :first-child {
margin: 0;
}
nav.fwd-nav a {
cursor: pointer;
}
nav.fwd-nav ul ul {
display: none;
@ -113,7 +117,7 @@ nav.fwd-nav #logo::before {
}
/* Hamburger */
nav.fwd-nav #nav-hamburger-label {
nav.fwd-nav #fwd-nav-hamburger-label {
height: fit-content;
margin: 0;
padding: calc(var(--nav-element-spacing-horizontal) + var(--nav-link-spacing-vertical));
@ -121,18 +125,18 @@ nav.fwd-nav #nav-hamburger-label {
color: var(--primary-inverse);
}
nav.fwd-nav #nav-hamburger-label:where(:active, :focus-within, :hover) {
nav.fwd-nav #fwd-nav-hamburger-label:where(:active, :focus-within, :hover) {
background-color: var(--primary-focus-dark);
}
@media (min-width: 576px) {
nav.fwd-nav #nav-hamburger-label {
nav.fwd-nav #fwd-nav-hamburger-label {
display: none;
}
}
@media (max-width: 576px) {
nav.fwd-nav #nav-hamburger-checkbox:not(:checked) ~ ul li:not(:first-child) {
nav.fwd-nav #fwd-nav-hamburger-checkbox:not(:checked) ~ ul li:not(:first-child) {
display: none;
}
}

54
src/main/js/Template.ts
View File

@ -81,8 +81,12 @@ export function getMetaProperty(name: string): string | null | undefined {
* @returns a base navigation element that will eventually be filled with contents
*/
function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
const base = stringToHtml(`<ul><li><a id="logo" href="https://fwdekker.com/">FWDekker</a></span></li></ul>`);
const nav = stringToHtml(`<nav class="fwd-nav"></nav>`);
const checkbox = stringToHtml(`<input id="fwd-nav-hamburger-checkbox" type="checkbox" hidden />`);
nav.appendChild(checkbox);
const base = stringToHtml(`<ul><li><a id="logo" href="https://fwdekker.com/">FWDekker</a></span></li></ul>`);
fetch("https://fwdekker.com/api/nav/")
.then(it => it.json())
.then(json => {
@ -94,11 +98,11 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
);
})
.catch(error => console.error("Failed to fetch navigation elements", error));
const nav = stringToHtml(`<nav class="fwd-nav"></nav>`);
nav.appendChild(stringToHtml(`<input id="nav-hamburger-checkbox" type="checkbox" hidden />`));
nav.appendChild(base);
nav.appendChild(stringToHtml(`<label id="nav-hamburger-label" for="nav-hamburger-checkbox">&#9776;</label>`));
const label = stringToHtml(`<label id="fwd-nav-hamburger-label" for="fwd-nav-hamburger-checkbox">&#9776;</label>`);
nav.appendChild(label);
return nav;
}
@ -106,34 +110,40 @@ function nav(highlightPath?: string, cb?: (json: any) => void): HTMLElement {
* Unpacks a navigation entry returned from the navigation API into an HTML element.
*
* @param entry the entry to unpack
* @param path the current path traversed, found by joining the names of the entries with `/`s; always starts and ends
* with a `/`
* @param parentPath the current path traversed, found by joining the names of the entries with `/`s; always starts and
* ends with a `/`
* @param highlightPath the path to highlight together with its parents, or `undefined` if no path should be highlighted
* @returns the navigation list entry as HTML, described by its children
*/
function unpackEntry(entry: any, path: string = "/", highlightPath?: string): string {
const classList = [];
if (highlightPath?.startsWith(`${path + entry.name}/`) ?? false) classList.push("current-page");
if (entry.border) classList.push("border-above");
const classString = classList.length !== 0 ? `class="${classList.join(" ")}"` : "";
function unpackEntry(entry: any, parentPath: string = "/", highlightPath?: string): string {
const path = `${parentPath + entry.name}/`;
const externalLinkString = !(/^https:\/\/.*fwdekker.com/i.test(entry.link)) && entry.link !== "#"
? `target="_blank"`
: "";
const classList = [];
if (highlightPath?.startsWith(path) ?? false) classList.push("current-page");
if (entry.border) classList.push("border-above");
const classString = classList.length === 0 ? "" : `class="${classList.join(" ")}"`;
let hrefString;
if (entry.link == null) {
hrefString = "";
} else {
hrefString = `href="${entry.link}"`;
if (entry.link !== "#" && !/^https:\/\/.*fwdekker.com/i.test(entry.link))
hrefString += ` target="_blank"`;
}
if (entry.entries.length === 0)
return "" +
`<li ${classString}>` +
`<a href="${entry.link}" ${externalLinkString}>${entry.name}</a>` +
`</li>`;
return `<li ${classString}><a ${hrefString}>${entry.name}</a></li>`;
const depth = path.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
const depth = parentPath.split("/").length - 2; // -1 because count parts, then another -1 because of leading `/`
const arrow = depth === 0 ? "&#9662;" : "&#9656;";
return "" +
`<li ${classString}>` +
`<a href="${entry.link}" ${externalLinkString}>${entry.name} ${arrow}</a>` +
`<ul>${entry.entries.map((it: any) => unpackEntry(it, `${path + entry.name}/`, highlightPath)).join("")}</ul>` +
/**/`<a ${hrefString}>${entry.name} ${arrow}</a>` +
/**/`<ul>` +
/**//**/entry.entries.map((it: any) => unpackEntry(it, path, highlightPath)).join("") +
/**/`</ul>` +
`</li>`;
}