Add a byte counter to the edit page's summary field

Blocked on T165866 as otherwise the rendering is broken.

Bug: T165856
Change-Id: I84213e6c134f55597340e77876f69063a37ed0a5

diff --git a/resources/src/mediawiki.action/mediawiki.action.edit.js b/resources/src/mediawiki.action/mediawiki.action.edit.js
index 4911fb9..7e2ee5e 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.edit.js
+++ b/resources/src/mediawiki.action/mediawiki.action.edit.js
@@ -24,6 +24,23 @@
                // OO.ui.infuse( 'wpSummary' ).$input.byteLimit( 255 );
                $( '#wpSummary' ).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.
+               if ( $( '#editform' ).hasClass( 'mw-editform-ooui' ) ) {
+                       mw.loader.using( 'oojs-ui-core' ).then( function () {
+                               var wpSummary = OO.ui.infuse( $( '#wpSummaryWidget' ) );
+
+                               function updateSummaryLabelCount() {
+                                       wpSummary.setLabel( String( 255 - $.byteLength( wpSummary.getValue() ) ) );
+                               }
+
+                               wpSummary.on( 'change', updateSummaryLabelCount );
+                               // Initialise value
+                               updateSummaryLabelCount();
+                       } );
+               }
+
                // Restore the edit box scroll state following a preview operation,
                // and set up a form submission handler to remember this state.
                editBox = document.getElementById( 'wpTextbox1' );