A reliable way to get the browser's language on the front-end. It uses a service at http://ajaxhttpheaders.appspot.com. That service returns the headers which contains the browser's preferred language in the "Accept-Language" header.

README.md

Multilingual

A reliable way to get the browser's language on the front-end. It uses a back-end service at http://ajaxhttpheaders.appspot.com. That service returns the headers which contains the browser's preferred language in the "Accept-Language" header.

Usage

The ML object gets added to the browser's window object as the alias "multilingual". When the page loads you can simply call multilingual.init();. This will initate an ajax call to the service and set the multilingual.language property to whatever is returned in the "Accept-Language" header. This value is whichever language is set as the browser's top preference.

multilingual.init() makes a call to multilingual.getLanguage() with the multilingual.setLanguage() method as the callback. If you want to supply your own call back you can call multilingual.getLanguage() manually and supply your own callback. Your callback will need to accept the language string as the first parameter.

You can also force a language by calling multilingual.setLanguage() and passing the language string you want to set.

If the back-end service is unreachable after 10 seconds, an error is thrown and the multilanguage.language property is set to false.

Dependencies

jQuery is required because it's $.ajax method is used to query the back-end service.

language.js

(/** @lends window.multilingual */function ($) {
	/**
	 *
	 *  A reliable way to get the browser's language on the front-end. It uses a service at http://ajaxhttpheaders.appspot.com. 
	 *  That service returns the headers which contains the browser's preferred language in the "Accept-Language" header.
	 *  @name ML
	 *  @namespace
	 *  @type {Object}
	 */
	var ML = {};

	/**
	 *  Make an ajax call to http://ajaxhttpheaders.appspot.com to get the browser headers
	 *  @param   {setLanguage} callback Function to call on success or error of the ajax call
	 *  @memberOf ML
	 */
	ML.getLanguage = function (callback) {
		var that = this;
		$.ajax({
			url: "http://ajaxhttpheaders.appspot.com",
			dataType: 'jsonp',
			timeout: 10000,
			success: function(headers) {
				language = headers['Accept-Language'].split(',')[0];
				callback.call(that, language);
			},
			error: function () {
				console.error('There was an error getting the headers from http://ajaxhttpheaders.appspot.com');
				callback.call(that, false);
			}
		});
	};

	/**
	 *  Set the language either from the ajax call in getLanguage() or manually
	 *  @param   {string} language A string representation of the browser's preferred language, "en-us", "es", "fr"
	 *                             If an error occurred trying to get the language from ajax call, language is set to false.
	 *  @memberOf ML
	 */
	ML.setLanguage = function (language) {
		this.language = language;
	};

	/**
	 *  Calls getLanguage() and sends setLanguage() as the callback
	 *  @memberOf ML
	 */
	ML.init = function () {
		this.getLanguage(this.setLanguage);
	};

	/**
	 *  Callback used by getLanguage()
	 *  @callback ML~setLanguage
	 *  @param {string} language A string representation of the browser's preferred language, "en-us", "es", "fr".
	 */

	/**
	 *  Assign the ML object to the window object as window.multilingual
	 *  @var {ML} window.multilingual
	 *  @global
	 */
	window.multilingual = ML;
})(jQuery);