multiselect: Use MenuTagMultiselectWidget

…instead of CapsuleMultiselectWidget

Bug: T183299
Change-Id: I58385968c03e9b53ea8fc4d64de5d6540d12acc1

diff --git a/resources/src/mediawiki/htmlform/multiselect.js b/resources/src/mediawiki/htmlform/multiselect.js
index 8a44251..e483763 100644 (file)
--- a/resources/src/mediawiki/htmlform/multiselect.js
+++ b/resources/src/mediawiki/htmlform/multiselect.js
@@ -52,35 +52,35 @@
                return $container;
        }
 
-       function convertCheckboxesWidgetToCapsules( fieldLayout ) {
-               var checkboxesWidget, checkboxesOptions, capsulesOptions, capsulesWidget;
+       function convertCheckboxesWidgetToTags( fieldLayout ) {
+               var checkboxesWidget, checkboxesOptions, menuTagOptions, menuTagWidget;
 
                checkboxesWidget = fieldLayout.fieldWidget;
                checkboxesOptions = checkboxesWidget.checkboxMultiselectWidget.getItems();
-               capsulesOptions = checkboxesOptions.map( function ( option ) {
+               menuTagOptions = checkboxesOptions.map( function ( option ) {
                        return new OO.ui.MenuOptionWidget( {
                                data: option.getData(),
                                label: option.getLabel()
                        } );
                } );
-               capsulesWidget = new OO.ui.CapsuleMultiselectWidget( {
+               menuTagWidget = new OO.ui.MenuTagMultiselectWidget( {
                        $overlay: true,
                        menu: {
-                               items: capsulesOptions
+                               items: menuTagOptions
                        }
                } );
-               capsulesWidget.setItemsFromData( checkboxesWidget.getValue() );
+               menuTagWidget.setValue( checkboxesWidget.getValue() );
 
                // Data from CapsuleMultiselectWidget will not be submitted with the form, so keep the original
                // CheckboxMultiselectInputWidget up-to-date.
-               capsulesWidget.on( 'change', function () {
-                       checkboxesWidget.setValue( capsulesWidget.getItemsData() );
+               menuTagWidget.on( 'change', function () {
+                       checkboxesWidget.setValue( menuTagWidget.getValue() );
                } );
 
                // Hide original widget and add new one in its place. This is a bit hacky, since the FieldLayout
                // still thinks it's connected to the old widget.
                checkboxesWidget.toggle( false );
-               checkboxesWidget.$element.after( capsulesWidget.$element );
+               checkboxesWidget.$element.after( menuTagWidget.$element );
        }
 
        mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
@@ -99,7 +99,7 @@
                                                modules.push.apply( modules, extraModules );
                                        }
                                        mw.loader.using( modules, function () {
-                                               convertCheckboxesWidgetToCapsules( OO.ui.FieldLayout.static.infuse( $el ) );
+                                               convertCheckboxesWidgetToTags( OO.ui.FieldLayout.static.infuse( $el ) );
                                        } );
                                } else {
                                        mw.loader.using( 'jquery.chosen', function () {