const nesting = getNesting();
document.addEventListener("DOMContentLoaded", function () {
loadLayoutByPetraPixel();
});
function loadLayoutByPetraPixel() {
const mainEl = document.querySelector("main");
if (!mainEl) return;
mainEl.insertAdjacentHTML("beforebegin", headerHTML());
mainEl.insertAdjacentHTML("afterend", footerHTML());
giveActiveClassToLinks();
}
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 ``;
}
function getNesting() {
const numberOfSlashes = window.location.pathname.split("/").length - 1;
if (numberOfSlashes == 1) return "./";
return "../".repeat(numberOfSlashes - 1);
}
function giveActiveClassToLinks() {
const els = document.querySelectorAll("nav a");
[...els].forEach((el) => {
const href = el.getAttribute("href").replace(".html", "").replace("#", "");
const pathname = window.location.pathname.replace("/public/", "");
if (href == "/" || href == "/index.html") {
if (window.location.href == "http://localhost:8080/" || pathname == "/") {
el.classList.add("active");
}
} else {
if (window.location.href.includes(href)) {
el.classList.add("active");
if (el.closest("summary")) {
el.closest("details").addAttribute("open");
el.closest("summary").classList.add("active");
}
}
}
});
}