Installation

To install the LPF you only need to include the lan-parser-1.0.js into your scripts list:

<script src='js/lang-parser-0.1.js' charset='utf-8' type='text/javascript'></script>

Now, when document is ready, start the LPF as follow:

window.onload = function () {
var samples = {'EN': en_sample, 'ES': es_sample};
LangParser.setDefaultLanguage('EN');
//LangParser.setDefaultCurrentContainersLang();
 LangParser.translateContent(translations);
};

The first line defines translation variables into an object depending on its language. Otherwise, the second line sets the default language, while the third one translates the page whole content.

Note: the commented line is optional, and it will be explained in the container attribute section of this page.

Be aware that the translations variable has the strings of the specified language (see js/tranlations.js).

Passing the translations to LPF

The translations could be passed as the previous example or obtained throught a request (locally or from the server).

var translations = loadDynamicContent('js/en_sample.json');
function loadDynamicContent(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
return JSON.parse(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

}
...TODO
  1. put the samples var inside LPF
  2. put the function loadDynamicContent inside LPF
  3. control request errors

var attribute

LPF starts on including attributes in the elements that you want to translate. It's done by using the dataset property of HMTL5. The elements that will be translated must have the attribute data-lpf-var. The value of this attribute is the same of the key in the translations json file.

This JSON translations example has the key username-input with a value Put here the username:

{ username-input: 'Put here the username' }

So, the input to translate will have the attribute:

 <input data-lpf-var='username-input'/>

format attribute

This is an optional attribute that allows you to choose an especific output format for the string translated. The attribute is data-lpf-format.The default values are:

data-lpf-format='normal' (or empty)

Keeps the original format of the string.

Original:

Formatted:

data-lpf-format='upper'

Converts the string to uppercase letters.

Original:

Formatted:

data-lpf-format='lower'

Converts the string to lowercase letters.

Original:

Formatted:

data-lpf-format='cap'

Converts the string to a capitalized string.

Original:

Formatted:

Note: By default, the option set is normal.

Otherwise, you can customize you'r own behaviour passing a function in the installation.

...TODO
  1. user custom regex

translate attribute

This attribute allows you to choose if an element must be translated once or every time you change the page language. If you choose once, LPF only translates the first time, on page loaded. The attribute is called data-lpf-translate. The cases are:

This example shows the one time translation using the initial value:

 <input data-lpf-var='username-input' data-lpf-translate='initital'/>

Otherwise, the always value translates every time:

 <input data-lpf-var='username-input' data-lpf-translate='always'/>

Note: By default, the option set is always.

container attribute

...TODO
  1. Explain container attribute
  2. Examples...

attrs attribute

Another optional feature is the possibility of setting custom attributes to translate. To make translations in the attributes desired, you can modify the attribute data-lpf-attrs.

And the availables attributes looks like this:

  • Title as t.

  • Alt as a.

  • Text Content as tv.

  • Value as v.

  • Name as n.

  • Placeholder as p.

The default attributes by tag are:

  • INPUT: t p n v.

  • A: t tc.

  • BUTTON: t tc.

  • LABEL: t tc.

  • SPAN: t tc.

  • LI: t tc.

  • P: tc.

  • IMG: a.

The attribute options:

data-lpf-attrs='-'

Removes all the default values.

Original:

Translated:

Note: The translated string is empty because all the default attributes has been removed.

data-lpf-attrs='tc'

Removes all the default values and set the textContent attibute.

Original:

Translated:

data-lpf-attrs='t v'

Removes all the default values and set the title and value attibute.

Original:

Translated: