naddiaz / intX

intX Library

Internationalization library for JavaScript

This library allows to manage the internationalization of text into HTML with JavaScript. It only require the js library and it not require any another dependency.

Librería para la internacionlización para JavaScript

Esta librería permite gestionar la _internacionalización de textos en un HTML con Javascript. No requiere ninguna dependencia, solamente es necesario añadir la propia librería.

How does it work?

Firstly, you need to add the js or minify version file into your html code. Also, it is needed to add the international text file just previous than this library, as it follows:

<script src="js/internationalText.js"></script>
<script src="js/intX.js"></script>

Secondly, you need to make the international text file with the structure that it is shown, for example:

var internationalText = {
  _def: "en",
  es: {
    title: 'Título de la página',
    page: {
      title: "Título del H1"
    },
    ...
  },
  en: {
    title: 'Web title',
    page: {
      title: "H1 title"
    },
    ...
  },
  ...
}

You can add all hierarchy levels as you want. It's totally need add the _parameter def, because if the navigator's language not match with any language defined, the library takes this parameter like default language.

The keys of the language are appertaining with the ISO 639-1 Language Codes. You can check this codes in W3Schools references

Thirdly, you can use this library like html tag into your html file, as it follows:

<h1 intx="page.title"></h1>

Finally, you only ought to execute the constructor function when the document is ready, as it's shown in the following:

new intX();

Note

If you add dynamic content and it uses the intX library, you should relaunch anew the contructor function. This action is necessary because this library works in execution time.

Extension of library

You can use the intx html tag with attribute label if you need add international and static text in the same tag. It's shown in the following example:

<h1><intx label="page.welcome"></intx> naddiaz</h1>

¿Cómo funciona?

En primer lugar, es necesario añadir el fichero de la librería ya sea en su versión comprimida o en la versión normal. Previamente a este fichero es necesario incluir el fichero de textos internacionalizados, tal y como se muestra acontinuación:

<script src="js/internationalText.js"></script>
<script src="js/intX.js"></script>

Luego, necesita crear el fichero de internacionalización con una estructura como se indica en el siguiente ejemplo:

var internationalText = {
  _def: "en",
  es: {
    title: 'Título de la página',
    page: {
      title: "Título del H1"
    },
    ...
  },
  en: {
    title: 'Web title',
    page: {
      title: "H1 title"
    },
    ...
  },
  ...
}

Puede añadir tantos niveles de jerarquía como desee. Además es totalmente necesario definir el _parámetro def, ya que cuando el idioma del navegador no corresponda con ninguno de los idiomas definidos, la librería tomará el idioma definido en esta variable como idioma por defecto.

Las claves de los idiomas definidos corresponden con los ISO 639-1 Language Codes. Puede comprobar los códigos en W3Schools references

A continuación, ya puede utilizar la librería como un atributo de la etiqueta html, tal y como se puede observar en este ejemplo:

<h1 intx="page.title"></h1>

Por último, para que se añadan los textos a las etiquetas, debe ejecutar una vez cargado el html, el contructor de la clase:

new intX();

Nota

Si añade contenido dinámico y éste hace uso de la librería intX es necesario que ejecute nuevamente el contructor para reconstruir los textos que se han añadido.

Ampliación de la librería

Puede utilizar la etiqueta intx con el atributo label cuando necesite añadir contenido estático e internacionalizado en la misma etiqueta html. Tal y como se muestra en el siguiente ejemplo:

<h1><intx label="page.welcome"></intx> naddiaz</h1>