diff --git a/resources/js/ext.uls.displaysettings.js b/resources/js/ext.uls.displaysettings.js index 5126d092..f5611bbe 100644 --- a/resources/js/ext.uls.displaysettings.js +++ b/resources/js/ext.uls.displaysettings.js @@ -81,7 +81,7 @@ + '
' + ''; @@ -173,6 +173,7 @@ function buttonHandler( button ) { return function () { + displaySettings.enableApplyButton(); displaySettings.uiLanguage = button.data( 'language' ) || displaySettings.uiLanguage; $( 'div.uls-ui-languages button.button' ).removeClass( 'down' ); button.addClass( 'down' ); @@ -237,6 +238,7 @@ .i18n(); }, onSelect: function ( langCode ) { + that.enableApplyButton(); that.uiLanguage = langCode; that.$parent.show(); that.prepareUIFonts(); @@ -357,16 +359,26 @@ this.prepareFontSelector( 'content' ); }, + /** + * Enable the apply button. + * Useful in many places when something changes. + */ + enableApplyButton: function () { + this.$template.find( '#uls-displaysettings-apply' ).removeAttr( 'disabled' ); + }, + /** * Register general event listeners */ listen: function () { - var that = this, $contentFontSelector, $uiFontSelector, oldFont; + var that = this, + $contentFontSelector, $uiFontSelector, + oldFont; $contentFontSelector = this.$template .find( '#content-font-selector' ); $uiFontSelector = this.$template - .find( 'select#ui-font-selector' ); + .find( '#ui-font-selector' ); oldFont = $uiFontSelector.find( 'option:selected' ).val(); @@ -383,6 +395,8 @@ } ); this.$template.find( '#webfonts-enable-checkbox' ).on( 'click', function () { + that.enableApplyButton(); + if ( this.checked ) { mw.webfonts.preferences.enable(); $contentFontSelector.prop( 'disabled', false ); @@ -397,12 +411,14 @@ } ); $uiFontSelector.on( 'change', function () { + that.enableApplyButton(); var font = $( this ).find( 'option:selected' ).val(); mw.webfonts.preferences.setFont( that.uiLanguage, font ); that.$webfonts.refresh(); } ); $contentFontSelector.on( 'change', function () { + that.enableApplyButton(); var font = $( this ).find( 'option:selected' ).val(); mw.webfonts.preferences.setFont( that.contentLanguage, font ); that.$webfonts.refresh();