+ function convertCheckboxesWidgetToCapsules( fieldLayout ) {
+ var checkboxesWidget, checkboxesOptions, capsulesOptions, capsulesWidget;
+
+ checkboxesWidget = fieldLayout.fieldWidget;
+ checkboxesOptions = checkboxesWidget.checkboxMultiselectWidget.getItems();
+ capsulesOptions = checkboxesOptions.map( function ( option ) {
+ return new OO.ui.MenuOptionWidget( {
+ data: option.getData(),
+ label: option.getLabel()
+ } );
+ } );
+ capsulesWidget = new OO.ui.CapsuleMultiselectWidget( {
+ menu: {
+ items: capsulesOptions
+ }
+ } );
+ capsulesWidget.setItemsFromData( 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() );
+ } );
+
+ // 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 );
+ }
+