Desarrollo front-end, estándares web, accesibilidad y más
Por kcmr, el 1 de septiembre de 2009 en Javascript
Cuando tenemos un sitio en varios idiomas en el que estamos añadiendo atributos como ALT o TITLE a imágenes o enlaces, lo ideal es proporcionar esos literales en todos los idiomas del sitio y usar los correspondientes al idioma según el valor del atributo xml:lang o lang de la etiqueta HTML.
Para estos casos es útil crear un objeto en el que almacenamos todos los literales según el código del idioma.
Mediante una función que devuelva el valor del atributo xml:lang o lang del tag HTML, estableceremos el idioma del sitio y los literales a usar.
Ejemplo completo usando Mootools:
var MiClase = new Class({
Implements: Options,
// literales a usar
options: {
literales: {
ES: {
titleMostrar: 'Mostrar álbum',
titleOcultar: 'Ocultar álbum'
},
EN: {
titleMostrar: 'Show album',
titleOcultar: 'Hide album'
}
}
},
initialize: function(element, options){
this.setOptions(options);
this.element = element;
...
// llamamos a la función encargada de obtener el valor del atributo lang del tag HTML
this.getDocumentLang();
// según el valor de this.lang (devuelto por la función anterior) asociamos los literales de uno u otro idioma a una propiedad "literales" de nuestra clase "MiClase"
this.lang == 'es' ? this.literales = this.options.literales.ES : this.literales = this.options.literales.EN;
},
getDocumentLang: function(){
// obtengo el valor de xml:lang o de lang si xml:lang no se ha usado en el HTML
this.lang = $$('html')[0].get('xml:lang') || $$('html')[0].get('lang');
if(!this.lang) this.lang = 'es'; // idioma por defecto si no se ha declarado el idioma principal del documento
return this.lang;
},
// uso de la propiedad literales en otras funciones
funcionEjemplo: function(){
var miElemento = ...;
miElemento.set('title', this.literales.titleMostrar);
}
});
En el caso de más de dos idiomas, en lugar del condicional usado dentro del método initialize en el ejemplo anterior, podríamos usar una estructura switch case.
Ejemplo:
initialize: function(element, options){
...
this.getDocumentLang();
switch(this.lang){
case 'es':
this.literales = this.options.literales.ES;
break;
case 'en':
this.literales = this.options.literales.EN;
break;
case 'fr':
this.literales = this.options.literales.FR;
break;
default:
this.literales = this.options.literales.ES;
}
}
Campos obligatorios marcados con asterisco *
Un comentario
Por shakaran, el 2 de septiembre de 2009
Muy útil para scripts que utilicen Mootools.
De una manera simple se puede hacer un buen uso también de la localización para todos los países.