Preferences: Show preview of edit fonts in edit font selector

Change-Id: Iae63b69940485165b660f51deb864979aefb8cd0

diff --git a/resources/Resources.php b/resources/Resources.php
index 479ade0..dcf2f9b 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2087,6 +2087,7 @@ return [
                'scripts' => [
                        'resources/src/mediawiki.special/mediawiki.special.preferences.confirmClose.js',
                        'resources/src/mediawiki.special/mediawiki.special.preferences.convertmessagebox.js',
+                       'resources/src/mediawiki.special/mediawiki.special.preferences.editfont.js',
                        'resources/src/mediawiki.special/mediawiki.special.preferences.tabs.js',
                        'resources/src/mediawiki.special/mediawiki.special.preferences.timezone.js',
                ],

diff --git a/resources/src/mediawiki.special/mediawiki.special.preferences.editfont.js b/resources/src/mediawiki.special/mediawiki.special.preferences.editfont.js
new file mode 100644 (file)
index 0000000..fe48886
--- /dev/null
+++ b/resources/src/mediawiki.special/mediawiki.special.preferences.editfont.js
@@ -0,0 +1,32 @@
+/*!
+ * JavaScript for Special:Preferences: editfont field enhancements.
+ */
+( function ( mw, $ ) {
+       $( function () {
+               var widget, lastValue;
+
+               try {
+                       widget = OO.ui.infuse( $( '#mw-input-wpeditfont' ) );
+               } catch ( err ) {
+                       // This preference could theoretically be disabled ($wgHiddenPrefs)
+                       return;
+               }
+
+               // Style options
+               widget.dropdownWidget.menu.items.forEach( function ( item ) {
+                       item.$label.addClass( 'mw-editfont-' + item.getData() );
+               } );
+
+               function updateLabel( value ) {
+                       // Style selected item label
+                       widget.dropdownWidget.$label
+                               .removeClass( 'mw-editfont-' + lastValue )
+                               .addClass( 'mw-editfont-' + value );
+                       lastValue = value;
+               }
+
+               widget.on( 'change', updateLabel );
+               updateLabel( widget.getValue() );
+
+       } );
+}( mediaWiki, jQuery ) );