document.addEventListener("DOMContentLoaded", function () {
// Page has finished loading. Now, do things.
loadLayoutByPetraPixel();
// Add any custom JavaScript code here...
});
function loadLayoutByPetraPixel() {
const mainEl = document.querySelector("main");
if (!mainEl) return;
mainEl.insertAdjacentHTML("beforebegin", headerHTML());
mainEl.insertAdjacentHTML("afterend", footerHTML());
giveActiveClassToCurrentPage();
}
const nesting = getNesting();
function headerHTML() {
// ${nesting} outputs "./" or "../" depending on current page depth.
// You can use it to refer to images etc.
// Example: 
might output 
return `
`;
}
function footerHTML() {
// ${nesting} outputs "./" or "../" depending on current page depth.
// You can use it to refer to images etc.
// Example: might output
return `
`;
}
/* Do not edit anything below this line unless you know what you're doing. */
function giveActiveClassToCurrentPage() {
const els = document.querySelectorAll("nav a");
[...els].forEach((el) => {
const href = el.getAttribute("href").replace(".html", "").replace("#", "");
const pathname = window.location.pathname.replace("/public/", "");
const currentHref = window.location.href.replace(".html", "") + "END";
/* Homepage */
if (href == "/" || href == "/index.html") {
if (pathname == "/") {
el.classList.add("active");
}
} else {
/* Other pages */
if (currentHref.includes(href + "END")) {
el.classList.add("active");
/* Subnavigation: */
if (el.closest("details")) {
el.closest("details").setAttribute("open", "open");
el.closest("details").classList.add("active");
}
if (el.closest("ul")) {
if (el.closest("ul").closest("ul")) {
el.closest("ul").closest("ul").classList.add("active");
}
}
}
}
});
}
function getNesting() {
const numberOfSlashes = window.location.pathname.split("/").length - 1;
if (numberOfSlashes == 1) return "./";
return "../".repeat(numberOfSlashes - 1);
}