forked from izu/student-web-if-development-kit
Resolve conflict at localization.js
This commit is contained in:
@@ -1554,16 +1554,20 @@ const translations = {
|
||||
|
||||
// ─── State ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const STORAGE_KEY = 'if_untan_lang';
|
||||
const STORAGE_KEY = "if_untan_lang";
|
||||
|
||||
function detectLang() {
|
||||
// 1. Preferensi user yang tersimpan
|
||||
const saved = localStorage.getItem(STORAGE_KEY);
|
||||
if (saved === 'id' || saved === 'en') return saved;
|
||||
if (saved === "id" || saved === "en") return saved;
|
||||
|
||||
// 2. Bahasa browser
|
||||
const browserLang = (navigator.language || navigator.userLanguage || 'id').toLowerCase();
|
||||
return browserLang.startsWith('en') ? 'en' : 'id';
|
||||
const browserLang = (
|
||||
navigator.language ||
|
||||
navigator.userLanguage ||
|
||||
"id"
|
||||
).toLowerCase();
|
||||
return browserLang.startsWith("en") ? "en" : "id";
|
||||
}
|
||||
|
||||
let currentLang = detectLang();
|
||||
@@ -1571,7 +1575,7 @@ let currentLang = detectLang();
|
||||
// ─── Core ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
function t(key) {
|
||||
return translations[currentLang]?.[key] ?? translations['id']?.[key] ?? key;
|
||||
return translations[currentLang]?.[key] ?? translations["id"]?.[key] ?? key;
|
||||
}
|
||||
|
||||
function getLang() {
|
||||
@@ -1580,31 +1584,31 @@ function getLang() {
|
||||
|
||||
function applyLang() {
|
||||
// Teks biasa
|
||||
document.querySelectorAll('[data-i18n]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n');
|
||||
document.querySelectorAll("[data-i18n]").forEach((el) => {
|
||||
const key = el.getAttribute("data-i18n");
|
||||
const val = t(key);
|
||||
if (val) el.textContent = val;
|
||||
});
|
||||
|
||||
// HTML (untuk teks dengan markup)
|
||||
document.querySelectorAll('[data-i18n-html]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n-html');
|
||||
document.querySelectorAll("[data-i18n-html]").forEach((el) => {
|
||||
const key = el.getAttribute("data-i18n-html");
|
||||
const val = t(key);
|
||||
if (val) el.innerHTML = val;
|
||||
});
|
||||
|
||||
// Placeholder input
|
||||
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n-placeholder');
|
||||
document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
|
||||
const key = el.getAttribute("data-i18n-placeholder");
|
||||
const val = t(key);
|
||||
if (val) el.placeholder = val;
|
||||
});
|
||||
|
||||
// Aria-label
|
||||
document.querySelectorAll('[data-i18n-aria]').forEach(el => {
|
||||
const key = el.getAttribute('data-i18n-aria');
|
||||
document.querySelectorAll("[data-i18n-aria]").forEach((el) => {
|
||||
const key = el.getAttribute("data-i18n-aria");
|
||||
const val = t(key);
|
||||
if (val) el.setAttribute('aria-label', val);
|
||||
if (val) el.setAttribute("aria-label", val);
|
||||
});
|
||||
|
||||
// lang attribute di <html>
|
||||
@@ -1614,34 +1618,40 @@ function applyLang() {
|
||||
updateToggleBtn();
|
||||
|
||||
// Beritahu script lain
|
||||
document.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang: currentLang } }));
|
||||
document.dispatchEvent(
|
||||
new CustomEvent("languageChanged", { detail: { lang: currentLang } }),
|
||||
);
|
||||
}
|
||||
|
||||
function setLang(lang) {
|
||||
if (lang !== 'id' && lang !== 'en') return;
|
||||
if (lang !== "id" && lang !== "en") return;
|
||||
currentLang = lang;
|
||||
localStorage.setItem(STORAGE_KEY, lang);
|
||||
applyLang();
|
||||
}
|
||||
|
||||
function toggleLanguage() {
|
||||
setLang(currentLang === 'id' ? 'en' : 'id');
|
||||
setLang(currentLang === "id" ? "en" : "id");
|
||||
}
|
||||
|
||||
function updateToggleBtn() {
|
||||
document.querySelectorAll('.language-toggle-btn').forEach(btn => {
|
||||
btn.innerHTML = currentLang === 'id'
|
||||
document.querySelectorAll(".language-toggle-btn").forEach((btn) => {
|
||||
btn.innerHTML =
|
||||
currentLang === "id"
|
||||
? '<span class="font-bold">ID</span> <span class="text-slate-400 mx-0.5">|</span> EN'
|
||||
: 'ID <span class="text-slate-400 mx-0.5">|</span> <span class="font-bold">EN</span>';
|
||||
btn.setAttribute('aria-label', currentLang === 'id' ? 'Switch to English' : 'Ganti ke Bahasa Indonesia');
|
||||
btn.setAttribute(
|
||||
"aria-label",
|
||||
currentLang === "id" ? "Switch to English" : "Ganti ke Bahasa Indonesia",
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Init ─────────────────────────────────────────────────────────────────────
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.language-toggle-btn').forEach(btn => {
|
||||
btn.addEventListener('click', toggleLanguage);
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.querySelectorAll(".language-toggle-btn").forEach((btn) => {
|
||||
btn.addEventListener("click", toggleLanguage);
|
||||
});
|
||||
applyLang();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user