diff --git a/i18n.js b/i18n.js
index 732636c..d5af84a 100644
--- a/i18n.js
+++ b/i18n.js
@@ -2,110 +2,109 @@
const I18N_LANG_STORAGE_KEY = 'wled-webinstaller:language';
+// Available languages (loaded from languages.json)
+let AVAILABLE_LANGUAGES = {};
-// Translation messages
-const i18n_messages = {
- "en": {
- "maintenance1": "Web Installer under maintenance",
- "maintenance2": "The WLED web installer is currently out of service due to maintenance work and will be back online shortly.",
- "maintenance3": "In the meantime, you can use the webinstaller provided by Wladi: ",
- "welcome": "Welcome to the WLED web installer!",
- "unsupported1": "Sorry, your browser is not yet supported!",
- "unsupported2": "Please try on Desktop Chrome or Edge.",
- "unsupported3": "Find binary files here:",
- "step1-1": "Plug in your ESP to a USB port. We will install WLED ",
- "step1-2": " to it.",
- "step2": "Hit \"Install\" and select the correct COM port.",
- "noDeviceFound": "No device found?",
- "serialHelp1": "You might be missing the drivers for your board.",
- "serialHelp2": "Here are drivers for chips commonly used in ESP boards:",
- "serialHelp3": "Make sure your USB cable supports data transfer.",
- "chip1": "CP2102 (square chip)",
- "chip2": "CH34x (rectangular chip)",
- "step3": "Get WLED installed and connected in less than 3 minutes!",
- "plain": "Plain",
- "audioReactive": "Audioreactive",
- "ethernet": "Ethernet",
- "esp8266Test": "ESP8266 CPU Frequency Test",
- "esp32V4": "ESP32 V4",
- "debug": "DEBUG",
- "install": "Install",
- "powered1": "Powered by ",
- "powered2": "",
- "cors1": "CORS proxy by ",
- "cors2": ""
- },
- "zh-CN": {
- "maintenance1": "网络安装程序正在维护中",
- "maintenance2": "由于维护工作，WLED 网络安装程序目前无法使用，但它将很快重新上线。",
- "maintenance3": "在此期间，您可以使用 Wladi 提供的网络安装程序：",
- "welcome": "欢迎使用 WLED 网络安装程序！",
- "unsupported1": "抱歉，尚不支持您使用的浏览器！",
- "unsupported2": "请在桌面版 Chrome 或 Edge 上尝试。",
- "unsupported3": "在此处查找二进制文件：",
- "step1-1": "将您的 ESP 插入 USB 端口。我们将向其安装 WLED ",
- "step1-2": " 。",
- "step2": "点击“安装”并选择正确的 COM 端口。",
- "noDeviceFound": "未找到设备？",
- "serialHelp1": "您可能缺少开发板的驱动程序。",
- "serialHelp2": "以下是 ESP 开发板常用的芯片驱动程序：",
- "serialHelp3": "确保您的 USB 数据线支持数据传输。",
- "chip1": "CP2102（正方形芯片）",
- "chip2": "CH34x（长方形芯片）",
- "step3": "在不到 3 分钟的时间内安装并连接 WLED！",
- "plain": "普通版",
- "audioReactive": "音频反应版",
- "ethernet": "以太网版",
- "esp8266Test": "ESP8266 CPU 频率测试版",
- "esp32V4": "ESP32 V4 版",
- "debug": "调试版",
- "install": "安装",
- "powered1": "",
- "powered2": " 强力驱动",
- "cors1": "CORS 代理由 ",
- "cors2": " 提供支持"
+// Translation messages cache
+let i18n_messages = {};
+
+// Load available languages from languages.json
+async function loadAvailableLanguages() {
+ try {
+ const response = await fetch('locales/languages.json');
+ if (!response.ok) throw new Error('Failed to load languages.json');
+ AVAILABLE_LANGUAGES = await response.json();
+ } catch (error) {
+ console.error('Error loading languages.json:', error);
+ // Fallback to default English
+ AVAILABLE_LANGUAGES = {
+ 'en': { code: 'en', name: 'English', nativeName: 'English' }
+ };
+ }
+}
+
+// Load language file
+async function loadLanguage(lang) {
+ if (!i18n_messages[lang]) {
+ try {
+ const response = await fetch(`locales/${lang}.json`);
+ if (!response.ok) throw new Error(`Failed to load language: ${lang}`);
+ i18n_messages[lang] = await response.json();
+ } catch (error) {
+ console.error(`Error loading language ${lang}:`, error);
+ // Fallback to English if loading fails
+ if (lang !== 'en') {
+ return loadLanguage('en');
+ }
+ }
}
-};
+ return i18n_messages[lang];
+}
+// Populate language selector dropdown with available languages
+function populateLanguageSelector() {
+ const languageSelect = document.getElementById('languageSelect');
+ languageSelect.innerHTML = ''; // Clear existing options
+
+ for (const [code, langInfo] of Object.entries(AVAILABLE_LANGUAGES)) {
+ const option = document.createElement('option');
+ option.value = code;
+ option.textContent = langInfo.nativeName || langInfo.name;
+ languageSelect.appendChild(option);
+ }
+}
// Function to update text content based on selected language
-function i18n() {
+async function i18n() {
const lang = document.getElementById('languageSelect').value;
document.documentElement.lang = lang; // Set the lang attribute of the HTML document
+
+ // Load the language file if not already loaded
+ await loadLanguage(lang);
+
+ // Always ensure English is loaded as fallback
+ if (!i18n_messages['en']) {
+ await loadLanguage('en');
+ }
+
const messages = i18n_messages[lang] || i18n_messages['en']; // Fallback to English if language not found
document.querySelectorAll('[data-i18n]').forEach((elem) => {
const key = elem.getAttribute('data-i18n');
- const translation = messages[key] ?? i18n_messages['en'][key]; // Fallback to English if key not found
+ const translation = messages[key] ?? (i18n_messages['en'] ? i18n_messages['en'][key] : key); // Fallback to English if key not found
elem.textContent = translation;
// console.log(`i18n: ${messages[key] || i18n_messages['en'][key]} | ${key} => ${translation}`);
});
}
-
// Initialize i18n on page load
-function i18nInit() {
+async function i18nInit() {
+ // Load available languages first
+ await loadAvailableLanguages();
+
// Get saved language from localStorage
let savedLang = localStorage.getItem(I18N_LANG_STORAGE_KEY);
- // If no saved language or not in the list of supported languages, set default to English
- if (!savedLang || !i18n_messages[savedLang]) {
+ // If no saved language or not in the list of available languages, set default to English
+ if (!savedLang || !AVAILABLE_LANGUAGES[savedLang]) {
savedLang = 'en';
localStorage.setItem(I18N_LANG_STORAGE_KEY, savedLang);
}
+ // Populate language selector
+ populateLanguageSelector();
+
// Set the select element to the saved language
document.getElementById('languageSelect').value = savedLang;
// Apply translations
- i18n();
+ await i18n();
}
-
// Event for language selection change
-function changeLanguage() {
+async function changeLanguage() {
const selectedLang = document.getElementById('languageSelect').value;
localStorage.setItem(I18N_LANG_STORAGE_KEY, selectedLang);
- i18n();
-}
\ No newline at end of file
+ await i18n();
+}
diff --git a/index.htm b/index.htm
index 0651748..a918732 100644
--- a/index.htm
+++ b/index.htm
@@ -31,8 +31,7 @@
Web Installer under maintenance
diff --git a/locales/en.json b/locales/en.json
new file mode 100644
index 0000000..504f2d1
--- /dev/null
+++ b/locales/en.json
@@ -0,0 +1,30 @@
+{
+ "maintenance1": "Web Installer under maintenance",
+ "maintenance2": "The WLED web installer is currently out of service due to maintenance work and will be back online shortly.",
+ "maintenance3": "In the meantime, you can use the webinstaller provided by Wladi: ",
+ "welcome": "Welcome to the WLED web installer!",
+ "unsupported1": "Sorry, your browser is not yet supported!",
+ "unsupported2": "Please try on Desktop Chrome or Edge.",
+ "unsupported3": "Find binary files here:",
+ "step1-1": "Plug in your ESP to a USB port. We will install WLED ",
+ "step1-2": " to it.",
+ "step2": "Hit \"Install\" and select the correct COM port.",
+ "noDeviceFound": "No device found?",
+ "serialHelp1": "You might be missing the drivers for your board.",
+ "serialHelp2": "Here are drivers for chips commonly used in ESP boards:",
+ "serialHelp3": "Make sure your USB cable supports data transfer.",
+ "chip1": "CP2102 (square chip)",
+ "chip2": "CH34x (rectangular chip)",
+ "step3": "Get WLED installed and connected in less than 3 minutes!",
+ "plain": "Plain",
+ "audioReactive": "Audioreactive",
+ "ethernet": "Ethernet",
+ "esp8266Test": "ESP8266 CPU Frequency Test",
+ "esp32V4": "ESP32 V4",
+ "debug": "DEBUG",
+ "install": "Install",
+ "powered1": "Powered by ",
+ "powered2": "",
+ "cors1": "CORS proxy by ",
+ "cors2": ""
+}
diff --git a/locales/languages.json b/locales/languages.json
new file mode 100644
index 0000000..cf99a4e
--- /dev/null
+++ b/locales/languages.json
@@ -0,0 +1,12 @@
+{
+ "en": {
+ "code": "en",
+ "name": "English",
+ "nativeName": "English"
+ },
+ "zh-CN": {
+ "code": "zh-CN",
+ "name": "Chinese (Simplified)",
+ "nativeName": "简体中文"
+ }
+}
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
new file mode 100644
index 0000000..977e2e5
--- /dev/null
+++ b/locales/zh-CN.json
@@ -0,0 +1,31 @@
+
+{
+ "maintenance1": "网络安装程序正在维护中",
+ "maintenance2": "由于维护工作，WLED 网络安装程序目前无法使用，但它将很快重新上线。",
+ "maintenance3": "在此期间，您可以使用 Wladi 提供的网络安装程序：",
+ "welcome": "欢迎使用 WLED 网络安装程序！",
+ "unsupported1": "抱歉，尚不支持您使用的浏览器！",
+ "unsupported2": "请在桌面版 Chrome 或 Edge 上尝试。",
+ "unsupported3": "在此处查找二进制文件：",
+ "step1-1": "将您的 ESP 插入 USB 端口。我们将向其安装 WLED ",
+ "step1-2": " 。",
+ "step2": "点击“安装”并选择正确的 COM 端口。",
+ "noDeviceFound": "未找到设备？",
+ "serialHelp1": "您可能缺少开发板的驱动程序。",
+ "serialHelp2": "以下是 ESP 开发板常用的芯片驱动程序：",
+ "serialHelp3": "确保您的 USB 数据线支持数据传输。",
+ "chip1": "CP2102（正方形芯片）",
+ "chip2": "CH34x（长方形芯片）",
+ "step3": "在不到 3 分钟的时间内安装并连接 WLED！",
+ "plain": "普通版",
+ "audioReactive": "音频反应版",
+ "ethernet": "以太网版",
+ "esp8266Test": "ESP8266 CPU 频率测试版",
+ "esp32V4": "ESP32 V4 版",
+ "debug": "调试版",
+ "install": "安装",
+ "powered1": "",
+ "powered2": " 强力驱动",
+ "cors1": "CORS 代理由 ",
+ "cors2": " 提供支持"
+}