From c35c1f6813be408e19a25930878fb1144ef2ac96 Mon Sep 17 00:00:00 2001
From: Thiemo Kreuz <thiemo.kreuz@wikimedia.de>
Date: Wed, 17 Aug 2022 13:48:14 +0200
Subject: [PATCH] Dynamically calculate height of toolbar sticky headers

Alternative for Idf4d69d.

Bug: T315292
Change-Id: I15231d66bb832b92d1924881b0df7dbe9f26a921
---
 .../ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js  |  1 +
 ...ve.ui.MWTransclusionOutlineTemplateWidget.js | 16 +++++++++++-----
 .../ve.ui.MWTransclusionOutlineWidget.js        | 17 ++++++++++++++++-
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
index a5b4fddd9b..f5e32cc558 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
@@ -497,6 +497,7 @@ ve.ui.MWTemplateDialog.prototype.getSetupProcess = function ( data ) {
 				if ( !dialog.transclusionModel.isSingleTemplate() ) {
 					dialog.sidebar.hideAllUnusedParameters();
 				}
+				dialog.sidebar.initializeAllStickyHeaderHeights();
 			} );
 		}, this );
 };
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
index 6fbe7ab5b5..09517e74d4 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineTemplateWidget.js
@@ -362,9 +362,13 @@ ve.ui.MWTransclusionOutlineTemplateWidget.prototype.toggleFilters = function ()
 		this.updateUnusedParameterToggleState();
 	}
 
-	if ( this.parameterList ) {
-		// TODO find a dynamic way to get height of the sticky part
-		this.parameterList.stickyHeaderHeight = visible ? 113 : 0;
+	this.recalculateStickyHeaderHeight();
+};
+
+ve.ui.MWTransclusionOutlineTemplateWidget.prototype.recalculateStickyHeaderHeight = function () {
+	// A template with no used parameters might have a sticky header, but no paramater list yet
+	if ( this.$stickyHeader && this.parameterList ) {
+		this.parameterList.stickyHeaderHeight = Math.floor( this.$stickyHeader.outerHeight() );
 	}
 };
 
@@ -391,7 +395,7 @@ ve.ui.MWTransclusionOutlineTemplateWidget.prototype.initializeFilters = function
 		classes: [ 've-ui-mwTransclusionOutlineTemplateWidget-no-match' ]
 	} ).toggle( false );
 
-	var $stickyHeader = $( '<div>' )
+	this.$stickyHeader = $( '<div>' )
 		.addClass( 've-ui-mwTransclusionOutlineTemplateWidget-sticky' )
 		.append(
 			this.header.$element,
@@ -400,7 +404,7 @@ ve.ui.MWTransclusionOutlineTemplateWidget.prototype.initializeFilters = function
 		);
 
 	this.$element.prepend(
-		$stickyHeader,
+		this.$stickyHeader,
 		this.infoWidget.$element
 	);
 };
@@ -449,6 +453,8 @@ ve.ui.MWTransclusionOutlineTemplateWidget.prototype.filterParameters = function
 	this.toggleUnusedWidget.toggle( !query );
 	this.infoWidget.toggle( nothingFound );
 	this.parameterList.setTabIndex( nothingFound ? -1 : 0 );
+	// The "hide unused" button might be hidden now, which changes the height of the sticky header
+	this.recalculateStickyHeaderHeight();
 	this.emit( 'filterParametersById', visibility );
 };
 
diff --git a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWidget.js b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWidget.js
index 623b73532f..377b9e9e18 100644
--- a/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWidget.js
+++ b/modules/ve-mw/ui/widgets/ve.ui.MWTransclusionOutlineWidget.js
@@ -88,8 +88,14 @@ ve.ui.MWTransclusionOutlineWidget.prototype.removePartWidget = function ( part )
  * @fires filterPagesByName
  */
 ve.ui.MWTransclusionOutlineWidget.prototype.addPartWidget = function ( part, newPosition, removed ) {
-	var widget;
+	var keys = Object.keys( this.partWidgets ),
+		onlyPart = keys.length === 1 && this.partWidgets[ keys[ 0 ] ];
+	if ( onlyPart instanceof ve.ui.MWTransclusionOutlineTemplateWidget ) {
+		// To recalculate the height of the sticky header when we enter multi-part mode
+		onlyPart.recalculateStickyHeaderHeight();
+	}
 
+	var widget;
 	if ( part instanceof ve.dm.MWTemplateModel ) {
 		widget = new ve.ui.MWTransclusionOutlineTemplateWidget( part, removed instanceof ve.dm.MWTemplatePlaceholderModel );
 		// This forwards events from the nested ve.ui.MWTransclusionOutlineTemplateWidget upwards.
@@ -126,6 +132,15 @@ ve.ui.MWTransclusionOutlineWidget.prototype.hideAllUnusedParameters = function (
 	}
 };
 
+ve.ui.MWTransclusionOutlineWidget.prototype.initializeAllStickyHeaderHeights = function () {
+	for ( var id in this.partWidgets ) {
+		var partWidget = this.partWidgets[ id ];
+		if ( partWidget instanceof ve.ui.MWTransclusionOutlineTemplateWidget ) {
+			partWidget.recalculateStickyHeaderHeight();
+		}
+	}
+};
+
 /**
  * This is inspired by {@see OO.ui.SelectWidget.selectItem}, but isn't one.
  *