diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js index 9aba433a61..fc2a64ec0f 100644 --- a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js +++ b/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 ); diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTemplateOutlineTemplateWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTemplateOutlineTemplateWidget.js index c117826cd8..e06969174b 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWTemplateOutlineTemplateWidget.js +++ b/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. +}; diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js index 87c26eaa8c..b7b3c4bc87 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js +++ b/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 ); +};