Update bilingual scholarship content

groups/ApeNameTeamE/assets/js/carousel.js

@@ -1,53 +1,86 @@
 // =====================================================
 // carousel.js — Swiper.js Carousel Testimoni
 // Touch-friendly, auto-play, responsive breakpoints
+// + DUKUNGAN MULTI-BAHASA (ID/EN) Terintegrasi
 // =====================================================
 
 let testimoniSwiper = null;
+let allTestimoniData = []; // Simpan data di memori agar tidak perlu loading ulang saat ganti bahasa
+
+// 1. Variabel penampung bahasa yang terhubung otomatis dengan tombol ID/EN
+let activeCarouselLang = localStorage.getItem('if_untan_lang') || document.documentElement.lang || 'id';
+
+// 2. Tangkap event perubahan bahasa secara langsung dari localization.js
+document.addEventListener('languageChanged', (e) => {
+  // Update bahasa
+  if (e.detail && e.detail.lang) {
+    activeCarouselLang = e.detail.lang;
+  } else if (typeof window.getLang === 'function') {
+    activeCarouselLang = window.getLang();
+  } else {
+    activeCarouselLang = document.documentElement.lang || 'id';
+  }
+
+  // Jika data sudah ada, langsung cetak ulang testimoninya
+  if (allTestimoniData && allTestimoniData.length > 0) {
+    renderTestimoniSlides(allTestimoniData);
+    initSwiper(allTestimoniData.length); // Swiper harus di-restart agar animasinya tidak rusak
+  }
+});
 
 /** Render slide testimoni ke dalam swiper-wrapper */
 function renderTestimoniSlides(data) {
   const wrapper = document.getElementById('testimonial-wrapper');
   if (!wrapper) return;
+  
+  const lang = activeCarouselLang; // Gunakan bahasa terbaru
 
-  wrapper.innerHTML = data.map(t => `
-    <div class="swiper-slide" style="height:auto;">
-      <div class="testimonial-card">
-        <img
-          src="${t.foto}"
-          alt="Foto ${t.nama}"
-          class="testimonial-avatar"
-          loading="lazy"
-          onerror="
-            this.style.display='none';
-            this.nextElementSibling.style.display='flex';
-          "
-        >
-        <div
-          class="testimonial-avatar"
-          style="
-            display:none;
-            background:linear-gradient(135deg,#003150,#4a6bc5);
-            align-items:center;
-            justify-content:center;
-            color:white;
-            font-size:22px;
-            font-weight:700;
-          "
-        >
-          ${t.nama.charAt(0).toUpperCase()}
+  wrapper.innerHTML = data.map(t => {
+    // Logika Pintar: Cek mode bahasa. Jika 'en' dan teks terjemahannya ada, pakai bahasa Inggris.
+    // Jika tidak, tetap tampilkan teks bahasa Indonesia (sebagai cadangan).
+    const beasiswaName = (lang === 'en' && t.nama_beasiswa_en) ? t.nama_beasiswa_en : t.nama_beasiswa;
+    const quote = (lang === 'en' && t.kutipan_en) ? t.kutipan_en : t.kutipan;
+
+    return `
+      <div class="swiper-slide" style="height:auto;">
+        <div class="testimonial-card">
+          <img
+            src="${t.foto}"
+            alt="Foto ${t.nama}"
+            class="testimonial-avatar"
+            loading="lazy"
+            onerror="
+              this.style.display='none';
+              this.nextElementSibling.style.display='flex';
+            "
+          >
+          <div
+            class="testimonial-avatar"
+            style="
+              display:none;
+              background:linear-gradient(135deg,#003150,#4a6bc5);
+              align-items:center;
+              justify-content:center;
+              color:white;
+              font-size:22px;
+              font-weight:700;
+            "
+          >
+            ${t.nama.charAt(0).toUpperCase()}
+          </div>
+
+          <div class="testimonial-name">${t.nama}</div>
+          <div class="testimonial-beasiswa">${beasiswaName}</div>
+          <p class="testimonial-quote">"${quote}"</p>
         </div>
-
-        <div class="testimonial-name">${t.nama}</div>
-        <div class="testimonial-beasiswa">${t.nama_beasiswa}</div>
-        <p class="testimonial-quote">"${t.kutipan}"</p>
       </div>
-    </div>
-  `).join('');
+    `;
+  }).join('');
 }
 
 /** Inisialisasi Swiper setelah slide di-render */
 function initSwiper(count) {
+  // Bersihkan swiper lama jika ada (penting agar tidak menumpuk saat ganti bahasa)
   if (testimoniSwiper) {
     testimoniSwiper.destroy(true, true);
     testimoniSwiper = null;
@@ -72,9 +105,10 @@ function initSwiper(count) {
       640:  { slidesPerView: 2 },
       1024: { slidesPerView: 3 },
     },
+    // Dukungan Aksesibilitas Dinamis (VoiceOver / Screen Reader)
     a11y: {
-      prevSlideMessage: 'Slide sebelumnya',
-      nextSlideMessage: 'Slide berikutnya',
+      prevSlideMessage: activeCarouselLang === 'en' ? 'Previous slide' : 'Slide sebelumnya',
+      nextSlideMessage: activeCarouselLang === 'en' ? 'Next slide' : 'Slide berikutnya',
     },
   });
 }
@@ -88,22 +122,19 @@ async function initCarousel() {
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
 
     const data = await res.json();
+    allTestimoniData = data; // Simpan ke variabel global
 
     if (!data || data.length === 0) {
-      // Sembunyikan seksi testimoni jika data kosong (sesuai UC-07 Alt Flow)
       section?.classList.add('hidden');
       return;
     }
 
     renderTestimoniSlides(data);
-
-    // Init Swiper setelah DOM di-render
     requestAnimationFrame(() => initSwiper(data.length));
 
   } catch {
-    // Jika gagal fetch, sembunyikan seksi (graceful degradation)
     section?.classList.add('hidden');
   }
 }
 
-document.addEventListener('DOMContentLoaded', initCarousel);
+document.addEventListener('DOMContentLoaded', initCarousel);