bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Accommodate Vector sticky header in menu positioning

Browse Source 
Adds special logic to accommodate the ULS trigger being placed inside
modern Vector's sticky header, which has a fixed position and requires
the ULS menu to remain pinned to the page when scrolling.

Bug: T295391
Change-Id: Ic531dd2ae213f8221157386f79edb95bc61a8119
This commit is contained in:
Jan Drewniak
2021-11-24 00:00:24 -05:00
committed by jenkins-bot
parent c3bdd26c7a
commit 2d9279a1f1
1 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/ext.uls.launch.js
View File

@@ -73,27 +73,38 @@ function launchULS( $trigger, languagesObject, forCLS ) {
// Default positioning of jquery.uls is middle of the screen under the trigger. // Default positioning of jquery.uls is middle of the screen under the trigger.
// This code aligns it under the trigger and to the trigger edge depending on which // This code aligns it under the trigger and to the trigger edge depending on which
// side of the page the trigger is - should work automatically for both LTR and RTL. // side of the page the trigger is - should work automatically for both LTR and RTL.
var offset, height, width; var isInVectorStickyHeader, offset, height, width, positionCSS;
// T295391 Used to add fixed positioning for Vector sticky header.
isInVectorStickyHeader = $trigger.attr( 'id' ) === 'p-lang-btn-sticky-header';
// These are for the trigger. // These are for the trigger.
offset = $trigger.offset(); offset = ( isInVectorStickyHeader ) ?
$trigger.get( 0 ).getBoundingClientRect() :
$trigger.offset();
width = $trigger.outerWidth(); width = $trigger.outerWidth();
height = $trigger.outerHeight(); height = $trigger.outerHeight();
if ( offset.left + ( width / 2 ) > $( window ).width() / 2 ) { if ( offset.left + ( width / 2 ) > $( window ).width() / 2 ) {
// Midpoint of the trigger is on the right side of the viewport. // Midpoint of the trigger is on the right side of the viewport.
return { positionCSS = {
// Right edge of the dialog aligns with the right edge of the trigger. // Right edge of the dialog aligns with the right edge of the trigger.
right: $( window ).width() - ( offset.left + width ), right: $( window ).width() - ( offset.left + width ),
top: offset.top + height top: offset.top + height
}; };
} else { } else {
// Midpoint of the trigger is on the left side of the viewport. // Midpoint of the trigger is on the left side of the viewport.
return { positionCSS = {
// Left edge of the dialog aligns with the left edge of the trigger. // Left edge of the dialog aligns with the left edge of the trigger.
left: offset.left, left: offset.left,
top: offset.top + height top: offset.top + height
}; };
} }
if ( isInVectorStickyHeader ) {
positionCSS.zIndex = 5;
positionCSS.position = 'fixed';
}
return positionCSS;
}, },
onVisible: function () { onVisible: function () {
$trigger.addClass( 'selector-open' ); $trigger.addClass( 'selector-open' );