Delay loading of language settings javascript

Load them when language settings is opened using cog or ULS icon click

Change-Id: I472497c549bff0fd578156fa0113dae2d6a7a7fb

Resources.php

@@ -88,8 +88,11 @@ $wgResourceModules['ext.uls.interface'] = array(
 	'dependencies' => array(
 		'ext.uls.init',
 		'jquery.tipsy',
-		'ext.uls.displaysettings',
-		'ext.uls.inputsettings',
+		'mediawiki.user',
+		// We can not delay webfonts loading since it is required
+		// immediately after page load
+		'ext.uls.webfonts',
+		'ext.uls.ime',
 	),
 	'messages' => array(
 		'uls-plang-title-languages',

resources/js/ext.uls.ime.js

@@ -121,6 +121,17 @@
 		$moreSettingsLink = $( '<span>' )
 			.addClass( 'uls-ime-more-settings-link' );
 
+		mw.loader.using( mw.uls.languageSettingsModules, function () {
+			$moreSettingsLink.languagesettings( {
+				defaultModule: 'input',
+				onClose: function () {
+					// on close of input settings, keep focus in input area.
+					imeselector.$element.focus();
+				},
+				top: imeselector.$element.offset().top
+			} );
+		} );
+
 		// Hide the menu.
 		$moreSettingsLink.on( 'click', function ( e ) {
 			var languageSettings = $( this ).data( 'languagesettings' );

resources/js/ext.uls.init.js

@@ -38,6 +38,7 @@
 
 	mw.uls = mw.uls || {};
 	mw.uls.previousLanguagesCookie = 'uls-previous-languages';
+	mw.uls.languageSettingsModules = ['ext.uls.inputsettings', 'ext.uls.displaysettings'];
 	/**
 	 * Change the language of wiki using setlang URL parameter
 	 * @param {String} language

resources/js/ext.uls.interface.js

@@ -34,7 +34,7 @@
 		$displaySettings = $( '<div>' )
 			.addClass( 'display-settings-block' )
 			.prop( 'id', 'display-settings-block' )
-			.append( $displaySettingsTitle );
+			.append( $displaySettingsTitle.i18n() );
 
 		return $displaySettings;
 	}
@@ -53,7 +53,7 @@
 		$inputSettings = $( '<div>' )
 			.addClass( 'input-settings-block' )
 			.prop( 'id', 'input-settings-block' )
-			.append( $inputSettingsTitle );
+			.append( $inputSettingsTitle.i18n() );
 
 		return $inputSettings;
 	}
@@ -86,8 +86,10 @@
 					};
 				}
 				$.extend( displaySettingsOptions, uls.position() );
-				$displaySettings.languagesettings( displaySettingsOptions )
-					.click();
+				mw.loader.using( mw.uls.languageSettingsModules, function () {
+					$displaySettings.languagesettings( displaySettingsOptions )
+						.click();
+				} );
 			}
 			uls.hide();
 		} );
@@ -106,14 +108,16 @@
 				languagesettings = $inputSettings.data( 'languagesettings' );
 
 			if ( !languagesettings ) {
-				$inputSettings.languagesettings( {
-					defaultModule: 'input',
-					onClose: function () {
-						uls.show();
-					},
-					top: position.top,
-					left: position.left
-				} ).click();
+				mw.loader.using( mw.uls.languageSettingsModules, function () {
+					$inputSettings.languagesettings( {
+						defaultModule: 'input',
+						onClose: function () {
+							uls.show();
+						},
+						top: position.top,
+						left: position.left
+					} ).click();
+				} );
 			}
 			uls.hide();
 		} );
@@ -344,7 +348,10 @@
 								this.position();
 							}
 						};
-						$ulsTrigger.languagesettings( langaugeSettingsOptions ).click();
+						mw.loader.using( mw.uls.languageSettingsModules, function () {
+							$ulsTrigger.languagesettings( langaugeSettingsOptions ).click();
+						} );
+
 						e.stopPropagation();
 					}
 				} );
@@ -353,7 +360,9 @@
 					var languagesettings = $ulsTrigger.data( 'languagesettings' );
 
 					if ( !languagesettings ) {
-						$ulsTrigger.languagesettings().click();
+						mw.loader.using( mw.uls.languageSettingsModules, function () {
+							$ulsTrigger.languagesettings().click();
+						} );
 						e.stopPropagation();
 					}
 				} );
@@ -366,10 +375,11 @@
 						// ULS options that are common to all modes of showing
 						ulsOptions = {
 							onReady: function () {
-								if ( $.fn.languagesettings ) {
-									addDisplaySettings( this );
-									addInputSettings( this );
-								}
+								var uls = this;
+								mw.loader.using( mw.uls.languageSettingsModules, function () {
+									addDisplaySettings( uls );
+									addInputSettings( uls );
+								} );
 							},
 							onSelect: function ( language ) {
 								mw.uls.changeLanguage( language );