From f5ce066c803d757641ce7674800f1db283544dc7 Mon Sep 17 00:00:00 2001 From: Santhosh Thottingal Date: Wed, 6 Nov 2013 12:15:29 +0530 Subject: [PATCH] Lazyload jquery.uls library In the "interlanguage" position ULS is shown after 2 clicks, so don't load it initially. In the "personal" position ULS is shown immediately after the language icon click, so load it, but conditionally. The new RL module ext.uls.mediawiki is added for setting jquery.uls defaults in a way that will lazy-load the language names. Change-Id: Ic33ef034c794a523b5403867196c6098a58eb5b1 --- Resources.php | 23 ++++++++++--- resources/css/ext.uls.css | 13 ++++++++ resources/js/ext.uls.init.js | 20 ----------- resources/js/ext.uls.interface.js | 41 ++++++++++++----------- resources/js/ext.uls.languagesettings.js | 18 ++++++++-- resources/js/ext.uls.mediawiki.js | 42 ++++++++++++++++++++++++ 6 files changed, 110 insertions(+), 47 deletions(-) create mode 100644 resources/js/ext.uls.mediawiki.js diff --git a/Resources.php b/Resources.php index 3b82f814..96a92f92 100644 --- a/Resources.php +++ b/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; diff --git a/resources/css/ext.uls.css b/resources/css/ext.uls.css index 7eaac41a..f6951b90 100644 --- a/resources/css/ext.uls.css +++ b/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; } diff --git a/resources/js/ext.uls.init.js b/resources/js/ext.uls.init.js index 42b4b554..cb08fc43 100644 --- a/resources/js/ext.uls.init.js +++ b/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 { diff --git a/resources/js/ext.uls.interface.js b/resources/js/ext.uls.interface.js index 93d9b072..93be87f7 100644 --- a/resources/js/ext.uls.interface.js +++ b/resources/js/ext.uls.interface.js @@ -407,29 +407,32 @@ mw.hook( 'mw.uls.settings.open' ).fire( eventParams && eventParams.source || 'personal' ); } } else { - $ulsTrigger.uls( { - quickList: function () { - return mw.uls.getFrequentLanguageList(); - }, - onReady: function () { - var uls = this; - mw.loader.using( mw.uls.languageSettingsModules, function () { - addDisplaySettings( uls ); - addInputSettings( uls ); - } ); - }, - onSelect: function ( language ) { - mw.uls.changeLanguage( language ); - }, - onVisible: function () { - mw.uls.addEventLoggingTriggers(); - } - } ).trigger( 'click', eventParams ); + mw.loader.using( 'ext.jquery.uls', function () { + $ulsTrigger.uls( { + quickList: function () { + return mw.uls.getFrequentLanguageList(); + }, + onReady: function () { + var uls = this; + mw.loader.using( mw.uls.languageSettingsModules, function () { + addDisplaySettings( uls ); + addInputSettings( uls ); + } ); + }, + onSelect: function ( language ) { + mw.uls.changeLanguage( language ); + }, + onVisible: function () { + mw.uls.addEventLoggingTriggers(); + } + } ).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 ); diff --git a/resources/js/ext.uls.languagesettings.js b/resources/js/ext.uls.languagesettings.js index 38f1ad38..153d5542 100644 --- a/resources/js/ext.uls.languagesettings.js +++ b/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 ); }, /** diff --git a/resources/js/ext.uls.mediawiki.js b/resources/js/ext.uls.mediawiki.js new file mode 100644 index 00000000..3e32e837 --- /dev/null +++ b/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 ) );