I plugin jQuery si prestano molto bene all'internazionalizzazione e alla localizzazione in lingue diverse. Fornendo i nostri plugin in più lingue permettiamo non solo a molti più utenti di utilizzare il nostro plugin, ma anche di ampliare la diffusione del nostro lavoro verso un pubblico più ampio di quello della tradizionale comunità di lingua inglese o italiana. Ecco alcuni consigli su come creare plugin jQuery multilingua.
Davanti a noi si presentano due opzioni: creare dei file JavaScript ausiliari o includere la(e) traduzione(i) direttamente all'interno del file principale del plugin. In ogni caso dobbiamo sempre fornire una lingua predefinita qualora l'utente non ne abbia specificata una.
Possiamo gestire i termini da tradurre usando degli oggetti letterali:
var messagesLang = {
it: {
msg: 'Benvenuto'
},
de: {
msg: 'Willkommen'
},
es: {
msg: 'Bienvenido'
}
};
Ovviamente i nomi delle proprietà all'interno di ciascun oggetto lingua dovranno essere gli stessi per semplificarne l'accesso e l'uso da parte del plugin. Si tratta per lo più di tradurre l'output generato dal plugin sulla pagina, per esempio durante una routine di validazione.
Il nostro plugin avrà comunque bisogno di avere una lingua predefinita, che nella maggioranza dei casi è l'inglese:
(function($) {
$.fn.plugin = function(options) {
var that = this;
var defaultMessages = {
msg: 'Welcome'
};
};
})(jQuery);
Quindi dobbiamo prevedere un'opzione per la lingua:
var settings = {
lang: 'en'
};
options = $.extend(settings, options);
A questo punto possiamo creare un oggetto vuoto che assumerà i suoi valori in base alla scelta della lingua:
var messages = {};
switch(options.lang) {
case 'en':
messages = $.extend(defaultMessages, messages);
break;
case 'it':
messages = $.extend(messagesLang.it, messages);
break;
case 'de':
messages = $.extend(messagesLang.de, messages);
break;
case 'es':
messages = $.extend(messagesLang.es, messages);
break;
default:
throw new Error('Language not supported');
break;
}
Quindi possiamo usare semplicemente l'oggetto messages per visualizzare il nostro output:
return that.each(function() {
that.click(function(event) {
console.log(messages.msg);
if(that.is('a')) {
event.preventDefault();
}
});
});
Esempio d'uso:
$(function() {
$('#test').plugin({lang: 'it'}); // 'Benvenuto'
});