101 lines
3.7 KiB
JavaScript
101 lines
3.7 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.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());
|
|
});
|
|
|
|
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);
|
|
}
|
|
}); |