resources/js/ext.uls.launch.js
/**
* Setup code for content language selector dialog
*/
/* eslint-disable no-implicit-globals */
var commonInterlanguageList = null;
/**
* @param {string[]} languageCodes array of language codes available
* @return {Array} of languages filtered to those commonly used
*/
function filterForCommonLanguagesForUser( languageCodes ) {
if ( commonInterlanguageList === null ) {
commonInterlanguageList = mw.uls.getFrequentLanguageList()
.filter( function ( language ) {
return languageCodes.indexOf( language ) >= 0;
} );
}
return commonInterlanguageList;
}
/**
* @param {Object} languagesObject mapping language codes to DOMElements
* @return {Object} mapping language codes to the textContent of DOMElements
*/
function languageObjectTextContent( languagesObject ) {
var newLanguageObject = {};
Object.keys( languagesObject ).forEach( function ( langCode ) {
newLanguageObject[ langCode ] = languagesObject[ langCode ].textContent;
} );
return newLanguageObject;
}
/**
* Launches an instance of UniversalLanguageSelector for changing to another
* article language.
*
* @param {jQuery.Object} $trigger for opening ULS dialog
* @param {Object} languagesObject of the available languages, mapping code (string) to Element
* @param {boolean} forCLS Whether to enable compact language links specific behavior
*/
function launchULS( $trigger, languagesObject, forCLS ) {
var ulsConfig = {
/**
* Language selection handler
*
* @param {string} language language code
* @param {Object} event jQuery event object
*/
onSelect: function ( language, event ) {
$trigger.removeClass( 'selector-open' );
mw.uls.addPreviousLanguage( language );
// Switch the current tab to the new language, unless it was
// {Ctrl,Shift,Command} activation on a link
if (
event.target instanceof HTMLAnchorElement &&
( event.metaKey || event.shiftKey || event.ctrlKey )
) {
return;
}
// TODO: The name of this hook should probably be changed to reflect that it covers
// both the user changing their interface language and the user switching to a
// different language.
mw.hook( 'mw.uls.interface.language.change' ).fire( language, 'content-language-switcher' );
location.href = languagesObject[ language ].href;
},
onPosition: function () {
// Override the default positioning. See https://phabricator.wikimedia.org/T276248
// Default positioning of jquery.uls is middle of the screen under the trigger.
// This code aligns it under the trigger and to the trigger edge depending on which
// side of the page the trigger is - should work automatically for both LTR and RTL.
var isInVectorStickyHeader, offset, height, width, positionCSS;
// T295391 Used to add fixed positioning for Vector sticky header.
isInVectorStickyHeader = $trigger.attr( 'id' ) === 'p-lang-btn-sticky-header';
// These are for the trigger.
offset = ( isInVectorStickyHeader ) ?
$trigger.get( 0 ).getBoundingClientRect() :
$trigger.offset();
width = $trigger.outerWidth();
height = $trigger.outerHeight();
if ( offset.left + ( width / 2 ) > $( window ).width() / 2 ) {
// Midpoint of the trigger is on the right side of the viewport.
positionCSS = {
// Right edge of the dialog aligns with the right edge of the trigger.
right: $( window ).width() - ( offset.left + width ),
top: offset.top + height
};
} else {
// Midpoint of the trigger is on the left side of the viewport.
positionCSS = {
// Left edge of the dialog aligns with the left edge of the trigger.
left: offset.left,
top: offset.top + height
};
}
if ( isInVectorStickyHeader ) {
positionCSS.zIndex = 5;
positionCSS.position = 'fixed';
}
return positionCSS;
},
onVisible: function () {
$trigger.addClass( 'selector-open' );
// Note well that this hook is unstable.
mw.hook( 'mw.uls.compact_language_links.open' ).fire( $trigger );
},
languageDecorator: function ( $languageLink, language ) {
var element = languagesObject[ language ];
// Set href, text, and tooltip exactly same as what was in
// interlanguage link. The ULS autonym might be different in some
// cases like sr. In ULS it is "српски", while in interlanguage links
// it is "српски / srpski"
$languageLink
.prop( {
href: element.href,
title: element.title,
hreflang: element.hreflang
} )
.text( element.textContent );
// This code is to support badges used in Wikimedia
// eslint-disable-next-line mediawiki/class-doc
$languageLink.parent().addClass( element.parentNode.className );
},
onCancel: function () {
$trigger.removeClass( 'selector-open' );
},
languages: languageObjectTextContent( languagesObject ),
ulsPurpose: 'compact-language-links',
// Show common languages
quickList: filterForCommonLanguagesForUser(
Object.keys( languagesObject )
),
noResultsTemplate: function () {
var $defaultTemplate = $.fn.lcd.defaults.noResultsTemplate.call( this );
// Customize the message
$defaultTemplate
.find( '.uls-no-results-found-title' )
.data( 'i18n', 'ext-uls-compact-no-results' );
return $defaultTemplate;
}
};
if ( forCLS ) {
// Styles for these classes are defined in the ext.uls.compactlinks module
ulsConfig.onReady = function () {
// This class enables the caret
this.$menu.addClass( 'interlanguage-uls-menu' );
};
ulsConfig.onPosition = function () {
// Compact language links specific positioning with a caret
var left;
// The panel is positioned carefully so that our pointy triangle,
// which is implemented as a square box rotated 45 degrees with
// rotation origin in the middle. See the corresponding style file.
// These are for the trigger
var offset = $trigger.offset(),
width = $trigger.outerWidth(),
height = $trigger.outerHeight();
// Triangle width is: who knows now, but this still looks fine.
var triangleWidth = 12;
var isRight = offset.left > $( window ).width() / 2;
// selector-{left,right} control which side the caret appears.
// It needs to match the positioning of the dialog.
this.$menu.toggleClass( 'selector-left', !isRight )
.toggleClass( 'selector-right', isRight );
if ( isRight ) {
left = -this.$menu.outerWidth() - triangleWidth;
} else {
left = width + triangleWidth;
}
return {
left: offset.left + left,
// Offset from the middle of the trigger
top: offset.top + ( height / 2 ) - 27
};
};
}
// Attach ULS behavior to the trigger. ULS will be shown only once it is clicked.
$trigger.uls( ulsConfig );
}
module.exports = launchULS;