multilingual - GeoSmartCity-CIP/gsc-client GitHub Wiki
Multilinguality is not a ‘module’ in the gsc.js library per-se, instead it is a recommendation on how multilinguality is to be implemented for applications that require this feature. It is important to note that a great number of applications in the professional and public sector domains do not require more than one language and this section is to be considered as a recommendation and not a regulation.
It is recommended to use the well-proven concepts of i18n language support also in JavaScript applications. For this purpose, there are a wide array of options available to developers that may suit different tastes.
The basic principle is to load a global dictionary that is language specific and that defines a key for each string label to be used throughout the application. An accessor function that returns the corresponding value for a given key is then used wherever strings are coded into the library.
A good infrastructure library that provide the necessary classes and methods to implement i18n in your applications is the ‘i18next’ library.
The API of i18next is provided at the following address: http://i18next.com/docs/api/, the source code and references to CDNs from which the library may be loaded can be found at GitHub: https://github.com/i18next/i18next.
The recommended implementation steps may depend on i18next or a simplified local implementation may be used.
First it is necessary to reference the i18next library from the application, this can be achieved by loading it as a commonjs or requirejs modile – or simply by including a reference to the script in the HEAD section of your HTML mark-up.
...
<head>
<script src=https://github.com/i18next/i18next/blob/master/i18next.min.js/>
</head>
...
Having done that, using the library is as easy as this. First, initialize the i18next object with a resource definition. This takes the form of a language abbreviation: lng: ‘en’. The
// First initialize the i18next object with language resource JSON
i18next.init({
lng: 'no', // Abbreviation of language
resources: {
no: {
translation: {
"Hello": "Hallo", //keys in source and target languages
“World”: “Verden”
}
}
}
}, function(err, t) {
// Once this callback is reached, the language is initialized and may be used!
// Test the library using a console.log
Console.log(i18next.t(‘Hello')); // This yields ‘Hallo’
});
I18next might not be to everyone’s taste and it may be too complex for simple use cases such as translation of a few labels in an application. Therefore, we also include an example of a compatible approach using only locally declared methods, thus removing external dependencies.
// Define a dictionary
var dictionaryNoNb = {
'Hello': 'Hallo',
'World': 'Verden'
// infinite number of additional entries
};
// Define a local i18n object
var i18n = (function() {
// Load the default dicitonary
Var dict = window[‘dictionaryEn’];
this.t = function(key) {
return dict[key];
}
....this.loadLang = function(lang) {
dict = window[‘dictionary’+lang];
}
return this;
}());
// first, initialize i18n and load the dictionary fo choice
i18n.loadLang(no-nb);
// Test the method
console.log(i18n.t(‘Hello’)); // This will yield ‘Hallo’;