Create initial UI for maps panel in TemplateData GUI

Adding maps object to TemplateData GUI. By adding mapPanelButton to the
main panel and creating the map panel which contains multiline input
widget to show and insert the map info.

Bug: T254478
Change-Id: Iacff86812cbc448fcdbae24e7eeffb0384781dd5

extension.json

@@ -120,6 +120,7 @@
 				"templatedata-modal-button-delparam",
 				"templatedata-modal-button-done",
 				"templatedata-modal-button-importParams",
+				"templatedata-modal-button-map",
 				"templatedata-modal-button-restoreparam",
 				"templatedata-modal-button-saveparam",
 				"templatedata-modal-confirmcancel",
@@ -136,6 +137,7 @@
 				"templatedata-modal-notice-import-numparams",
 				"templatedata-modal-placeholder-paramkey",
 				"templatedata-modal-search-input-placeholder",
+				"templatedata-modal-placeholder-mapinfo",
 				"templatedata-modal-table-param-actions",
 				"templatedata-modal-table-param-aliases",
 				"templatedata-modal-table-param-autovalue",

i18n/en.json

@@ -64,6 +64,7 @@
 	"templatedata-modal-button-changelang": "Change language",
 	"templatedata-modal-button-delparam": "Remove parameter information",
 	"templatedata-modal-button-done": "Done",
+	"templatedata-modal-button-map": "View map",
 	"templatedata-modal-button-importParams": "Import parameters",
 	"templatedata-modal-button-restoreparam": "Restore parameter",
 	"templatedata-modal-button-saveparam": "Save",
@@ -80,6 +81,7 @@
 	"templatedata-modal-json-error-replace": "Replace",
 	"templatedata-modal-notice-import-numparams": "$1 new {{PLURAL:$1|parameter was|parameters were}} imported: $2",
 	"templatedata-modal-placeholder-paramkey": "Parameter name",
+	"templatedata-modal-placeholder-mapinfo": "This template has no maps object",
 	"templatedata-modal-search-input-placeholder": "Search by language name or code",
 	"templatedata-modal-table-param-actions": "Actions",
 	"templatedata-modal-table-param-aliases": "Aliases (comma separated)",

i18n/qqq.json

@@ -76,6 +76,7 @@
 	"templatedata-modal-button-delparam": "Button to remove a parameter.",
 	"templatedata-modal-button-done": "Label of the done button.\n{{Identical|Done}}",
 	"templatedata-modal-button-importParams": "Label of the import button",
+	"templatedata-modal-button-map": "Label of the view map button",
 	"templatedata-modal-button-restoreparam": "Label for the button to restore a previously deleted parameter in the edit dialog.",
 	"templatedata-modal-button-saveparam": "Label for the button to save parameter details in the templatedata edit dialog.\n{{Identical|Save}}",
 	"templatedata-modal-confirmcancel": "Prompt shown to the user when they attempt to cancel the templatedata edit dialog after making changes.",
@@ -91,6 +92,7 @@
 	"templatedata-modal-json-error-replace": "Label for the button in the error message, agreeing to replace the existing faulty TemplateData string with a new one.\n{{Identical|Replace}}",
 	"templatedata-modal-notice-import-numparams": "Message that appears in the TemplateData generator GUI showing how many new parameters were imported into the GUI from an existing template.\n\nParameters:\n* $1 - number of parameters\n* $2 - list of parameters that were imported",
 	"templatedata-modal-placeholder-paramkey": "Placeholder for the input that contains new parameter name in the add parameter panel in the edit dialog.",
+	"templatedata-modal-placeholder-mapinfo": "Placeholder for the input that contains map information",
 	"templatedata-modal-search-input-placeholder": "Placeholder text for language search panel.",
 	"templatedata-modal-table-param-actions": "Label for a parameter property input: Parameter actions in the table\n{{Identical|Action}}",
 	"templatedata-modal-table-param-aliases": "Label for a parameter property input: Aliases of the parameter, instruct the user to separate aliases with commas.",

modules/ext.templateData/templateData.css

@@ -27,3 +27,11 @@
 .mw-templateData-doc-param-type {
 	white-space: nowrap;
 }
