themelock.com - Limitless - Responsive Web Application Kit by Eugene Kopyov

Direct switching

This example demonstrates direct language switching on button or link click. Every time the link is clicked, i18next loads json file with selected language and initialize translation again, so new language appears without page reload. By default, i18next automatically detects user navigator language and sets it on init, but if this language is missed in locales, user will see the language specified in <html lang="..."> or specified as a fallback language. Since i18next uses cookies by default, after page reload you'll see the language that you've selected before reload.

Change language directly:

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',
	debug: true,
	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.