/*!
* ULS-based display settings panel
*
* 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 template = '
' +
// Tab switcher buttons
'
' +
'
' +
'
' +
'' +
'' +
'
' +
'
' +
'
' +
// Begin display language sub-panel
'
' +
// "Display language", title above the buttons row
'
' +
'
' +
'' +
'
' +
'
' +
// UI languages buttons row
'
' +
'
' +
'' +
'
' +
'
' +
// End display language section
'
' +
// Begin font settings section, hidden by default
'
' +
// "Font settings" title
'
' +
'
' +
'' +
'
' +
'
' +
'
' +
// Menus font selection dropdown with label
'
' +
'
' +
'' +
'
' +
'' +
'
' +
// Content font selection dropdown with label
'
' +
'
' +
'' +
'
' +
'' +
'
' +
// End font selectors
'
' +
// Webfonts enabling checkbox with label
'
' +
'
' +
'
' +
'' +
'' +
'
' +
'
' +
'
' +
// End font settings section
'
';
function DisplaySettings( $parent ) {
this.nameI18n = 'ext-uls-display-settings-title-short';
this.descriptionI18n = 'ext-uls-display-settings-desc';
this.$template = $( template );
this.uiLanguage = this.getUILanguage();
this.contentLanguage = this.getContentLanguage();
this.$webfonts = null;
this.$parent = $parent;
this.savedRegistry = $.extend( true, {}, mw.webfonts.preferences );
}
DisplaySettings.prototype = {
constructor: DisplaySettings,
/**
* Render the module into a given target
*/
render: function () {
this.$parent.$settingsPanel.empty();
this.$webfonts = $( 'body' ).data( 'webfonts' );
this.$parent.$settingsPanel.append( this.$template );
this.prepareLanguages();
this.prepareUIFonts();
this.prepareContentFonts();
this.prepareWebfontsCheckbox();
// Usually this is already loaded, but when changing language it
// might not be.
this.preview( this.uiLanguage );
this.listen();
this.dirty = false;
},
prepareWebfontsCheckbox: function () {
var webFontsEnabled = this.isWebFontsEnabled();
if ( !webFontsEnabled ) {
$( '#uls-display-settings-font-selectors' ).addClass( 'hide' );
}
$( '#webfonts-enable-checkbox' ).prop( 'checked', webFontsEnabled );
},
isWebFontsEnabled: function () {
return mw.webfonts.preferences.isEnabled();
},
/**
* Prepare the UI language selector
*/
prepareLanguages: function () {
var $loginCta,
displaySettings = this,
SUGGESTED_LANGUAGES_NUMBER = 3,
anonsAllowed = mw.config.get( 'wgULSAnonCanChangeLanguage' ),
languagesForButtons, $languages, suggestedLanguages,
lang, i, language, $button, autonym;
// Don't let anonymous users change interface language
if ( !anonsAllowed && mw.user.isAnon() ) {
$loginCta = $( '
' ).append(
$( '' )
.addClass( 'uls-display-settings-anon-label' )
// .html() is needed for correct parsing of the nbsp
.html( $.i18n( 'ext-uls-display-settings-anon-label' ) + ' ' ),
$( '' )
.text( $.i18n( 'ext-uls-display-settings-anon-same-as-content', autonym ) )
),
$loginCta
);
new mw.Api().parse( $.i18n( 'ext-uls-display-settings-anon-log-in-cta' ) )
.done( function ( parsedCta ) {
var deferred = new $.Deferred();
$loginCta.html( parsedCta ); // The parsed CTA is HTML
$loginCta.find( 'a' ).on( 'click', function ( event ) {
event.preventDefault();
// Because browsers navigate away when clicking a link,
// we are overriding the normal click behavior to allow
// the event be logged first - currently there is no
// local queue for events. Since the hook system does not
// allow returning values, we have this ugly hack
// for event logging to delay the page loading if event logging
// is enabled. The promise is passed to the hook, so that
// if event logging is enabled, in can resole the promise
// immediately to avoid extra delays.
deferred.done( function () {
window.location.href = event.target.href;
} );
mw.hook( 'mw.uls.login.click' ).fire( deferred );
// Delay is zero if event logging is not enabled
window.setTimeout( function () {
deferred.resolve();
}, mw.config.get( 'wgULSEventLogging' ) * 500 );
} );
} );
return;
}
$languages = this.$template.find( 'div.uls-ui-languages' );
suggestedLanguages = this.frequentLanguageList()
// Common world languages, for the case that there are
// too few suggested languages
.concat( [ 'en', 'zh', 'fr' ] );
// Content language is always on the first button
languagesForButtons = [ this.contentLanguage ];
// This is needed when drawing the panel for the second time
// after selecting a different language
$languages.find( 'button' ).remove();
// UI language must always be present
if ( this.uiLanguage !== this.contentLanguage ) {
languagesForButtons.push( this.uiLanguage );
}
for ( lang in suggestedLanguages ) {
// Skip already found languages
if ( languagesForButtons.indexOf( suggestedLanguages[ lang ] ) > -1 ) {
continue;
}
languagesForButtons.push( suggestedLanguages[ lang ] );
// No need to add more languages than buttons
if ( languagesForButtons.length >= SUGGESTED_LANGUAGES_NUMBER ) {
break;
}
}
function buttonHandler( button ) {
return function () {
displaySettings.markDirty();
displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage;
$( 'div.uls-ui-languages button.mw-ui-button' ).removeClass( 'mw-ui-pressed' );
button.addClass( 'mw-ui-pressed' );
displaySettings.prepareUIFonts();
displaySettings.preview( displaySettings.uiLanguage );
};
}
// Add the buttons for the most likely languages
for ( i = 0; i < SUGGESTED_LANGUAGES_NUMBER; i++ ) {
language = languagesForButtons[ i ];
$button = $( '