From 02e938af1c9a4e3aaa6294a3c0ce1b60e0821c3a Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Thu, 22 Jun 2017 23:56:00 -0700
Subject: [PATCH] Factor out byte limit label logic from edit page to utility
 function

Other input widgets have byte limits and may want to display the counter.

Change-Id: I61b72ab75007d80b9e0bba0f391c88cbac2bce3d
---
 resources/Resources.php                       | 11 ++++++++++
 .../mediawiki.action/mediawiki.action.edit.js | 10 +--------
 .../mediawiki.widgets.visibleByteLimit.js     | 21 +++++++++++++++++++
 3 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 resources/src/mediawiki.widgets.visibleByteLimit/mediawiki.widgets.visibleByteLimit.js

diff --git a/resources/Resources.php b/resources/Resources.php
index 5443a3a466..f398b54a58 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1418,6 +1418,7 @@ return [
 			'jquery.accessKeyLabel',
 			'jquery.textSelection',
 			'jquery.byteLimit',
+			'mediawiki.widgets.visibleByteLimit',
 			'mediawiki.api',
 		],
 	],
@@ -2372,6 +2373,16 @@ return [
 		],
 		'targets' => [ 'desktop', 'mobile' ],
 	],
+	'mediawiki.widgets.visibleByteLimit' => [
+		'scripts' => [
+			'resources/src/mediawiki.widgets.visibleByteLimit/mediawiki.widgets.visibleByteLimit.js'
+		],
+		'dependencies' => [
+			'oojs-ui-core',
+			'jquery.byteLimit'
+		],
+		'targets' => [ 'desktop', 'mobile' ]
+	],
 	'mediawiki.widgets.datetime' => [
 		'scripts' => [
 			'resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.js',
diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.js b/resources/src/mediawiki.action/mediawiki.action.edit.js
index 8cde703e74..5b810174bf 100644
--- a/resources/src/mediawiki.action/mediawiki.action.edit.js
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.js
@@ -27,18 +27,10 @@
 				// TODO: This should be an OOjs UI feature, or somehow happen automatically after infusing.
 				wpSummary.$input.updateTooltipAccessKeys();
 
-				// Make sure edit summary does not exceed byte limit
-				wpSummary.$input.byteLimit( 255 );
-
 				// Show a byte-counter to users with how many bytes are left for their edit summary.
 				// TODO: This looks a bit weird, as there is no unit in the UI, just numbers; showing
 				// 'bytes' confused users in testing, and showing 'chars' would be a lie. See T42035.
-				function updateSummaryLabelCount() {
-					wpSummary.setLabel( String( 255 - $.byteLength( wpSummary.getValue() ) ) );
-				}
-				wpSummary.on( 'change', updateSummaryLabelCount );
-				// Initialise value
-				updateSummaryLabelCount();
+				mw.widgets.visibleByteLimit( wpSummary, 255 );
 			} );
 		} else {
 			// Make sure edit summary does not exceed byte limit
diff --git a/resources/src/mediawiki.widgets.visibleByteLimit/mediawiki.widgets.visibleByteLimit.js b/resources/src/mediawiki.widgets.visibleByteLimit/mediawiki.widgets.visibleByteLimit.js
new file mode 100644
index 0000000000..5678a80efd
--- /dev/null
+++ b/resources/src/mediawiki.widgets.visibleByteLimit/mediawiki.widgets.visibleByteLimit.js
@@ -0,0 +1,21 @@
+/**
+ * Add a visible byte limit label to a TextInputWidget
+ *
+ * Uses jQuery.byteLimit to enforce the limit.
+
+ * @param {OO.ui.TextInputWidget} textInputWidget Text input widget
+ * @param {number} [limit] Byte limit, defaults to $input's maxlength
+ */
+mediaWiki.widgets.visibleByteLimit = function ( textInputWidget, limit ) {
+	limit = limit || +textInputWidget.$input.attr( 'maxlength' );
+
+	function updateCount() {
+		textInputWidget.setLabel( ( limit - $.byteLength( textInputWidget.getValue() ) ).toString() );
+	}
+	textInputWidget.on( 'change', updateCount );
+	// Initialise value
+	updateCount();
+
+	// Actually enforce limit
+	textInputWidget.$input.byteLimit( limit );
+};
-- 
2.20.1