dynamic-interaction
Version:
Dynamic interaction 动态交互mcp，用于cursor、windsurf、trae 等 AI 智能编辑器 Agent 运行时交互使用
95 lines • 3.46 kB
JavaScript
/**
* 语言切换组件
* 处理语言切换功能和UI更新
*/
import { i18nService } from '../services/i18n.js';
import { getElementById } from '../utils/dom.js';
import { eventBus, APP_EVENTS } from '../core/events.js';
class LanguageSwitcherComponent {
elements = {};
initialize() {
this.initializeElements();
this.setupEventListeners();
this.updateLanguageDisplay();
this.setupI18nListener();
}
initializeElements() {
this.elements = {
languageSwitcher: getElementById('language-switcher') || undefined,
languageText: getElementById('language-text') || undefined,
};
}
setupEventListeners() {
if (this.elements.languageSwitcher) {
this.elements.languageSwitcher.addEventListener('click', () => {
this.toggleLanguage();
});
}
}
setupI18nListener() {
i18nService.addLanguageChangeListener((lang) => {
this.updateLanguageDisplay();
this.updateAllI18nElements();
this.updateTitle();
// 广播语言变化事件
eventBus.emit(APP_EVENTS.LANGUAGE_CHANGED, { language: lang });
});
}
toggleLanguage() {
i18nService.toggleLanguage();
}
updateLanguageDisplay() {
if (this.elements.languageText) {
const currentLang = i18nService.getCurrentLanguage();
this.elements.languageText.textContent = currentLang === 'zh-CN' ? '中' : 'En';
// 更新 title 属性
if (this.elements.languageSwitcher) {
this.elements.languageSwitcher.title = i18nService.t('language.switch');
}
}
}
updateTitle() {
document.title = i18nService.t('title');
}
/**
* 更新页面中所有带有 data-i18n 属性的元素
*/
updateAllI18nElements() {
// 更新文本内容
const i18nElements = document.querySelectorAll('[data-i18n]');
i18nElements.forEach((element) => {
// 跳过标记为 data-i18n-skip 的节点
if (element.hasAttribute('data-i18n-skip'))
return;
const key = element.getAttribute('data-i18n');
if (key) {
const text = i18nService.t(key);
element.textContent = text;
}
});
// 更新 placeholder 属性
const placeholderElements = document.querySelectorAll('[data-i18n-placeholder]');
placeholderElements.forEach((element) => {
if (element.hasAttribute('data-i18n-skip'))
return;
const key = element.getAttribute('data-i18n-placeholder');
if (key) {
const text = i18nService.t(key);
element.setAttribute('placeholder', text);
}
});
// 更新 title 属性
const titleElements = document.querySelectorAll('[data-i18n-title]');
titleElements.forEach((element) => {
if (element.hasAttribute('data-i18n-skip'))
return;
const key = element.getAttribute('data-i18n-title');
if (key) {
const text = i18nService.t(key);
element.setAttribute('title', text);
}
});
}
}
export const languageSwitcherComponent = new LanguageSwitcherComponent();
//# sourceMappingURL=languageSwitcher.js.map