Lazyload jquery.uls library

In the "interlanguage" position ULS is shown after 2 clicks,
so don't load it initially.

In the "personal" position ULS is shown immediately after
the language icon click, so load it, but conditionally.

The new RL module ext.uls.mediawiki is added for setting
jquery.uls defaults in a way that will lazy-load the language names.

Change-Id: Ic33ef034c794a523b5403867196c6098a58eb5b1

Resources.php

@@ -30,7 +30,7 @@ $wgResourceModules['ext.uls.displaysettings'] = array(
 		'ext.uls.buttons',
 		'ext.uls.languagesettings',
 		'ext.uls.webfonts',
-		'jquery.uls.grid',
+		'ext.uls.mediawiki',
 		'jquery.i18n',
 		'mediawiki.api.parse',
 	),
@@ -45,6 +45,7 @@ $wgResourceModules['ext.uls.ime'] = array(
 	'dependencies' => array(
 		'ext.uls.init',
 		'ext.uls.preferences',
+		'ext.uls.mediawiki',
 		'jquery.ime',
 	),
 	'messages' => array(
@@ -58,7 +59,7 @@ $wgResourceModules['ext.uls.nojs'] = array(
 	'position' => 'top',
 ) + $resourcePaths;
 
-// Base ULS module
+// Initialization of MW ULS functionality
 $wgResourceModules['ext.uls.init'] = array(
 	'scripts' => 'resources/js/ext.uls.init.js',
 	'styles' => 'resources/css/ext.uls.css',
@@ -66,13 +67,12 @@ $wgResourceModules['ext.uls.init'] = array(
 		'monobook' => 'resources/css/ext.uls-monobook.css',
 	),
 	'dependencies' => array(
-		'ext.uls.languagenames',
 		'mediawiki.Uri',
 		'mediawiki.util',
 		'jquery.client',
 		'jquery.json',
 		'jquery.cookie',
-		'jquery.uls',
+		'jquery.uls.data',
 		'ext.uls.messages',
 	),
 	'position' => 'top',
@@ -95,7 +95,7 @@ $wgResourceModules['ext.uls.inputsettings'] = array(
 		'ext.uls.buttons',
 		'ext.uls.languagesettings',
 		'ext.uls.ime',
-		'jquery.uls.grid',
+		'ext.uls.mediawiki',
 		'jquery.ime',
 		'jquery.i18n',
 	),
@@ -124,6 +124,8 @@ $wgResourceModules['ext.uls.languagesettings'] = array(
 	'dependencies' => array(
 		'ext.uls.buttons',
 		'ext.uls.preferences',
+		// The grid styles are used here,
+		// but ULS itself is lazy-loaded
 		'jquery.uls.grid',
 	),
 ) + $resourcePaths;
@@ -184,6 +186,16 @@ $wgResourceModules['jquery.ime'] = array(
 	'styles' => 'lib/jquery.ime/css/jquery.ime.css',
 ) + $resourcePaths;
 
+// A module that sets useful ULS default options
+$wgResourceModules['ext.uls.mediawiki'] = array(
+	'scripts' => 'resources/js/ext.uls.mediawiki.js',
+	'dependencies' => array(
+		'jquery.uls',
+		'jquery.i18n',
+		'ext.uls.languagenames',
+	),
+) + $resourcePaths;
+
 $wgResourceModules['jquery.uls'] = array(
 	'scripts' => array(
 		'lib/jquery.uls/src/jquery.uls.core.js',
@@ -198,6 +210,7 @@ $wgResourceModules['jquery.uls'] = array(
 	'dependencies' => array(
 		'jquery.i18n',
 		'jquery.uls.data',
+		'jquery.uls.grid',
 	),
 ) + $resourcePaths;
 

resources/css/ext.uls.css

@@ -3,6 +3,19 @@
  * or near the interlanguage links.
  */
 
+/*
+ * A hack to load the icon before the rest of the module is lazy-loaded.
+ * Copied from jquuery.uls.css with the path changed.
+ */
+.uls-trigger {
+	/* @embed */
+	background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center;
+	background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
+	background-image: -moz-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
+	background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
+	padding-left: 30px;
+}
+
 #pt-uls a.uls-trigger {
 	padding-left: 30px;
 }

resources/js/ext.uls.init.js

@@ -40,16 +40,6 @@
 		}() );
 	}
 
-	// MediaWiki override for ULS defaults.
-	$.fn.uls.defaults = $.extend( $.fn.uls.defaults, {
-		languages: mw.config.get( 'wgULSLanguages' ),
-		searchAPI: mw.util.wikiScript( 'api' ) + '?action=languagesearch'
-	} );
-
-	// No need of IME in language search bar of ULS
-	$.fn.uls.Constructor.prototype.render = function () {
-		this.$languageFilter.addClass( 'noime' );
-	};
 
 	var jsonLoader = null,
 		initialized = false,
@@ -256,16 +246,6 @@
 			return;
 		}
 
