From 31904688df8cf4fc1d879e23b7ed66b4937c5c60 Mon Sep 17 00:00:00 2001 From: Thiemo Kreuz Date: Tue, 13 Jul 2021 09:27:22 +0200 Subject: [PATCH] Update new sidebar when moving template parts up/down The new sidebar now updates accordingly when elements are moved around. Bug: T274544 Change-Id: Ic6bc3484c54523aa4edc6b48a843c47059569061 --- ...ui.MWTransclusionOutlineContainerWidget.js | 23 ++++++++++++++++--- .../ve.ui.MWTransclusionOutlinePartWidget.js | 14 ++++++++++- ....MWTransclusionOutlinePlaceholderWidget.js | 2 +- ....ui.MWTransclusionOutlineTemplateWidget.js | 2 +- ....ui.MWTransclusionOutlineWikitextWidget.js | 2 +- 5 files changed, 36 insertions(+), 7 deletions(-) diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js index dee4be8389..1c0590cb88 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js +++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineContainerWidget.js @@ -26,9 +26,8 @@ ve.ui.MWTransclusionOutlineContainerWidget = function VeUiMWTransclusionOutlineC // Events this.transclusionModel.connect( this, { - replace: 'onReplacePart' - // TODO - // change: 'onTransclusionModelChange' + replace: 'onReplacePart', + change: 'onTransclusionModelChange' } ); this.$element.addClass( 've-ui-mwTransclusionOutlineContainerWidget' ); @@ -56,6 +55,24 @@ ve.ui.MWTransclusionOutlineContainerWidget.prototype.onReplacePart = function ( } }; +/** + * @private + */ +ve.ui.MWTransclusionOutlineContainerWidget.prototype.onTransclusionModelChange = function () { + var newOrder = this.transclusionModel.getParts(); + + for ( var i = 0; i < newOrder.length; i++ ) { + var expectedWidget = this.partWidgets[ newOrder[ i ].getId() ], + $expectedElement = expectedWidget && expectedWidget.$element, + $currentElement = this.$element.children().eq( i ); + + if ( !$currentElement.is( $expectedElement ) ) { + // Move each widget to the correct position if it wasn't there before + $currentElement.before( $expectedElement ); + } + } +}; + /* Methods */ /** diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js index 863bc6f940..177d6a0e28 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js +++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePartWidget.js @@ -13,11 +13,12 @@ * @extends OO.ui.Widget * * @constructor + * @param {ve.dm.MWTransclusionPartModel} part * @param {Object} [config] * @cfg {string} [icon=''] * @cfg {string} [label] */ -ve.ui.MWTransclusionOutlinePartWidget = function VeUiMWTransclusionOutlinePartWidget( config ) { +ve.ui.MWTransclusionOutlinePartWidget = function VeUiMWTransclusionOutlinePartWidget( part, config ) { // Parent constructor ve.ui.MWTransclusionOutlinePartWidget.super.call( this, config ); @@ -25,11 +26,15 @@ ve.ui.MWTransclusionOutlinePartWidget = function VeUiMWTransclusionOutlinePartWi OO.ui.mixin.IconElement.call( this, config ); OO.ui.mixin.LabelElement.call( this, config ); + this.id = part.getId(); + this.$header = $( '
' ) .addClass( 've-ui-mwTransclusionOutlinePartWidget-header' ) .prepend( this.$icon, this.$label ); this.$element .addClass( 've-ui-mwTransclusionOutlinePartWidget' ) + // Note: There is no code that uses this. It just helps when manually inspecting the HTML. + .attr( 'data-transclusion-part-id', part.getId() ) .prepend( this.$header ); }; @@ -40,3 +45,10 @@ OO.mixinClass( ve.ui.MWTransclusionOutlinePartWidget, OO.ui.mixin.IconElement ); OO.mixinClass( ve.ui.MWTransclusionOutlinePartWidget, OO.ui.mixin.LabelElement ); // TODO: Add OO.ui.mixin.AccessKeyedElement? // TODO: Add OO.ui.mixin.TitledElement? + +/** + * @return {string} Identifier of the {@see ve.dm.MWTransclusionPartModel} this widget represents + */ +ve.ui.MWTransclusionOutlinePartWidget.prototype.getId = function () { + return this.id; +}; diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePlaceholderWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePlaceholderWidget.js index 42bf97ecc8..a317ea00b1 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePlaceholderWidget.js +++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlinePlaceholderWidget.js @@ -21,7 +21,7 @@ ve.ui.MWTransclusionOutlinePlaceholderWidget = function VeUiMWTransclusionOutlin }, config ); // Parent constructor - ve.ui.MWTransclusionOutlinePlaceholderWidget.super.call( this, config ); + ve.ui.MWTransclusionOutlinePlaceholderWidget.super.call( this, placeholder, config ); this.placeholder = placeholder; }; diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js index a1ccfbcf10..8b674b8322 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js +++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js @@ -20,7 +20,7 @@ ve.ui.MWTransclusionOutlineTemplateWidget = function VeUiMWTransclusionOutlineTe }, config ); // Parent constructor - ve.ui.MWTransclusionOutlineTemplateWidget.super.call( this, config ); + ve.ui.MWTransclusionOutlineTemplateWidget.super.call( this, template, config ); // Initialization this.templateModel = template.connect( this, { diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWikitextWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWikitextWidget.js index acf4ea52c1..64d9958026 100644 --- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWikitextWidget.js +++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWikitextWidget.js @@ -14,7 +14,7 @@ ve.ui.MWTransclusionOutlineWikitextWidget = function VeUiMWTransclusionOutlineWi }, config ); // Parent constructor - ve.ui.MWTransclusionOutlineWikitextWidget.super.call( this, config ); + ve.ui.MWTransclusionOutlineWikitextWidget.super.call( this, content, config ); this.content = content; };