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 ────────────────────────────────────────────────────────────────────
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();
});