lepet.js

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.

5 comentarios en “lepet.js

  1. ealbinu

    Creo que te lo robaré para una web =D andaba buscando una alternativa… igual pensé en hacer uno de cero… peeeeero, si ya está el tuyo…………..

  2. eamexicano

    Hola Albin. Desde mi punto de vista el uso de los atributos data dentro del HTML puede terminar como el uso de las etiquetas style para modificar el estilo. No está mal pero la función primordial del HTML es definir la estructura del documento. Si se abusa del uso de los atributos (style / data) puede resultar más difícil darle mantenimiento. Mucho depende del contexto en el que utilices los atributos data. Hay ocasiones en que prefiero utilizar objetos – JavaScript – para tener los datos «más cercanos» a la lógica del programa que tenerlos más cercanos a la estructura del documento.

    Hice un gist – demasiado simple – para comparar el uso de los atributos data vs objetos.

    https://gist.github.com/eamexicano/129331093270c9486d0a

  3. Pingback: lepet - eamexicano

Deja un comentario

Tu dirección de correo electrónico no será publicada.