resources/src/mediawiki/htmlform/selectandother.js

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