Lazy initialization of language settings and ULS from interface triggers

1. For interlanguage position, initialize language settings on first
click on cog
2. For personal toolbar position, initialie ULS on first click of
ULS trigger

Change-Id: Icda498f676d1d3ddaefad75fd9212150f6966666

resources/js/ext.uls.interface.js

@@ -270,10 +270,8 @@
 
 	$( document ).ready( function () {
 		mw.uls.init( function () {
-			var $ulsSettingsTrigger,
-				$triggers,
+			var $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
-			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( {
+				$ulsTrigger.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();
-			} else {
-				$ulsTrigger.uls( ulsOptions );
-			}
+				$ulsTrigger.on( 'click', function ( e ) {
+					var languagesettings = $ulsTrigger.data( 'languagesettings' );
 
+					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 );