jenkins-bot has submitted this change and it was merged.
Change subject: Template parameter adding
......................................................................
Template parameter adding
Objective:
* Allow browsing, searching and adding documented parameters
Changes:
ve.ui.MWTransclusionDialog.js
* Replace regular text input with ve.ui.ParameterSearchWidget
* Fix uses of $(), this.frame.$$ is correct
ve.ui.Dialog.css
* Change rules for addParameterFieldset to make search widget auto-size
vertically
ve.ui.Widget.css
* Add styles for ve.ui.MWParameterResultWidget
ve.ui.MWParameterSearchWidget.js, ve.ui.MWParameterResultWidget.js
* New classes
* Provides a way to search and select parameter for a template
* Displays parameter label, name, aliases and description
*.php
* Links to new files and messages
Change-Id: Ie5dbe8c44ce5d64c4b49b09517fb66cd30dd7304
---
M VisualEditor.i18n.php
M VisualEditor.php
M modules/ve/ui/dialogs/ve.ui.MWTransclusionDialog.js
M modules/ve/ui/styles/ve.ui.Dialog.css
M modules/ve/ui/styles/ve.ui.Widget.css
A modules/ve/ui/widgets/ve.ui.MWParameterResultWidget.js
A modules/ve/ui/widgets/ve.ui.MWParameterSearchWidget.js
7 files changed, 308 insertions(+), 21 deletions(-)
Approvals:
Robmoen: Looks good to me, approved
jenkins-bot: Verified
diff --git a/VisualEditor.i18n.php b/VisualEditor.i18n.php
index a9194a1..5532b23 100644
--- a/VisualEditor.i18n.php
+++ b/VisualEditor.i18n.php
@@ -66,7 +66,6 @@
'visualeditor-dialog-transclusion-add-template' => 'Add template',
'visualeditor-dialog-transclusion-content' => 'Content',
'visualeditor-dialog-transclusion-options' => 'Options',
- 'visualeditor-dialog-transclusion-param-name' => 'Parameter name',
'visualeditor-dialog-transclusion-placeholder' => 'New template',
'visualeditor-dialog-transclusion-remove-content' => 'Remove content',
'visualeditor-dialog-transclusion-remove-param' => 'Remove parameter',
@@ -125,6 +124,9 @@
'visualeditor-notification-saved' => 'Your changes to $1 have been
saved.',
'visualeditor-outline-control-move-down' => 'Move item down',
'visualeditor-outline-control-move-up' => 'Move item up',
+ 'visualeditor-parameter-input-placeholder' => 'Parameter name',
+ 'visualeditor-parameter-search-no-unused' => 'No unused parameters',
+ 'visualeditor-parameter-search-unknown' => 'Unknown parameter',
'visualeditor-preference-enable' => 'Enable VisualEditor (only in the
[[{{MediaWiki:Visualeditor-mainnamespacepagelink}}|main]] and
[[{{MediaWiki:Visualeditor-usernamespacepagelink}}|user]] namespaces)',
'visualeditor-reference-input-placeholder' => 'What do you want to
reference?',
'visualeditor-reference-search-create' => 'Create new source',
@@ -293,8 +295,6 @@
{{Identical|Content}}',
'visualeditor-dialog-transclusion-options' => 'Label for section with
options for templates, content or parameters.
{{Identical|Options}}',
- 'visualeditor-dialog-transclusion-param-name' => 'Placeholder text
label for an input for adding a parameter to a template.
-{{Identical|Parameter name}}',
'visualeditor-dialog-transclusion-placeholder' => 'Label for section
with options for adding a new template to a multi part transclusion',
'visualeditor-dialog-transclusion-remove-content' => 'Label for button
that removes content between transclusion parts',
'visualeditor-dialog-transclusion-remove-param' => 'Label for button
that removes a parameter from a template',
@@ -384,6 +384,8 @@
'visualeditor-notification-saved' => 'Shown after a user saves a page,
$1 is a page name.',
'visualeditor-outline-control-move-down' => 'Tool tip for a button that
moves items in a list down one place',
'visualeditor-outline-control-move-up' => 'Tool tip for a button that
moves items in a list up one place',
+ 'visualeditor-parameter-input-placeholder' => 'Placeholder text label
for an input for adding a parameter to a template.
+{{Identical|Parameter name}}',
'visualeditor-preference-enable' => 'Label for the user preference to
enable VisualEditor.
Links are in {{msg-mw|Visualeditor-mainnamespacepagelink}} and
{{msg-mw|visualeditor-usernamespacepagelink}}.',
'visualeditor-reference-input-placeholder' => 'Placeholder text for
reference search field.',
diff --git a/VisualEditor.php b/VisualEditor.php
index ad8ee92..ee7a72a 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -472,6 +472,8 @@
've/ui/widgets/ve.ui.MWCategoryWidget.js',
've/ui/widgets/ve.ui.MWMediaSearchWidget.js',
've/ui/widgets/ve.ui.MWMediaResultWidget.js',
+ 've/ui/widgets/ve.ui.MWParameterSearchWidget.js',
+ 've/ui/widgets/ve.ui.MWParameterResultWidget.js',
've/ui/widgets/ve.ui.MWReferenceSearchWidget.js',
've/ui/widgets/ve.ui.MWReferenceResultWidget.js',
've/ui/widgets/ve.ui.MWTitleInputWidget.js',
@@ -597,7 +599,6 @@
'visualeditor-dialog-transclusion-add-template',
'visualeditor-dialog-transclusion-content',
'visualeditor-dialog-transclusion-options',
- 'visualeditor-dialog-transclusion-param-name',
'visualeditor-dialog-transclusion-placeholder',
'visualeditor-dialog-transclusion-remove-content',
'visualeditor-dialog-transclusion-remove-param',
@@ -645,6 +646,9 @@
'visualeditor-outline-control-move-down',
'visualeditor-outline-control-move-up',
'visualeditor-outline-control-move-up',
+ 'visualeditor-parameter-input-placeholder',
+ 'visualeditor-parameter-search-no-unused',
+ 'visualeditor-parameter-search-unknown',
'visualeditor-reference-input-placeholder',
'visualeditor-reference-search-create',
'visualeditor-reference-search-reuse',
diff --git a/modules/ve/ui/dialogs/ve.ui.MWTransclusionDialog.js
b/modules/ve/ui/dialogs/ve.ui.MWTransclusionDialog.js
index fe5a815..5c5c820 100644
--- a/modules/ve/ui/dialogs/ve.ui.MWTransclusionDialog.js
+++ b/modules/ve/ui/dialogs/ve.ui.MWTransclusionDialog.js
@@ -377,17 +377,24 @@
* @param {ve.dm.MWTemplateModel} template Template model
*/
ve.ui.MWTransclusionDialog.prototype.getTemplatePage = function ( template ) {
- var infoFieldset, addParameterFieldset, addParameterInput,
addParameterButton, optionsFieldset,
+ var infoFieldset, addParameterFieldset, addParameterSearch,
addParameterButton, optionsFieldset,
removeButton,
spec = template.getSpec(),
label = spec.getLabel(),
description = spec.getDescription();
function addParameter() {
- var param = new ve.dm.MWTemplateParameterModel( template,
addParameterInput.getValue() );
- template.addParameter( param );
- addParameterInput.setValue();
- this.setPageByName( param.getId() );
+ var data, name, param,
+ item = addParameterSearch.results.getSelectedItem();
+
+ data = item && item.getData();
+ name = data && data.name;
+ if ( name ) {
+ param = new ve.dm.MWTemplateParameterModel( template,
name );
+ template.addParameter( param );
+ addParameterSearch.query.setValue();
+ this.setPageByName( param.getId() );
+ }
}
infoFieldset = new ve.ui.FieldsetLayout( {
@@ -397,7 +404,7 @@
} );
if ( description ) {
- infoFieldset.$.append( $( '<div>' ).text( description ) );
+ infoFieldset.$.append( this.frame.$$( '<div>' ).text(
description ) );
}
addParameterFieldset = new ve.ui.FieldsetLayout( {
@@ -406,24 +413,21 @@
'icon': 'parameter'
} );
addParameterFieldset.$.addClass(
've-ui-mwTransclusionDialog-addParameterFieldset' );
- addParameterInput = new ve.ui.TextInputWidget( {
- '$$': this.frame.$$,
- 'placeholder': ve.msg(
'visualeditor-dialog-transclusion-param-name' )
- } );
+ addParameterSearch = new ve.ui.MWParameterSearchWidget( template, {
'$$': this.frame.$$ } );
addParameterButton = new ve.ui.ButtonWidget( {
'$$': this.frame.$$,
'label': ve.msg( 'visualeditor-dialog-transclusion-add-param' ),
'disabled': true
} );
addParameterButton.connect( this, { 'click': addParameter } );
- addParameterInput.connect( this, {
+ addParameterSearch.connect( this, {
'enter': addParameter,
- 'change': function ( value ) {
+ 'select': function ( name ) {
var names = template.getParameterNames();
- addParameterButton.setDisabled( value === '' ||
names.indexOf( value ) !== -1 );
+ addParameterButton.setDisabled( !name || names.indexOf(
name ) !== -1 );
}
} );
- addParameterFieldset.$.append( addParameterInput.$,
addParameterButton.$ );
+ addParameterFieldset.$.append( addParameterSearch.$,
addParameterButton.$ );
optionsFieldset = new ve.ui.FieldsetLayout( {
'$$': this.frame.$$,
@@ -585,7 +589,7 @@
optionsFieldset.$.append( removeButton.$ );
return {
- 'label': $( '<span>' )
+ 'label': this.frame.$$( '<span>' )
.addClass(
've-ui-mwTransclusionDialog-placeholder-label' )
.text( label ),
'icon': 'template',
diff --git a/modules/ve/ui/styles/ve.ui.Dialog.css
b/modules/ve/ui/styles/ve.ui.Dialog.css
index 1ee15e9..9bdbbfe 100644
--- a/modules/ve/ui/styles/ve.ui.Dialog.css
+++ b/modules/ve/ui/styles/ve.ui.Dialog.css
@@ -202,12 +202,10 @@
height: 10em;
}
-.ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-widget,
.ve-ui-mwTransclusionDialog-addTemplateFieldset .ve-ui-widget {
display: inline-block;
}
-.ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-buttonWidget,
.ve-ui-mwTransclusionDialog-addTemplateFieldset .ve-ui-buttonWidget {
margin-left: 0.5em;
}
@@ -216,6 +214,18 @@
font-style: italic;
}
+.ve-ui-mwTransclusionDialog-addParameterFieldset
.ve-ui-mwParameterSearchWidget {
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
+ margin-bottom: 1em;
+}
+
+.ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-searchWidget-results {
+ position: relative;
+ padding-bottom: 5em;
+}
+
/* ve.ui.MWMetaDialog */
.ve-ui-mwMetaDialog-languages-table {
diff --git a/modules/ve/ui/styles/ve.ui.Widget.css
b/modules/ve/ui/styles/ve.ui.Widget.css
index adabfd7..59b5f50 100644
--- a/modules/ve/ui/styles/ve.ui.Widget.css
+++ b/modules/ve/ui/styles/ve.ui.Widget.css
@@ -730,6 +730,45 @@
font-weight: bold;
}
+/* ve.ui.MWParameterResultWidget */
+
+.ve-ui-mwParameterResultWidget {
+ padding-right: 0.25em;
+ background-position: 0.5em 0.25em;
+ background-repeat: no-repeat;
+}
+
+.ve-ui-mwParameterResultWidget.ve-ui-widget-disabled {
+ opacity: 0.5;
+}
+
+.ve-ui-mwParameterResultWidget-label {
+ font-weight: bold;
+ float: left;
+}
+
+.ve-ui-mwParameterResultWidget-names {
+ float: right;
+ font-size: 0.9em;
+}
+
+.ve-ui-mwParameterResultWidget-name {
+ border-radius: 0.3em;
+ padding: 0.125em 0.25em;
+ margin-left: 0.5em;
+ color: #999;
+ background-color: #fff;
+ border: solid 1px #ddd;
+}
+
+.ve-ui-mwParameterResultWidget-names span:not(:first-child) {
+ background-color: #eee;
+}
+
+.ve-ui-mwParameterResultWidget-description {
+ clear: both;
+}
+
/* RTL Definitions */
/* @noflip */
diff --git a/modules/ve/ui/widgets/ve.ui.MWParameterResultWidget.js
b/modules/ve/ui/widgets/ve.ui.MWParameterResultWidget.js
new file mode 100644
index 0000000..49cf9a0
--- /dev/null
+++ b/modules/ve/ui/widgets/ve.ui.MWParameterResultWidget.js
@@ -0,0 +1,64 @@
+/*!
+ * VisualEditor UserInterface MWParameterResultWidget class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.MWParameterResultWidget object.
+ *
+ * @class
+ * @extends ve.ui.OptionWidget
+ *
+ * @constructor
+ * @param {Mixed} data Item data
+ * @param {Object} [config] Config options
+ */
+ve.ui.MWParameterResultWidget = function VeUiMWParameterResultWidget( data,
config ) {
+ // Parent constructor
+ ve.ui.OptionWidget.call( this, data, config );
+
+ // Initialization
+ this.$.addClass( 've-ui-mwParameterResultWidget ve-ui-icon-parameter' );
+ this.setLabel( this.buildLabel() );
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.MWParameterResultWidget, ve.ui.OptionWidget );
+
+/* Static Properties */
+
+ve.ui.MWParameterResultWidget.static.highlightable = false;
+
+/* Methods */
+
+ve.ui.MWParameterResultWidget.prototype.buildLabel = function () {
+ var i, len,
+ $label = this.$$( '<div>' )
+ .addClass( 've-ui-mwParameterResultWidget-label' )
+ .text( this.data.label ),
+ $names = this.$$( '<div>' )
+ .addClass( 've-ui-mwParameterResultWidget-names' ),
+ $description = this.$$( '<div>' )
+ .addClass( 've-ui-mwParameterResultWidget-description' )
+ .text( this.data.description || '' );
+
+ if ( this.data.name ) {
+ $names.append(
+ this.$$( '<span>' )
+ .addClass( 've-ui-mwParameterResultWidget-name'
)
+ .text( this.data.name )
+ );
+ }
+ for ( i = 0, len = this.data.aliases.length; i < len; i++ ) {
+ $names.append(
+ this.$$( '<span>' )
+ .addClass( 've-ui-mwParameterResultWidget-name'
)
+ .text( this.data.aliases[i] )
+ );
+ }
+
+ return $label.add( $names ).add( $description );
+};
\ No newline at end of file
diff --git a/modules/ve/ui/widgets/ve.ui.MWParameterSearchWidget.js
b/modules/ve/ui/widgets/ve.ui.MWParameterSearchWidget.js
new file mode 100644
index 0000000..a5363d7
--- /dev/null
+++ b/modules/ve/ui/widgets/ve.ui.MWParameterSearchWidget.js
@@ -0,0 +1,164 @@
+/*!
+ * VisualEditor UserInterface MWParameterSearchWidget class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Creates an ve.ui.MWParameterSearchWidget object.
+ *
+ * @class
+ * @extends ve.ui.SearchWidget
+ *
+ * @constructor
+ * @param {Object} [config] Config options
+ */
+ve.ui.MWParameterSearchWidget = function VeUiMWParameterSearchWidget(
template, config ) {
+ // Configuration intialization
+ config = ve.extendObject( {}, config, {
+ 'placeholder': ve.msg(
'visualeditor-parameter-input-placeholder' )
+ } );
+
+ // Parent constructor
+ ve.ui.SearchWidget.call( this, config );
+
+ // Properties
+ this.template = template;
+ this.index = [];
+
+ // Events
+ this.template.connect( this, { 'add': 'buildIndex', 'remove':
'buildIndex' } );
+
+ // Initialization
+ this.$.addClass( 've-ui-mwParameterSearchWidget' );
+ this.buildIndex();
+};
+
+/* Inheritance */
+
+ve.inheritClass( ve.ui.MWParameterSearchWidget, ve.ui.SearchWidget );
+
+/* Events */
+
+/**
+ * @event select
+ * @param {string|null} name Parameter name or null if no item is selected
+ */
+
+/* Methods */
+
+/**
+ * Handle select widget select events.
+ *
+ * @method
+ * @param {string} value New value
+ */
+ve.ui.MWParameterSearchWidget.prototype.onQueryChange = function () {
+ // Parent method
+ ve.ui.SearchWidget.prototype.onQueryChange.call( this );
+
+ // Populate
+ this.addResults();
+};
+
+/**
+ * Handle select widget select events.
+ *
+ * @method
+ * @param {ve.ui.OptionWidget} item Selected item
+ * @emits select
+ */
+ve.ui.MWParameterSearchWidget.prototype.onResultsSelect = function ( item ) {
+ this.emit( 'select', item && item.getData() ? item.getData().name :
null );
+};
+
+/**
+ * Build a serchable index of parameters.
+ *
+ * @method
+ * @param {ve.dm.MWTemplateSpecModel} spec Template specification
+ */
+ve.ui.MWParameterSearchWidget.prototype.buildIndex = function () {
+ var i, len, name, label, aliases, description,
+ spec = this.template.getSpec(),
+ usedParams = this.template.getParameterNames(),
+ knownParams = spec.getParameterNames();
+
+ this.index.length = 0;
+ for ( i = 0, len = knownParams.length; i < len; i++ ) {
+ name = knownParams[i];
+ if (
+ // Skip aliases
+ spec.getParameterOrigin( name ) !== name ||
+ // Skip parameters already in use
+ ve.indexOf( name, usedParams ) !== -1
+ ) {
+ continue;
+ }
+ label = spec.getParameterLabel( name );
+ aliases = spec.getParameterAliases( name );
+ description = spec.getParameterDescription( name );
+
+ this.index.push( {
+ 'text': [ name, aliases.join( ' ' ), description
].join( ' ' ),
+ 'name': name,
+ 'label': label,
+ 'aliases': aliases,
+ 'description': description
+ } );
+ }
+
+ // Re-populate
+ this.onQueryChange();
+};
+
+/**
+ * Handle media query response events.
+ *
+ * @method
+ */
+ve.ui.MWParameterSearchWidget.prototype.addResults = function () {
+ var i, len, item,
+ exactMatch = false,
+ value = this.query.getValue(),
+ query = value.toLowerCase(),
+ usedParams = this.template.getParameterNames(),
+ items = [];
+
+ for ( i = 0, len = this.index.length; i < len; i++ ) {
+ item = this.index[i];
+ if ( item.text.indexOf( query ) >= 0 ) {
+ items.push( new ve.ui.MWParameterResultWidget( item, {
'$$': this.$$ } ) );
+ if ( item.name === value ) {
+ exactMatch = true;
+ }
+ }
+ }
+
+ if ( !exactMatch && value.length && ve.indexOf( value, usedParams ) ===
-1 ) {
+ items.unshift( new ve.ui.MWParameterResultWidget( {
+ 'name': value,
+ 'label': value,
+ 'aliases': [],
+ 'description': ve.msg(
'visualeditor-parameter-search-unknown' )
+ }, { '$$': this.$$ } ) );
+ }
+
+ if ( !items.length ) {
+ items.push( new ve.ui.MWParameterResultWidget(
+ {
+ 'name': null,
+ 'label': '',
+ 'aliases': [],
+ 'description': ve.msg(
'visualeditor-parameter-search-no-unused' )
+ },
+ { '$$': this.$$, 'disabled': true }
+ ) );
+ }
+
+ this.results.addItems( items );
+ if ( query.length ) {
+ this.results.selectItem( this.results.getFirstSelectableItem()
);
+ }
+};
--
To view, visit https://gerrit.wikimedia.org/r/71562
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie5dbe8c44ce5d64c4b49b09517fb66cd30dd7304
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Robmoen <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
