Mooeypoo has uploaded a new change for review.
https://gerrit.wikimedia.org/r/182962
Change subject: Add param order drag/drop widget to TemplateData dialog
......................................................................
Add param order drag/drop widget to TemplateData dialog
Make sure the parameter order is editable with the drag/drop widget.
Change-Id: I35079907b2ed9f5ecdcd438dd69ed9892ce3e428
---
M .jshintrc
M TemplateData.php
M modules/ext.templateDataGenerator.data.js
M modules/ext.templateDataGenerator.ui.tdDialog.js
A modules/widgets/ext.templateDataGenerator.dragDropItemWidget.js
A modules/widgets/ext.templateDataGenerator.dragDropWidget.js
6 files changed, 215 insertions(+), 11 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/TemplateData
refs/changes/62/182962/1
diff --git a/.jshintrc b/.jshintrc
index 20eaae9..dccd4af 100644
--- a/.jshintrc
+++ b/.jshintrc
@@ -29,6 +29,8 @@
"TemplateDataOptionWidget": true,
"TemplateDataOptionImportWidget": true,
"TemplateDataLanguageSearchWidget": true,
- "TemplateDataLanguageResultWidget": true
+ "TemplateDataLanguageResultWidget": true,
+ "TemplateDataDragDropItemWidget": true,
+ "TemplateDataDragDropWidget": true
}
}
diff --git a/TemplateData.php b/TemplateData.php
index 6f9b178..35e80de 100644
--- a/TemplateData.php
+++ b/TemplateData.php
@@ -94,6 +94,8 @@
'modules/widgets/ext.templateDataGenerator.optionImportWidget.js',
'modules/widgets/ext.templateDataGenerator.languageResultWidget.js',
'modules/widgets/ext.templateDataGenerator.languageSearchWidget.js',
+
'modules/widgets/ext.templateDataGenerator.dragDropItemWidget.js',
+ 'modules/widgets/ext.templateDataGenerator.dragDropWidget.js',
'modules/ext.templateDataGenerator.ui.tdDialog.js',
),
'dependencies' => array(
diff --git a/modules/ext.templateDataGenerator.data.js
b/modules/ext.templateDataGenerator.data.js
index fe9367d..72aadc8 100644
--- a/modules/ext.templateDataGenerator.data.js
+++ b/modules/ext.templateDataGenerator.data.js
@@ -17,6 +17,7 @@
this.params = {};
this.description = {};
this.paramOrder = [];
+ this.paramOrderChanged = false;
this.paramIdentifierCounter = 0;
this.setPageSubLevel( !!config.isPageSubLevel );
this.setFullPageName( config.fullPageName || '' );
@@ -263,8 +264,6 @@
// Get parameter list from the template source code
this.getParametersFromTemplateSource( tdString ).done(
$.proxy( function ( params ) {
this.sourceCodeParameters = params;
- this.setTemplateDescription(
original.description );
- this.setTemplateParamOrder( original.paramOrder
);
// Mark existing parameters in the model
if ( original.params ) {
@@ -272,6 +271,12 @@
this.addParam( param,
original.params[param] );
}
}
+ this.setTemplateDescription(
original.description );
+ // Override the param order if it exists in the
templatedata string
+ if ( original.paramOrder &&
original.paramOrder.length > 0 ) {
+ this.setTemplateParamOrder(
original.paramOrder );
+ }
+
deferred.resolve();
}, this ) );
} else {
@@ -544,6 +549,9 @@
}
}
+ // Add to paramOrder
+ this.addKeyTemplateParamOrder( key );
+
// Trigger the add parameter event
this.emit( 'add-param', key, this.params[key] );
return true;
@@ -623,6 +631,7 @@
/**
* Set template param order array.
* @param {string[]} orderArray Parameter key array in order
+ * @fires change-paramOrder
*/
TemplateDataModel.prototype.setTemplateParamOrder = function (
orderArray ) {
orderArray = orderArray || [];
@@ -633,6 +642,43 @@
};
/**
+ * Add a key to the end of the paramOrder
+ * @param {string} key New key the add into the paramOrder
+ * @fires add-paramOrder
+ */
+ TemplateDataModel.prototype.addKeyTemplateParamOrder = function ( key )
{
+ if ( $.inArray( key, this.paramOrder ) === -1 ) {
+ this.paramOrder.push( key );
+ this.emit( 'add-paramOrder', key );
+ }
+ };
+
+ TemplateDataModel.prototype.reorderParamOrderKey = function ( key,
newIndex ) {
+ var keyIndex = this.paramOrder.indexOf( key );
+ // Move the parameter
+ this.paramOrder.splice(
+ newIndex,
+ 0,
+ this.paramOrder.splice( keyIndex, 1 )[0]
+ );
+
+ // Emit event
+ this.emit( 'change-paramOrder', this.paramOrder );
+ };
+
+ /**
+ * Add a key to the end of the paramOrder
+ * @param {string} key New key the add into the paramOrder
+ */
+ TemplateDataModel.prototype.removeKeyTemplateParamOrder = function (
key ) {
+ var keyPos = $.inArray( key, this.paramOrder );
+ if ( keyPos > -1 ) {
+ this.paramOrder.splice( keyPos, 1 );
+ this.emit( 'change-paramOrder', this.paramOrder );
+ }
+ };
+
+ /**
* Retrieve the template paramOrder array
* @return {string[]} orderArray Parameter keys in order
*/
diff --git a/modules/ext.templateDataGenerator.ui.tdDialog.js
b/modules/ext.templateDataGenerator.ui.tdDialog.js
index babc8ef..7f73e1a 100644
--- a/modules/ext.templateDataGenerator.ui.tdDialog.js
+++ b/modules/ext.templateDataGenerator.ui.tdDialog.js
@@ -61,7 +61,8 @@
*/
TemplateDataDialog.prototype.initialize = function () {
var templateParamsFieldset, languageFieldset,
- addParamFieldlayout, languageFieldLayout;
+ addParamFieldlayout, languageFieldLayout,
+ paramOrderFieldset;
// Parent method
TemplateDataDialog.super.prototype.initialize.call( this );
@@ -124,6 +125,17 @@
items: [ languageFieldLayout, this.languagePanelButton ]
} );
+ // ParamOrder
+ this.paramOrderWidget = new TemplateDataDragDropWidget( {
+ $: this.$,
+ orientation: 'horizontal'
+ } );
+ paramOrderFieldset = new OO.ui.FieldsetLayout( {
+ $: this.$,
+ label: mw.msg(
'templatedata-modal-title-templateparams' ),
+ items: [ this.paramOrderWidget ]
+ } );
+
this.descriptionInput = new OO.ui.TextInputWidget( {
$: this.$,
multiline: true,
@@ -153,6 +165,7 @@
this.paramListNoticeLabel.$element,
languageFieldset.$element,
this.templateDescriptionFieldset.$element,
+ paramOrderFieldset.$element,
templateParamsFieldset.$element
);
this.paramEditNoticeLabel = new OO.ui.LabelWidget( { $: this.$
} );
@@ -196,6 +209,7 @@
this.newLanguageSearchWidget.connect( this, { select:
'newLanguageSearchWidgetSelect' } );
this.addParamButton.connect( this, { click:
'onAddParamButtonClick' } );
this.descriptionInput.connect( this, { change:
'onDescriptionInputChange' } );
+ this.paramOrderWidget.connect( this, { reorder:
'onParamOrderWidgetReorder' } );
this.languagePanelButton.connect( this, { click:
'onLanguagePanelButton' } );
this.languageDropdownWidget.getMenu().connect( this, { choose:
'onLanguageDropdownWidgetChoose' } );
this.paramSelectWidget.connect( this, { choose:
'onParamSelectWidgetChoose' } );
@@ -208,6 +222,47 @@
*/
TemplateDataDialog.prototype.onModelChangeDescription = function (
description ) {
this.descriptionInput.setValue( description );
+ };
+
+ /**
+ * Respond to change of paramOrder from the model
+ * @param {string[]} paramOrderArray The array of keys in order
+ */
+ TemplateDataDialog.prototype.onModelChangeParamOrder = function (
paramOrderArray ) {
+ var i,
+ items = [];
+
+ this.paramOrderWidget.clearItems();
+ for ( i = 0; i < paramOrderArray.length; i++ ) {
+ items.push(
+ new TemplateDataDragDropItemWidget( {
+ $: this.$,
+ data: paramOrderArray[i],
+ label: paramOrderArray[i]
+ } )
+ );
+ }
+ this.paramOrderWidget.addItems( items );
+
+ // Refresh the parameter widget
+ this.repopulateParamSelectWidget();
+ };
+
+ /**
+ * Respond to an addition of a key to the model paramOrder
+ * @param {string} key Added key
+ */
+ TemplateDataDialog.prototype.onModelAddKeyParamOrder = function ( key )
{
+ var dragItem = new TemplateDataDragDropItemWidget( {
+ $: this.$,
+ data: key,
+ label: key
+ } );
+ this.paramOrderWidget.addItems( [ dragItem ] );
+ };
+
+ TemplateDataDialog.prototype.onParamOrderWidgetReorder = function (
item, newIndex ) {
+ this.model.reorderParamOrderKey( item.getData(), newIndex );
};
/**
@@ -389,16 +444,18 @@
* Empty and repopulate the parameter select widget.
*/
TemplateDataDialog.prototype.repopulateParamSelectWidget = function () {
- var paramKey,
+ var i, paramKey,
missingParams = this.model.getMissingParams(),
- paramList = this.model.getParams();
+ paramList = this.model.getParams(),
+ paramOrder = this.model.getTemplateParamOrder();
this.paramSelectWidget.clearItems();
+
// Update all param descriptions in the param select widget
- this.paramSelectWidget.clearItems();
- for ( paramKey in paramList ) {
- if ( !paramList[paramKey].deleted ) {
- this.addParamToSelectWidget( paramKey );
+ for ( i in paramOrder ) {
+ paramKey = paramList[paramOrder[i]];
+ if ( paramKey && !paramKey.deleted ) {
+ this.addParamToSelectWidget( paramOrder[i] );
}
}
@@ -666,7 +723,9 @@
// Events
this.model.connect( this, {
- 'change-description':
'onModelChangeDescription'
+ 'change-description':
'onModelChangeDescription',
+ 'change-paramOrder':
'onModelChangeParamOrder',
+ 'add-paramOrder':
'onModelAddKeyParamOrder'
} );
// Load the model according to the string
diff --git a/modules/widgets/ext.templateDataGenerator.dragDropItemWidget.js
b/modules/widgets/ext.templateDataGenerator.dragDropItemWidget.js
new file mode 100644
index 0000000..612e6f0
--- /dev/null
+++ b/modules/widgets/ext.templateDataGenerator.dragDropItemWidget.js
@@ -0,0 +1,30 @@
+/**
+ * Generic option widget for use with OO.ui.SelectWidget.
+ *
+ * @class
+ * @extends OO.ui.OptionWidget
+ * @mixins OO.ui.DraggableElement
+ *
+ * @constructor
+ * @param {Mixed} data Option data
+ * @param {Object} [config] Configuration options
+ */
+TemplateDataDragDropItemWidget = function TemplateDataDragDropItemWidget(
config ) {
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ TemplateDataDragDropItemWidget.super.call( this, $.extend( {}, { icon:
'parameter' }, config ) );
+
+ // Mixin constructors
+ OO.ui.DraggableElement.call( this, config );
+
+ // Initialization
+ this.$element
+ .addClass( 'tdg-TemplateDataDragDropItemWidget' );
+};
+
+/* Setup */
+
+OO.inheritClass( TemplateDataDragDropItemWidget, OO.ui.DecoratedOptionWidget );
+OO.mixinClass( TemplateDataDragDropItemWidget, OO.ui.DraggableElement );
diff --git a/modules/widgets/ext.templateDataGenerator.dragDropWidget.js
b/modules/widgets/ext.templateDataGenerator.dragDropWidget.js
new file mode 100644
index 0000000..c48af7f
--- /dev/null
+++ b/modules/widgets/ext.templateDataGenerator.dragDropWidget.js
@@ -0,0 +1,65 @@
+/**
+ * Drag and drop widget for TemplateData dialog
+ *
+ * Use together with TemplateDataDragDropItemWidget.
+ *
+ * @class
+ * @extends OO.ui.Widget
+ * @mixins OO.ui.DraggableGroupElement
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {OO.ui.OptionWidget[]} [items] Options to add
+ */
+TemplateDataDragDropWidget = function TemplateDataDragDropWidget( config ) {
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ TemplateDataDragDropWidget.super.call( this, config );
+
+ // Mixin constructors
+ OO.ui.DraggableGroupElement.call( this, $.extend( {}, config, { $group:
this.$element } ) );
+
+ // Initialization
+ this.$element.addClass( 'tdg-TemplateDataDragDropWidget' );
+};
+
+/* Setup */
+
+OO.inheritClass( TemplateDataDragDropWidget, OO.ui.Widget );
+OO.mixinClass( TemplateDataDragDropWidget, OO.ui.DraggableGroupElement );
+
+/**
+ * Get an array of keys based on the current items, in order
+ * @return {string[]} Array of keys
+ */
+TemplateDataDragDropWidget.prototype.getKeyArray = function () {
+ var i, len,
+ arr = [];
+
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ arr.push( this.items[i].getData() );
+ }
+
+ return arr;
+};
+
+/**
+ * Reorder the key into its new index. Find the item first, then add
+ * it back in its new place.
+ * @param {string} key Unique key
+ * @param {[type]} newIndex New index
+ */
+TemplateDataDragDropWidget.prototype.reorderKey = function ( key, newIndex ) {
+ var i, len, item;
+
+ // Get the item that belongs to this key
+ for ( i = 0, len = this.items.length; i < len; i++ ) {
+ if ( this.items[i].getData() === key ) {
+ item = this.items[i];
+ }
+ }
+
+ this.addItems( [ item ], newIndex );
+};
--
To view, visit https://gerrit.wikimedia.org/r/182962
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I35079907b2ed9f5ecdcd438dd69ed9892ce3e428
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/TemplateData
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
