Langic

Langic is a website language manager using the AJAX principle

• Change the complete language of a page
• Change specific objects on the page

Changes (Version 1.2.0)

• Added langic.setFileExtension and langic.setFilePreExtension

Installation

Langic requires browsers with ES6 support to run.

Clone the repository from Github

Configure

1. Place the langic.js (under /lib, not under /src!) file into your scripts folder
2. Create a directory called "languages" in the same directory as your HTML files (You can change the path with langic.setPath([path]))
3. In the languages folder, place your [language].lang.json files

How to format your language

Langic files are based on JSON, and require a precise syntax. The entire file consists of Keys and Values, as formatted below:

{
    "[KEY]": "[VALUE]",
    "[KEY]": "[VALUE]"
}

The key needs to conform to the ID of an HTML element. For example, say we have the <span id="title"></span> element. Now we want to add language support to that span. To achieve this is quite simple, just add the key "title" with the value of the text in the element (beware that Langic will remove all text currently inside set element, so use spans and divs to avoid problems). The result is:

{
    "title": "Welcome to our website!"
}

When you change the language of the page to this language, the span with id="title" will have "Welcome to our website" as its content.

Save language files as [language_name].lang.json in the languages folder (see Installation)

How to use langic.js (Documentation)

All langic functionality is stored in the langic object.

Change the language of an entire page

To change the language of an entire page, use the langic.setLanguage([language]) method, where the language parameter is the language, according to the name of the [language].lang.json file. In this example the file you are requesting is called english.lang.json and is stored in the languages folder.

    langic.setLanguage('english');

Change the language for a specific element (where the ID conforms to the key)

To change the language of a specific element, use the langic.setKey([key], [language]), where the [key] parameter is the id of an HTML element AND the key to a language string (they need to be the same), and the language parameter is the language, according to the name of the [language].lang.json file.

If the language is not yet loaded using langic.load(), then this method will load a new version.

Example:

langic.setKey('title', 'english');

Change the language directory path

To change the path of the languages directory, use langic.setPath([path]).enable(), where [path] is the path of the directory For example, say we have a website where the languages are stored in the http://www.example.com/files/languages folder:

langic.setPath('/files/languages/');

Change the extension

Maybe you want to change the extension of your files from .json to something else. If this is the case, use langic.setFileExtension([extension]), where [extension] if the file extension (Including the dot, so: 'json' is wrong and '.json' is correct).

langic.setFileExtension('.json');

Change the pre-extension

If you want to change to .lang to something else, use _langic.setFilePreExtension([pre-extension]), where [pre-extension] is the pre extension (Including the dot, so: 'lang' is wrong and '.lang' is correct))

langic.setFilePreExtension('.iclang');

Todos

• Add a ES5 version using XMLHTTP

License

Apache 2.0