Delay compact language links language selector creation until click

No point constructing the selector when it is used.

Task: T122341
Change-Id: I928f9041a95e2c48625dba6e11550ac6bbdcb7fd

extension.json

@@ -233,8 +233,6 @@
 			"scripts": "js/ext.uls.compactlinks.js",
 			"styles": "css/ext.uls.compactlinks.less",
 			"dependencies": [
-				"ext.uls.mediawiki",
-				"ext.uls.init",
 				"jquery.uls.compact",
 				"mediawiki.language",
 				"mediawiki.ui.button"

resources/js/ext.uls.compactlinks.js

@@ -89,22 +89,25 @@
 		},
 
 		/**
-		 * Bind to event handlers and listen for events
+		 * Attaches the actual selector to the trigger.
+		 *
+		 * @param {jQuery} $trigger Element to use as trigger.
 		 */
-		listen: function () {
+		createSelector: function ( $trigger ) {
 			var languages,
-				compactLinks = this,
+				self = this,
 				dir = $( 'html' ).prop( 'dir' ),
 				ulsLanguageList = {};
 
-			languages = $.map( compactLinks.interlanguageList, function ( language, languageCode ) {
+			languages = $.map( this.interlanguageList, function ( language, languageCode ) {
 				ulsLanguageList[ languageCode ] = language.autonym;
 
 				return languageCode;
 			} );
 
+			return mw.loader.using( 'ext.uls.mediawiki' ).then( function () {
 				// Attach ULS to the trigger
-			compactLinks.$trigger.uls( {
+				$trigger.uls( {
 					onReady: function () {
 						this.$menu.addClass( 'interlanguage-uls-menu' );
 					},
@@ -116,12 +119,12 @@
 					onSelect: function ( language ) {
 						var previousLanguages = mw.uls.getPreviousLanguages();
 
-					compactLinks.$trigger.removeClass( 'selector-open' );
+						self.$trigger.removeClass( 'selector-open' );
 
 						previousLanguages.push( language );
 						previousLanguages = unique( previousLanguages );
 						mw.uls.setPreviousLanguages( previousLanguages );
-					location.href = compactLinks.interlanguageList[ language ].href;
+						location.href = self.interlanguageList[ language ].href;
 					},
 					onVisible: function () {
 						var offset, height, width, triangleWidth;
@@ -130,9 +133,9 @@
 						// rotation origin in the middle. See the corresponding style file.
 
 						// These are for the trigger
-					offset = compactLinks.$trigger.offset();
-					width = compactLinks.$trigger.outerWidth();
-					height = compactLinks.$trigger.outerHeight();
+						offset = $trigger.offset();
+						width = $trigger.outerWidth();
+						height = $trigger.outerHeight();
 
 						// Triangle width is: Math.sqrt( 2 * Math.pow( 25, 2 ) ) / 2 =~ 17.7;
 						// Box width = 24 + 1 for border.
@@ -151,7 +154,7 @@
 							left: this.left,
 							top: this.top
 						} );
-					compactLinks.$trigger.addClass( 'selector-open' );
+						$trigger.addClass( 'selector-open' );
 					},
 					languageDecorator: function ( $languageLink, language ) {
 						// set href and text exactly same as what was in
@@ -159,17 +162,31 @@
 						// cases like sr. In ULS it is "српски", while in interlanguage links
 						// it is "српски / srpski"
 						$languageLink
-						.prop( 'href', compactLinks.interlanguageList[ language ].href )
-						.text( compactLinks.interlanguageList[ language ].autonym );
+							.prop( 'href', self.interlanguageList[ language ].href )
+							.text( self.interlanguageList[ language ].autonym );
 					},
 					onCancel: function () {
-					compactLinks.$trigger.removeClass( 'selector-open' );
+						$trigger.removeClass( 'selector-open' );
 					},
 					// Use compact version of ULS
 					compact: true,
 					languages: ulsLanguageList,
 					// Show common languages
-				quickList: compactLinks.filterByCommonLanguages( languages )
+					quickList: self.filterByCommonLanguages( languages )
+				} );
+			} );
+		},
+
+		/**
+		 * Bind to event handlers and listen for events
+		 */
+		listen: function () {
+			var self = this;
+
+			this.$trigger.one( 'click', function () {
+				self.createSelector( self.$trigger ).then( function () {
+					self.$trigger.click();
+				} );
 			} );
 		},