[MediaWiki-commits] [Gerrit] mediawiki/core[master]: HTMLForm: Add OOUI support for 'multiselect' with 'dropdown'...

2016-10-18 Thread jenkins-bot (Code Review) 
jenkins-bot has submitted this change and it was merged.

Change subject: HTMLForm: Add OOUI support for 'multiselect' with 'dropdown' => 
true
..


HTMLForm: Add OOUI support for 'multiselect' with 'dropdown' => true

Using CapsuleMultiselectWidget.

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

Approvals:
  MarkTraceur: Looks good to me, approved
  Jforrester: Looks good to me, but someone else must approve
  jenkins-bot: Verified



diff --git a/includes/htmlform/fields/HTMLMultiSelectField.php 
b/includes/htmlform/fields/HTMLMultiSelectField.php
index c9fcb09..fee5d63 100644
--- a/includes/htmlform/fields/HTMLMultiSelectField.php
+++ b/includes/htmlform/fields/HTMLMultiSelectField.php
@@ -120,6 +120,8 @@
 * @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 a8786ef..9ab2532 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 = $( '' ),
-   $fieldLabelText = $( '' ),
-   $container;
+   $td = $( '' ),
+   $fieldLabelText = $( '' ),
+   $container;
if ( type === 'tr' ) {
addMulti( $oldContainer, $td );
$container = $( '' );
@@ -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' );
+

[MediaWiki-commits] [Gerrit] mediawiki/core[master]: HTMLForm: Add OOUI support for 'multiselect' with 'dropdown'...

2016-08-08 Thread Code Review 
Bartosz Dziewoński has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/303692

Change subject: HTMLForm: Add OOUI support for 'multiselect' with 'dropdown' => 
true
..

HTMLForm: Add OOUI support for 'multiselect' with 'dropdown' => true

Using CapsuleMultiselectWidget.

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


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core 
refs/changes/92/303692/1

diff --git a/includes/htmlform/fields/HTMLMultiSelectField.php 
b/includes/htmlform/fields/HTMLMultiSelectField.php
index 5b85171..b4bbda6 100644
--- a/includes/htmlform/fields/HTMLMultiSelectField.php
+++ b/includes/htmlform/fields/HTMLMultiSelectField.php
@@ -113,6 +113,8 @@
 * @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 a8786ef..9ab2532 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 = $( '' ),
-   $fieldLabelText = $( '' ),
-   $container;
+   $td = $( '' ),
+   $fieldLabelText = $( '' ),
+   $container;
if ( type === 'tr' ) {
addMulti( $oldContainer, $td );
$container = $( '' );
@@ -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' );
+