Traduzindo textos com JQuery SundayMorning.
Pra quem não conhece o JQuery SundayMorning é um plugin muito útil que ajuda na implementação de traduções de conteúdo utilizando a API do Google, recentemente usei ele em um projeto para testar as suas funcionalidades, achei bem interessante apesar de ainda faltar algumas coisas.
Uma das coisas que mais senti falta foi um modo de reverter ao conteudo incialmente traduzido, uma vez que ele envia seu conteudo para tradução e substitui o texto original pelo traduzido, e caso você quisesse traduzir novamente o texto para a linguagem original so conseguiria recarregando a página, pois se você traduz novamente para o português de outra lingua já traduzida o texto volta na maioria das vezes sem nexo algum. Para resolver esse problema fiz uma função para fazer esta tradução e guardar o texto original caso o usuário queira voltar para o texto original.
Vamos iniciar adicionando o scripts necessários para a utilização, neste caso o jquery.js e o jquery.sundaymorning.js
<script> src="js/jquery.js"></script><script> src="js/jquery.sundaymorning.js"></script>
Agora adicionei um pequeno css para colocar as bandeirinhas de tradução acima do texto, para quem quiser fazer o mesmo é só utilizar o código abaixo, os icones peguei do Fam Fam Fam Flags.
<style> type="text/css">
.btIdioma {
cursor:pointer;
display:block;
float:left;
height:11px;
margin-left:12px;
width:16px;
}
.pt {
background:url(./demos_blog/br.png) no-repeat bottom;
}
.fr {
background:url(./demos_blog/fr.png) no-repeat bottom;
}
.de {
background:url(./demos_blog/de.png) no-repeat bottom;
}
.us {
background:url(./demos_blog/us.png) no-repeat bottom;
}
.es {
background:url(./demos_blog/es.png) no-repeat bottom;
}</style>
Agora vamos pela parte que interessa, precisaremos de uns elementos específicos para garantir a tradução do texto corretamente, vou iniciar com o HTML que precisamos.
No HTML para este exemplo adicionei ao
uma id para que o jquery saiba o texto a ser traduzido, mas você pode por exemplo deixar somente o p que ele traduziria todos os textos dentro desta tag, ou mesmo utilizar qualquer seletor do JQuery para selecionar os textos que você quer traduzir.
Nos links das bandeiras adicionei um rel = linguagens para marcar quais os links que eu quero que ative o script de tradução, isso foi adicionado aos links das bandeirinhas juntamente com o titulo no qual eu adicionei para este exemplo o codigo da linguagem que eu quero traduzir, este titulo será usado pelo JQuery também. Você pode ver o HTML no DEMO caso esteja em dúvida.
Por fim teremos o nosso script.
<script>>
$(document).ready(function() {
var orig = $("#traduza").text(); //GUARDA O TEXTO ORIGINAL
$("a[rel^='linguagens']").click(function() {
var lang = $(this).attr('title'); //PEGA O ATRIBUTO TITLE COM A TAG DA LINGUAGEM ESCOLHIDA
if(lang != 'pt') { //IGNORA O PORTUGUES E CHAMA O SCRIPT CASO SEJA QUALQUER OUTRA LINGUA
$("#traduza").text(orig); //RETORNA O TEXTO ORIGINAL PARA EVITAR PROBLEMAS DE TRADU????O
$("#traduza").sundayMorning({ //TRADUZ O TEXTO PARA A LINGUAGEM ESCOLHIDA
source:'pt',
destination: lang
});
}
else { //CASO A LINGUAGEM SEJA PORTUGU??S RETORNAR O TEXTO ORIGINAL
$("#traduza").fadeOut("fast").text(orig).fadeIn('fast');
}
});
});
</script>
O que fiz neste script foi deixa-lo mais simples possivel e que ele funcionasse para qualquer linguagem que eu quisesse traduzir, a primeira coisa é guardar o texto original para o caso de ter que voltar com o texto original ou traduzir para outra lingua, neste segundo caso a tradução fica muito melhor se traduzida do texto original, por isto sempre voltamos com o texto original antes de traduzir.
Após o usuário clicar na bandeirinha da linguagem que deseja, o script pega a linguagem do titulo do link, verifica se não é o português, volta com o texto original e chama a tradução para a linguagem escolhida, caso seja português o script volta com o texto original.