Tradução de texto sem jQuery
by Ivan Ferrer
HTML
<select name="translate" id="tradutor" data-translate="pt-BR">
<option value="pt-BR" data-i18n="content_PT">Português</option>
<option value="en-US" data-i18n="content_EN">Inglês</option>
<option value="es-GT" data-i18n="content_ES">Espanhol</option>
<option value="pe-PG" data-i18n="content_PE">Língua do P</option>
</select>
<div data-translate="pt-BR">
<p data-i18n="content_A">The Book's on the table</p>
<p data-i18n="content_B">Hello World</p>
<p data-i18n="content_C">My name is Ivan</p>
</div>
JavaScript
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
var el_translate = document.querySelector('[data-translate]');
var tradutor = document.getElementById('tradutor');
tradutor.value = el_translate.dataset.translate;
tradutor.addEventListener("change", function (event) {
el_translate.dataset.translate = event.target.value;
setLang(el_translate);
});
setLang(el_translate);
}
}
var setLang = (function() {
var i18n = {
"pt-BR":{
"content_A":"O livro está sobre a mesa",
"content_B":"Olá Mundo",
"content_C":"Meu nome é Ivan",
"content_PT":"Português",
"content_EN":"Inglês",
"content_ES":"Espanhol",
"content_PE":"Língua do P",
},
"en-US":{
"content_A":"The Book's on the table",
"content_B":"Hello World",
"content_C":"My name is Ivan",
"content_PT":"Portuguese",
"content_EN":"English",
"content_ES":"Espanish",
"content_PE":"Language of P",
},
"es-GT":{
"content_A":"El libro está en la mesa",
"content_B":"Hola mundo",
"content_C":"Mi nombre es Iván",
"content_PT":"Portugués",
"content_EN":"Inglés",
"content_ES":"Español",
"content_PE":"Idioma hacer P",
},
"pe-PG":{
"content_A":"PO PliPvro PesPtá PsoPbre Pa PmePsa",
"content_B":"POPlá PMunPdo",
"content_C":"PMeu PnoPme Pé PIPvan",
"content_PT":"PPorPtuPguês",
"content_EN":"PInPglês",
"content_ES":"PEsPpanhol",
"content_PE":"PLínPgua Pdo PP",
}
};
return function (e) {
var elementos = document.querySelectorAll("[data-i18n]");
[].forEach.call(elementos, function (el, index) {
...