mediawiki-extensions-Visual.../modules/ve-mw/ui/widgets/ve.ui.MWTemplateOutlineTemplateWidget.js
Thiemo Kreuz bc4aeed86e Avoid the term "canonical order" in template related docs
While the term "canonical" is not wrong, I find it still
somewhat ambiguous.

1. "Canonical" could mean different things. E.g. is the order
of parameters as they appear in the article's wikitext the
"canonical" one? It's possible to argue like this, esp. if a
template doesn't have TemplateData documentation. In this case
the only order known is the one from the wikitext.

2. "Canonical" sounds like the parameters must be reordered.
But this should never happen. Not having dirty diffs is more
important than having the parameters in a specific order.

Bug: T285483
Change-Id: I23658d37fea50b727667677ac6a49066673b2135
2021-06-30 09:38:28 +02:00

128 lines
3.6 KiB
JavaScript

/*!
* VisualEditor user interface MWTemplateOutlineTemplateWidget class.
*
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Container for template, as rendered in the template dialog sidebar.
*
* @class
* @extends OO.ui.Widget
*
* @constructor
* @param {Object} [config] Configuration options
*/
ve.ui.MWTemplateOutlineTemplateWidget = function VeUiMWTemplateOutlineTemplateWidget( config ) {
// Parent constructor
ve.ui.MWTemplateOutlineTemplateWidget.super.call( this, config );
// Initialization
this.templateModel = config.templateModel.connect( this, {
add: 'onAddParameter',
remove: 'onRemoveParameter'
} );
var widget = this;
var checkboxes = this.templateModel.getAllParametersOrdered().filter( function ( parameter ) {
return parameter !== '';
} ).map( function ( parameter ) {
return widget.createCheckbox( parameter );
} );
var addParameterButton = new OO.ui.ButtonWidget( {
framed: false,
icon: 'parameter',
label: ve.msg( 'visualeditor-dialog-transclusion-add-param' ),
classes: [ 've-ui-templateOutlineItem' ]
} );
var templateLabel = new OO.ui.Layout( {
classes: [ 've-ui-templateOutlineTemplateLabel' ],
content: [
new OO.ui.IconWidget( {
icon: 'puzzle'
} ),
new OO.ui.LabelWidget( {
label: config.templateModel.getSpec().getLabel()
} )
]
} );
this.parameters = new OO.ui.FieldsetLayout( {
items: checkboxes
} );
var layout = new OO.ui.Layout( {
// TODO: template title and icon
// items: [ this.parameters ]
} );
layout.$element
.append( templateLabel.$element, this.parameters.$element, addParameterButton.$element );
this.$element
.append( layout.$element )
.addClass( 've-ui-mwTemplateDialogOutlineTemplate' );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWTemplateOutlineTemplateWidget, OO.ui.Widget );
ve.ui.MWTemplateOutlineTemplateWidget.prototype.createCheckbox = function ( parameter ) {
var parameterModel = ( parameter instanceof ve.dm.MWParameterModel ) ?
parameter : this.templateModel.getParameter( parameter ),
isPresent = !!parameterModel;
if ( !parameterModel ) {
// TODO: Streamline, don't create a temporary parameter model?
parameterModel = new ve.dm.MWParameterModel( this.templateModel, parameter );
}
return new ve.ui.MWTemplateOutlineParameterCheckboxLayout( {
required: parameterModel.isRequired(),
label: parameterModel.getName(),
data: parameterModel.getName(),
selected: isPresent
} ).connect( this, {
change: 'onCheckboxChange'
} );
};
ve.ui.MWTemplateOutlineTemplateWidget.prototype.onAddParameter = function ( parameter ) {
var paramCheckbox = this.parameters.findItemFromData( parameter.getName() );
if ( !paramCheckbox ) {
this.parameters.addItems(
this.createCheckbox( parameter ),
this.templateModel.getAllParametersOrdered().indexOf( parameter.getName() )
);
} else {
paramCheckbox.setSelected( true, true );
}
};
ve.ui.MWTemplateOutlineTemplateWidget.prototype.onRemoveParameter = function ( parameter ) {
var paramCheckbox = this.parameters.findItemFromData( parameter.getName() );
if ( paramCheckbox ) {
if ( !this.templateModel.isParameterDocumented( parameter ) ) {
paramCheckbox.disconnect( this );
this.parameters.removeItems( [ paramCheckbox ] );
} else {
paramCheckbox.setSelected( false, true );
}
}
};
ve.ui.MWTemplateOutlineTemplateWidget.prototype.onCheckboxChange = function ( data, checked ) {
var parameter = this.templateModel.getParameter( data );
if ( checked ) {
parameter = parameter || new ve.dm.MWParameterModel( this.templateModel, data );
this.templateModel.addParameter( parameter );
} else {
if ( parameter ) {
this.templateModel.removeParameter( parameter );
}
}
};