MediaWiki:Gadget-topLangLinks.js

mw.loader.using( [
	'mcw.messages',
	// 'mediawiki.api',
	'mediawiki.language',
	'mediawiki.jqueryMsg',
	'oojs-ui-widgets',
	'oojs-ui.styles.icons-editing-advanced'
] )/*.then( function() {
	// Load the system messages needed for the UI using `mediawiki.api`.
	// This is expensive for the server since this gadget is run on every visit.
	// To save bandwidth, we're using `mcw.messages` to pre-load them instead.
	
	// Alternatively, the messages can be hardcoded here before loading.
	// Here's what that looks like for English:
	mw.messages.set('vector-language-button-label', '{{PLURAL:$1|$1 language|$1 languages}}');
	mw.messages.set('otherlanguages', 'In other languages');
	mw.messages.set('pipe-separator', ' | ');

	return new mw.Api().loadMessagesIfMissing( [
		'vector-language-button-label',
		'otherlanguages',
		'pipe-separator'
	], {
		requestid: 'gadget-topLangLinks'
	} );
} )*/.then( function() {
	var links = $('#p-lang .interlanguage-link a.interlanguage-link-target');
	if ( !links.length ) return;
	var config = mw.config.get( [
		'wgUserId',
		'wgUserLanguage',
		'wgContentLanguage'
	] );
	var languages = navigator.languages.slice();
	if ( config.wgUserId && config.wgUserLanguage !== config.wgContentLanguage ) {
		languages.unshift( config.wgUserLanguage );
	}
	var lang = languages.map( function(lang) {
		return lang.split('-')[0];
	} ).find( function(lang) {
		if ( lang === config.wgContentLanguage ) {
			return true;
		}
		return links.is( function() {
			return this.lang === lang;
		} );
	} );
	var suggestWidget;
	var popupWidget = new OO.ui.PopupButtonWidget( {
		framed: false,
		flags: ['progressive'],
		icon: 'translation',
		indicator: 'down',
		id: 'p-lang-btn',
		title: mw.msg('otherlanguages'),
		label: mw.msg(
			'vector-language-button-label',
			mw.language.convertNumber(links.length)
		),
		popup: {
			$content: $('<ul>').css( {
				'list-style': 'none',
				margin: '0'
			} ).append(
				links.map( function() {
					var buttonWidget = new OO.ui.ButtonWidget( {
						framed: false,
						flags: ['progressive'],
						title: this.title,
						label: this.text,
						href: this.href,
						rel: 'alternate',
						classes: [
							'interlanguage-link',
							'interwiki-' + this.lang
						]
					} );
					buttonWidget.$element.find('a')
						.addClass('interlanguage-link-target')
						.attr('hreflang', this.hreflang)
						.attr('lang', this.lang)
						.css('width', '140px');
					if ( lang === this.lang ) {
						suggestWidget = buttonWidget.$element.clone()
							.attr('id', 'p-lang-suggest')
							.css('margin-right', '0');
						suggestWidget.find('a').css('width', '');
						var pipe = $('<span>').text(mw.msg('pipe-separator'))
							.css('user-select', 'none');
						suggestWidget = suggestWidget.add(pipe);
					}
					return $('<li>')
						.css('margin', '0 0 0 6px')
						.append( buttonWidget.$element );
				} ).get()
			),
			anchor: false,
			width: 140,
			id: 'p-lang-btn-popup'
		}
	} );
	$('<div>').addClass('mw-indicator')
		.attr('id', 'mw-indicator-lang')
		.append( suggestWidget, popupWidget.$element )
		.prependTo('.mw-indicators');
} );