81 lines
2.4 KiB
JavaScript
81 lines
2.4 KiB
JavaScript
const langToggle = document.querySelector('.lang-toggle');
|
|
const body = document.body;
|
|
|
|
function getPreferredLang() {
|
|
if (window.__ITSTUDIO_LANG__ === 'zh' || window.__ITSTUDIO_LANG__ === 'en') {
|
|
return window.__ITSTUDIO_LANG__;
|
|
}
|
|
|
|
const savedLang = localStorage.getItem('language');
|
|
if (savedLang === 'zh' || savedLang === 'en') {
|
|
return savedLang;
|
|
}
|
|
return 'zh';
|
|
}
|
|
|
|
function setElementTextByLang(element, lang) {
|
|
const nextText = lang === 'en' ? element.getAttribute('data-en') : element.getAttribute('data-cn');
|
|
if (!nextText) {
|
|
return;
|
|
}
|
|
|
|
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
|
|
const inputType = (element.getAttribute('type') || '').toLowerCase();
|
|
if (inputType === 'submit' || inputType === 'button' || inputType === 'reset') {
|
|
element.value = nextText;
|
|
return;
|
|
}
|
|
}
|
|
|
|
element.textContent = nextText;
|
|
}
|
|
|
|
function setElementPlaceholderByLang(element, lang) {
|
|
const key = lang === 'en' ? 'data-en-placeholder' : 'data-cn-placeholder';
|
|
const value = element.getAttribute(key);
|
|
if (value) {
|
|
element.setAttribute('placeholder', value);
|
|
}
|
|
}
|
|
|
|
function setElementAriaLabelByLang(element, lang) {
|
|
const key = lang === 'en' ? 'data-en-aria-label' : 'data-cn-aria-label';
|
|
const value = element.getAttribute(key);
|
|
if (value) {
|
|
element.setAttribute('aria-label', value);
|
|
}
|
|
}
|
|
|
|
function setLang(lang) {
|
|
body.setAttribute('lang', lang);
|
|
|
|
if (langToggle) {
|
|
const langText = langToggle.querySelector('.lang-text');
|
|
if (langText) {
|
|
langText.textContent = lang === 'en' ? '中' : 'EN';
|
|
}
|
|
}
|
|
|
|
const textNodes = document.querySelectorAll('[data-cn][data-en]');
|
|
textNodes.forEach((element) => setElementTextByLang(element, lang));
|
|
|
|
const placeholderNodes = document.querySelectorAll('[data-cn-placeholder][data-en-placeholder]');
|
|
placeholderNodes.forEach((element) => setElementPlaceholderByLang(element, lang));
|
|
|
|
const ariaNodes = document.querySelectorAll('[data-cn-aria-label][data-en-aria-label]');
|
|
ariaNodes.forEach((element) => setElementAriaLabelByLang(element, lang));
|
|
|
|
localStorage.setItem('language', lang);
|
|
}
|
|
|
|
const initialLang = getPreferredLang();
|
|
setLang(initialLang);
|
|
|
|
if (langToggle) {
|
|
langToggle.addEventListener('click', () => {
|
|
const currentLang = body.getAttribute('lang');
|
|
const nextLang = currentLang === 'en' ? 'zh' : 'en';
|
|
setLang(nextLang);
|
|
});
|
|
}
|