Merge "Lazy initialization of language settings and ULS from interface triggers"

resources/js/ext.uls.interface.js

@@ -270,10 +270,8 @@
 
 	$( document ).ready( function () {
 		mw.uls.init( function () {
-			var $ulsSettingsTrigger,
+			var $triggers,
-				$triggers,
 				$pLang,
-				ulsOptions,
 				$ulsTrigger = $( '.uls-trigger' ),
 				rtlPage = $( 'body' ).hasClass( 'rtl' ),
 				anonMode = ( mw.user.isAnon() &&
@@ -281,16 +279,17 @@
 				ulsPosition = mw.config.get( 'wgULSPosition' );
 
 			if ( ulsPosition === 'interlanguage' ) {
+				// TODO: Refactor this block
 				// The interlanguage links section
 				$pLang = $( '#p-lang' );
 				// Add an element near the interlanguage links header
-				$ulsSettingsTrigger = $( '<span>' )
+				$ulsTrigger = $( '<span>' )
 					.addClass( 'uls-settings-trigger' )
 					.attr( 'title', $.i18n( 'ext-uls-language-settings-title' ) );
 				// Append ULS cog to languages section, but make sure it is visible.
-				$pLang.show().prepend( $ulsSettingsTrigger );
+				$pLang.show().prepend( $ulsTrigger );
 				// Take care of any other elements with this class.
-				$ulsSettingsTrigger = $( '.uls-settings-trigger' );
+				$ulsTrigger = $( '.uls-settings-trigger' );
 				// Remove the dummy link, which was added to make sure that the section appears
 				$pLang.find( '.uls-p-lang-dummy' ).remove();
 
@@ -305,32 +304,16 @@
 						$pLang.find( 'div.pBody' ).remove();
 					}
 				}
-			}
 
-			// ULS options that are common to all modes of showing
+				$ulsTrigger.attr( {
-			ulsOptions = {
-				onReady: function () {
-					if ( $.fn.languagesettings ) {
-						addDisplaySettings( this );
-						addInputSettings( this );
-					}
-				},
-				onSelect: function ( language ) {
-					mw.uls.changeLanguage( language );
-				},
-				languages: mw.config.get( 'wgULSLanguages' ),
-				searchAPI: mw.util.wikiScript( 'api' ) + '?action=languagesearch',
-				quickList: function () {
-					return mw.uls.getFrequentLanguageList();
-				}
-			};
-
-			if ( ulsPosition === 'interlanguage' ) {
-				$ulsSettingsTrigger.attr( {
 					title: $.i18n( 'ext-uls-select-language-settings-icon-tooltip' )
 				} );
+				$ulsTrigger.on( 'click', function ( e ) {
+					var languagesettings = $ulsTrigger.data( 'languagesettings' ),
+						langaugeSettingsOptions;
 
-				$ulsSettingsTrigger.languagesettings( {
+					if ( !languagesettings ) {
+						langaugeSettingsOptions = {
 							defaultModule: 'display',
 							onVisible: function () {
 								var topRowHeight, caretHeight, caretWidth,
@@ -360,13 +343,43 @@
 
 								this.position();
 							}
+						};
+						$ulsTrigger.languagesettings( langaugeSettingsOptions ).click();
+						e.stopPropagation();
+					}
 				} );
 			} else if ( anonMode ) {
-				$ulsTrigger.languagesettings();
+				$ulsTrigger.on( 'click', function ( e ) {
-			} else {
+					var languagesettings = $ulsTrigger.data( 'languagesettings' );
-				$ulsTrigger.uls( ulsOptions );
-			}
 
+					if ( !languagesettings ) {
+						$ulsTrigger.languagesettings().click();
+						e.stopPropagation();
+					}
+				} );
+			} else {
+				$ulsTrigger.on( 'click', function ( e ) {
+					var uls = $ulsTrigger.data( 'uls' ),
+						ulsOptions;
+
+					if ( !uls ) {
+						// ULS options that are common to all modes of showing
+						ulsOptions = {
+							onReady: function () {
+								if ( $.fn.languagesettings ) {
+									addDisplaySettings( this );
+									addInputSettings( this );
+								}
+							},
+							onSelect: function ( language ) {
+								mw.uls.changeLanguage( language );
+							}
+						};
+						$ulsTrigger.uls( ulsOptions ).click();
+						e.stopPropagation();
+					}
+				} );
+			}
 			// At this point we don't care which kind of trigger it is
 			$triggers = $( '.uls-settings-trigger, .uls-trigger' );
 			addAccessibilityFeatures( $triggers );