Refactor reference source selection out into a widget

This can be re-used by Citoid.

Bonus: Improve placeholder copy.

Change-Id: I429ce5d7faae56955bcc09a9662d8a36c5098e44

VisualEditor.php

@@ -1316,6 +1316,8 @@ $wgResourceModules += array(
 			'modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js',
 			'modules/ve-mw/ui/dialogs/ve.ui.MWGeneralReferenceDialog.js',
 
+			'modules/ve-mw/ui/widgets/ve.ui.MWReferenceSourceSelectWidget.js',
+
 			'modules/ve-mw/ui/tools/ve.ui.MWReferenceDialogTool.js',
 			'modules/ve-mw/ui/tools/ve.ui.MWCitationDialogTool.js',
 

extension.json

@@ -1337,6 +1337,7 @@
 				"modules/ve-mw/ui/dialogs/ve.ui.MWReferencesListDialog.js",
 				"modules/ve-mw/ui/dialogs/ve.ui.MWReferenceDialog.js",
 				"modules/ve-mw/ui/dialogs/ve.ui.MWGeneralReferenceDialog.js",
+				"modules/ve-mw/ui/widgets/ve.ui.MWReferenceSourceSelectWidget.js",
 				"modules/ve-mw/ui/tools/ve.ui.MWReferenceDialogTool.js",
 				"modules/ve-mw/ui/tools/ve.ui.MWCitationDialogTool.js",
 				"modules/ve-mw/ui/contextitems/ve.ui.MWReferenceContextItem.js",

modules/ve-mw/i18n/en.json

@@ -278,7 +278,7 @@
 	"visualeditor-preference-mwalienextension-info-link": "\/\/mediawiki.org\/wiki\/Special:MyLanguage\/VisualEditor\/Beta_Features\/Generic",
 	"visualeditor-preference-mwalienextension-label": "VisualEditor extension tag editing",
 	"visualeditor-recreate": "The page has been deleted since you started editing. Press \"$1\" to recreate it.",
-	"visualeditor-reference-input-placeholder": "What do you want to reference?",
+	"visualeditor-reference-input-placeholder": "Search within current citations",
 	"visualeditor-referenceslist-isempty": "There are no references with the group \"$1\" on this page to include in this list.",
 	"visualeditor-referenceslist-isempty-default": "There are no references on this page to include in this list.",
 	"visualeditor-referenceslist-missingref": "This reference is defined in a template or other generated block, and for now can only be edited in source mode.",

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

@@ -5,8 +5,6 @@
  * @license The MIT License (MIT); see LICENSE.txt
  */
 
-/* global mw */
-
 /**
  * Dialog for inserting and editing MediaWiki references by type.
  *
@@ -53,10 +51,7 @@ ve.ui.MWGeneralReferenceDialog.prototype.getBodyHeight = function () {
  * @inheritdoc
  */
 ve.ui.MWGeneralReferenceDialog.prototype.initialize = function () {
-	var sourceField,
-		tools, i, len, item,
-		items = [],
-		limit = ve.init.mw.Target.static.citationToolsLimit;
+	var sourceField;
 
 	// Parent method
 	ve.ui.MWGeneralReferenceDialog.super.prototype.initialize.apply( this, arguments );
@@ -67,66 +62,23 @@ ve.ui.MWGeneralReferenceDialog.prototype.initialize = function () {
 		expanded: false
 	} );
 
-	// Attach cite dialog tools
-	try {
-		// Must use mw.message to avoid JSON being parsed as Wikitext
-		tools = JSON.parse( mw.message( 'visualeditor-cite-tool-definition.json' ).plain() );
-	} catch ( e ) { }
-
-	// Go over available tools
-	if ( Array.isArray( tools ) ) {
-		for ( i = 0, len = Math.min( limit, tools.length ); i < len; i++ ) {
-			item = tools[i];
-			items.push( new OO.ui.DecoratedOptionWidget( {
-				icon: item.icon,
-				label: item.title,
-				data: {
-					windowName: 'cite-' + item.name,
-					dialogData: { template: item.template }
-				}
-			} ) );
-		}
-	}
-	// Basic tools
-
-	this.refBasic = new OO.ui.DecoratedOptionWidget( {
-		icon: 'reference',
-		label: ve.msg( 'visualeditor-dialogbutton-reference-full-label' ),
-		data: { windowName: 'reference' }
-	} );
-	this.refExisting = new OO.ui.DecoratedOptionWidget( {
-		icon: 'reference-existing',
-		label: ve.msg( 'visualeditor-dialog-reference-useexisting-full-label' ),
-		data: {
-			windowName: 'reference',
-			dialogData: { useExisting: true }
-		}
-	} );
-
-	this.sourceSelect = new OO.ui.SelectWidget( {
+	this.sourceSelect = new ve.ui.MWReferenceSourceSelectWidget( {
 		classes: [ 've-ui-mwGeneralReferenceDialog-select' ],
-		items: items
+		showExisting: true
 	} );
+	$( '<div>' ).addClass( 've-ui-mwGeneralReferenceDialog-spacer' ).insertBefore(
+		this.sourceSelect.getRefBasic().$element
+	);
 	sourceField = new OO.ui.FieldLayout( this.sourceSelect, {
-		classes: [ 've-ui-mwGeneralReferenceDialog-source-field' ],
 		align: 'top',
 		label: ve.msg( 'visualeditor-dialog-generalreference-intro' )
 	} );
 
-	this.basicSelect = new OO.ui.SelectWidget( {
-		classes: [ 've-ui-mwGeneralReferenceDialog-select' ],
-		items: [ this.refBasic, this.refExisting ]
-	} );
-
 	// Events
-	this.sourceSelect.connect( this, { choose: 'onSelectChoose' } );
-	this.basicSelect.connect( this, { choose: 'onSelectChoose' } );
+	this.sourceSelect.connect( this, { choose: 'onSourceSelectChoose' } );
 
 	// Assemble the panel
-	this.panel.$element.append(
-		sourceField.$element,
-		this.basicSelect.$element
-	);
+	this.panel.$element.append( sourceField.$element );
 
 	this.$body
 		.addClass( 've-ui-mwGeneralReferenceDialog' )
@@ -141,11 +93,11 @@ ve.ui.MWGeneralReferenceDialog.prototype.getSetupProcess = function ( data ) {
 		.next( function () {
 			if ( this.manager.surface.getInDialog() === 'reference' ) {
 				// Hide basic reference if we are already in the basic reference menu
-				this.refBasic.setDisabled( true );
-				this.refExisting.setDisabled( true );
+				this.sourceSelect.getRefBasic().setDisabled( true );
+				this.sourceSelect.getRefExisting().setDisabled( true );
 			} else {
 				// Check if the 'use existing' button should be enabled
-				this.refExisting.setDisabled( !this.doReferencesExist() );
+				this.sourceSelect.getRefExisting().setDisabled( !this.doReferencesExist() );
 			}
 		}, this );
 };
@@ -156,9 +108,8 @@ ve.ui.MWGeneralReferenceDialog.prototype.getSetupProcess = function ( data ) {
 ve.ui.MWGeneralReferenceDialog.prototype.getTeardownProcess = function ( data ) {
 	return ve.ui.MWGeneralReferenceDialog.super.prototype.getTeardownProcess.call( this, data )
 		.next( function () {
-			// Clear selections
+			// Clear selection
 			this.sourceSelect.selectItem();
-			this.basicSelect.selectItem();
 		}, this );
 };
 
@@ -180,11 +131,11 @@ ve.ui.MWGeneralReferenceDialog.prototype.doReferencesExist = function () {
 };
 
 /**
- * Handle select widget choose events
+ * Handle source select widget choose events
  *
  * @param {OO.ui.OptionWidget} item Chosen item
  */
-ve.ui.MWGeneralReferenceDialog.prototype.onSelectChoose = function ( item ) {
+ve.ui.MWGeneralReferenceDialog.prototype.onSourceSelectChoose = function ( item ) {
 	var data = item.getData(),
 		// Closing the dialog may unset some properties, so cache the ones we want
 		fragment = this.getFragment(),

modules/ve-mw/ui/styles/dialogs/ve.ui.MWGeneralReferenceDialog.css

@@ -13,6 +13,6 @@
 	margin: 1em 0;
 }
 
-.ve-ui-mwGeneralReferenceDialog-source-field {
-	border-bottom: 1px solid #cccccc;
+.ve-ui-mwGeneralReferenceDialog-select .ve-ui-mwGeneralReferenceDialog-spacer:not(:first-child) {
+	border-top: 1px solid #cccccc;
 }

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

@@ -0,0 +1,95 @@
+/*!
+ * VisualEditor UserInterface MWReferenceSourceSelectWidget class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.MWReferenceSourceSelectWidget object.
+ *
+ * @class
+ * @extends OO.ui.SearchWidget
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {boolean} [showExisting] Show 're-use existing reference' as an option
+ */
+ve.ui.MWReferenceSourceSelectWidget = function VeUiMWReferenceSourceSelectWidget( config ) {
+	config = config || {};
+
+	// Parent constructor
+	ve.ui.MWReferenceSourceSelectWidget.super.call( this, config );
+
+	var i, len, tools, item, items = [],
+		limit = ve.init.target.constructor.static.citationToolsLimit;
+
+	try {
+		// Must use mw.message to avoid JSON being parsed as Wikitext
+		tools = JSON.parse( mw.message( 'visualeditor-cite-tool-definition.json' ).plain() );
+	} catch ( e ) {
+		tools = [];
+	}
+
+	// Go over available tools
+	for ( i = 0, len = Math.min( limit, tools.length ); i < len; i++ ) {
+		item = tools[i];
+		items.push( new OO.ui.DecoratedOptionWidget( {
+			icon: item.icon,
+			label: item.title,
+			data: {
+				windowName: 'cite-' + item.name,
+				dialogData: { template: item.template }
+			}
+		} ) );
+	}
+
+	// Basic tools
+	this.refBasic = new OO.ui.DecoratedOptionWidget( {
+		icon: 'reference',
+		label: ve.msg( 'visualeditor-dialogbutton-reference-full-label' ),
+		data: { windowName: 'reference' }
+	} );
+	items.push( this.refBasic );
+
+	if ( config.showExisting ) {
+		this.refExisting = new OO.ui.DecoratedOptionWidget( {
+			icon: 'reference-existing',
+			label: ve.msg( 'visualeditor-dialog-reference-useexisting-full-label' ),
+			data: {
+				windowName: 'reference',
+				dialogData: { useExisting: true }
+			}
+		} );
+		items.push( this.refExisting );
+	}
+
+	this.addItems( items );
+
+	// Initialization
+	this.$element.addClass( 've-ui-mwReferenceSourceSelectWidget' );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWReferenceSourceSelectWidget, OO.ui.SelectWidget );
+
+/* Methods */
+
+/**
+ * Get the basic reference option
+ *
+ * @return {OO.ui.OptionWidget} Basic reference option
+ */
+ve.ui.MWReferenceSourceSelectWidget.prototype.getRefBasic = function () {
+	return this.refBasic;
+};
+
+/**
+ * Get the existing reference option
+ *
+ * @return {OO.ui.OptionWidget} Existing reference option
+ */
+ve.ui.MWReferenceSourceSelectWidget.prototype.getRefExisting = function () {
+	return this.refExisting;
+};