MediaWiki:LanguageSelection.js

/**
 *
 * Implements language selection for multilingual elements
 *
 * In certain environments, it's not feasible to neatly box away each
 * different language into its own section of the site. By marking elements
 * multilingual, you can emulate this behavior by only displaying the
 * message in the user's language. This reduces the "Tower of Babel" effect.
 *
 * @author Edward Z. Yang (Ambush Commander), Rewritten by DieBuche
 */
 
/*global mediaWiki:false, jQuery:false, wpAvailableLanguages:false*/
/*jshint curly:false*/
 
(function($, mw) {
	'use strict';

	var wgUserLanguage = mw.config.get('wgUserLanguage'), multilingual = {

	/* Configuration: */

	// the cookie name we use to stash the info.
	cookie: 'beta_language_js',

	// link to the language select page
	helpUrl: '//beta.wikiversity.org/wiki/Wikiversity:Language_select', 

	// Image and strings that are part of the widgets
	helpImage: '//upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Erioll_world.svg/25px-Erioll_world.svg.png',
	stringSelect: '?',
	stringShowAll: '⋙',

	/* Code: */

	// autodetects language to use
	getLanguage: function() {
		return mw.cookie.get( this.cookie )
		|| ( !mw.user.isAnon() && wgUserLanguage )
		|| navigator.userLanguage
		|| navigator.language
		|| navigator.browserLanguage
		|| 'mul'
	},

	// build widget for changing the language cookie
	buildWidget: function (language) {
		// set up the floating form
		var $widget = $('<div id="languages_selector" />');

		// link to language select description page
		$widget.append( '<a href="' + this.helpUrl + '"><img src="' + this.helpImage + '" alt="?" /></a>' );

		// input box for the language
		$widget.append(' ', $('<input type="text" size="3", maxlength="3" value="' + this.getLanguage() + '" />' )
			.click( function() { this.select(); } )
		);

		// save button
		$widget.append(' ', $( '<input type="submit" value="' + this.stringSelect + '" />' )
			.click( function() {
				multilingual.toggle( $(this).siblings('input[type="text"]').val() );
			})
		);

		// show all button, equivalent to setting input box to "mul" and pressing save
		$widget.append(' ', $( '<input type="submit" value="' + this.stringShowAll + '" />' )
			.click( function() {
				$(this).siblings('input[type="text"]').val( 'mul' );
				multilingual.toggle( 'mul' );
			})
		);

		mw.util.$content.children('h1').eq(0).after( $widget );
	},

	// main body of the function
	init: function () {
		if (-1 !== $.inArray(window.ls_enable, ['no', 'false', false, 0])) return;

		// only activated in view , purge, historysubmit or submit mode
		if (-1 === $.inArray(mw.config.get('wgAction'), ['view', 'purge', 'edit', 'historysubmit', 'submit'])) return;

		// grab an array of multilingual elements
		this.mls = mw.util.$content.find('.multilingual');

		// Only build form if there are MLs on page.
		if (!this.mls.length) return;

		this.buildWidget();
		this.toggle(this.getLanguage());
	},

	toggle: function (language) {
		// recalculate if language is blank
		if (!language) {
			language = this.getLanguage();
		}

		mw.cookie.set(this.cookie, language, { expires: 180, path: '/' });
 
		this.mls.each(function () {
			var $languages = $(this).children('[lang]'), $req;
 
			if ( language === 'mul' ) {
				$languages.show();
				return
			}

			$req = $languages.filter('[lang="' + language + '"]')

			if ( $req.length ) {
				$languages.not( $req ).hide();
				$req.show();
			} else {
				$languages.show();
			}
		});
	}};

	mw.loader.using(['mediawiki.cookie', 'mediawiki.user', 'mediawiki.util', 'site', 'user'], function () {
		$(document).ready(function () {
			multilingual.init();
		});
	});
})(jQuery, mediaWiki);