Load jquery.ime only when user focus on editable fields

To reduce javascript size for page load.

Change-Id: Ibf2ccd5b5501720837051d6e268b122e8a9f8590

Resources.php

@@ -33,10 +33,12 @@ $wgResourceModules['ext.uls.geoclient'] = array(
 $wgResourceModules['ext.uls.ime'] = array(
 	'scripts' => 'resources/js/ext.uls.ime.js',
 	'dependencies' => array(
-		'jquery.ime',
 		'ext.uls.init',
 		'ext.uls.preferences',
 	),
+	'messages' => array(
+		'uls-ime-helppage',
+	),
 ) + $resourcePaths;
 
 // Styles for users who disabled JavaScript
@@ -75,11 +77,9 @@ $wgResourceModules['ext.uls.inputsettings'] = array(
 	'dependencies' => array(
 		'ext.uls.languagesettings',
 		'ext.uls.ime',
+		'jquery.ime',
 		'jquery.i18n',
 	),
-	'messages' => array(
-		'uls-ime-helppage',
-	),
 ) + $resourcePaths;
 
 // Interface language selection module

resources/js/ext.uls.ime.js

@@ -19,7 +19,7 @@
 ( function ( $, mw, document, undefined ) {
 	'use strict';
 
-	var mwImeRulesPath, inputSelector, inputPreferences;
+	var mwImeRulesPath, inputSelector, inputPreferences, ulsIMEPreferences, customHelpLink;
 
 	mwImeRulesPath = mw.config.get( 'wgExtensionAssetsPath' ) +
 		'/UniversalLanguageSelector/lib/jquery.ime/';
@@ -57,8 +57,7 @@
 		return unique.slice( 0, 6 );
 	};
 
-	// Extend the ime preference system
+	ulsIMEPreferences = {
-	$.extend( $.ime.preferences, {
 
 		save: function ( callback ) {
 			if ( !this.registry.isDirty ) {
@@ -102,15 +101,10 @@
 		getDefaultLanguage: function () {
 			return mw.config.get( 'wgContentLanguage' );
 		}
-	} );
+	};
-
-	// MediaWiki specific overrides for jquery.ime
-	$.extend( $.ime.defaults, {
-		imePath: mwImeRulesPath
-	} );
 
 	// Add a 'more settings' link that takes to input settings of ULS
-	$.fn.imeselector.Constructor.prototype.helpLink = function () {
+	customHelpLink = function () {
 		var $disableInputToolsLink, $moreSettingsLink,
 			imeselector = this;
 
@@ -173,23 +167,50 @@
 		$( inputSelector ).trigger( 'destroy.ime' );
 	};
 
-	mw.ime.setup = function () {
+	mw.ime.init = function () {
+		if ( !$.ime ) {
+			// jquery.ime not loaded yet.
+			return;
+		}
+		if ( $.ime.preferences.isEnabled ) {
+			// mw.ime already initialized.
+			return;
+		}
+		// Extend the ime preference system
+		$.extend( $.ime.preferences, ulsIMEPreferences );
+		// MediaWiki specific overrides for jquery.ime
+		$.extend( $.ime.defaults, {
+			imePath: mwImeRulesPath
+		} );
+		// Load the ime preferences
+		$.ime.preferences.load();
+		$.fn.imeselector.Constructor.prototype.helpLink = customHelpLink;
+	};
 
+	mw.ime.setup = function () {
+		mw.ime.init();
 		$( 'body' ).on( 'focus.ime', inputSelector, function () {
 			var imeselector, $input, noImeSelector;
 
-			// It's possible to disable IME through the settings
+			noImeSelector = mw.config.get( 'wgULSNoImeSelectors' ).join( ', ' );
-			// panels before it was initialized, so we need to check
+			$input = $( this );
-			// that it's supposed to be initialized
+
-			if ( !$.ime.preferences.isEnabled() ) {
+			if ( !$.ime ) {
+				mw.loader.using( 'jquery.ime', function () {
+					$input.trigger( 'focus.ime' );
+				} );
 				return;
 			}
 
-			$input = $( this );
+			mw.ime.init();
-			noImeSelector = mw.config.get( 'wgULSNoImeSelectors' ).join( ', ' );
+
+			if ( $input.is( '.noime' ) || !$.ime.preferences.isEnabled() ) {
+				return;
+			}
 
 			if ( noImeSelector.length && $input.is( noImeSelector ) ) {
 				$input.addClass( 'noime' );
+				return;
 			}
 
 			$input.ime( {
@@ -238,12 +259,7 @@
 
 	$( document ).ready( function () {
 		mw.uls.init( function () {
-			// Load the ime preferences
+			mw.ime.setup();
-			$.ime.preferences.load();
-
-			if ( $.ime.preferences.isEnabled() ) {
-				mw.ime.setup();
-			}
 		} );
 	} );
 

resources/js/ext.uls.inputsettings.js

@@ -94,7 +94,8 @@
 			this.$parent.$settingsPanel.append( this.$template );
 
 			$enabledOnly = this.$template.find( '.enabled-only' );
-
+			// ime system is lazy loaded, make sure it is initialized
+			mw.ime.init();
 			if ( $.ime.preferences.isEnabled() ) {
 				$enabledOnly.removeClass( 'hide' );
 			} else {