translate.language.setLocal('chinese_simplified'); //设置本地语种（当前网页的语种）
translate.listener.start();
//国际化 languageList 便是当前支持的能切换的语种，你可以 console.log(languageList); 打印出来看看
translate.selectLanguageTag.customUI = function(languageList){
//select的onchange事件
var container = document.getElementById(translate.selectLanguageTag.documentId);
if(!container){
return;
}
container.innerHTML = '';
var flagMap = {
english:'🇺🇸',
chinese_simplified:'🇨🇳',
chinese_traditional:'🇭🇰',
japanese:'🇯🇵',
korean:'🇰🇷',
french:'🇫🇷',
german:'🇩🇪',
spanish:'🇲🇽',
italian:'🇮🇹',
portuguese:'🇧🇷',
russian:'🇷🇺',
hindi:'🇮🇳'
};
var dropdownWrap = document.createElement('div');
dropdownWrap.className = 'translate-language-switch';
var toggle = document.createElement('button');
toggle.type = 'button';
toggle.className = 'translate-toggle';
var toggleFlag = document.createElement('span');
toggleFlag.className = 'translate-toggle__flag';
var toggleText = document.createElement('span');
toggleText.className = 'translate-toggle__text';
var toggleArrow = document.createElement('span');
toggleArrow.className = 'translate-toggle__arrow';
toggle.appendChild(toggleFlag);
toggle.appendChild(toggleText);
toggle.appendChild(toggleArrow);
var dropdown = document.createElement('div');
dropdown.className = 'translate-dropdown';
dropdownWrap.appendChild(toggle);
dropdownWrap.appendChild(dropdown);
container.appendChild(dropdownWrap);
function setActiveLanguage(value){
var options = dropdown.querySelectorAll('.translate-option');
options.forEach(function(item){
if(item.getAttribute('data-value') === value){
item.classList.add('is-active');
}else{
item.classList.remove('is-active');
}
});
var activeOption = dropdown.querySelector('.translate-option.is-active') || dropdown.querySelector('.translate-option');
if(activeOption){
toggleFlag.textContent = activeOption.querySelector('.translate-option__flag').textContent;
toggleText.textContent = activeOption.querySelector('.translate-option__label').textContent;
}else{
toggleFlag.textContent = '🌐';
toggleText.textContent = '选择语言';
}
}
function openDropdown(){
dropdown.classList.add('is-open');
}
function closeDropdown(){
dropdown.classList.remove('is-open');
}
languageList.forEach(function(lang){
var option = document.createElement('div');
option.className = 'translate-option';
option.setAttribute('data-value',lang.id);
var flag = document.createElement('span');
flag.className = 'translate-option__flag';
flag.textContent = flagMap[lang.id] || '🌐';
var label = document.createElement('span');
label.className = 'translate-option__label';
label.textContent = lang.name;
option.appendChild(flag);
option.appendChild(label);
option.addEventListener('click',function(e){
e.stopPropagation();
translate.selectLanguageTag.selectOnChange({target:{value:lang.id}});
setActiveLanguage(lang.id);
closeDropdown();
});
dropdown.appendChild(option);
});
toggle.addEventListener('click',function(e){
e.stopPropagation();
if(dropdown.classList.contains('is-open')){
closeDropdown();
}else{
openDropdown();
}
});
document.addEventListener('click',function(e){
if(!dropdownWrap.contains(e.target)){
closeDropdown();
}
});
setActiveLanguage(translate.language.getCurrent());
translate.lifecycle.changeLanguage.push(function(data){
var target = (data && data.to) ? data.to : data;
if(typeof target === 'string'){
setActiveLanguage(target);
}
});
}
translate.execute();
