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

Allow selection of font for content language

Browse Source 
* One more dropdown for content language( if it differs from UI
  language )
* Save the font preferences for both ui and content language
* many refactoring, variable renaming for this change
* Marked many TODOs and FIXMEs

Change-Id: I93ae5eced5938667af186be51bc8a5b5cd1d7eaf
This commit is contained in:
Santhosh Thottingal
2012-08-20 18:03:43 +05:30
parent 3a351ab478
commit 86952ff9fd
2 changed files with 128 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/css/ext.uls.displaysettings.css
View File

@@ -15,4 +15,21 @@
.uls-ui-languages button#uls-more-languages { .uls-ui-languages button#uls-more-languages {
width: auto; width: auto;
}
.uls-content-fonts,.uls-ui-fonts {
padding-top: 10px;
}
.uls-content-fonts:hover,.uls-ui-fonts:hover {
background-color: #F6F6F6;
}
.uls-font-label strong {
color: #252525;
}
.uls-font-label {
color: #555555;
font-size: 10pt;
} }

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

@@ -35,9 +35,13 @@
+ '</div>' + '</div>'
+ '</div>' + '</div>'
+ '<div class="row"><h5 class="twelve columns">Select your preferred fonts</h5></div>' + '<div class="row"><h5 class="twelve columns">Select your preferred fonts</h5></div>'
+ '<div class="row">' + '<div class="row uls-content-fonts">'
+ '<div class="six columns"><label class="uls-font-label" id="font-selector"></label></div>' + '<div class="six columns"><label class="uls-font-label" id="content-font-selector-label"></label></div>'
+ '<select class="four columns end uls-font-select"></select></div>' + '<select id="content-font-selector" class="four columns end uls-font-select"></select>'
+ '</div>'
+ '<div class="row uls-ui-fonts">'
+ '<div class="six columns"><label class="uls-font-label" id="ui-font-selector-label"></label></div>'
+ '<select id="ui-font-selector" class="four columns end uls-font-select"></select>'
+ '</div>' + '</div>'
+ '<div class="row"></div>' + '<div class="row"></div>'
+ '<div class="row language-settings-buttons">' + '<div class="row language-settings-buttons">'
@@ -51,7 +55,8 @@
this.name = "Display"; this.name = "Display";
this.description = "Set the languages of menus and fonts"; this.description = "Set the languages of menus and fonts";
this.$template = $( template ); this.$template = $( template );
this.language = this.currentLanguage(); this.uiLanguage = this.getUILanguage();
this.contentLanguage = this.getContentLanguage();
this.$webfonts = null; this.$webfonts = null;
this.$parent = $parent; this.$parent = $parent;
this.webfontPreferences = new $.fn.uls.preferences( 'webfonts' ); this.webfontPreferences = new $.fn.uls.preferences( 'webfonts' );
@@ -69,7 +74,8 @@
this.$webfonts = $( 'body' ).data( 'webfonts' ); this.$webfonts = $( 'body' ).data( 'webfonts' );
this.$parent.$settingsPanel.append( this.$template ); this.$parent.$settingsPanel.append( this.$template );
this.prepareLanguages(); this.prepareLanguages();
this.prepareFonts(); this.prepareUIFonts();
this.prepareContentFonts();
this.prepareWebfontsCheckbox(); this.prepareWebfontsCheckbox();
this.listen(); this.listen();
@@ -98,9 +104,9 @@
var $languages = this.$template.find( 'div.uls-ui-languages' ); var $languages = this.$template.find( 'div.uls-ui-languages' );
$languages.empty(); $languages.empty();
var previousLanguages = this.previousLanguages(); var previousLanguages = this.previousLanguages();
var languages = [this.language]; var languages = [this.uiLanguage];
for ( var lang in previousLanguages ) { for ( var lang in previousLanguages ) {
if ( previousLanguages[lang] === this.language ) { if ( previousLanguages[lang] === this.uiLanguage ) {
continue; continue;
} }
languages.push( previousLanguages[lang] ); languages.push( previousLanguages[lang] );
@@ -111,13 +117,16 @@
var $button = $( '<button>' ) var $button = $( '<button>' )
.addClass( 'button uls-language-button' ) .addClass( 'button uls-language-button' )
.text( $.uls.data.autonym( language ) ); .text( $.uls.data.autonym( language ) );
if ( language === this.language ) { if ( language === this.uiLanguage ) {
$button.addClass( 'down' ); $button.addClass( 'down' );
} }
$button.data( 'language', language ); $button.data( 'language', language );
$languages.append( $button ); $languages.append( $button );
$button.on ( 'click', function () { $button.on ( 'click', function () {
that.language = $( this ).data( 'language' ); that.uiLanguage = $( this ).data( "language" ) || that.uiLanguage;
$( "div.uls-ui-languages button.button" ).removeClass( "down" );
$( this ).addClass( "down" );
that.prepareUIFonts();
} ); } );
} }
this.prepareMoreLanguages(); this.prepareMoreLanguages();
@@ -154,12 +163,16 @@
uls.$menu.find( 'div.uls-title' ).append( $back ); uls.$menu.find( 'div.uls-title' ).append( $back );
}, },
onSelect: function( langCode ) { onSelect: function( langCode ) {
that.language = langCode; that.uiLanguage = langCode;
that.$parent.show(); that.$parent.show();
that.prepareFonts(); that.prepareUIFonts();
that.prepareLanguages(); that.prepareLanguages();
} }
} ); } );
$moreLanguagesButton.on( 'click', function () {
that.$parent.hide();
} );
}, },
/** /**
@@ -172,10 +185,10 @@
}, },
/** /**
* Get the current language. * Get the current user interface language.
* @returns String Current language * @returns String Current UI language
*/ */
currentLanguage: function () { getUILanguage: function () {
if ( !window.mw ) { if ( !window.mw ) {
return navigator.language || navigator.userLanguage; return navigator.language || navigator.userLanguage;
} }
@@ -183,14 +196,29 @@
}, },
/** /**
* Prepare the font selector. * Get the current content language.
* @returns String Current content language
*/ */
prepareFonts: function () { getContentLanguage: function () {
var fonts = this.$webfonts.list( this.language ); return mw.config.get( 'wgContentLanguage' );
var $fontSelector = this.$template.find( 'select.uls-font-select' ); },
/**
* Prepare the font selector for UI language.
* TODO Can this be merged with prepareContentLanguages?
*/
prepareUIFonts: function () {
if ( this.uiLanguage === this.contentLanguage ) {
$( 'div.uls-ui-fonts' ).hide();
return;
} else {
$( 'div.uls-ui-fonts' ).show();
}
var fonts = this.$webfonts.list( this.uiLanguage );
var $fontSelector = this.$template.find( 'select#ui-font-selector' );
$fontSelector.find( 'option' ).remove(); $fontSelector.find( 'option' ).remove();
var savedFont = this.webfontPreferences.get( this.language ); var savedFont = this.webfontPreferences.get( this.uiLanguage );
if( fonts && fonts.length ) { if( fonts && fonts.length ) {
$.each( fonts, function ( key, font ) { $.each( fonts, function ( key, font ) {
@@ -206,16 +234,38 @@
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 );
var $fontLabel = $( 'label#font-selector' ); var $fontLabel = this.$template.find( 'label#ui-font-selector-label' );
$fontLabel.text( "Select font for " + $.uls.data.autonym( this.language ) ); $fontLabel.html( "<strong>Select font for " + $.uls.data.autonym( this.uiLanguage )
+ "</strong><div>Used for menus</div>");
}, },
/** /**
* Get the selected font. * Prepare the font selector for UI language.
* @returns String
*/ */
selectedFont: function () { prepareContentFonts: function () {
return this.$template.find( 'select.uls-font-select' ).find( 'option:selected' ).val(); var fonts = this.$webfonts.list( this.contentLanguage );
var $fontSelector = this.$template.find( 'select#content-font-selector' );
$fontSelector.find( 'option' ).remove();
var savedFont = this.webfontPreferences.get( this.contentLanguage );
if( fonts && fonts.length ) {
$.each( fonts, function ( key, font ) {
var $fontOption = $( "<option>" )
.attr( "value", font ).text( font );
$fontSelector.append( $fontOption );
$fontOption.attr( 'selected', savedFont === font );
} );
}
$fontSelector.prop( "disabled", !this.isWebFontsEnabled() );
var $systemFont = $( "<option>" ).val( 'system' ).text( 'System font' );
$fontSelector.append( $systemFont );
$systemFont.attr( 'selected', savedFont === 'system' || !savedFont );
var $fontLabel =this.$template.find( 'label#content-font-selector-label' );
$fontLabel.html( "<strong>Select font for " + $.uls.data.autonym( this.contentLanguage )
+ "</strong><div>Used for content</div>" );
}, },
/** /**
@@ -223,14 +273,9 @@
*/ */
listen: function () { listen: function () {
var that = this, var that = this,
$fontSelector = $( "select.uls-font-select" ); $contentFontSelector = this.$template.find( "select#content-font-selector" ),
$uiFontSelector = this.$template.find( "select#ui-font-selector" );
this.$template.find( "div.uls-ui-languages button.button" ).click( function () { // TODO all these repeated selectors can be placed in object constructor.
$( "div.uls-ui-languages button.button" ).removeClass( "down" );
$( this ).addClass( "down" );
that.language = $( this ).data( "language" ) || that.language;
that.prepareFonts();
} );
this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () { this.$template.find( '#uls-displaysettings-apply' ).on( 'click', function () {
that.apply(); that.apply();
@@ -238,31 +283,35 @@
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 ); $contentFontSelector.prop( "disabled", false );
that.$webfonts.apply( that.selectedFont() ); $uiFontSelector.prop( "disabled", false );
that.$webfonts.apply( $uiFontSelector.find( 'option:selected' ) );
} else { } else {
$fontSelector.prop( "disabled", true ); $contentFontSelector.prop( "disabled", true );
$uiFontSelector.prop( "disabled", true );
that.$webfonts.reset(); that.$webfonts.reset();
} }
} ); } );
this.$template.find( 'button#uls-more-languages').on( 'click', function () {
that.$parent.hide();
} );
$fontSelector.on( "change", function () { $uiFontSelector.on( "change", function () {
var font = that.selectedFont(); var font = $( this ).find( 'option:selected' ).val();
// Update the font of the current display settings window if ( that.uiLanguage === that.getUILanguage() ) {
// 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' ) { if ( font === 'system' ) {
that.$webfonts.reset(); that.$webfonts.reset();
} else { } else {
that.$webfonts.apply( font, that.$template ); that.$webfonts.apply( font );
} }
} }
} ); } );
$contentFontSelector.on( "change", function () {
var font = $( this ).find( 'option:selected' ).val();
if ( font === 'system' ) {
that.$webfonts.reset();
} else {
that.$webfonts.apply( font );
}
} );
}, },
/** /**
@@ -270,7 +319,7 @@
* @param {String} language * @param {String} language
*/ */
changeLanguage: function ( language ) { changeLanguage: function ( language ) {
$.cookie( 'uls-previous-language', this.currentLanguage() ); $.cookie( 'uls-previous-language', this.getUILanguage() );
var uri = new mw.Uri( window.location.href ); var uri = new mw.Uri( window.location.href );
uri.extend( { uri.extend( {
setlang: language setlang: language
@@ -285,8 +334,8 @@
if ( success ) { if ( success ) {
this.$parent.hide(); this.$parent.hide();
// we delay change UI language to here, because it causes a page refresh // we delay change UI language to here, because it causes a page refresh
if ( this.language !== this.currentLanguage() ) { if ( this.uiLanguage !== this.getUILanguage() ) {
this.changeLanguage( this.language ); this.changeLanguage( this.uiLanguage );
} }
} else { } else {
// FIXME failure. what to do?! // FIXME failure. what to do?!
@@ -297,22 +346,27 @@
* Handle the apply button press * Handle the apply button press
*/ */
apply: function () { apply: function () {
var that = this, var that = this;
font = this.selectedFont(); var uiFont = this.$template.find( "select#ui-font-selector" )
.find( 'option:selected' ).val();
var contentFont = this.$template.find( "select#content-font-selector" )
.find( 'option:selected' ).val();
var webfontEnabled = this.$template.find( '#webfonts-enable-checkbox' )
.prop( 'checked' ) ? true : false;
// Live font update if current UI language match with language selection // Live font update if current UI language match with language selection
if ( this.language === this.currentLanguage() ) { if ( ( this.uiLanguage === this.getUILanguage() ) && webfontEnabled ) {
if ( font === 'system' ) { if ( uiFont === 'system' ) {
this.$webfonts.reset(); this.$webfonts.reset();
} else { } else {
this.$webfonts.apply( font ); this.$webfonts.apply( uiFont );
} }
} }
// Save the preferences // Save the preferences
this.webfontPreferences.set( this.language, font ); this.webfontPreferences.set( this.uiLanguage, uiFont );
this.webfontPreferences.set( 'webfonts-enabled', this.webfontPreferences.set( this.contentLanguage, contentFont );
this.$template.find( '#webfonts-enable-checkbox' ).prop( 'checked' ) ? true : false ); this.webfontPreferences.set( 'webfonts-enabled', webfontEnabled );
this.webfontPreferences.save( function ( result ) { this.webfontPreferences.save( function ( result ) {
// closure for not losing the scope // closure for not losing the scope
that.onSave( result ); that.onSave( result );