#### Translation - Set On Init

Statistics Invoices Schedule

##### Language on init

In this example English language is set `on init`. If language is set on init, resources will be resolved in this order: first - languageCode plus countryCode, eg. `'en-US'`; second - alternative look it up in languageCode only, eg. `'en'`; third - finally look it up in definded fallback language, default: `'dev'`. Basically, `lng` option sets a specified language that is loaded on every initialization. With basic settings all options will be reset on a new init.

Set language on init:

Example markup:

    <!-- Basic markup -->
    <ul class="dropdown-menu">
    	<li>
    		<a class="english">
    			<img src="assets/images/flags/gb.png" alt=""> English
    		</a>
    	</li>
    	<li>
    		<a class="ukrainian">
    			<img src="assets/images/flags/ua.png" alt=""> Ukrainian
    		</a>
    	</li>
    </ul>

JS code example:

    /* Set init options */
    i18n.init({
    	resGetPath: 'assets/locales/__lng__.json',
    	load: 'unspecific',
    	lng: 'en', // set language on init
    	useCookie: true,
    	fallbackLng: false
    }, function () {

    	// Run translation
    	$('body').i18n();

    });

##### i18next library

###### Overview

`Internationalization` and `localization` are means of adapting web applications to different languages, regional differences and technical requirements of a target market. `Internationalization` is the process of designing an application so that it can potentially be adapted to various languages and regions. `Localization` is the process of adapting internationalized application for a specific region or language by adding locale-specific components and translating text. Framework template uses `i18next` library for internationalization and localization.

Main i18next benefits:

- Support of variables
- Support of nesting
- Support of context
- Support of multiple plural forms

- Gettext support
- Sprintf support
- Detect language
- Graceful translation lookup

- Custom post processing
- Post missing resources to server
- Resource caching in browser
- Fetch resources from server

###### Basic usage

i18next is a full-featured i18n javascript library for translating your web application. By default, Framework template supports language switching in 2 different ways, language detection according to the user navigator language and fallback languages. All plugin settings also support and use cookies by default. For demonstration purposes, main structure of this page was translated to russian, ukrainian and default english languages. You can change current language by choosing it in the dropdown menu located in top navbar.

Page markup:

    <!DOCTYPE html>
    <html>
    	<head>
    		<script type="text/javascript" src="[PATH]/jquery.js" /> // optional
    		<script type="text/javascript" src="[PATH]/i18next.min.js" />
    	</head>
    	<body>
    		<ul class="navigation">
    			<li><a href="#" data-i18n="nav.dash.main"></a></li>
    			<li><a href="#" data-i18n="nav.email.main"></a></li>
    			<li><a href="#" data-i18n="nav.snippets.main"></a></li>
    		</ul>
    	</body>
    </html>

Loaded resource file (assets/locales/*.json):

    {
    	"app": {
    		"name": "Framework template"
    	},
    	"nav": {
    	    "dash": {
    	        "main": "Dashboards"
    	    },
    	    "email": {
    	        "main": "Email templates"
    	    },
    	    "snippets": {
    	        "main": "Snippets"
    	    }
    	}
    }

Javascript code:

    // Initialize i18next
    $.i18n.init({
    	resGetPath: 'assets/js/locales/__lng__.json',
    	debug: true,
    	load: 'unspecific',
    	fallbackLng: false
    }, function (t) {
    	$('body').i18n(); // translate nav
    });

    // Change language on button click
    $('.russian').on('click', function () {
    	i18n.setLng('ru', function() {
    	    $('body').i18n();
    	});
    })

###### Set language on init and after init

The plugin allows you to set specified language `on init` and `after init`. If language is set on init, resources will be resolved in this order: 1) try languageCode plus countryCode, eg. `'en-US'`; 2) alternative look it up in languageCode only, eg. `'en'`; 3) finally look it up in definded fallback language, default: `'dev'`.
If language is not set explicitly, i18next tries to detect the user language by: 1) querystring parameter `?setLng=en-US`; 2) cookie; 3) language set in navigator.

On init example:

    i18n.init({ lng: 'en-US' }, function(t) {
    	$('body').i18n();
    });

After init example:

    i18n.setLng('en-US', function(t) {
    	$('body').i18n();
    });

##### Library options

Querystring param:

    i18n.init({
    	detectLngQS: 'lang'
    });

The current locale to set will be looked up in the new parameter: `?lang=en-US`. Default is `?setLng=en-US`.
Cookie name:

    i18n.init({
    	cookieName: 'lang' // default 'i18next'
    });

The current locale to set and looked up in the given cookie parameter.
Cookie domain:

    i18n.init({
    	cookieDomain: '*.mydomain.com'
    });

Sets the cookie domain to given value.
Cookie usage:

    i18n.init({
    	useCookie: false
    });

Use this only if your sure that language will be provided by the other lookup options or set programatically.
Preload additional languages on init:

    i18n.init({
    	preload: ['de-DE', 'fr']
    });

The additional languages will be preloaded `on init`.
Preload additional languages after init:

    i18n.preload([lngs], callback)

The additional languages will be preloaded `after init` by calling this function.
Languages whitelist:

    i18n.init({
    	lngWhitelist: ['de-DE', 'de', 'fr']
    });

Only specified languages will be allowed to load.
Additional namespaces:

    // Single
    i18n.loadNamespace('myNamespace', function() {
    	// loaded
    });

    // or multiple
    i18n.loadNamespaces([
    	'myNamespace1',
    	'myNamespace2'
    ], function() {
    	// loaded
    });

The additional namespaces will be loaded.
Unset/Set fallback language:

    // Single
    i18n.init({
    	fallbackLng: 'en'
    });

    // or multiple
    i18n.init({
    	fallbackLng: ['fr', 'en']
    });

If not set it will default to `'dev'`. If turned on, all missing key/values will be sent to this language.
Turn off fallback:

    i18n.init({
    	fallbackLng: false
    });

As the fallbackLng will default to `'dev'` you can turn it off by setting the option value to `false`. This will prevent loading the fallbacks resource file and any futher look up of missing value inside a fallback file.
Load locales:

    i18n.init({
    	load: 'current'
    });

If load option is set to `current` i18next will load the current set language (this could be a specific (en-US) or unspecific (en) resource file).

    i18n.init({
    	load: 'unspecific'
    });

If set to unspecific i18next will always load the unspecific resource file (eg. en instead of en-US).
Caching with localStorage:

    i18n.init({
    	useLocalStorage: true | false,
    	localStorageExpirationTime: 86400000 // in ms, default 1 week
    });

Caching is turned off by default. If the resouces in a given language had been stored to `localStorage` they won't be fetched / reloaded from online until set `localStorageExpirationTime` expired. So if they had been cached once and you add new resources, they won't be reloaded until expired. But you can easily remove the values from localstorage by calling, eg.: `localStorage.removeItem("res_en" )`.
Null values:

    i18n.init({
    	fallbackOnNull: true | false
    });

Default is `true`.
Empty string values:

    i18n.init({
    	fallbackOnEmpty: true | false
    });

Default is `false`.
Debug output:

    i18n.init({
    	debug: true
    });

If something went wrong you might find some helpful information on console log.