ssnj/scripts/main.js

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>&copy; ${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">&times;</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';
            document.body.classList.add("modal-open");

            modal.querySelector(".close").addEventListener("click", () => {
                modal.remove();
                document.body.classList.remove("modal-open");
            });
        });
    });
});

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);
    }
});