Various performance fixes for CompactInterlanguageList

T122341:
* Move hideOriginal() call to right before render() to reduce repaint flash.
* Use plain css() instead of show() and hide().
* Use native getAttribute() instead of jQuery().attr.

Other minor clean up:
* Fix jsduck syntax.
* Consistently use 'location' instead of 'window.location'
  (mostly the case already except for one).

Bug: T122341
Change-Id: Ief76fe7c0fb2bfca3468361ebab14c1dfb1df4c2
This commit is contained in:
Timo Tijhof
2015-12-23 12:46:06 -08:00
committed by Santhosh Thottingal
parent d08ebb9e77
commit 862fafb9ab

View File

@@ -23,7 +23,7 @@
/** /**
* For the given array, remove duplicates * For the given array, remove duplicates
* @param {Array} originalArray * @param {Array} originalArray
* @return de-duplicated array * @return {Array} de-duplicated array
*/ */
function unique( originalArray ) { function unique( originalArray ) {
var uniqueArray = []; var uniqueArray = [];
@@ -56,18 +56,20 @@
* Initialize the plugin * Initialize the plugin
*/ */
init: function () { init: function () {
var max = this.options.max;
this.interlanguageList = this.getInterlanguageList(); this.interlanguageList = this.getInterlanguageList();
this.listSize = this.getListSize(); this.listSize = this.getListSize();
if ( this.listSize <= this.options.max ) { if ( this.listSize <= max ) {
// Not enough languages to compact the list // Not enough languages to compact the list
return; return;
} }
// If the interlanguage list is of moderate size, the compact size is 7. // If we're only a bit beyond max, limit to 7 instead of 9.
this.compactSize = ( this.listSize <= 12 ) ? 7 : this.options.max; // FIXME: This assumes the max is 9.
this.hideOriginal(); this.compactSize = ( this.listSize <= 12 ) ? 7 : max;
this.compactList = this.getCompactList(); this.compactList = this.getCompactList();
this.hideOriginal();
this.render(); this.render();
this.listen(); this.listen();
}, },
@@ -120,7 +122,7 @@
previousLanguages.push( language ); previousLanguages.push( language );
previousLanguages = unique( previousLanguages ); previousLanguages = unique( previousLanguages );
mw.uls.setPreviousLanguages( previousLanguages ); mw.uls.setPreviousLanguages( previousLanguages );
window.location.href = compactLinks.interlanguageList[ language ].href; location.href = compactLinks.interlanguageList[ language ].href;
}, },
onVisible: function () { onVisible: function () {
// Calculate the positioning of the panel // Calculate the positioning of the panel
@@ -153,17 +155,17 @@
* @return {Object} * @return {Object}
*/ */
getCompactList: function () { getCompactList: function () {
var language, languages, compactLanguages, index, var language, languages, compactLanguages, i,
compactedList = {}; compactedList = {};
languages = $.map( this.interlanguageList, function ( element, index ) { languages = $.map( this.interlanguageList, function ( item, languageCode ) {
return index; return languageCode;
} ); } );
compactLanguages = this.compact( languages ); compactLanguages = this.compact( languages );
for ( index = 0; index < compactLanguages.length; index++ ) { for ( i = 0; i < compactLanguages.length; i++ ) {
language = compactLanguages[ index ]; language = compactLanguages[ i ];
compactedList[ language ] = this.interlanguageList[ language ]; compactedList[ language ] = this.interlanguageList[ language ];
} }
@@ -173,27 +175,28 @@
/** /**
* Compact a given array of languages * Compact a given array of languages
* @param {Array} languages * @param {Array} languages
* @return {Array} compacted array * @return {Array} Compacted array
*/ */
compact: function ( languages ) { compact: function ( languages ) {
var compactLanguages = []; var compactLanguages = [];
compactLanguages = compactLanguages.concat(
// Add user-defined assistant languages on wikis with Translate extension. // Add user-defined assistant languages on wikis with Translate extension.
compactLanguages = compactLanguages.concat( this.filterByAssistantLanguages() ); this.filterByAssistantLanguages( languages ),
// Add previously selected languages. // Add previously selected languages.
// Previous languages are always the better suggestion // Previous languages are always the better suggestion
// because the user has explicitly chosen them. // because the user has explicitly chosen them.
compactLanguages = compactLanguages.concat( this.filterByPreviousLanguages() ); this.filterByPreviousLanguages( languages ),
// Add all common languages to the beginning of array. // Add all common languages to the beginning of array.
// These are the most probable languages predicted by ULS. // These are the most probable languages predicted by ULS.
compactLanguages = compactLanguages.concat( this.filterByCommonLanguages( languages ) ); this.filterByCommonLanguages( languages ),
// Finally add the whole languages array too. // Finally add the whole languages array too.
// We will remove duplicates and cut down to required size. // We will remove duplicates and cut down to required size.
compactLanguages = compactLanguages.concat( languages ); languages
);
// Remove duplicates // Remove duplicates
compactLanguages = unique( compactLanguages ); compactLanguages = unique( compactLanguages );
@@ -252,15 +255,13 @@
* by the article and fetch their href. * by the article and fetch their href.
* @return {Object} List of existing language codes and their hrefs * @return {Object} List of existing language codes and their hrefs
*/ */
getInterlanguageList: function getInterlanguageList() { getInterlanguageList: function () {
var interlanguageList = {}; var interlanguageList = {};
this.$interlanguageList.find( 'li.interlanguage-link > a' ).each( function () { this.$interlanguageList.find( 'li.interlanguage-link > a' ).each( function () {
var $this = $( this ); interlanguageList[ this.getAttribute( 'lang' ) ] = {
href: this.getAttribute( 'href' ),
interlanguageList[ $this.attr( 'lang' ) ] = { autonym: $( this ).text()
href: $this.attr( 'href' ),
autonym: $this.text()
}; };
} ); } );
@@ -271,8 +272,8 @@
* Get the size of the interlanguage list * Get the size of the interlanguage list
*/ */
getListSize: function () { getListSize: function () {
return $.map( this.interlanguageList, function ( item, index ) { return $.map( this.interlanguageList, function ( item, languageCode ) {
return index; return languageCode;
} ).length; } ).length;
}, },
@@ -280,7 +281,7 @@
* Hide the original interlanguage list * Hide the original interlanguage list
*/ */
hideOriginal: function () { hideOriginal: function () {
this.$interlanguageList.find( '.interlanguage-link' ).hide(); this.$interlanguageList.find( '.interlanguage-link' ).css( 'display', 'none' );
}, },
/** /**
@@ -305,7 +306,7 @@
* @param {string} language * @param {string} language
*/ */
showLanguage: function ( language ) { showLanguage: function ( language ) {
this.$interlanguageList.find( '.interwiki-' + language ).show(); this.$interlanguageList.find( '.interwiki-' + language ).css( 'display', '' );
} }
}; };
@@ -320,7 +321,8 @@
options = typeof option === 'object' && option; options = typeof option === 'object' && option;
if ( !data ) { if ( !data ) {
$this.data( 'compactinterlanguagelist', ( data = new CompactInterlanguageList( this, options ) ) ); data = new CompactInterlanguageList( this, options );
$this.data( 'compactinterlanguagelist', data );
} }
if ( typeof option === 'string' ) { if ( typeof option === 'string' ) {
@@ -333,7 +335,8 @@
* Defaults * Defaults
*/ */
$.fn.compactInterlanguageList.defaults = { $.fn.compactInterlanguageList.defaults = {
max: 9 // Compact the list to this size // Compact the list to this size
max: 9
}; };
$( document ).ready( function () { $( document ).ready( function () {