Dynamically calculate height of toolbar sticky headers

Alternative for Idf4d69d.

Bug: T315292
Change-Id: I15231d66bb832b92d1924881b0df7dbe9f26a921
This commit is contained in:
Thiemo Kreuz 2022-08-17 13:48:14 +02:00
parent e9560b58b9
commit c35c1f6813
3 changed files with 28 additions and 6 deletions

View file

@ -497,6 +497,7 @@ ve.ui.MWTemplateDialog.prototype.getSetupProcess = function ( data ) {
if ( !dialog.transclusionModel.isSingleTemplate() ) {
dialog.sidebar.hideAllUnusedParameters();
}
dialog.sidebar.initializeAllStickyHeaderHeights();
} );
}, this );
};

View file

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

View file

@ -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.
*