From 6634ff729dc7f6d0f541639dbdf3c4d9f786ddf6 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Tue, 7 Nov 2017 15:33:03 +0000
Subject: [PATCH] Preferences: Show preview of edit fonts in edit font selector

Change-Id: Iae63b69940485165b660f51deb864979aefb8cd0
---
 resources/Resources.php                       |  1 +
 .../mediawiki.special.preferences.editfont.js | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 resources/src/mediawiki.special/mediawiki.special.preferences.editfont.js

diff --git a/resources/Resources.php b/resources/Resources.php
index 479ade04fe..dcf2f9ba9e 100644
--- 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
index 0000000000..fe48886027
--- /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 ) );
-- 
2.20.1