edukarsa/assets/edukarsa.js

/**
 * EduKarsa Theme Core JavaScript
 * Native Zero Plugin Architecture
 */

// 1. GLOBAL INITIALIZER UNTUK GOOGLE TRANSLATE
window.googleTranslateElementInit = function() {
    if (typeof google !== 'undefined' && google.translate) {
        new google.translate.TranslateElement({
            pageLanguage: 'id',
            autoDisplay: false
        }, 'google_translate_element');
    }
};

document.addEventListener("DOMContentLoaded", function() {
    // 2. LOGIKA SWITCHER BAHASA & MANAJEMEN COOKIE GOOGTRANS
    function setLanguageCookie(lang) {
        const host = window.location.hostname;
        const rootDomain = '.' + host.replace(/^www\./, '');

        if (lang === 'id') {
            // Reset ke Bahasa Asli (Indonesia)
            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + host;
            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + rootDomain;
        } else {
            // Set bahasa tujuan (misal /id/en, /id/ar, dll.)
            const cookieVal = '/id/' + lang;
            document.cookie = "googtrans=" + cookieVal + "; path=/;";
            document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + host;
            document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + rootDomain;
        }
        window.location.reload();
    }

    // Pasang Event Listener ke seluruh tombol bahasa (.lang-btn)
    const langButtons = document.querySelectorAll('.lang-btn');
    const matchCookie = document.cookie.match(/googtrans=\/id\/([a-zA-Z\-]+)/i);
    const activeLang  = matchCookie ? matchCookie[1].toLowerCase() : 'id';

    langButtons.forEach(function(btn) {
        const targetLang = (btn.getAttribute('data-lang') || '').toLowerCase();

        // Tandai tombol yang sedang aktif
        if (targetLang === activeLang) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }

        // Tangkap klik pergantian bahasa
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const selectedLang = this.getAttribute('data-lang');
            if (selectedLang) {
                setLanguageCookie(selectedLang);
            }
        });
    });

    // Sembunyikan paksa toolbar dan frame pop-up bawaan Google Translate
    setInterval(function() {
        if (document.body.style.top && document.body.style.top !== '0px') {
            document.body.style.top = '0px';
        }
        const banner = document.querySelector('.goog-te-banner-frame, iframe.goog-te-banner-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd');
        if (banner) {
            banner.style.display = 'none';
        }
    }, 150);

    // 3. MOBILE MENU TOGGLE
    const toggleBtn = document.getElementById("mobile-menu-toggle");
    const navMenu   = document.getElementById("site-navigation");
    if (toggleBtn && navMenu) {
        toggleBtn.addEventListener("click", function() {
            toggleBtn.classList.toggle("active");
            navMenu.classList.toggle("active");
        });
    }

    // 4. BACK TO TOP BUTTON
    const bttBtn = document.getElementById("back-to-top");
    if (bttBtn) {
        window.addEventListener("scroll", function() {
            if (window.scrollY > 350) { bttBtn.classList.add("show"); } else { bttBtn.classList.remove("show"); }
        });
        bttBtn.addEventListener("click", function() {
            window.scrollTo({ top: 0, behavior: "smooth" });
        });
    }

    // 5. TOOLBAR AKSESIBILITAS WCAG 2.1
    const a11yTrigger = document.getElementById("a11y-trigger");
    const a11yPanel   = document.getElementById("a11y-panel");
    const a11yClose   = document.getElementById("a11y-close");
    if (a11yTrigger && a11yPanel) {
        a11yTrigger.addEventListener("click", function() { a11yPanel.classList.toggle("active"); });
        if (a11yClose) { a11yClose.addEventListener("click", function() { a11yPanel.classList.remove("active"); }); }

        const fontLevels = ['', 'a11y-font-lg', 'a11y-font-xl'];
        let currentFontIdx = parseInt(localStorage.getItem('edukarsa_a11y_font') || '0', 10);
        function applyA11y() {
            fontLevels.forEach(function(c) { if (c) document.body.classList.remove(c); });
            if (fontLevels[currentFontIdx]) { document.body.classList.add(fontLevels[currentFontIdx]); }
            if (localStorage.getItem('edukarsa_a11y_contrast') === '1') { document.body.classList.add('a11y-high-contrast'); } else { document.body.classList.remove('a11y-high-contrast'); }
            if (localStorage.getItem('edukarsa_a11y_grayscale') === '1') { document.body.classList.add('a11y-grayscale'); } else { document.body.classList.remove('a11y-grayscale'); }
            if (localStorage.getItem('edukarsa_a11y_links') === '1') { document.body.classList.add('a11y-underline-links'); } else { document.body.classList.remove('a11y-underline-links'); }
        }
        applyA11y();

        document.getElementById("a11y-font-inc")?.addEventListener("click", function() { if (currentFontIdx < fontLevels.length - 1) currentFontIdx++; localStorage.setItem('edukarsa_a11y_font', currentFontIdx); applyA11y(); });
        document.getElementById("a11y-font-dec")?.addEventListener("click", function() { if (currentFontIdx > 0) currentFontIdx--; localStorage.setItem('edukarsa_a11y_font', currentFontIdx); applyA11y(); });
        document.getElementById("a11y-font-reset")?.addEventListener("click", function() { currentFontIdx = 0; localStorage.setItem('edukarsa_a11y_font', currentFontIdx); applyA11y(); });
        document.getElementById("a11y-contrast")?.addEventListener("click", function() { const active = localStorage.getItem('edukarsa_a11y_contrast') === '1'; localStorage.setItem('edukarsa_a11y_contrast', active ? '0' : '1'); applyA11y(); });
        document.getElementById("a11y-grayscale")?.addEventListener("click", function() { const active = localStorage.getItem('edukarsa_a11y_grayscale') === '1'; localStorage.setItem('edukarsa_a11y_grayscale', active ? '0' : '1'); applyA11y(); });
        document.getElementById("a11y-links")?.addEventListener("click", function() { const active = localStorage.getItem('edukarsa_a11y_links') === '1'; localStorage.setItem('edukarsa_a11y_links', active ? '0' : '1'); applyA11y(); });
        document.getElementById("a11y-reset-all")?.addEventListener("click", function() {
            currentFontIdx = 0;
            localStorage.removeItem('edukarsa_a11y_font');
            localStorage.removeItem('edukarsa_a11y_contrast');
            localStorage.removeItem('edukarsa_a11y_grayscale');
            localStorage.removeItem('edukarsa_a11y_links');
            applyA11y();
        });
    }

    // 6. HOMEPAGE SLIDER SCROLL OTOMATIS
    const slider = document.getElementById('hero-slider-wrapper');
    if (slider && slider.children.length > 1) {
        setInterval(function() {
            if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
                slider.scrollTo({ left: 0, behavior: 'smooth' });
            } else {
                slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
            }
        }, 4000);
    }
});