128 lines
4.8 KiB
JavaScript
128 lines
4.8 KiB
JavaScript
const headerHtml = `
|
|
<header>
|
|
<nav>
|
|
<div class="nav-left">
|
|
<a class="nav-title" href="/">Slovar Slovenskega Novega Jezika</a>
|
|
</div>
|
|
<div class="nav-right" aria-label="Primary navigation">
|
|
<a class="nav-btn" href="/about.html">O projektu</a>
|
|
<a class="nav-btn" href="/contact.html">Kontakt</a>
|
|
<a class="nav-btn" href="/extras.html">Dodatki</a>
|
|
<div id="nav-login-holder"></div>
|
|
|
|
<button id="theme-toggle" class="toggle-btn" onclick="toggleTheme()" aria-label="Toggle colour scheme" aria-pressed="false">
|
|
<div class="track"><div class="knob"></div></div>
|
|
<span class="toggle-icon" id="toggle-icon" aria-hidden="true">☀</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
`;
|
|
|
|
const footerHtml = `
|
|
<footer>
|
|
<p>© ${new Date().getFullYear()} Jonas Korene Novak. Vse pravice pridržane.</p>
|
|
</footer>
|
|
`;
|
|
|
|
function getCurrentTheme() {
|
|
return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
|
|
}
|
|
|
|
function updateToggleState(theme) {
|
|
const icon = document.getElementById("toggle-icon");
|
|
const toggleButton = document.getElementById("theme-toggle");
|
|
|
|
if (!icon || !toggleButton) {
|
|
return;
|
|
}
|
|
|
|
icon.textContent = theme === "dark" ? "🌙" : "☀";
|
|
toggleButton.setAttribute("aria-pressed", theme === "dark" ? "true" : "false");
|
|
toggleButton.setAttribute("aria-label", theme === "dark" ? "Svetli način" : "Temni način");
|
|
}
|
|
|
|
function logout() {
|
|
// Odstrani cookie tako, da ga nastaviš z max-age=0
|
|
document.cookie = "token=; max-age=0; path=/; secure; samesite=strict";
|
|
document.cookie = "username=; max-age=0; path=/; secure; samesite=strict";
|
|
window.location.href = "/";
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
// Naslov
|
|
document.title = `SSNJ - ${document.title}`;
|
|
|
|
// Konstrukcija vseh stvari
|
|
for (let element of document.getElementsByClassName("page-header")) {
|
|
element.innerHTML = headerHtml;
|
|
}
|
|
|
|
// Dodaj gumb za prijavo, če uporabnik ni prijavljen
|
|
const isLoggedIn = document.cookie.split(";").some(cookie => cookie.trim().startsWith("token="));
|
|
if (!isLoggedIn) {
|
|
const navRight = document.querySelector(".nav-right");
|
|
if (navRight) {
|
|
const loginBtn = `<a class="nav-btn nav-btn-primary" href="/login.html">Prijava</a>`;
|
|
// Najdi zadnji <a> element in dodaj gumb za njim
|
|
const lastLink = navRight.querySelector("a:last-child");
|
|
document.getElementById("nav-login-holder").innerHTML = loginBtn;
|
|
}
|
|
} else {
|
|
const navRight = document.querySelector(".nav-right");
|
|
if (navRight) {
|
|
const logoutBtn = `<a class="nav-btn nav-btn-primary" href="/">Odjava</a>`;
|
|
// Najdi zadnji <a> element in dodaj gumb za njim
|
|
const lastLink = navRight.querySelector("a:last-child");
|
|
document.getElementById("nav-login-holder").innerHTML = logoutBtn;
|
|
document.querySelector(".nav-btn-primary").addEventListener("click", logout);
|
|
}
|
|
}
|
|
|
|
for (let element of document.getElementsByClassName("page-footer")) {
|
|
element.innerHTML = footerHtml;
|
|
}
|
|
|
|
updateToggleState(getCurrentTheme());
|
|
|
|
// Univerzalne funkcionalnosti, ki so potrebne na več straneh
|
|
const galleryImages = document.querySelectorAll(".page-gallery-image");
|
|
galleryImages.forEach(image => {
|
|
image.addEventListener("click", () => {
|
|
const src = image.getAttribute("src");
|
|
const alt = image.getAttribute("alt");
|
|
const modalHtml = `
|
|
<div class="modal" id="image-modal">
|
|
<div class="modal-content">
|
|
<span class="close">×</span>
|
|
<img src="${src}" alt="${alt}" class="image-modal-img">
|
|
<p>${alt}</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.insertAdjacentHTML("beforeend", modalHtml);
|
|
const modal = document.getElementById("image-modal");
|
|
modal.style.visibility = "visible";
|
|
|
|
modal.querySelector(".close").addEventListener("click", () => {
|
|
modal.remove();
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
function toggleTheme() {
|
|
const current = getCurrentTheme();
|
|
const next = current === "dark" ? "light" : "dark";
|
|
document.documentElement.setAttribute("data-theme", next);
|
|
localStorage.setItem("theme", next);
|
|
updateToggleState(next);
|
|
}
|
|
|
|
matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
|
|
if (!localStorage.getItem("theme")) {
|
|
const theme = e.matches ? "dark" : "light";
|
|
document.documentElement.setAttribute("data-theme", theme);
|
|
updateToggleState(theme);
|
|
}
|
|
}); |