bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(bug 40693) Refactor font selector creation code

Browse Source 
Change-Id: Id9560ad326cbd5202553da872b5fb0254c074109
This commit is contained in:
Amir E. Aharoni
2012-10-18 17:37:35 +02:00
committed by Gerrit Code Review
parent 10279414ed
commit 98bb1c200c
1 changed files with 50 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
resources/js/ext.uls.displaysettings.js
View File

@@ -277,28 +277,39 @@
}, },
/** /**
* Prepare the font selector for UI language. * Prepare a font selector section with a label and a selector element.
* TODO Can this be merged with prepareContentLanguages? *
* @param target String 'ui' or 'content'
*/ */
prepareUIFonts: function () { prepareFontSelector: function ( target ) {
var fonts, $fontSelector, savedFont, $systemFont, $fontLabel, $uiFonts; var language, fonts, $fontSelector, savedFont, $systemFont, $fontLabel, $fontsSection;
fonts = this.$webfonts.list( this.uiLanguage ); // Get the language code from the right property -
$uiFonts = this.$template.find( 'div.uls-ui-fonts' ); // uiLanguage or contentLanguage
language = this[ target + 'Language' ];
fonts = this.$webfonts.list( language );
// Possible classes:
// uls-ui-fonts
// uls-content-fonts
$fontsSection = this.$template.find( 'div.uls-' + target + '-fonts' );
if ( this.uiLanguage === this.contentLanguage || fonts.length === 0 ) { // The section may be visible from the previous time
$uiFonts.hide(); // the user opened the dialog, so we need to hide it.
if ( fonts.length === 0 ) {
$fontsSection.hide();
return; return;
} else {
$uiFonts.show();
} }
$fontSelector = this.$template.find( 'select#ui-font-selector' ); $fontsSection.show();
// Possible ids:
// uls-ui-font-selector
// uls-content-font-selector
$fontSelector = this.$template.find( '#' + target + '-font-selector' );
// Remove all current fonts
$fontSelector.find( 'option' ).remove(); $fontSelector.find( 'option' ).remove();
savedFont = mw.webfonts.preferences.getFont( this.uiLanguage );
if ( fonts && fonts.length ) { savedFont = mw.webfonts.preferences.getFont( this.uiLanguage );
$.each( fonts, function ( key, font ) { $.each( fonts, function ( key, font ) {
if ( font !== 'system' ) { if ( font !== 'system' ) {
var $fontOption = $( '<option>' ).attr( 'value', font ).text( font ); var $fontOption = $( '<option>' ).attr( 'value', font ).text( font );
@@ -306,20 +317,24 @@
$fontOption.attr( 'selected', savedFont === font ); $fontOption.attr( 'selected', savedFont === font );
} }
} ); } );
}
$fontSelector.prop( 'disabled', !this.isWebFontsEnabled() ); $fontSelector.prop( 'disabled', !this.isWebFontsEnabled() );
$systemFont = $( '<option>' ).val( 'system' ).text( 'System font' ); $systemFont = $( '<option>' ).val( 'system' ).text( 'System font' );
$fontSelector.append( $systemFont ); $fontSelector.append( $systemFont );
$systemFont.attr( 'selected', savedFont === 'system' || !savedFont ); $systemFont.attr( 'selected', savedFont === 'system' || !savedFont );
$fontLabel = this.$template.find( 'label#ui-font-selector-label' ); // Possible ids:
// uls-ui-font-selector-label
// uls-content-font-selector-label
$fontLabel = this.$template.find( '#' + target + '-font-selector-label' );
$fontLabel.html( '<strong>' $fontLabel.html( '<strong>'
+ $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.getAutonym( this.uiLanguage ) ) + $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.getAutonym( language ) )
+ '</strong>' + '</strong>'
+ '<div>' + '<div>'
+ $.i18n( 'ext-uls-webfonts-select-for-ui-info' ) // Possible messages:
// ext-uls-webfonts-select-for-ui-info
// ext-uls-webfonts-select-for-content-info
+ $.i18n( 'ext-uls-webfonts-select-for-' + target + '-info' )
+ '</div>' + '</div>'
); );
}, },
@@ -327,51 +342,20 @@
/** /**
* Prepare the font selector for UI language. * Prepare the font selector for UI language.
*/ */
prepareContentFonts: function () { prepareUIFonts: function () {
var fonts, $fontSelector, savedFont, $systemFont, $contentFonts, $fontLabel; if ( this.uiLanguage === this.contentLanguage ) {
this.$template.find( 'div.uls-ui-fonts' ).hide();
fonts = this.$webfonts.list( this.contentLanguage );
$contentFonts = this.$template.find( 'div.uls-content-fonts' );
if ( fonts.length === 0 ) {
$contentFonts.hide();
return; return;
} else {
$contentFonts.show();
} }
$fontSelector = this.$template.find( '#content-font-selector' ); this.prepareFontSelector( 'ui' );
},
fonts = this.$webfonts.list( this.contentLanguage ); /**
$fontSelector = this.$template.find( '#content-font-selector' ); * Prepare the font selector for UI language.
*/
$fontSelector.find( 'option' ).remove(); prepareContentFonts: function () {
savedFont = mw.webfonts.preferences.getFont( this.contentLanguage ); this.prepareFontSelector( 'content' );
if ( fonts && fonts.length ) {
$.each( fonts, function ( key, font ) {
if ( font !== 'system' ) {
var $fontOption = $( '<option>' ).attr( 'value', font ).text( font );
$fontSelector.append( $fontOption );
$fontOption.attr( 'selected', savedFont === font );
}
} );
}
$fontSelector.prop( 'disabled', !this.isWebFontsEnabled() );
$systemFont = $( '<option>' ).val( 'system' ).text( 'System font' );
$fontSelector.append( $systemFont );
$systemFont.attr( 'selected', savedFont === 'system' || !savedFont );
$fontLabel = this.$template.find( '#content-font-selector-label' );
$fontLabel.html( '<strong>'
+ $.i18n( 'ext-uls-webfonts-select-for', $.uls.data.getAutonym( this.contentLanguage ) )
+ '</strong>'
+ '<div>'
+ $.i18n( 'ext-uls-webfonts-select-for-content-info' )
+ '</div>'
);
}, },
/** /**