Traduzione post Blogger, codice JavaScript migliorato

Ho deciso di fare dei cambiamenti al codice per la traduzione dei post in Blogger di cui parlavo nell’articolo: Post multilingua in Blogger. Sebbene a mio parere questo sia un miglioramento, dal punto di vista logico più che a livello di funzionalità, ciò non toglie che il vecchio codice continui ad essere valido.

Il div principale ora ha classe “default”

Il perché chiamo questo cambiamento “logico” è che in teoria posso scrivere un articolo anche in altre lingue diverse dall’italiano e quindi sarebbe scorretto scrivere, ad esempio, un post in inglese nel div con classe “lang:italian” (il div con classe lang:italian viene utilizzato nell’altro codice come div principale). Quindi, piuttosto che come div primario avere un <div class="lang:italian">, ho preferito avere un <div class="default">, ad indicare cioè la lingua (qualsiasi essa sia) di default dell’articolo. Poi, se presenti, gli altri div con classi english, italiano, français stanno ad indicare rispettivamente i contenuti tradotti dal div di default in inglese, italiano e francese.Per correttezza lascio nei vari div l’attributo “lang="..." ” ad indicare comunque la lingua utilizzata all’interno (es. <div class="default" lang="it">).

<script type="text/javascript">

var def = document.getElementsByClassName('default');
var en = document.getElementsByClassName('english');
var it = document.getElementsByClassName('italiano');
var fr = document.getElementsByClassName('français');


var languages = [def, en, it, fr];  
var langus = {default: "--", english: "English", français: "Français", italiano: "Italiano"}

for (var lan in languages) {
 if (languages[lan] !== null) {
     var sel = document.getElementById('translateSelect');
  var fragment = document.createDocumentFragment();
     var opt = document.createElement('option');
        
     opt.innerHTML = langus[languages[lan][0].className];
        opt.value = languages[lan][0].className;
        
     fragment.appendChild(opt);
        sel.appendChild(fragment);
 } 
    
}



function translateIn() {
 var language = document.getElementById('translateSelect').value;
 var x = document.getElementsByClassName(language);
    
  languages.forEach(function(entry) {
    for(i = 0; i < entry.length; i++) {
      entry[i].style.display = 'none';
    }
  });
    
  for(i = 0; i < x.length; i++) {
    x[i].style.display = 'block';
  }
    
}

</script>

Lo script sopra è da inserire prima del tag di chiusura del body mentre il codice sotto, ossia il select, potete inserirlo dove volete.

<select id='translateSelect' onChange='translateIn()'/>

Lo script in breve

Nella prima parte abbiamo le variabili def, en, it, fr che rappresentano, se presenti, i div con le classi 'default', 'english' e così via. var languages è un Array i quali elementi sono le variabili prima descritte. var langus è invece un dizionario; la particolarità di quest’ultimo è che le key corrispondono esattamente, a livello di nomi, alle classi dei div.Nella seconda parte invece abbiamo due funzioni. → La prima è addetta a popolare il nostro select che come avrete notato è vuoto. Quindi controlla se esistono i div dei contenuti (le varie variabili) e, se sono presenti, aggiunge le option al select con dentro i valori del dizionario (cioè le lingue “scritte per bene” es. English, Français... )
→ La seconda funzione legge il valore selezionato nel select grazie al quale ricava il div con quella classe (lingua). A questo punto nasconde il testo dell’intero articolo (quindi tutti i div ecc.) e mostra solo il div scelto.

Dai uno sguardo a questo script che ho creato per scaricare automaticamente il pezzo di contenuto. In questo modo puoi caricarlo online in Google Translator Toolkit e tradurlo, senza fare copia-incolla.