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

Add font selection functionality to the elements

Browse Source 
* Disable the font selection dropdown if the checkbox is unchecked.
* Apply the font from the dropdown to the window.

Change-Id: I8e3f52dfb2f772fc8a2b8b18e0639ad802e8770e
This commit is contained in:
Amir E. Aharoni
2012-08-17 20:37:59 +03:00
committed by Santhosh Thottingal
parent cacef09c6f
commit fd1cbea69a
1 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -76,13 +76,18 @@
}, },
prepareWebfontsCheckbox: function () { prepareWebfontsCheckbox: function () {
var enable = this.webfontPreferences.get( 'webfontsEnabled' ); $( '#webfonts-enable-checkbox' ).prop( 'checked', this.isWebFontsEnabled() );
},
isWebFontsEnabled: function () {
var enable = this.webfontPreferences.get( 'webfonts-enabled' );
// If the user didn't use the checkbox, the preference will be undefined. // If the user didn't use the checkbox, the preference will be undefined.
// The default for now is to enable webfonts if the user didn't select anything. // The default for now is to enable webfonts if the user didn't select anything.
if ( enable === undefined ) { if ( enable === undefined ) {
enable = true; enable = true;
} }
this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked', enable ); return enable;
}, },
/** /**
@@ -127,6 +132,7 @@
var $moreLanguagesButton = $( '<button>' ) var $moreLanguagesButton = $( '<button>' )
.prop( 'id', 'uls-more-languages' ) .prop( 'id', 'uls-more-languages' )
.addClass( 'button' ).text( '...' ); .addClass( 'button' ).text( '...' );
$languages.append( $moreLanguagesButton ); $languages.append( $moreLanguagesButton );
// Show the long language list to select a language for display settings // Show the long language list to select a language for display settings
$moreLanguagesButton.uls( { $moreLanguagesButton.uls( {
@@ -193,6 +199,8 @@
} ); } );
} }
$fontSelector.prop( "disabled", !this.isWebFontsEnabled() );
var $systemFont = $( "<option>" ).val( 'system' ).text( 'System font' ); var $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 );
@@ -212,12 +220,13 @@
* Register general event listeners * Register general event listeners
*/ */
listen: function () { listen: function () {
var that = this; var that = this,
$fontSelector = $( "select.uls-font-select" );
this.$template.find( "div.uls-ui-languages button.button" ).click( function () { this.$template.find( "div.uls-ui-languages button.button" ).click( function () {
$( "div.uls-ui-languages button.button" ).removeClass( "down" ); $( "div.uls-ui-languages button.button" ).removeClass( "down" );
$( this ).addClass( "down" ); $( this ).addClass( "down" );
that.language = $( this ).data( 'language' ) || that.language; that.language = $( this ).data( "language" ) || that.language;
that.prepareFonts(); that.prepareFonts();
} ); } );
@@ -227,18 +236,33 @@
this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () { this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () {
if ( this.checked ) { if ( this.checked ) {
$fontSelector.prop( "disabled", false );
that.$webfonts.apply( that.selectedFont() ); that.$webfonts.apply( that.selectedFont() );
} else { } else {
$fontSelector.prop( "disabled", true );
that.$webfonts.reset(); that.$webfonts.reset();
} }
} ); } );
this.$template.find( 'button#uls-more-languages').on( 'click', function () { this.$template.find( 'button#uls-more-languages').on( 'click', function () {
that.$parent.hide(); that.$parent.hide();
} ); } );
}, $fontSelector.on( "change", function () {
var font = that.selectedFont();
// Update the font of the current display settings window
// if the current UI language match with language selection,
// or reset it if the system font was selected.
if ( that.language === that.currentLanguage() ) {
if ( font === 'system' ) {
that.$webfonts.reset();
} else {
that.$webfonts.apply( font, that.$template );
}
}
} );
},
/** /**
* Change the language of wiki using setlang URL parameter * Change the language of wiki using setlang URL parameter
* @param {String} language * @param {String} language
@@ -285,7 +309,7 @@
// Save the preferences // Save the preferences
this.webfontPreferences.set( this.language, font ); this.webfontPreferences.set( this.language, font );
this.webfontPreferences.set( 'webfontsEnabled', this.webfontPreferences.set( 'webfonts-enabled',
this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false ); this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false );
this.webfontPreferences.save( function ( result ) { this.webfontPreferences.save( function ( result ) {
// closure for not losing the scope // closure for not losing the scope