school/projects/year_02/challenge_20/Einstein_Academy/js/script.js

let translations = {};
let currentLang = "nl";

function getLanguagePath(lang) {
    const isInsideHtmlFolder = window.location.pathname.replace(/\\/g, "/").includes("/html/");
    const prefix = isInsideHtmlFolder ? "../" : "./";
    return `${prefix}lang/${lang}.json`;
}

async function loadLanguage(lang) {
    try {
        const res = await fetch(getLanguagePath(lang));
        translations = await res.json();

        applyTranslations();
        currentLang = lang;

        localStorage.setItem("lang", lang);
    } catch (error) {
        console.error("Failed to load language file:", error);
    }
}

function applyTranslations() {
    document.querySelectorAll("[data-i18n]").forEach(el => {
        const key = el.dataset.i18n;
        if (translations[key]) {
            el.textContent = translations[key];
        }
    });
}

function initLanguageToggle() {
    const toggle = document.getElementById("langToggle");
    if (!toggle) return;

    toggle.checked = (localStorage.getItem("lang") || "nl") === "en";

    toggle.addEventListener("change", () => {
        const lang = toggle.checked ? "en" : "nl";
        loadLanguage(lang);
    });
}

// init on page load
const savedLang = localStorage.getItem("lang") || "nl";
loadLanguage(savedLang);

// Call toggle init when DOM is ready
document.addEventListener("DOMContentLoaded", initLanguageToggle);

// PDF Rendering Logic
async function initPDFRendering() {
    const pdfElements = document.querySelectorAll("[data-pdf]");

    if (pdfElements.length === 0) return;

    // Load PDF.js if not already loaded
    if (typeof pdfjsLib === 'undefined') {
        await new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
    }

    pdfElements.forEach(async (container) => {
        const url = container.getAttribute('data-pdf');
        if (!url) return;

        try {
            const loadingTask = pdfjsLib.getDocument(url);
            const pdf = await loadingTask.promise;
            const page = await pdf.getPage(1);

            // Calculate scale to fit the container width
            const containerWidth = container.clientWidth || 140;
            const unscaledViewport = page.getViewport({ scale: 1 });
            const scale = containerWidth / unscaledViewport.width;
            const viewport = page.getViewport({ scale: scale * 2 }); // Use 2x for better quality

            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            canvas.style.width = '100%';
            canvas.style.height = 'auto';
            canvas.style.display = 'block';

            await page.render({
                canvasContext: context,
                viewport: viewport
            }).promise;

            // Clear container and add canvas
            container.innerHTML = '';
            container.appendChild(canvas);
        } catch (error) {
            console.error("Error rendering PDF:", url, error);
        }
    });
}

document.addEventListener("DOMContentLoaded", initPDFRendering);

// Enable transitions after a short delay to avoid initial animation
setTimeout(() => {
    const slider = document.querySelector(".slider");
    if (slider) {
        slider.classList.add("slider-transition");
    }
}, 100);