resources/src/mediawiki.widgets.visibleLengthLimit/mediawiki.widgets.visibleLengthLimit.js

   1 ( function () {
   2         'use strict';
   3
   4         const { byteLength, codePointLength } = require( 'mediawiki.String' );
   5         const { colonSeparator } = require( './contentMessages.json' );
   6
   7         /**
   8          * @internal
   9          * @param {string} lengthLimiter
  10          * @param {OO.ui.TextInputWidget} textInputWidget
  11          * @param {number} [limit]
  12          * @param {Function} [filterFunction]
  13          */
  14         function internalVisibleLimit( lengthLimiter, textInputWidget, limit, filterFunction ) {
  15                 limit = limit || +textInputWidget.$input.attr( 'maxlength' );
  16                 if ( !filterFunction || typeof filterFunction !== 'function' ) {
  17                         filterFunction = undefined;
  18                 }
  19
  20                 const lengthFunction = lengthLimiter === 'byteLimit' ? byteLength : codePointLength;
  21                 function updateCount() {
  22                         let value = textInputWidget.getValue(),
  23                                 remaining;
  24                         if ( filterFunction ) {
  25                                 value = filterFunction( value );
  26                         }
  27                         remaining = limit - lengthFunction( value );
  28                         if ( remaining > 99 ) {
  29                                 remaining = '';
  30                         } else {
  31                                 remaining = mw.language.convertNumber( remaining );
  32                         }
  33                         textInputWidget.setLabel( remaining );
  34                 }
  35                 textInputWidget.on( 'change', updateCount );
  36                 // Initialise value
  37                 updateCount();
  38
  39                 // Actually enforce limit
  40                 textInputWidget.$input[ lengthLimiter ]( limit, filterFunction );
  41         }
  42
  43         /**
  44          * @internal
  45          * @param {string} lengthLimiter
  46          * @param {OO.ui.TextInputWidget} textInputWidget
  47          * @param {OO.ui.DropdownInputWidget} dropdownInputWidget
  48          * @param {number} [limit]
  49          */
  50         function internalVisibleLimitWithDropdown( lengthLimiter, textInputWidget, dropdownInputWidget, limit ) {
  51                 const filterFunction = function ( input ) {
  52                         let comment = dropdownInputWidget.getValue();
  53                         if ( comment === 'other' ) {
  54                                 comment = input;
  55                         } else if ( input !== '' ) {
  56                                 // Entry from drop down menu + additional comment
  57                                 comment += colonSeparator + input;
  58                         }
  59                         return comment;
  60                 };
  61
  62                 internalVisibleLimit( lengthLimiter, textInputWidget, limit, filterFunction );
  63
  64                 // Keep the remaining counter in sync when reason list changed
  65                 dropdownInputWidget.on( 'change', () => {
  66                         textInputWidget.emit( 'change' );
  67                 } );
  68         }
  69
  70         /**
  71          * Add a visible byte limit label to a TextInputWidget.
  72          *
  73          * Loaded from `mediawiki.widgets.visibleLengthLimit` module.
  74          *
  75          * Uses {@link module:jquery.lengthLimit.$.fn.byteLimit byteLimit} to enforce the limit.
  76          *
  77          * @param {OO.ui.TextInputWidget} textInputWidget
  78          * @param {number} [limit] Byte limit, defaults to input's `maxlength` attribute
  79          * @param {Function} [filterFunction] Function to call on the string before assessing the length
  80          */
  81         mw.widgets.visibleByteLimit = function ( textInputWidget, limit, filterFunction ) {
  82                 internalVisibleLimit( 'byteLimit', textInputWidget, limit, filterFunction );
  83         };
  84
  85         /**
  86          * Add a visible codepoint (character) limit label to a TextInputWidget.
  87          *
  88          * Loaded from `mediawiki.widgets.visibleLengthLimit` module.
  89          *
  90          * Uses {@link module:jquery.lengthLimit.$.fn.codePointLimit codePointLimit} to enforce the limit.
  91          *
  92          * @param {OO.ui.TextInputWidget} textInputWidget
  93          * @param {number} [limit] Code point limit, defaults to input's `maxlength` attribute
  94          * @param {Function} [filterFunction] Function to call on the string before assessing the length
  95          */
  96         mw.widgets.visibleCodePointLimit = function ( textInputWidget, limit, filterFunction ) {
  97                 internalVisibleLimit( 'codePointLimit', textInputWidget, limit, filterFunction );
  98         };
  99
 100         /**
 101          * Add a visible byte limit label to a TextInputWidget, assuming that the value of the
 102          * DropdownInputWidget will be added as a prefix. MediaWiki formats the comment fields for many
 103          * actions that way, e.g. for page deletion.
 104          *
 105          * Loaded from `mediawiki.widgets.visibleLengthLimit` module.
 106          *
 107          * Uses {@link module:jquery.lengthLimit.$.fn.byteLimit byteLimit} to enforce the limit.
 108          *
 109          * @param {OO.ui.TextInputWidget} textInputWidget
 110          * @param {OO.ui.DropdownInputWidget} dropdownInputWidget
 111          * @param {number} [limit] Code point limit, defaults to input's `maxlength` attribute
 112          */
 113         mw.widgets.visibleByteLimitWithDropdown = function ( textInputWidget, dropdownInputWidget, limit ) {
 114                 internalVisibleLimitWithDropdown( 'byteLimit', textInputWidget, dropdownInputWidget, limit );
 115         };
 116
 117         /**
 118          * Add a visible codepoint (character) limit label to a TextInputWidget, assuming that the value
 119          * of the DropdownInputWidget will be added as a prefix. MediaWiki formats the comment fields for
 120          * many actions that way, e.g. for page deletion.
 121          *
 122          * Loaded from `mediawiki.widgets.visibleLengthLimit` module.
 123          *
 124          * Uses {@link module:jquery.lengthLimit.$.fn.codePointLimit codePointLimit} to enforce the limit.
 125          *
 126          * @param {OO.ui.TextInputWidget} textInputWidget
 127          * @param {OO.ui.DropdownInputWidget} dropdownInputWidget
 128          * @param {number} [limit] Code point limit, defaults to input's `maxlength` attribute
 129          */
 130         mw.widgets.visibleCodePointLimitWithDropdown = function ( textInputWidget, dropdownInputWidget, limit ) {
 131                 internalVisibleLimitWithDropdown( 'codePointLimit', textInputWidget, dropdownInputWidget, limit );
 132         };
 133
 134 }() );