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 ────────────────────────────────────────────────────────────────────
|
// ─── 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();
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user