resources/src/mediawiki.htmlform/selectandother.js

   1 /*
   2  * HTMLForm enhancements:
   3  * Add a dynamic max length to the reason field of SelectAndOther.
   4  */
   5
   6 // cache the separator to avoid require on each keypress
   7 const colonSeparator = require( './contentMessages.json' ).colonSeparator;
   8
   9 mw.hook( 'htmlform.enhance' ).add( ( $root ) => {
  10         // This checks the length together with the value from the select field
  11         // When the reason list is changed and the bytelimit is longer than the allowed,
  12         // nothing is done
  13         $root
  14                 .find( '.mw-htmlform-select-and-other-field' )
  15                 .each( function () {
  16                         const $this = $( this ),
  17                                 $widget = $this.closest( '.oo-ui-widget[data-ooui]' );
  18                         // find the reason list
  19                         const $reasonList = $root.find( '#' + $this.data( 'id-select' ) );
  20
  21                         if ( $widget.length ) {
  22                                 mw.loader.using( 'mediawiki.widgets.SelectWithInputWidget', () => {
  23                                         const widget = OO.ui.Widget.static.infuse( $widget );
  24                                         const maxlengthUnit = widget.getData().maxlengthUnit;
  25                                         const lengthLimiter = maxlengthUnit === 'codepoints' ?
  26                                                 'visibleCodePointLimitWithDropdown' : 'visibleByteLimitWithDropdown';
  27                                         mw.widgets[ lengthLimiter ]( widget.textinput, widget.dropdowninput );
  28                                 } );
  29                         } else {
  30                                 // cache the current selection to avoid expensive lookup
  31                                 let currentValReasonList = $reasonList.val();
  32
  33                                 $reasonList.on( 'change', () => {
  34                                         currentValReasonList = $reasonList.val();
  35                                 } );
  36
  37                                 // Select the function for the length limit
  38                                 const maxlengthUnit = $this.data( 'mw-maxlength-unit' );
  39                                 const lengthLimiter = maxlengthUnit === 'codepoints' ? 'codePointLimit' : 'byteLimit';
  40                                 $this[ lengthLimiter ]( ( input ) => {
  41                                         // Should be built the same as in HTMLSelectAndOtherField::loadDataFromRequest
  42                                         let comment = currentValReasonList;
  43                                         if ( comment === 'other' ) {
  44                                                 comment = input;
  45                                         } else if ( input !== '' ) {
  46                                                 // Entry from drop down menu + additional comment
  47                                                 comment += colonSeparator + input;
  48                                         }
  49                                         return comment;
  50                                 } );
  51                         }
  52                 } );
  53 } );