resources/src/mediawiki.widgets/mw.widgets.TagMultiselectWidget.js

   1 /*!
   2  * MediaWiki Widgets - TagMultiselectWidget class.
   3  *
   4  * @copyright 2017 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 ( function () {
   8         /**
   9          * @classdesc Input list of tags in a single line.
  10          *
  11          * This extends TagMultiselectWidget by adding an invisible textarea
  12          * element which will be used to submit the values of the tags
  13          *
  14          * If used inside HTML form the results will be sent as the list of
  15          * newline-separated tags.
  16          *
  17          * @class
  18          * @extends OO.ui.TagMultiselectWidget
  19          *
  20          * @constructor
  21          * @description Create an instance of `mw.widgets.TagMultiselectWidget`.
  22          * @param {Object} [config] Configuration options
  23          * @param {string} [config.name] Name of input to submit results (when used in HTML forms)
  24          */
  25         mw.widgets.TagMultiselectWidget = function MwWidgetsTagMultiselectWidget( config ) {
  26                 // Parent constructor
  27                 mw.widgets.TagMultiselectWidget.super.call( this, Object.assign( {}, config, {} ) );
  28
  29                 if ( 'name' in config ) {
  30                         // Use this instead of <input type="hidden">, because hidden inputs do not have separate
  31                         // 'value' and 'defaultValue' properties.
  32                         this.$hiddenInput = $( '<textarea>' )
  33                                 .addClass( 'oo-ui-element-hidden' )
  34                                 .attr( 'name', config.name )
  35                                 .appendTo( this.$element );
  36                         // Update with preset values
  37                         this.updateHiddenInput();
  38                         // Set the default value (it might be different from just being empty)
  39                         this.$hiddenInput.prop( 'defaultValue', this.getValue().join( '\n' ) );
  40                 }
  41
  42                 // Events
  43                 // When list of selected tags changes, update hidden input
  44                 this.connect( this, {
  45                         change: 'updateHiddenInput'
  46                 } );
  47         };
  48
  49         /* Setup */
  50
  51         OO.inheritClass( mw.widgets.TagMultiselectWidget, OO.ui.TagMultiselectWidget );
  52
  53         /* Methods */
  54
  55         /**
  56          * If used inside HTML form, then update hiddenInput with list of
  57          * newline-separated tags.
  58          *
  59          * @private
  60          */
  61         mw.widgets.TagMultiselectWidget.prototype.updateHiddenInput = function () {
  62                 if ( '$hiddenInput' in this ) {
  63                         this.$hiddenInput.val( this.getValue().join( '\n' ) );
  64                         // Trigger a 'change' event as if a user edited the text
  65                         // (it is not triggered when changing the value from JS code).
  66                         this.$hiddenInput.trigger( 'change' );
  67                 }
  68         };
  69
  70 }() );