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>
`;

// Scroll lock helper
(function() {
    let _locked = false;
    let _scrollY = 0;

    function lockBodyScroll() {
        if (_locked) return;
        _scrollY = window.scrollY || window.pageYOffset || 0;
        document.body.style.position = "fixed";
        document.body.style.top = `-${_scrollY}px`;
        document.body.style.left = "0";
        document.body.style.right = "0";
        document.body.style.width = "100%";
        document.documentElement.classList.add("modal-open");
        document.body.classList.add("modal-open");
        _locked = true;
    }

    function unlockBodyScroll() {
        if (!_locked) return;
        document.body.style.position = "";
        document.body.style.top = "";
        document.body.style.left = "";
        document.body.style.right = "";
        document.body.style.width = "";
        document.documentElement.classList.remove("modal-open");
        document.body.classList.remove("modal-open");
        window.scrollTo(0, _scrollY);
        _locked = false;
    }

    window.lockBodyScroll = lockBodyScroll;
    window.unlockBodyScroll = unlockBodyScroll;
})();

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";
            if (window.lockBodyScroll) window.lockBodyScroll();

            const closeBtn = modal.querySelector(".close");
            if (closeBtn) {
                closeBtn.addEventListener("click", () => {
                    modal.remove();
                    if (window.unlockBodyScroll) window.unlockBodyScroll();
                });
            }
        });
    });
});
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);
    }
});