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

   1 /*!
   2  * MediaWiki Widgets - MenuTagMultiselectWidget class.
   3  *
   4  * @copyright 2024 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 ( function () {
   8         mw.widgets.MenuTagMultiselectWidget = function MwWidgetsMenuTagMultiselectWidget( config ) {
   9                 const menuTagOptions = [], flatOptions = [], selected = config.selected;
  10
  11                 // MenuTagMultiselectWidget does not support the optgroup config like DropdownInputWidget
  12                 Object.keys( config.options ).forEach( ( optionGroup ) => {
  13                         if ( optionGroup ) {
  14                                 menuTagOptions.push( new OO.ui.MenuSectionOptionWidget( {
  15                                         label: optionGroup
  16                                 } ) );
  17                         }
  18                         config.options[ optionGroup ].forEach( ( option ) => {
  19                                 flatOptions.push( option );
  20                                 menuTagOptions.push( new OO.ui.MenuOptionWidget( option ) );
  21                         } );
  22                 } );
  23
  24                 // Parent constructor use these config in a way that is not compatible
  25                 config.options = [];
  26                 config.selected = [];
  27
  28                 // Parent constructor
  29                 mw.widgets.MenuTagMultiselectWidget.super.call( this, Object.assign( {}, config, {
  30                         menu: {
  31                                 items: menuTagOptions
  32                         }
  33                 } ) );
  34
  35                 // Mixin constructors
  36                 OO.ui.mixin.PendingElement.call( this, Object.assign( {}, config, { $pending: this.$handle } ) );
  37
  38                 this.setValue( selected );
  39
  40                 if ( 'name' in config ) {
  41                         this.$hiddenInputs = {};
  42                         const $container = $( '<div>' ).addClass( 'oo-ui-element-hidden' );
  43                         flatOptions.forEach( ( option ) => {
  44                                 // Use this instead of <input type="hidden">, because hidden inputs do not have separate
  45                                 // 'value' and 'defaultChecked' properties.
  46                                 this.$hiddenInputs[ option.data ] = $( '<input>' )
  47                                         .attr( 'type', 'checkbox' )
  48                                         .attr( 'value', option.data )
  49                                         .attr( 'name', config.name + '[]' )
  50                                         .prop( 'defaultChecked', selected.indexOf( option.data ) >= 0 )
  51                                         .appendTo( $container );
  52                         } );
  53                         $container.appendTo( this.$element );
  54                 }
  55
  56                 this.connect( this, {
  57                         disable: 'onDisable'
  58                 } );
  59         };
  60
  61         /* Setup */
  62         OO.inheritClass( mw.widgets.MenuTagMultiselectWidget, OO.ui.MenuTagMultiselectWidget );
  63         OO.mixinClass( mw.widgets.MenuTagMultiselectWidget, OO.ui.mixin.PendingElement );
  64
  65         mw.widgets.MenuTagMultiselectWidget.prototype.onChangeTags = function ( items ) {
  66                 if ( '$hiddenInputs' in this ) {
  67                         const values = this.getValue();
  68                         Object.keys( this.$hiddenInputs ).forEach( ( name ) => {
  69                                 const $input = this.$hiddenInputs[ name ];
  70                                 $input.prop( 'checked', values.indexOf( $input.attr( 'value' ) ) >= 0 );
  71                         } );
  72                 }
  73
  74                 mw.widgets.MenuTagMultiselectWidget.super.prototype.onChangeTags.call( this, items );
  75         };
  76
  77         mw.widgets.MenuTagMultiselectWidget.prototype.onDisable = function ( disabled ) {
  78                 if ( '$hiddenInputs' in this ) {
  79                         Object.keys( this.$hiddenInputs ).forEach( ( name ) => {
  80                                 this.$hiddenInputs[ name ].prop( 'disabled', disabled );
  81                         } );
  82                 }
  83         };
  84 }() );