+
+.mw-tempateData-maps-panel-button {
+	margin-bottom: 0.5em;
+}
+
+.mw-tempateData-template-maps-input {
+	padding-bottom: 1em;
+}

modules/ext.templateDataGenerator.data/Model.js

@@ -13,6 +13,7 @@ mw.TemplateData.Model = function mwTemplateDataModel() {
 	// Properties
 	this.params = {};
 	this.description = {};
+	this.maps = {};
 	this.paramOrder = [];
 	this.format = null;
 	this.paramOrderChanged = false;
@@ -268,6 +269,10 @@ mw.TemplateData.Model.static.newFromObject = function ( tdObject, paramsInSource
 			model.addParam( param, tdObject.params[ param ] );
 		}
 	}
+
+	// maps
+	model.setMapInfo( JSON.stringify( tdObject.maps, null, 4 ) );
+
 	model.setTemplateDescription( tdObject.description );
 
 	// Override the param order if it exists in the templatedata string
@@ -523,6 +528,35 @@ mw.TemplateData.Model.prototype.getTemplateDescription = function ( language ) {
 	return this.description[ language ];
 };
 
+/**
+ * Set the template description
+ *
+ * @param {string|Object} map New template map info
+ * @fires change-map
+ * @fires change
+ */
+mw.TemplateData.Model.prototype.setMapInfo = function ( map ) {
+	if ( !this.constructor.static.compare( this.maps, map ) ) {
+		if ( typeof map === 'object' ) {
+			$.extend( this.maps, map );
+			this.emit( 'change-map', map );
+		} else {
+			this.maps = map;
+			this.emit( 'change-map', map );
+		}
+		this.emit( 'change' );
+	}
+};
+
+/**
+ * Get the template info.
+ *
+ * @return {string|Object} The template map info.
+ */
+mw.TemplateData.Model.prototype.getMapInfo = function () {
+	return this.maps;
+};
+
 /**
  * Get a specific parameter's localized property
  *

modules/ext.templateDataGenerator.editTemplatePage/Dialog.js

@@ -43,7 +43,7 @@ mw.TemplateData.Dialog.static.actions = [
 		action: 'done',
 		label: mw.msg( 'templatedata-modal-button-done' ),
 		flags: [ 'primary', 'progressive' ],
-		modes: 'edit'
+		modes: [ 'edit', 'maps' ]
 	},
 	{
 		action: 'add',
@@ -66,7 +66,7 @@ mw.TemplateData.Dialog.static.actions = [
 		action: 'back',
 		label: mw.msg( 'templatedata-modal-button-back' ),
 		flags: [ 'safe', 'back' ],
-		modes: [ 'language', 'add' ]
+		modes: [ 'language', 'add', 'maps' ]
 	}
 ];
 
@@ -81,7 +81,7 @@ mw.TemplateData.Dialog.static.actions = [
  * @chainable
  */
 mw.TemplateData.Dialog.prototype.initialize = function () {
-	var templateParamsFieldset, addParamFieldlayout, languageActionFieldLayout, templateFormatFieldSet;
+	var templateParamsFieldset, addParamFieldlayout, languageActionFieldLayout, templateFormatFieldSet, mapsActionFieldLayout, templateMapsFieldSet;
 
 	// Parent method
 	mw.TemplateData.Dialog.super.prototype.initialize.call( this );
@@ -98,6 +98,7 @@ mw.TemplateData.Dialog.prototype.initialize = function () {
 	this.editParamPanel = new OO.ui.PanelLayout();
 	this.languagePanel = new OO.ui.PanelLayout();
 	this.addParamPanel = new OO.ui.PanelLayout();
+	this.editMapsPanel = new OO.ui.PanelLayout();
 
 	// Language panel
 	this.newLanguageSearch = new mw.TemplateData.LanguageSearchWidget();
@@ -118,6 +119,23 @@ mw.TemplateData.Dialog.prototype.initialize = function () {
 		}
 	);
 
+	// Maps panel
+	this.templateMapsInput = new OO.ui.MultilineTextInputWidget( {
+		classes: [ 'mw-tempateData-template-maps-input' ],
+		autosize: true,
+		disabled: true,
+		rows: 5,
+		maxRows: 200,
+		placeholder: mw.msg( 'templatedata-modal-placeholder-mapinfo' )
+	} );
+	templateMapsFieldSet = new OO.ui.FieldsetLayout(
+		this.templateMapsInput,
+		{
+			align: 'top',
+			label: mw.msg( 'templatedata-modal-title-map' )
+		}
+	);
+
 	// Param list panel (main)
 	this.languageDropdownWidget = new OO.ui.DropdownWidget();
 	this.languagePanelButton = new OO.ui.ButtonWidget( {
@@ -139,6 +157,18 @@ mw.TemplateData.Dialog.prototype.initialize = function () {
 	this.templateDescriptionFieldset = new OO.ui.FieldsetLayout( {
 		items: [ this.descriptionInput ]
 	} );
+	// Add Maps panel button
+	this.mapsPanelButton = new OO.ui.ButtonWidget( {
+		label: mw.msg( 'templatedata-modal-button-map' ),
+		classes: [ 'mw-tempateData-maps-panel-button' ]
+	} );
+	mapsActionFieldLayout = new OO.ui.ActionFieldLayout(
+		this.mapsPanelButton,
+		{
+			align: 'left',
+			label: mw.msg( 'templatedata-modal-button-map' )
+		}
+	);
 	this.paramListNoticeLabel = new OO.ui.LabelWidget();
 	this.paramListNoticeLabel.$element.hide();
 
@@ -197,6 +227,7 @@ mw.TemplateData.Dialog.prototype.initialize = function () {
 			this.paramListNoticeLabel.$element,
 			languageActionFieldLayout.$element,
 			this.templateDescriptionFieldset.$element,
+			mapsActionFieldLayout.$element,
 			templateFormatFieldSet.$element,
 			templateParamsFieldset.$element
 		);
@@ -219,11 +250,17 @@ mw.TemplateData.Dialog.prototype.initialize = function () {
 		.addClass( 'tdg-templateDataDialog-addParamPanel' )
 		.append( addParamFieldlayout.$element );
 
+	// Maps panel
+	this.editMapsPanel.$element
+		.addClass( 'tdg-templateDataDialog-editMapsPanel' )
+		.append( templateMapsFieldSet.$element );
+
 	this.panels.addItems( [
 		this.listParamsPanel,
 		this.editParamPanel,
 		this.languagePanel,
-		this.addParamPanel
+		this.addParamPanel,
+		this.editMapsPanel
 	] );
 	this.panels.setItem( this.listParamsPanel );
 	this.panels.$element.addClass( 'tdg-templateDataDialog-panels' );
@@ -244,6 +281,8 @@ mw.TemplateData.Dialog.prototype.initialize = function () {
 	this.descriptionInput.connect( this, { change: 'onDescriptionInputChange' } );
 	this.languagePanelButton.connect( this, { click: 'onLanguagePanelButton' } );
 	this.languageDropdownWidget.getMenu().connect( this, { select: 'onLanguageDropdownWidgetSelect' } );
+	this.mapsPanelButton.connect( this, { click: 'onMapsPanelButton' } );
+	this.templateMapsInput.connect( this, { change: 'onMapInfoChange' } );
 	this.paramSelect.connect( this, {
 		choose: 'onParamSelectChoose',
 		reorder: 'onParamSelectReorder'
@@ -266,6 +305,15 @@ mw.TemplateData.Dialog.prototype.onModelChangeDescription = function ( descripti
 	this.descriptionInput.setValue( description );
 };
 
+/**
+ * Respond to model change of map info event
+ *
+ * @param {string} map New description
+ */
+mw.TemplateData.Dialog.prototype.onModelChangeMapInfo = function ( map ) {
+	this.templateMapsInput.setValue( map );
+};
+
 /**
  * Respond to add param input change.
  *
@@ -349,6 +397,17 @@ mw.TemplateData.Dialog.prototype.onDescriptionInputChange = function ( value ) {
 	}
 };
 
+/**
+ * Respond to edit maps input change event
+ *
+ * @param {string} value map info value
+ */
+mw.TemplateData.Dialog.prototype.onMapInfoChange = function ( value ) {
+	if ( this.model.getMapInfo() !== value ) {
+		this.model.setMapInfo( value );
+	}
+};
+
 /**
  * Respond to add language button click
  */
@@ -412,6 +471,13 @@ mw.TemplateData.Dialog.prototype.onNewLanguageSearchResultsChoose = function ( i
 	this.switchPanels( 'listParams' );
 };
 
+/**
+ * Respond to edit maps button click
+ */
+mw.TemplateData.Dialog.prototype.onMapsPanelButton = function () {
+	this.switchPanels( 'editMaps' );
+};
+
 /**
  * Respond to add parameter button
  */
@@ -931,6 +997,7 @@ mw.TemplateData.Dialog.prototype.getSetupProcess = function ( data ) {
 			this.model.connect( this, {
 				'change-description': 'onModelChangeDescription',
 				'change-paramOrder': 'onModelChangeParamOrder',
+				'change-map': 'onModelChangeMapInfo',
 				'change-property': 'onModelChangeProperty',
 				change: 'onModelChange'
 			} );
@@ -993,6 +1060,9 @@ mw.TemplateData.Dialog.prototype.setupDetailsFromModel = function () {
 	// Set up description
 	this.descriptionInput.setValue( this.model.getTemplateDescription( this.language ) );
 
+	// set up maps
+	this.templateMapsInput.setValue( this.model.getMapInfo() );
+
 	// Set up format
 	format = this.model.getTemplateFormat();
 	if ( format === 'inline' || format === 'block' || format === null ) {
@@ -1031,6 +1101,7 @@ mw.TemplateData.Dialog.prototype.switchPanels = function ( panel ) {
 			this.editParamPanel.$element.hide();
 			this.addParamPanel.$element.hide();
 			this.languagePanel.$element.hide();
+			this.editMapsPanel.$element.hide();
 			break;
 		case 'editParam':
 			this.actions.setMode( 'edit' );
@@ -1042,6 +1113,7 @@ mw.TemplateData.Dialog.prototype.switchPanels = function ( panel ) {
 			this.languagePanel.$element.hide();
 			this.addParamPanel.$element.hide();
 			this.editParamPanel.$element.show();
+			this.editMapsPanel.$element.hide();
 			break;
 		case 'addParam':
 			this.actions.setMode( 'add' );
@@ -1051,6 +1123,18 @@ mw.TemplateData.Dialog.prototype.switchPanels = function ( panel ) {
 			this.editParamPanel.$element.hide();
 			this.languagePanel.$element.hide();
 			this.addParamPanel.$element.show();
+			this.editMapsPanel.$element.hide();
+			break;
+		case 'editMaps':
+			this.actions.setMode( 'maps' );
+			this.panels.setItem( this.editMapsPanel );
+			// Hide/show panels
+			this.listParamsPanel.$element.hide();
+			this.editParamPanel.$element.hide();
+			this.languagePanel.$element.hide();
+			this.addParamPanel.$element.hide();
+			this.editMapsPanel.$element.show();
+			this.templateMapsInput.adjustSize( true );
 			break;
 		case 'language':
 			this.actions.setMode( 'language' );
@@ -1061,6 +1145,7 @@ mw.TemplateData.Dialog.prototype.switchPanels = function ( panel ) {
 			this.addParamPanel.$element.hide();
 			this.languagePanel.$element.show();
 			this.newLanguageSearch.query.focus();
+			this.editMapsPanel.$element.hide();
 			break;
 	}
 };
@@ -1082,6 +1167,11 @@ mw.TemplateData.Dialog.prototype.getActionProcess = function ( action ) {
 			this.switchPanels( 'addParam' );
 		}, this );
 	}
+	if ( action === 'maps' ) {
+		return new OO.ui.Process( function () {
+			this.switchPanels( 'editMaps' );
+		}, this );
+	}
 	if ( action === 'delete' ) {
 		return new OO.ui.Process( function () {
 			this.model.deleteParam( this.selectedParamKey );