ZPT-JS reference - Configuration - i18n

Syntax

i18n        ::= a javascript object containing urlPrefix and files
urlPrefix   ::= a string
files       ::= an javascript object using files_key and files_value as key and value
files_key   ::= a string
files_value ::= an array of JSON file names
                

Description

The i18n makes it easy the preloading of I18n resources. It is a javascript object containing:

• urlPrefix. A string ZPT-JS will use as a prefix for the URLs of the files to download.
• files. A javascript object formed with the language id as key and an array of JSON file names as value.

Take a look at this example:

i18n: {
    urlPrefix: './i18n/',
    files: {
        'es': [ 'es1.json', 'es2.json' ],
        'en': [ 'en1.json', 'en2.json' ]
    }
}
                

Then ZPT will preload some files using the next URLs:

• ./i18n/es1.json as the first file of es language.
• ./i18n/es2.json as the second file of es language.
• ./i18n/en1.json as the first file of en language.
• ./i18n/en2.json as the second file of en language.

After preloading i18n files ZPT-JS defines some variables in the dictionary:

• i18n(fileWithoutExtension.toUpperCase), for example i18nES1. An instance of I18n class per file.
• i18n(lang.toUpperCase)Array, for example i18nESArray. An array of instances of I18n class.
• i18nArray. An array of instances of I18n class but only if there is 1 declared language.

Examples

An example preloading only one language:

import { zpt } from './zpt-esm.js';

var dictionary = {
    ...
};

zpt.run({
    command: 'preload',
    root: document.body,
    dictionary: dictionary,
    i18n: {
        urlPrefix: './i18n/',
        files: {
            'es': [ 'es1.json', 'es2.json' ]
        }
    },
    callback: function(){
        zpt.run();
    }
});
                

And in the template:

<div data-domain="i18nESArray">
    ...
</div>
                

As the i18n domain forces to use spanish there is no ned to use a data-language attribute to set the language.

If we configure only 1 language we also can use:

<div data-domain="i18nArray">
    ...
</div>
                

An example using preloading 2 languages (and using I18nBundle to group i18n resources):

import { zpt } from './zpt-esm.js';

var dictionary = {
    ...
};

zpt.run({
    command: 'preload',
    root: document.body,
    dictionary: dictionary,
    i18n: {
        urlPrefix: './i18n/',
        files: {
            'es': [ 'es1.json', 'es2.json' ],
            'en': [ 'en1.json', 'en2.json' ]
        }
    },
    callback: function(){

        // Add I18nBundle instances to dictionary
        dictionary.i18nBundle1 = new I18nBundle( dictionary.i18nES1, dictionary.i18nEN1 );
        dictionary.i18nBundle2 = new I18nBundle( dictionary.i18nES2, dictionary.i18nEN2 );

        // Run ZPT
        zpt.run();
    }
});
                

And in the template:

<div data-language="'es'" data-domain="i18nBundle">
    ...
</div>
                

Don't forget to declare the language if you use an i18nBundle instance! ZPT-JS needs a data-language attribute to choose the right i18n resources.