Merge "Lazyload jquery.uls library"

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,29 +407,32 @@
 							mw.hook( 'mw.uls.settings.open' ).fire( eventParams && eventParams.source || 'personal' );
 						}
 					} else {
-						$ulsTrigger.uls( {
+						mw.loader.using( 'ext.jquery.uls', function () {
-							quickList: function () {
+							$ulsTrigger.uls( {
-								return mw.uls.getFrequentLanguageList();
+								quickList: function () {
-							},
+									return mw.uls.getFrequentLanguageList();
-							onReady: function () {
+								},
-								var uls = this;
+								onReady: function () {
-								mw.loader.using( mw.uls.languageSettingsModules, function () {
+									var uls = this;
-									addDisplaySettings( uls );
+									mw.loader.using( mw.uls.languageSettingsModules, function () {
-									addInputSettings( uls );
+										addDisplaySettings( uls );
-								} );
+										addInputSettings( uls );
-							},
+									} );
-							onSelect: function ( language ) {
+								},
-								mw.uls.changeLanguage( language );
+								onSelect: function ( language ) {
-							},
+									mw.uls.changeLanguage( language );
-							onVisible: function () {
+								},
-								mw.uls.addEventLoggingTriggers();
+								onVisible: function () {
-							}
+									mw.uls.addEventLoggingTriggers();
-						} ).trigger( 'click', eventParams );
+								}
+							} ).trigger( 'click', eventParams );
 
-						e.stopPropagation();
+							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 ) );