User:AdhamKhatean/Blogs/phase 1: Done

Now it is the end of the first month of the coding period, for this month we planned to create a new panel for the maps object in the TemplateData GUI to display and modify maps instead of editing maps as JSON, and we successfully have done that.

But, we have disabled it for now as it is not complete yet as it was intended to initially isolate maps object into this panel and display it as a JSON format, this isolation might be quite useful for overwhelming large templates, but it is still not what we wanted.

So, our goal for next is to parse this object to be more like a normal text for users, for example instead of this:

{
    "name": {},
    "age": {},
    "country": {}
}

It should be something like that:

name:
age: 
country:

So, what have we done this week in terms of code?Italic text

First, we used OOUI -which already been used in TemplateData GUI- to create maps panel in modules/ext.templateDataGenerator.editTemplatePage/Dialog.js

Starting with creating the panel layout object:

this.editMapsPanel = new OO.ui.PanelLayout();

then we created and added panel conponents using OOUI object:

// Maps panel
	this.newMapInfo = new OO.ui.MultilineTextInputWidget( {
		autosize: true,
		disabled: true,
		rows: 5,
		maxRows: 21,
		placeholder: mw.msg( 'templatedata-modal-placeholder-mapinfo' ) 
	} );
	templateMapsFieldSet = new OO.ui.FieldsetLayout(
		this.newMapInfo, // Text box contains citation info
		{
			align: 'top',
			label: mw.msg( 'templatedata-modal-title-map' )
		}
	);

Then we added a button in the main panel to navigate to Maps Panel:

	// Add Maps panel button
	this.mapsPanelButton = new OO.ui.ButtonWidget( {
		label: mw.msg( 'templatedata-modal-button-map' )
	} );
	mapsActionFieldLayout = new OO.ui.ActionFieldLayout(
		this.mapsPanelButton,
		{
			align: 'left',
			label: mw.msg( 'templatedata-modal-button-map' )
		}
	);

now that we have the panel and can navigate to it, we need to navigate out of it to the main panel, so we have added maps panel to 'done' and 'back' actions in mw.TemplateData.Dialog.static.actions attribute.

		action: 'done',
		label: mw.msg( 'templatedata-modal-button-done' ),
		flags: [ 'primary', 'progressive' ],
		modes: [ 'edit', 'maps' ]

		action: 'back',
		label: mw.msg( 'templatedata-modal-button-back' ),
		flags: [ 'safe', 'back' ],
		modes: [ 'language', 'add', 'maps' ]

Now, lets give some more functionality to out components!

	this.mapsPanelButton.connect( this, { click: 'onMapsPanelButton' } );
	this.newMapInfo.connect( this, { change: 'onMapInfoChange' } );

But, what does the previous code even does? So, for the first line onMapsPanelButton is a function that is triggered whenever the user clicks the mapsPanelButton which is our button that we wanted to use to navigate to the maps panel, and what it is doing through triggering onMapsPanelButton.

mw.TemplateData.Dialog.prototype.onMapsPanelButton = function () {
	this.switchPanels( 'editMaps' );
};

So, what about this.newMapInfo.connect( this, { change: 'onMapInfoChange' } ); ? it works in the same way but it is triggered through change not through click, so whenever a user makes a change (writes or deletes a character) this function is triggered to change the value o map info with this new values made by the user.

mw.TemplateData.Dialog.prototype.onMapInfoChange = function ( value ) {
	if ( this.model.getMapInfo() !== value ) {
		this.model.setMapInfo( value );
	}
};

Oh! and now we another two functions? do not worry I will explain them!

so first, we need to know what does this previous function does. It is simply checking if the value of the existing map and the values user inserts are the same, if they are not it will change the value of maps ith the value the user inserted.

and this is how it gets the existing maps value:

mw.TemplateData.Model.prototype.getMapInfo = function () {
	return this.maps;
};

and this is how is sets the new map info:

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' );
	}
};

and this how maps object works in its GUI version untill now, as some changes will be done soon as we move forward especially on how new map info is set.

NOTICE: this is not the whole written code, so some parts might not clearly explained, but I think now you get the outlines. and you might also check the code and future updates and related tasks on gerrit: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/TemplateData/+/602382