Refactor ime lazy loading

* Do not load anything unless input field is focused
* Split the setup function to smaller functions
* Introduce $wgULSImeSelectors to allow configuration and avoid
  duplication of selectors in two places.

Change-Id: If5a476e66681dde9f0b72f619d35ddf6255246ac

Resources.php

@@ -45,6 +45,7 @@ $wgResourceModules['ext.uls.ime'] = array(
 	'dependencies' => array(
 		'ext.uls.init',
 		'ext.uls.preferences',
+		'jquery.ime',
 	),
 	'messages' => array(
 		'uls-ime-helppage',
@@ -110,7 +111,6 @@ $wgResourceModules['ext.uls.interface'] = array(
 		// We can not delay webfonts loading since it is required
 		// immediately after page load
 		'ext.uls.webfonts',
-		'ext.uls.ime',
 	),
 	'messages' => array(
 		'uls-plang-title-languages',

UniversalLanguageSelector.hooks.php

@@ -256,8 +256,8 @@ class UniversalLanguageSelectorHooks {
 	 */
 	public static function addConfig( &$vars ) {
 		global $wgULSGeoService, $wgULSIMEEnabled, $wgULSPosition, $wgULSNoWebfontsSelectors,
-			$wgULSAnonCanChangeLanguage, $wgULSEventLogging, $wgULSNoImeSelectors,
-			$wgULSFontRepositoryBasePath, $wgExtensionAssetsPath;
+			$wgULSAnonCanChangeLanguage, $wgULSEventLogging, $wgULSImeSelectors,
+			$wgULSNoImeSelectors, $wgULSFontRepositoryBasePath, $wgExtensionAssetsPath;
 
 		// Place constant stuff here (not depending on request context)
 		if ( is_string( $wgULSGeoService ) ) {
@@ -267,6 +267,7 @@ class UniversalLanguageSelectorHooks {
 		$vars['wgULSPosition'] = $wgULSPosition;
 		$vars['wgULSAnonCanChangeLanguage'] = $wgULSAnonCanChangeLanguage;
 		$vars['wgULSEventLogging'] = $wgULSEventLogging;
+		$vars['wgULSImeSelectors'] = $wgULSImeSelectors;
 		$vars['wgULSNoImeSelectors'] = $wgULSNoImeSelectors;
 		$vars['wgULSNoWebfontsSelectors'] = $wgULSNoWebfontsSelectors;
 

UniversalLanguageSelector.php

@@ -123,6 +123,19 @@ $wgULSPosition = 'personal';
  */
 $wgULSEventLogging = false;
 
+/**
+ * Array of jQuery selectors of elements on which IME should be enabled.
+ *
+ * @since 2013.11
+ */
+$wgULSImeSelectors = array(
+	'input:not([type])',
+	'input[type=text]',
+	'input[type=search]',
+	'textarea',
+	'[contenteditable]',
+);
+
 /**
  * Array of jQuery selectors of elements on which IME must not be enabled.
  *

resources/js/ext.uls.ime.js

@@ -195,41 +195,62 @@
 		};
 	};
 
+	/**
+	 * Binds the event listeners.
+	 */
 	mw.ime.setup = function () {
+		var imeSelectors = mw.config.get( 'wgULSImeSelectors' ).join( ', ' );
+
 		mw.ime.init();
-		$( 'body' ).on( 'focus.ime', inputSelector, function () {
-			var imeselector, $input, noImeSelector;
-
-			noImeSelector = mw.config.get( 'wgULSNoImeSelectors' ).join( ', ' );
-			$input = $( this );
-
-			if ( !$.ime ) {
-				mw.loader.using( 'jquery.ime', function () {
-					$input.trigger( 'focus' );
+		$( 'body' ).on( 'focus.ime', imeSelectors, function () {
+			mw.ime.handleFocus( $( this ) );
 		} );
+	};
+
+	/**
+	 * Loads necessary dependencies, checks input for validity and
+	 * adds the ime menu for elements that should have it.
+	 * @param {jquery.Element} $input
+	 * @since 2013.11
+	 */
+	mw.ime.handleFocus = function ( $input ) {
+		var noImeSelectors;
+
+		if ( $input.is( '.noime' ) || $input.data( 'ime' ) ) {
+			// input does not need IME or already applied
+			return;
+		}
+
+		noImeSelectors = mw.config.get( 'wgULSNoImeSelectors' ).join( ', ' );
+		if ( noImeSelectors.length && $input.is( noImeSelectors ) ) {
+			$input.addClass( 'noime' );
 
 			return;
 		}
 
-			mw.ime.init();
-
-			if ( $input.is( '.noime' ) || !$.ime.preferences.isEnabled() ) {
+		if ( !$.ime.preferences.isEnabled() ) {
 			return;
 		}
 
 		if ( $input.is( '[contenteditable]' ) && !window.rangy ) {
-				// for supporting content editable divs we need rangy library
+			// For supporting content editable divs we need rangy library
 			mw.loader.using( 'rangy.core', function () {
-					$input.trigger( 'focus' );
+				mw.ime.addIme( $input );
 			} );
 
 			return;
 		}
 
-			if ( noImeSelector.length && $input.is( noImeSelector ) ) {
-				$input.addClass( 'noime' );
-				return;
-			}
+		mw.ime.addIme( $input );
+	};
+
+	/**
+	 * Just adds ime menu to any input element.
+	 * @param {jquery.Element} $input
+	 * @since 2013.11
+	 */
+	mw.ime.addIme = function ( $input ) {
+		var imeselector;
 
 		$input.ime( {
 			languages: mw.ime.getIMELanguageList(),
@@ -274,15 +295,8 @@
 				mw.hook( 'mw.uls.ime.change' ).fire( inputMethod );
 			} );
 		}
-		} );
 	};
 
-	$( document ).ready( function () {
-		mw.uls.init( function () {
-			mw.ime.setup();
-		} );
-	} );
-
 	function imeNotification() {
 		var notificationMsg = ( mw.config.get( 'wgULSPosition' ) === 'personal' ) ?
 				'ext-uls-input-disable-notification-info-personal' :

resources/js/ext.uls.interface.js

@@ -297,6 +297,7 @@
 				rtlPage = $( 'body' ).hasClass( 'rtl' ),
 				anonMode = ( mw.user.isAnon() &&
 					!mw.config.get( 'wgULSAnonCanChangeLanguage' ) ),
+				imeSelector = mw.config.get( 'wgULSImeSelectors' ).join( ', ' ),
 				ulsPosition = mw.config.get( 'wgULSPosition' );
 
 			if ( ulsPosition === 'interlanguage' ) {
@@ -445,6 +446,15 @@
 				} );
 
 			showULSTooltip();
+
+			$( 'body' ).on( 'focus.imeinit', imeSelector, function () {
+				var $input = $( this );
+				$( 'body' ).off( '.imeinit' );
+				mw.loader.using( 'ext.uls.ime', function () {
+					mw.ime.setup();
+					mw.ime.handleFocus( $input );
+				} );
+			} );
 		} );
 	} );
 }( jQuery, mediaWiki ) );