Use combo box widget to suggest existing values for reference group

Bug: 61574
Change-Id: I2ab47e79a8b90db8631d042c80b0759e9c250523

VisualEditor.php

@@ -1077,6 +1077,7 @@ $wgResourceModules += array(
 
 	'ext.visualEditor.mwreference' => $wgVisualEditorResourceTemplate + array(
 		'scripts' => array(
+			'modules/ve-mw/ui/widgets/ve.ui.MWReferenceGroupInputWidget.js',
 			'modules/ve-mw/ui/widgets/ve.ui.MWReferenceSearchWidget.js',
 			'modules/ve-mw/ui/widgets/ve.ui.MWReferenceResultWidget.js',
 
@@ -1088,6 +1089,7 @@ $wgResourceModules += array(
 			'modules/ve-mw/ui/tools/ve.ui.MWCitationDialogTool.js',
 		),
 		'styles' => array(
+			'modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceGroupInputWidget.css',
 			'modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceResultWidget.css',
 			'modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceSearchWidget.css',
 		),

modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js

@@ -270,7 +270,7 @@ ve.ui.MWReferenceDialog.prototype.useReference = function ( ref ) {
 	} );
 
 	// Initialization
-	this.referenceGroupInput.setValue( this.referenceModel.getGroup() );
+	this.referenceGroupInput.input.setValue( this.referenceModel.getGroup() );
 	this.contentFieldset.$element.append( this.referenceSurface.$element );
 	this.referenceSurface.initialize();
 
@@ -296,10 +296,9 @@ ve.ui.MWReferenceDialog.prototype.initialize = function () {
 		label: ve.msg( 'visualeditor-dialog-reference-options-section' ),
 		icon: 'settings'
 	} );
-	// TODO: Use a drop-down or something, and populate with existing groups instead of free-text
-	this.referenceGroupInput = new OO.ui.TextInputWidget( {
+	this.referenceGroupInput = new ve.ui.MWReferenceGroupInputWidget( {
 		$: this.$,
-		placeholder: ve.msg( 'visualeditor-dialog-reference-options-group-placeholder' )
+		emptyGroupName: ve.msg( 'visualeditor-dialog-reference-options-group-placeholder' )
 	} );
 	this.referenceGroupField = new OO.ui.FieldLayout( this.referenceGroupInput, {
 		$: this.$,
@@ -342,7 +341,7 @@ ve.ui.MWReferenceDialog.prototype.getActionProcess = function ( action ) {
 		return new OO.ui.Process( function () {
 			var surfaceModel = this.getFragment().getSurface();
 
-			this.referenceModel.setGroup( this.referenceGroupInput.getValue() );
+			this.referenceModel.setGroup( this.referenceGroupInput.input.getValue() );
 
 			// Insert reference (will auto-create an internal item if needed)
 			if ( !( this.selectedNode instanceof ve.dm.MWReferenceNode ) ) {
@@ -401,6 +400,8 @@ ve.ui.MWReferenceDialog.prototype.getSetupProcess = function ( data ) {
 				select: !( this.selectedNode instanceof ve.dm.MWReferenceNode ) &&
 					!this.search.isIndexEmpty()
 			} );
+
+			this.referenceGroupInput.populateMenu( this.getFragment().getDocument().getInternalList() );
 		}, this );
 };
 

modules/ve-mw/ui/dialogs/ve.ui.MWReferencesListDialog.js

@@ -81,9 +81,9 @@ ve.ui.MWReferencesListDialog.prototype.initialize = function () {
 		$: this.$
 	} );
 
-	this.groupInput = new OO.ui.TextInputWidget( {
+	this.groupInput = new ve.ui.MWReferenceGroupInputWidget( {
 		$: this.$,
-		placeholder: ve.msg( 'visualeditor-dialog-reference-options-group-placeholder' )
+		emptyGroupName: ve.msg( 'visualeditor-dialog-reference-options-group-placeholder' )
 	} );
 	this.groupField = new OO.ui.FieldLayout( this.groupInput, {
 		$: this.$,
@@ -108,7 +108,7 @@ ve.ui.MWReferencesListDialog.prototype.getActionProcess = function ( action ) {
 				surfaceModel = this.getFragment().getSurface();
 
 			// Save changes
-			refGroup = this.groupInput.getValue();
+			refGroup = this.groupInput.input.getValue();
 			listGroup = 'mwReference/' + refGroup;
 
 			if ( this.selectedNode ) {
@@ -167,7 +167,8 @@ ve.ui.MWReferencesListDialog.prototype.getSetupProcess = function ( data ) {
 				this.actions.setMode( 'insert' );
 			}
 
-			this.groupInput.setValue( refGroup );
+			this.groupInput.input.setValue( refGroup );
+			this.groupInput.populateMenu( this.getFragment().getDocument().getInternalList() );
 		}, this );
 };
 

modules/ve-mw/ui/styles/widgets/ve.ui.MWReferenceGroupInputWidget.css

@@ -0,0 +1,10 @@
+/*!
+ * VisualEditor MediaWiki UserInterface MWReferenceGroupInputWidget styles.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.ve-ui-mwReferenceGroupInputWidget .oo-ui-flaggableElement-emptyGroupPlaceholder {
+	color: grey;
+}

modules/ve-mw/ui/widgets/ve.ui.MWReferenceGroupInputWidget.js

@@ -0,0 +1,60 @@
+/*!
+ * VisualEditor UserInterface MWReferenceGroupInput class.
+ *
+ * @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.MWReferenceGroupInput object.
+ *
+ * @class
+ * @extends OO.ui.ComboBoxWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {string} emptyGroupName Label of the placeholder item
+ */
+ve.ui.MWReferenceGroupInputWidget = function VeUiMWReferenceGroupInput( config ) {
+	config = config || {};
+
+	this.emptyGroupName = config.emptyGroupName;
+
+	// Parent constructor
+	OO.ui.ComboBoxWidget.call( this, $.extend( true, { input: { placeholder: config.emptyGroupName } }, config ) );
+
+	this.$element.addClass( 've-ui-mwReferenceGroupInputWidget' );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWReferenceGroupInputWidget, OO.ui.ComboBoxWidget );
+
+/* Methods */
+
+/**
+ * Populate the reference group menu
+ *
+ * @param {ve.dm.InternalList} internalList Internal list with which to populate the menu
+ */
+ve.ui.MWReferenceGroupInputWidget.prototype.populateMenu = function ( internalList ) {
+	var placeholderGroupItem = new OO.ui.MenuItemWidget( '', {
+		$: this.$,
+		label: this.emptyGroupName,
+		flags: 'emptyGroupPlaceholder'
+	} );
+	this.menu.clearItems();
+	this.menu.addItems( [ placeholderGroupItem ].concat( $.map(
+		Object.keys( internalList.getNodeGroups() ),
+		function ( groupInternalName ) {
+			if ( groupInternalName.indexOf( 'mwReference/' ) === 0 ) {
+				var groupName = groupInternalName.substring( 'mwReference/'.length );
+				if ( groupName ) {
+					return new OO.ui.MenuItemWidget( groupName, { label: groupName } );
+				}
+			}
+		}
+	) ), 0 );
+	this.onInputChange( this.input.getValue() );
+	this.menu.toggle( false );
+};