As a precursor to incorporating a new language switcher in the new version of Vector I'd like to improve the performance of loading the switcher. It seems most code can be deferred until the language selector button is clicked. This shaves around 30kb of resources off the critical path for most users. There's potential here for a positive performance impact so we should follow up the deployment by checking the associated performance graphs to see if there's improvement. Note, if the compact personal links feature is enabled there is no performance saving for now. This will be addressed in follow ups. Bug: T153844 Bug: T153845 Bug: T237061 Change-Id: I740600d18859422b2f98a5ef92d0321f6e9615a2
146 lines
4.0 KiB
JavaScript
146 lines
4.0 KiB
JavaScript
/*!
|
|
* ULS-Webfonts integration
|
|
*
|
|
* Copyright (C) 2012 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 () {
|
|
'use strict';
|
|
|
|
var ulsPreferences;
|
|
|
|
mw.webfonts = mw.webfonts || {};
|
|
ulsPreferences = mw.uls.preferences();
|
|
mw.webfonts.preferences = {
|
|
registry: {
|
|
fonts: {},
|
|
webfontsEnabled: mw.config.get( 'wgULSWebfontsEnabled' )
|
|
},
|
|
|
|
isEnabled: function () {
|
|
return this.registry.webfontsEnabled;
|
|
},
|
|
|
|
enable: function () {
|
|
this.registry.webfontsEnabled = true;
|
|
},
|
|
|
|
disable: function () {
|
|
this.registry.webfontsEnabled = false;
|
|
},
|
|
|
|
setFont: function ( language, font ) {
|
|
this.registry.fonts[ language ] = font;
|
|
},
|
|
|
|
getFont: function ( language ) {
|
|
return this.registry.fonts[ language ];
|
|
},
|
|
|
|
save: function ( callback ) {
|
|
// get updated copy of preferences
|
|
ulsPreferences = mw.uls.preferences();
|
|
ulsPreferences.set( 'webfonts', this.registry );
|
|
ulsPreferences.save( callback );
|
|
},
|
|
|
|
load: function () {
|
|
mw.webfonts.preferences.registry = $.extend( this.registry,
|
|
ulsPreferences.get( 'webfonts' ) );
|
|
}
|
|
};
|
|
|
|
mw.webfonts.setup = function () {
|
|
// Initialize webfonts
|
|
var mediawikiFontRepository = $.webfonts.repository;
|
|
|
|
mediawikiFontRepository.base = mw.config.get( 'wgULSFontRepositoryBasePath' );
|
|
|
|
// MediaWiki specific overrides for jquery.webfonts
|
|
$.extend( $.fn.webfonts.defaults, {
|
|
repository: mediawikiFontRepository,
|
|
fontStack: $( document.body ).css( 'font-family' ).split( /, /g ),
|
|
/**
|
|
* Returns a suitable font from font repository based
|
|
* on the given language and html classes and user preference.
|
|
*
|
|
* @param {Object} repository
|
|
* @param {string} language
|
|
* @param {string[]} classes
|
|
* @return {string|null}
|
|
*/
|
|
fontSelector: function ( repository, language, classes ) {
|
|
var font, defaultFont;
|
|
|
|
if ( !language ) {
|
|
return null;
|
|
}
|
|
|
|
defaultFont = repository.defaultFont( language );
|
|
|
|
if ( classes && classes.indexOf( 'autonym' ) >= 0 ) {
|
|
// Do not load font for showing autonym.
|
|
return null;
|
|
}
|
|
|
|
// If the user has a font preference, apply it always.
|
|
font = mw.webfonts.preferences.getFont( language ) || defaultFont;
|
|
if ( !font || font === 'system' ) {
|
|
// Avoid setting 'system' as a font in css
|
|
return null;
|
|
}
|
|
|
|
return font;
|
|
},
|
|
|
|
exclude: ( function () {
|
|
var excludes = mw.config.get( 'wgULSNoWebfontsSelectors' ).join( ', ' );
|
|
|
|
if ( mw.user.options.get( 'editfont' ) !== 'default' ) {
|
|
// Exclude textboxes from webfonts if the user has edit area font option
|
|
// set using 'Preferences' page
|
|
excludes = excludes ? excludes + ',textarea' : 'textarea';
|
|
}
|
|
|
|
return excludes;
|
|
}() ),
|
|
overridableFontFamilies: ( function () {
|
|
var headingFont = $( 'h1' ).css( 'font-family' );
|
|
return headingFont ? [ headingFont ] : [];
|
|
}() )
|
|
} );
|
|
|
|
// Execute after task queue is processed so that the rendering is complete.
|
|
// This is important because webfonts behavior depends on the font-family
|
|
// property values set by stylesheets.
|
|
setTimeout( function () {
|
|
$( document.body ).webfonts();
|
|
}, 0 );
|
|
};
|
|
|
|
$( function () {
|
|
mw.webfonts.preferences.load();
|
|
|
|
if ( mw.webfonts.preferences.isEnabled() ) {
|
|
// Queue to next idle period to optimize loading.
|
|
mw.requestIdleCallback( function () {
|
|
mw.loader.using( 'ext.uls.webfonts.fonts' ).then( mw.webfonts.setup );
|
|
} );
|
|
}
|
|
} );
|
|
|
|
}() );
|