Resolve conflict at localization.js

This commit is contained in:
2026-06-12 02:55:02 +00:00
parent 5f87c0ad28
commit 7141132c84
+33 -23
View File
@@ -1554,16 +1554,20 @@ const translations = {
// ─── State ──────────────────────────────────────────────────────────────────── // ─── State ────────────────────────────────────────────────────────────────────
const STORAGE_KEY = 'if_untan_lang'; const STORAGE_KEY = "if_untan_lang";
function detectLang() { function detectLang() {
// 1. Preferensi user yang tersimpan // 1. Preferensi user yang tersimpan
const saved = localStorage.getItem(STORAGE_KEY); const saved = localStorage.getItem(STORAGE_KEY);
if (saved === 'id' || saved === 'en') return saved; if (saved === "id" || saved === "en") return saved;
// 2. Bahasa browser // 2. Bahasa browser
const browserLang = (navigator.language || navigator.userLanguage || 'id').toLowerCase(); const browserLang = (
return browserLang.startsWith('en') ? 'en' : 'id'; navigator.language ||
navigator.userLanguage ||
"id"
).toLowerCase();
return browserLang.startsWith("en") ? "en" : "id";
} }
let currentLang = detectLang(); let currentLang = detectLang();
@@ -1571,7 +1575,7 @@ let currentLang = detectLang();
// ─── Core ───────────────────────────────────────────────────────────────────── // ─── Core ─────────────────────────────────────────────────────────────────────
function t(key) { function t(key) {
return translations[currentLang]?.[key] ?? translations['id']?.[key] ?? key; return translations[currentLang]?.[key] ?? translations["id"]?.[key] ?? key;
} }
function getLang() { function getLang() {
@@ -1580,31 +1584,31 @@ function getLang() {
function applyLang() { function applyLang() {
// Teks biasa // Teks biasa
document.querySelectorAll('[data-i18n]').forEach(el => { document.querySelectorAll("[data-i18n]").forEach((el) => {
const key = el.getAttribute('data-i18n'); const key = el.getAttribute("data-i18n");
const val = t(key); const val = t(key);
if (val) el.textContent = val; if (val) el.textContent = val;
}); });
// HTML (untuk teks dengan markup) // HTML (untuk teks dengan markup)
document.querySelectorAll('[data-i18n-html]').forEach(el => { document.querySelectorAll("[data-i18n-html]").forEach((el) => {
const key = el.getAttribute('data-i18n-html'); const key = el.getAttribute("data-i18n-html");
const val = t(key); const val = t(key);
if (val) el.innerHTML = val; if (val) el.innerHTML = val;
}); });
// Placeholder input // Placeholder input
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => { document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
const key = el.getAttribute('data-i18n-placeholder'); const key = el.getAttribute("data-i18n-placeholder");
const val = t(key); const val = t(key);
if (val) el.placeholder = val; if (val) el.placeholder = val;
}); });
// Aria-label // Aria-label
document.querySelectorAll('[data-i18n-aria]').forEach(el => { document.querySelectorAll("[data-i18n-aria]").forEach((el) => {
const key = el.getAttribute('data-i18n-aria'); const key = el.getAttribute("data-i18n-aria");
const val = t(key); const val = t(key);
if (val) el.setAttribute('aria-label', val); if (val) el.setAttribute("aria-label", val);
}); });
// lang attribute di <html> // lang attribute di <html>
@@ -1614,34 +1618,40 @@ function applyLang() {
updateToggleBtn(); updateToggleBtn();
// Beritahu script lain // Beritahu script lain
document.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang: currentLang } })); document.dispatchEvent(
new CustomEvent("languageChanged", { detail: { lang: currentLang } }),
);
} }
function setLang(lang) { function setLang(lang) {
if (lang !== 'id' && lang !== 'en') return; if (lang !== "id" && lang !== "en") return;
currentLang = lang; currentLang = lang;
localStorage.setItem(STORAGE_KEY, lang); localStorage.setItem(STORAGE_KEY, lang);
applyLang(); applyLang();
} }
function toggleLanguage() { function toggleLanguage() {
setLang(currentLang === 'id' ? 'en' : 'id'); setLang(currentLang === "id" ? "en" : "id");
} }
function updateToggleBtn() { function updateToggleBtn() {
document.querySelectorAll('.language-toggle-btn').forEach(btn => { document.querySelectorAll(".language-toggle-btn").forEach((btn) => {
btn.innerHTML = currentLang === 'id' btn.innerHTML =
currentLang === "id"
? '<span class="font-bold">ID</span> <span class="text-slate-400 mx-0.5">|</span> EN' ? '<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>'; : '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 ───────────────────────────────────────────────────────────────────── // ─── Init ─────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => { document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('.language-toggle-btn').forEach(btn => { document.querySelectorAll(".language-toggle-btn").forEach((btn) => {
btn.addEventListener('click', toggleLanguage); btn.addEventListener("click", toggleLanguage);
}); });
applyLang(); applyLang();
}); });