From 96ef35a58ab1f12a8aa19053ace92a9f94bf0c7d Mon Sep 17 00:00:00 2001
From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Mon, 8 Aug 2016 22:37:49 +0200
Subject: [PATCH] HTMLForm: Add OOUI support for 'multiselect' with 'dropdown'
 => true

Using CapsuleMultiselectWidget.

Change-Id: I816739bc3acd40ee9d8b67e19ff3e4296fce66d3
---
 .../htmlform/fields/HTMLMultiSelectField.php  |  2 +
 .../src/mediawiki/htmlform/multiselect.js     | 68 ++++++++++++++++---
 2 files changed, 60 insertions(+), 10 deletions(-)

diff --git a/includes/htmlform/fields/HTMLMultiSelectField.php b/includes/htmlform/fields/HTMLMultiSelectField.php
index c9fcb0992f..fee5d6344a 100644
--- a/includes/htmlform/fields/HTMLMultiSelectField.php
+++ b/includes/htmlform/fields/HTMLMultiSelectField.php
@@ -120,6 +120,8 @@ class HTMLMultiSelectField extends HTMLFormField implements HTMLNestedFilterable
 	 * @return OOUI\CheckboxMultiselectInputWidget
 	 */
 	public function getInputOOUI( $value ) {
+		$this->mParent->getOutput()->addModules( 'oojs-ui-widgets' );
+
 		$attr = $this->getTooltipAndAccessKey();
 		$attr['id'] = $this->mID;
 		$attr['name'] = "{$this->mName}[]";
diff --git a/resources/src/mediawiki/htmlform/multiselect.js b/resources/src/mediawiki/htmlform/multiselect.js
index a8786efa5b..9ab253262c 100644
--- a/resources/src/mediawiki/htmlform/multiselect.js
+++ b/resources/src/mediawiki/htmlform/multiselect.js
@@ -32,9 +32,9 @@
 
 	function convertCheckboxesToMulti( $oldContainer, type ) {
 		var $fieldLabel = $( '<td>' ),
-		$td = $( '<td>' ),
-		$fieldLabelText = $( '<label>' ),
-		$container;
+			$td = $( '<td>' ),
+			$fieldLabelText = $( '<label>' ),
+			$container;
 		if ( type === 'tr' ) {
 			addMulti( $oldContainer, $td );
 			$container = $( '<tr>' );
@@ -52,14 +52,62 @@
 		return $container;
 	}
 
+	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 );
+	}
+
 	mw.hook( 'htmlform.enhance' ).add( function ( $root ) {
-		if ( $root.find( '.mw-htmlform-dropdown' ).length ) {
-			mw.loader.using( 'jquery.chosen', function () {
-				$root.find( '.mw-htmlform-dropdown' ).each( function () {
-					var type = this.nodeName.toLowerCase(),
-						$converted = convertCheckboxesToMulti( $( this ), type );
-					$converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );
-				} );
+		var $dropdowns = $root.find( '.mw-htmlform-field-HTMLMultiSelectField.mw-htmlform-dropdown' );
+		if ( $dropdowns.length ) {
+			$dropdowns.each( function () {
+				var $el = $( this ),
+					data, modules, extraModules;
+				if ( $el.is( '[data-ooui]' ) ) {
+					// Load 'oojs-ui-widgets' for CapsuleMultiselectWidget
+					modules = [ 'mediawiki.htmlform.ooui', 'oojs-ui-widgets' ];
+					data = $el.data( 'mw-modules' );
+					if ( data ) {
+						// We can trust this value, 'data-mw-*' attributes are banned from user content in Sanitizer
+						extraModules = data.split( ',' );
+						modules.push.apply( modules, extraModules );
+					}
+					mw.loader.using( modules, function () {
+						/*jshint -W024*/
+						convertCheckboxesWidgetToCapsules( OO.ui.FieldLayout.static.infuse( $el ) );
+					} );
+				} else {
+					mw.loader.using( 'jquery.chosen', function () {
+						var type = $el.is( 'tr' ) ? 'tr' : 'div',
+							$converted = convertCheckboxesToMulti( $el, type );
+						$converted.find( '.htmlform-chzn-select' ).chosen( { width: 'auto' } );
+					} );
+				}
 			} );
 		}
 	} );
-- 
2.20.1