Other input widgets have byte limits and may want to display the counter.
Change-Id: I61b72ab75007d80b9e0bba0f391c88cbac2bce3d
'jquery.accessKeyLabel',
'jquery.textSelection',
'jquery.byteLimit',
+ 'mediawiki.widgets.visibleByteLimit',
'mediawiki.api',
],
],
],
'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',
// 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
--- /dev/null
+/**
+ * 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 );
+};