-		/*
-		 * The 'als' is used in a non-standard way in MediaWiki -
-		 * it may be used to represent the Allemanic language,
-		 * the standard code of which is 'gsw', while 'als'
-		 * is ISO 639 3 refers to Tosk Albanian, which is
-		 * not currently used in any way in MediaWiki.
-		 * This local fix adds a redirect for it.
-		 */
-		$.uls.data.addLanguage( 'als', { target: 'gsw' } );
-
 		if ( !jsonLoader ) {
 			jsonLoader = mw.uls.loadLocalization( currentLang );
 		} else {

resources/js/ext.uls.interface.js

@@ -407,6 +407,7 @@
 							mw.hook( 'mw.uls.settings.open' ).fire( eventParams && eventParams.source || 'personal' );
 						}
 					} else {
+						mw.loader.using( 'ext.jquery.uls', function () {
 							$ulsTrigger.uls( {
 								quickList: function () {
 									return mw.uls.getFrequentLanguageList();
@@ -427,9 +428,11 @@
 							} ).trigger( 'click', eventParams );
 
 							e.stopPropagation();
+						} );
 					}
 				} );
 			}
+
 			// At this point we don't care which kind of trigger it is
 			$triggers = $( '.uls-settings-trigger, .uls-trigger' );
 			addAccessibilityFeatures( $triggers );

resources/js/ext.uls.languagesettings.js

@@ -163,7 +163,8 @@
 		},
 
 		position: function () {
-			var top, pos, left;
+			var top, pos, left,
+				languageSettings = this;
 
 			pos = $.extend( {}, this.$element.offset(), {
 				height: this.$element[0].offsetHeight
@@ -174,7 +175,12 @@
 				top: top,
 				left: left
 			} );
-			this.$window.scrollIntoView();
+			setTimeout( function () {
+				// Don't mess up height calculations with parallel css loading
+				// See: http://ejohn.org/blog/how-javascript-timers-work/
+				languageSettings.$window.scrollIntoView();
+			}, 0 );
+
 		},
 
 		i18n: function () {
@@ -182,6 +188,8 @@
 		},
 
 		show: function () {
+			var languageSettings = this;
+
 			if ( !this.initialized ) {
 				this.render();
 				this.initialized = true;
@@ -196,7 +204,11 @@
 			// settings panels is upto date. So just click on active menu item.
 			this.$window.find( '.settings-menu-items > .active' ).click();
 			this.position();
-			this.visible();
+			setTimeout( function () {
+				// Don't mess up height calculations with parallel css loading
+				// See: http://ejohn.org/blog/how-javascript-timers-work/
+				languageSettings.visible();
+			}, 0 );
 		},
 
 		/**

resources/js/ext.uls.mediawiki.js

@@ -0,0 +1,42 @@
+/**
+ * jquery.uls defaults for MediaWiki.
+ *
+ * Copyright (C) 2013 Alolita Sharma, Amir Aharoni, Arun Ganesh, Brandon Harris,
+ * Niklas Laxström, Pau Giner, Santhosh Thottingal, Siebrand Mazeland and other
+ * contributors. See CREDITS for a list.
+ *
+ * UniversalLanguageSelector is dual licensed GPLv2 or later and MIT. You don't
+ * have to do anything special to choose one license or the other and you don't
+ * have to notify anyone which license you are using. You are free to use
+ * UniversalLanguageSelector in commercial projects as long as the copyright
+ * header is left intact. See files GPL-LICENSE and MIT-LICENSE for details.
+ *
+ * @file
+ * @ingroup Extensions
+ * @licence GNU General Public Licence 2.0 or later
+ * @licence MIT License
+ */
+( function ( $, mw ) {
+	'use strict';
+
+	// MediaWiki overrides for ULS defaults
+	$.fn.uls.defaults = $.extend( $.fn.uls.defaults, {
+		languages: mw.config.get( 'wgULSLanguages' ),
+		searchAPI: mw.util.wikiScript( 'api' ) + '?action=languagesearch'
+	} );
+
+	// No need of IME in the ULS language search bar
+	$.fn.uls.Constructor.prototype.render = function () {
+		this.$languageFilter.addClass( 'noime' );
+	};
+
+	/*
+	 * The 'als' is used in a non-standard way in MediaWiki -
+	 * it may be used to represent the Allemanic language,
+	 * the standard code of which is 'gsw', while 'als'
+	 * is ISO 639 3 refers to Tosk Albanian, which is
+	 * not currently used in any way in MediaWiki.
+	 * This local fix adds a redirect for it.
+	 */
+	$.uls.data.addLanguage( 'als', { target: 'gsw' } );
+}( jQuery, mediaWiki ) );