mediawiki-extensions-Visual.../modules/ve-mw/ui/widgets/ve.ui.MWParameterResultWidget.js
Thiemo Kreuz 5e2b7506b6 Reduce duplication/clutter in MWParameterResultWidget
The MWParameterSearchWidget that shows a list of all available
template parameters displays the (human-readable) label and
description of each parameter (both given via <templatedata>), as
well as the parameter's internal name and aliases, if there are
any.

This turns out to be non-helpful in the majority of situations:
* When there is no <templatedata> yet, there are no labels.
  Instead, the names are used as labels, which means they are
  *all* identical and everything is shown twice.
* The same happens when manually adding an "unknown field". Simply
  start typing, and you can add parameters with any name. What you
  type is shown twice (actually 3 times, 1 time in the input
  field, 2 times in the result widget).
* Many template parameters are already nice, human-readable. Even
  if <templatedata> exists and specifies labels, these labels are
  often identical to the names. There is no need to come up with
  something else if the name is already good enough. (Exception:
  Localizations, but these are rare.)

Furthermore, this is a *search* result widget. The pretty much
only reason the names and aliases are shown is because the user
can search for them, and needs to understand why a parameter was
found. This still works fine.

For comparison, when a parameter is required you will *never* see
it's name, because the parameter is always there, and never shows
up as a search result.

Change-Id: I6b1dca1c94b2c496930b5bfdfe1c6f76898faa2a
2020-08-20 12:32:02 +02:00

71 lines
1.8 KiB
JavaScript

/*!
* VisualEditor UserInterface MWParameterResultWidget class.
*
* @copyright 2011-2020 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Creates an ve.ui.MWParameterResultWidget object.
*
* @class
* @extends OO.ui.DecoratedOptionWidget
*
* @constructor
* @param {Object} [config] Configuration options
*/
ve.ui.MWParameterResultWidget = function VeUiMWParameterResultWidget( config ) {
// Configuration initialization
config = ve.extendObject( { icon: 'parameter' }, config );
// Parent constructor
ve.ui.MWParameterResultWidget.super.call( this, config );
// Initialization
this.$element.addClass( 've-ui-mwParameterResultWidget' );
this.setLabel( this.buildLabel() );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWParameterResultWidget, OO.ui.DecoratedOptionWidget );
/* Methods */
/**
* Build the label element
*
* @return {jQuery}
*/
ve.ui.MWParameterResultWidget.prototype.buildLabel = function () {
var i, len,
$label = $( '<div>' )
.addClass( 've-ui-mwParameterResultWidget-label' )
.text( this.data.label ),
$names = $( '<div>' )
.addClass( 've-ui-mwParameterResultWidget-names' ),
$description = $( '<div>' )
.addClass( 've-ui-mwParameterResultWidget-description' )
.text( this.data.description || '' );
if ( this.data.name && this.data.name !== this.data.label ) {
$names.append(
$( '<span>' )
.addClass( 've-ui-mwParameterResultWidget-name' )
.text( this.data.name )
);
}
for ( i = 0, len = this.data.aliases.length; i < len; i++ ) {
if ( this.data.aliases[ i ] === this.data.label ) {
continue;
}
$names.append(
$( '<span>' )
.addClass( 've-ui-mwParameterResultWidget-name ve-ui-mwParameterResultWidget-alias' )
.text( this.data.aliases[ i ] )
);
}
return $label.add( $names ).add( $description );
};