lepet.js es una librería que desarrollé porque quería tener el contenido de mi sitio www.eamexicano.com en distintos idiomas (sin hacer un documento HTML por idioma).
El propósito de la traducción es mostrar la visualización de diferentes caracteres en el mismo documento (lo utilizo para dar clase).
Antes de desarrollar la librería busqué opciones en jsdb.io y github.com pero no me convencieron. Algunas ocupaban jQuery – en este caso iba a ocupar más espacio que el documento y las traducciones – otras estaban diseñadas con el planteamiento de una aplicación – mucho más funcionalidad de la que quería -. Tampoco revisé todas las librerías existentes.
Lo que quería era:
- Independencia del documento HTML – Tener el contenido del idioma principal en el documento. De esta manera se puede quitar la librería y el documento
- No depender de librerías externas. De esta manera no hay conflicto con el uso de lepet.js en caso de que se quieran utilizar.
- Evitar el uso de los atributos data.
Uso
Descargar (abajo viene vínculo del repositorio) e incluir antes de cerrar la etiqueta body. </body>
Las traducciones se guardan en objetos dentro de un arreglo.
La única propiedad requerida es el código del idioma. Elegí el ISO 639-1.
var content = [
{
locale: 'es',
title: "<span class='title'>Título</span>"
},
{
locale: 'ru',
title: "<span class='title'>Название</span>"
}
];En la parte superior del script hay que seleccionar los nodos del documento HTML cuyo contenido se vaya a sustituir y almacenarlos en una variable.
Dentro de la función update_content actualizar los nodos con el contenido almacenado en las propiedades de los objetos.
var title = document.getElementById('title');
var main = document.getElementById('main');
var secondary = document.getElementById('secondary');
// Traducciones
function update_content(href) {
var current_translation = find_locale(href);
/*
Asignar a los nodos para traducir el contenido de la traducción.
{nodo}.innerHTML = current_translation.{propiedad};
*/
header_title.innerText = original_title + " (" + href + ")";
title.innerHTML = current_translation.title;
main.innerHTML = current_translation.main;
secondary.innerHTML = current_translation.secondary;
}
/*En las traducciones es posible etiquetas HTML. Decidí sustituir el contenido con innerHTML, de esta manera es posible tener contenido marcado específicamente para una traducción.
Finalmente hay que incluir en el documento HTML los vínculos que van a actualizar el contenido con las traducciones. Estos vínculos utilizan la clase locale y en el atributo href utilizan un hashtag – # – seguido del código iso que representa el idioma.
<a href='#es' class='locale'>es</a>
<a href='#ru' class='locale'>ru</a>El vínculo al repositorio de lepet.js en github.