From 2d9279a1f15b58adfc2eb53376e2af5662a57419 Mon Sep 17 00:00:00 2001
From: Jan Drewniak <jan.drewniak@gmail.com>
Date: Wed, 24 Nov 2021 00:00:24 -0500
Subject: [PATCH] Accommodate Vector sticky header in menu positioning

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
---
 resources/js/ext.uls.launch.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/resources/js/ext.uls.launch.js b/resources/js/ext.uls.launch.js
index ebba612d..b780e519 100644
--- a/resources/js/ext.uls.launch.js
+++ b/resources/js/ext.uls.launch.js
@@ -73,27 +73,38 @@ function launchULS( $trigger, languagesObject, forCLS ) {
 			// 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
 			// 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.
-			offset = $trigger.offset();
+			offset = ( isInVectorStickyHeader ) ?
+				$trigger.get( 0 ).getBoundingClientRect() :
+				$trigger.offset();
 			width = $trigger.outerWidth();
 			height = $trigger.outerHeight();
 
 			if ( offset.left + ( width / 2 ) > $( window ).width() / 2 ) {
 				// 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: $( window ).width() - ( offset.left + width ),
 					top: offset.top + height
 				};
 			} else {
 				// 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: offset.left,
 					top: offset.top + height
 				};
 			}
+
+			if ( isInVectorStickyHeader ) {
+				positionCSS.zIndex = 5;
+				positionCSS.position = 'fixed';
+			}
+
+			return positionCSS;
 		},
 		onVisible: function () {
 			$trigger.addClass( 'selector-open' );