Allow skins to register their own button and disable compact

Example usage:
Iabd4688c6081b4de391b9655b92a16f3a414e018

We will skip loading the compact link if we don't need
to compact the languages.

Note special handling is known for Timeless which stops
propagation of events. This will be fixed in Timeless at a
later date.

Bug: T264824
Change-Id: I0518ecdf402ebf5eb6bad2c430f6462322c0d8e1

extension.json

@@ -159,8 +159,7 @@
 		},
 		"ext.uls.compactlinks": {
 			"packageFiles": [
-				"js/ext.uls.compactlinks.js",
-				"js/ext.uls.launch.js"
+				"js/ext.uls.compactlinks.js"
 			],
 			"styles": "css/ext.uls.compactlinks.less",
 			"dependencies": [
@@ -224,7 +223,10 @@
 		},
 		"ext.uls.interface": {
 			"targets": [ "desktop", "mobile" ],
-			"scripts": "js/ext.uls.interface.js",
+			"packageFiles": [
+				"js/ext.uls.interface.js",
+				"js/ext.uls.launch.js"
+			],
 			"styles": "css/ext.uls.interface.less",
 			"dependencies": [
 				"mediawiki.jqueryMsg",

includes/UniversalLanguageSelectorHooks.php

@@ -106,9 +106,10 @@ class UniversalLanguageSelectorHooks {
 		// Soft dependency to Wikibase client. Don't enable CLL if links are managed manually.
 		$excludedLinks = $out->getProperty( 'noexternallanglinks' );
 		$override = is_array( $excludedLinks ) && in_array( '*', $excludedLinks );
-		if ( !$override && self::isCompactLinksEnabled( $out->getUser() ) ) {
-			$out->addModules( 'ext.uls.compactlinks' );
-		}
+		$config = [
+			'wgULSPosition' => $wgULSPosition,
+			'wgULSCompactLinksEnabled' => !$override && self::isCompactLinksEnabled( $out->getUser() ),
+		];
 
 		if ( is_string( $wgULSGeoService ) ) {
 			$out->addModules( 'ext.uls.geoclient' );
@@ -121,7 +122,8 @@ class UniversalLanguageSelectorHooks {
 
 		// This is added here, and not in addConfig to allow skins and extensions to vary it
 		// For example, ContentTranslation special pages depend on being able to change it.
-		$out->addJsConfigVars( 'wgULSPosition', $wgULSPosition );
+		$out->addJsConfigVars( $config );
+
 		if ( $wgULSPosition === 'personal' ) {
 			$out->addModuleStyles( 'ext.uls.pt' );
 		} else {

resources/js/ext.uls.compactlinks.js

@@ -20,8 +20,7 @@
 ( function () {
 	'use strict';
 
-	var DEFAULT_LIST_SIZE = 9,
-		launchULS = require( './ext.uls.launch.js' );
+	var DEFAULT_LIST_SIZE = 9;
 
 	/**
 	 * @param {Array} target
@@ -179,7 +178,6 @@
 		this.compactList = this.getCompactList();
 		this.hideOriginal();
 		this.render();
-		this.listen();
 	};
 
 	/**
@@ -197,33 +195,6 @@
 		mw.hook( 'mw.uls.compactlinks.initialized' ).fire( true );
 	};
 
-	/**
-	 * Attaches the actual selector to the trigger.
-	 *
-	 * @param {jQuery} $trigger Element to use as trigger.
-	 */
-	CompactInterlanguageList.prototype.createSelector = function ( $trigger ) {
-		launchULS(
-			$trigger,
-			this.interlanguageList
-		);
-	};
-
-	/**
-	 * Bind to event handlers and listen for events
-	 */
-	CompactInterlanguageList.prototype.listen = function () {
-		var self = this;
-
-		this.$trigger.one( 'click', function () {
-			// Load the ULS now.
-			mw.loader.using( 'ext.uls.mediawiki' ).then( function () {
-				self.createSelector( self.$trigger );
-				self.$trigger.trigger( 'click' );
-			} );
-		} );
-	};
-
 	/**
 	 * Get the compacted interlanguage list as associative array
 	 *

resources/js/ext.uls.interface.js

@@ -19,7 +19,8 @@
 
 ( function () {
 	'use strict';
-	var languageSettingsModules = [ 'ext.uls.displaysettings' ];
+	var languageSettingsModules = [ 'ext.uls.displaysettings' ],
+		launchULS = require( './ext.uls.launch.js' );
 
 	/**
 	 * Construct the display settings link
@@ -442,10 +443,59 @@
 		} );
 	}
 
+	/**
+	 * Compact the language list if necessary
+	 */
+	function compactLanguageLinksList() {
+		if (
+			// Allow skins to register their own button, in which case no need to compact
+			!document.querySelector( '.mw-interlanguage-selector' ) && (
+				// This line is for cached HTML where the JS config variable is not available
+				// it can be removed a week after this code has been in production.
+				mw.loader.getState( 'ext.uls.compactlinks' ) !== 'registered' ||
+				mw.config.get( 'wgULSCompactLinksEnabled' )
+			)
+		) {
+			mw.loader.using( 'ext.uls.compactlinks' );
+		}
+	}
+
+	/**
+	 * Event handler for the language button
+	 * @param {jQuery.Event} ev
+	 */
+	function clickLanguageButton( ev ) {
+		var $target = $( ev.currentTarget );
+		ev.preventDefault();
+		// Load the ULS now.
+		mw.loader.using( 'ext.uls.mediawiki' ).then( function () {
+			launchULS(
+				$target,
+				mw.uls.getInterlanguageListFromNodes(
+					document.querySelectorAll( '#p-lang .interlanguage-link-target' )
+				)
+			);
+			$target.trigger( 'click' );
+		} );
+	}
+	/**
+	 * Sets up the interlanguage selector button if present
+	 */
+	function initInterlanguageSelector() {
+		// Special handling for Timeless which stops propagation on links in this menu
+		if ( $( '.sidebar-inner' ).length ) {
+			$( '.sidebar-inner #p-lang' ).one( 'click', '.mw-interlanguage-selector', clickLanguageButton );
+		} else {
+			$( document ).one( 'click', '.mw-interlanguage-selector', clickLanguageButton );
+		}
+	}
+
 	function init() {
 		initInterface();
 		initTooltip();
 		initIme();
+		compactLanguageLinksList();
+		initInterlanguageSelector();
 	}
 
 	// Early execute of init