From 193f69b0177c3498a046f996f61b84319324fbba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niklas=20Laxstr=C3=B6m?= Date: Fri, 1 Nov 2013 12:23:42 +0000 Subject: [PATCH] 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 | 2 +- UniversalLanguageSelector.hooks.php | 5 +- UniversalLanguageSelector.php | 13 ++ resources/js/ext.uls.ime.js | 176 +++++++++++++++------------- resources/js/ext.uls.interface.js | 10 ++ 5 files changed, 122 insertions(+), 84 deletions(-) diff --git a/Resources.php b/Resources.php index 7edce262..f5d4d99c 100644 --- a/Resources.php +++ b/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', diff --git a/UniversalLanguageSelector.hooks.php b/UniversalLanguageSelector.hooks.php index b934477e..cd8be48a 100644 --- a/UniversalLanguageSelector.hooks.php +++ b/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; diff --git a/UniversalLanguageSelector.php b/UniversalLanguageSelector.php index 5334d28c..1dbcd9c5 100644 --- a/UniversalLanguageSelector.php +++ b/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. * diff --git a/resources/js/ext.uls.ime.js b/resources/js/ext.uls.ime.js index 82b76c44..45c9bc9a 100644 --- a/resources/js/ext.uls.ime.js +++ b/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 () { - var imeselector, $input, noImeSelector; - - 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 = $( '' ).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 $( '' ) - .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 ); - } ); - } + $( 'body' ).on( 'focus.ime', imeSelectors, function () { + mw.ime.handleFocus( $( this ) ); } ); }; - $( document ).ready( function () { - mw.uls.init( function () { - mw.ime.setup(); + /** + * 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; + } + + 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 = $( '' ).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 $( '' ) + .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' ) ? diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js index 53a33ff9..93d9b072 100644 --- a/resources/js/ext.uls.interface.js +++ b/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 ) );