i18n

A tiny i18n module for translating your Cordova app.

It will:

• detect the language
• load the resource file
• bind your HTML template

---

Live Example

---

Usage

This module is included in phonon-core.js.

RequireJS Compatible

require(['phonon-core'], function(phonon)) {
    phonon.i18n(...);
});

Create JSON Files for each Language to Support

directory/en.json
directory/en-US.json
directory/fr.json
directory/es.json
...

Binding Attributes

Use the text binding to set text content.

<h1 data-i18n="text: my_json_key"></h1>

Use the value binding to set input values.

<input type="text" data-i18n="value: my_json_key">

Use the placeholder biding to set input placeholders.

<input type="text" data-i18n="placeholder: my_json_key">

Use the html binding to set html content.

<h1 data-i18n="html: my_json_key"></h1>

App Setup

Navigation and i18n options are defined in the app options.

phonon.options({

    navigator: {
        defaultPage: 'home',
        animatePages: true,
        enableBrowserBackButton: true,
        templateRootDirectory: ''
    },

    i18n: { // i18n: null if you do not want to use internationalization
        directory: 'res/lang/',
        localeFallback: 'en',
        localePreferred: 'en-US'
    }
});

• directory is the directory where JSON files are stored.
• localeFallback is the default language that is loaded if the language of the operating system is not available.
• localePreferred is the preferred language. It is optional.

Bind the Document

Look into the DOM elements containing the attribute data-i18n and set the data of the language file that is used.

No callback.

phonon.i18n().bind();

With callback.

phonon.i18n().bind(function() {
    ...
});

Bind an Element Only

No callback.

phonon.i18n().bind(document.querySelector('.my-element'));

With callback.

phonon.i18n().bind(document.querySelector('.my-element'), function() {
    ...
});

Retrieve all the JSON file to work with

Returns the data of the language file that is used.

phonon.i18n().getAll(function(json) {
    ...
});

Retrieve one or several value(s)

Returns the key's value or the values of an array of keys

phonon.i18n().get('my_key', function(value) {
    ...
});

phonon.i18n().get(['my_key_1', 'my_key_two'], function(values) {
    ...
});

Update i18n attributes in HTML templates automatically

This function permits to update all your HTML templates when another language is choosen by the user.

phonon.updateLocale('new-language');

setPreference(String newLanguage)

Sets the preferred language.

getPreference()

Returns the current preferred language.

getLocale()

Returns the browser/operation system's language.

getCurrentLocale()

Returns the language used.