Wire model changes into new template sidebar

Only partially wired.

Bug: T274545
Change-Id: I961ffbdd82829b18c08a7c33759a05427103fa8b

modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js

@@ -32,6 +32,7 @@ ve.ui.MWTemplateDialog = function VeUiMWTemplateDialog( config ) {
 	this.altered = false;
 	this.preventReselection = false;
 	this.templateParameterPlaceholderPages = {};
+	this.isNewSidebar = mw.config.get( 'wgVisualEditorConfig' ).transclusionDialogNewSidebar;
 
 	this.confirmOverlay = new ve.ui.Overlay( { classes: [ 've-ui-overlay-global' ] } );
 	this.confirmDialogs = new ve.ui.WindowManager( { factory: ve.ui.windowFactory, isolate: true } );
@@ -468,6 +469,12 @@ ve.ui.MWTemplateDialog.prototype.getSetupProcess = function ( data ) {
 			// with OOUI logic for marking fields as invalid (T199838). We set it back to true below.
 			this.bookletLayout.autoFocus = false;
 
+			if ( this.isNewSidebar ) {
+				this.pocSidebar = new ve.ui.MWTransclusionOutlineContainerWidget( {
+					transclusionModel: this.transclusionModel
+				} );
+			}
+
 			// Initialization
 			if ( !this.selectedNode ) {
 				if ( data.template ) {
@@ -519,33 +526,12 @@ ve.ui.MWTemplateDialog.prototype.getSetupProcess = function ( data ) {
 				dialog.loaded = true;
 				dialog.$element.addClass( 've-ui-mwTemplateDialog-ready' );
 
-				// FIXME: Proof-of-concept for T274543, to be removed.  None of
-				// this code will be needed, instead the bookletLayout will
-				// instantiate the appropriate sidebar.
-				if ( mw.config.get( 'wgVisualEditorConfig' ).transclusionDialogNewSidebar ) {
-					var intRange = [];
-					for ( var index = 0; index < 40; index++ ) {
-						intRange.push( index );
-					}
-					var template1 = new ve.ui.MWTemplateOutlineTemplateWidget( {
-						// Generate sample data.
-						items: intRange.map(
-							function ( j ) {
-								return new ve.ui.MWTemplateOutlineParameterCheckboxLayout( {
-									required: j < 5,
-									// TODO: Label can be a passed as an unevaluated lazy message function.
-									label: 'Parameter number ' + ( j + 1 ) + ' plus long text continuation',
-									selected: j % 2
-								} );
-							}
-						)
-					} );
-					var pocSidebar = new ve.ui.MWTransclusionOutlineContainerWidget( {
-						items: template1
-					} );
+				if ( dialog.isNewSidebar ) {
+					// TODO: bookletLayout will be deprecated.
+					dialog.$body.append( dialog.pocSidebar.$element );
 					dialog.bookletLayout.$element.find( '.oo-ui-outlineSelectWidget' )
 						.empty()
-						.append( pocSidebar.$element );
+						.append( dialog.pocSidebar.$element );
 				}
 
 				dialog.$body.append( dialog.bookletLayout.$element );

modules/ve-mw/ui/widgets/ve.ui.MWTemplateOutlineTemplateWidget.js

@@ -14,24 +14,26 @@
  * @param {Object} [config] Configuration options
  */
 ve.ui.MWTemplateOutlineTemplateWidget = function VeUiMWTemplateOutlineTemplateWidget( config ) {
-	config = config || {};
-
 	// Parent constructor
 	ve.ui.MWTemplateOutlineTemplateWidget.super.call( this, config );
 
 	// Initialization
-	// TODO: var title = new OO
+	this.templateModel = config.templateModel.connect( this, {
+		add: 'onAddParameter'
+		// remove: 'onRemoveParameter'
+	} );
 
-	var parameters = new ve.ui.MWTemplateOutlineCheckboxListWidget( {
-		// TODO: Probably take some responsibility for interpreting a template model.
-		items: config.items
+	var checkboxes = this.templateModel.getAllParametersOrdered().map(
+		this.createCheckbox.bind( this ) );
+	this.parameters = new ve.ui.MWTemplateOutlineCheckboxListWidget( {
+		items: checkboxes
 	} );
 	var layout = new OO.ui.Layout( {
 		// TODO: template title and icon
-		items: [ parameters ]
+		items: [ this.parameters ]
 	} );
 	layout.$element
-		.append( parameters.$element );
+		.append( this.parameters.$element );
 
 	this.$element
 		.append( layout.$element )
@@ -41,3 +43,21 @@ ve.ui.MWTemplateOutlineTemplateWidget = function VeUiMWTemplateOutlineTemplateWi
 /* Inheritance */
 
 OO.inheritClass( ve.ui.MWTemplateOutlineTemplateWidget, OO.ui.Widget );
+
+ve.ui.MWTemplateOutlineTemplateWidget.prototype.createCheckbox = function ( name ) {
+	var parameterModel = this.templateModel.getParameter( name );
+	var isPresent = !!parameterModel;
+	if ( !parameterModel ) {
+		// TODO: Streamline, don't create a temporary parameter model?
+		parameterModel = new ve.dm.MWParameterModel( this.templateModel, name );
+	}
+	return new ve.ui.MWTemplateOutlineParameterCheckboxLayout( {
+		required: parameterModel.isRequired(),
+		label: parameterModel.getName(),
+		selected: isPresent
+	} );
+};
+
+ve.ui.MWTemplateOutlineTemplateWidget.prototype.onAddParameter = function ( /* parameter */ ) {
+	// Note: this is not called when initially populating the template, we attach to its events too late.
+};

modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js

@@ -18,15 +18,60 @@ ve.ui.MWTransclusionOutlineContainerWidget = function VeUiMWTransclusionOutlineC
 	// Parent constructor
 	ve.ui.MWTransclusionOutlineContainerWidget.super.call( this, config );
 
-	config = config || {};
-
 	// Initialization
-	var layout = new OO.ui.Layout( {
-		content: [ config.items ]
+	this.transclusionModel = config.transclusionModel;
+
+	this.containerLayout = new OO.ui.Layout();
+	this.$element.append( this.containerLayout.$element );
+
+	// Events
+	this.transclusionModel.connect( this, {
+		replace: 'onReplacePart'
+		// TODO
+		// change: 'onTransclusionModelChange'
 	} );
-	this.$element.append( layout.$element );
 };
 
 /* Inheritance */
 
 OO.inheritClass( ve.ui.MWTransclusionOutlineContainerWidget, OO.ui.Widget );
+
+/* Events */
+
+/**
+ * Handle parts being replaced.
+ *
+ * @param {ve.dm.MWTransclusionPartModel} removed Removed part
+ * @param {ve.dm.MWTransclusionPartModel} added Added part
+ */
+ve.ui.MWTransclusionOutlineContainerWidget.prototype.onReplacePart = function ( removed, added ) {
+	if ( removed instanceof ve.dm.MWTemplateModel ) {
+		// TODO
+		// this.removeTemplate( removed );
+	}
+	// TODO: and for wikitext snippets?
+	// TODO: reselect if active part was in a removed template
+
+	if ( added instanceof ve.dm.MWTemplateModel ) {
+		this.addTemplate( added );
+	}
+	// TODO: and for wikitext snippets?
+};
+
+/* Methods */
+
+/**
+ * Add a template container
+ *
+ * @private
+ * @param {ve.dm.MWTemplateModel} template Added part
+ */
+ve.ui.MWTransclusionOutlineContainerWidget.prototype.addTemplate = function ( template ) {
+	// FIXME: Respect order
+	var container = new ve.ui.MWTemplateOutlineTemplateWidget( {
+		templateModel: template
+	} );
+
+	this.containerLayout.$element
+		.append( container.$element );
+};