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,
+			$wgULSAnonCanChangeLanguage, $wgULSEventLogging, $wgULSImeSelectors,
-			$wgULSFontRepositoryBasePath, $wgExtensionAssetsPath;
+			$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,93 +195,107 @@
 		};
 	};
 
+	/**
+	 * Binds the event listeners.
+	 */
 	mw.ime.setup = function () {
+		var imeSelectors = mw.config.get( 'wgULSImeSelectors' ).join( ', ' );
+
 		mw.ime.init();
-		$( 'body' ).on( 'focus.ime', inputSelector, function () {
+		$( 'body' ).on( 'focus.ime', imeSelectors, function () {
-			var imeselector, $input, noImeSelector;
+			mw.ime.handleFocus( $( this ) );
-
-			noImeSelector = mw.config.get( 'wgULSNoImeSelectors' ).join( ', ' );
-			$input = $( this );
-
-			if ( !$.ime ) {
-				mw.loader.using( 'jquery.ime', function () {
-					$input.trigger( 'focus' );
-				} );
-
-				return;
-			}
-
-			mw.ime.init();
-
-			if ( $input.is( '.noime' ) || !$.ime.preferences.isEnabled() ) {
-				return;
-			}
-
-			if ( $input.is( '[contenteditable]' ) && !window.rangy ) {
-				// for supporting content editable divs we need rangy library
-				mw.loader.using( 'rangy.core', function () {
-					$input.trigger( 'focus' );
-				} );
-
-				return;
-			}
-
-			if ( noImeSelector.length && $input.is( noImeSelector ) ) {
-				$input.addClass( 'noime' );
-				return;
-			}
-
-			$input.ime( {
-				languages: mw.ime.getIMELanguageList(),
-				languageSelector: function () {
-					var $ulsTrigger;
-
-					$ulsTrigger = $( '<a>' ).text( '...' )
-						.addClass( 'ime-selector-more-languages selectable-row selectable-row-item' )
-						.attr( {
-							title: $.i18n( 'ext-uls-input-settings-more-languages-tooltip' )
-						} );
-					$ulsTrigger.uls( {
-						onSelect: function ( language ) {
-							$input.data( 'imeselector' ).selectLanguage( language );
-							$input.focus();
-						},
-						languages: mw.ime.getLanguagesWithIME(),
-						top: $input.offset().top
-					} );
-
-					return $ulsTrigger;
-				},
-				helpHandler: function ( ime ) {
-					return $( '<a>' )
-						.attr( {
-							href: mw.msg( 'uls-ime-helppage' ).replace( '$1', ime ),
-							target: '_blank',
-							title: $.i18n( 'ext-uls-ime-help' )
-						} )
-						.addClass( 'ime-perime-help' )
-						.click( function ( event ) {
-							event.stopPropagation();
-						} );
-				}
-			} );
-
-			// Some fields may be uninitialized
-			imeselector = $input.data( 'imeselector' );
-			if ( imeselector ) {
-				imeselector.selectLanguage( imeselector.decideLanguage() );
-				imeselector.$element.on( 'setim.ime', function ( event, inputMethod ) {
-					mw.hook( 'mw.uls.ime.change' ).fire( inputMethod );
-				} );
-			}
 		} );
 	};
 
-	$( document ).ready( function () {
+	/**
-		mw.uls.init( function () {
+	 * Loads necessary dependencies, checks input for validity and
-			mw.ime.setup();
+	 * 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;
+		}
+
+		if ( !$.ime.preferences.isEnabled() ) {
+			return;
+		}
+
+		if ( $input.is( '[contenteditable]' ) && !window.rangy ) {
+			// For supporting content editable divs we need rangy library
+			mw.loader.using( 'rangy.core', function () {
+				mw.ime.addIme( $input );
+			} );
+
+			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(),
+			languageSelector: function () {
+				var $ulsTrigger;
+
+				$ulsTrigger = $( '<a>' ).text( '...' )
+					.addClass( 'ime-selector-more-languages selectable-row selectable-row-item' )
+					.attr( {
+						title: $.i18n( 'ext-uls-input-settings-more-languages-tooltip' )
+					} );
+				$ulsTrigger.uls( {
+					onSelect: function ( language ) {
+						$input.data( 'imeselector' ).selectLanguage( language );
+						$input.focus();
+					},
+					languages: mw.ime.getLanguagesWithIME(),
+					top: $input.offset().top
+				} );
+
+				return $ulsTrigger;
+			},
+			helpHandler: function ( ime ) {
+				return $( '<a>' )
+					.attr( {
+						href: mw.msg( 'uls-ime-helppage' ).replace( '$1', ime ),
+						target: '_blank',
+						title: $.i18n( 'ext-uls-ime-help' )
+					} )
+					.addClass( 'ime-perime-help' )
+					.click( function ( event ) {
+						event.stopPropagation();
+					} );
+			}
 		} );
-	} );
+
+		// Some fields may be uninitialized
+		imeselector = $input.data( 'imeselector' );
+		if ( imeselector ) {
+			imeselector.selectLanguage( imeselector.decideLanguage() );
+			imeselector.$element.on( 'setim.ime', function ( event, inputMethod ) {
+				mw.hook( 'mw.uls.ime.change' ).fire( inputMethod );
+			} );
+		}
+	};
 
 	function imeNotification() {
 		var notificationMsg = ( mw.config.get( 'wgULSPosition' ) === '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 ) );