From 51cce2d0d450295992186c455510eb15938928f5 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 3 Dec 2021 11:36:15 -0800
Subject: [PATCH] Define sticky header ULS behaviour

* It sticks to the header on scroll
* It hides when the sticky header hides

Bug: T296680
Change-Id: I5a4e2ba42e172ea55fbdac8f35ec895f6b2756cd
---
 resources/skins.vector.es6/stickyHeader.js | 27 ++++++++++++++++++++++
 skin.json                                  |  3 ++-
 skinStyles/ext.uls.compactlinks.less       | 16 +++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 skinStyles/ext.uls.compactlinks.less

diff --git a/resources/skins.vector.es6/stickyHeader.js b/resources/skins.vector.es6/stickyHeader.js
index 185fcc5..a327680 100644
--- a/resources/skins.vector.es6/stickyHeader.js
+++ b/resources/skins.vector.es6/stickyHeader.js
@@ -10,6 +10,8 @@ const
 	STICKY_HEADER_USER_MENU_CONTAINER_CLASS = 'vector-sticky-header-icon-end',
 	FIRST_HEADING_ID = 'firstHeading',
 	USER_MENU_ID = 'p-personal',
+	ULS_STICKY_CLASS = 'uls-dialog-sticky',
+	ULS_HIDE_CLASS = 'uls-dialog-sticky-hide',
 	VECTOR_USER_LINKS_SELECTOR = '.vector-user-links',
 	SEARCH_TOGGLE_SELECTOR = '.vector-sticky-header-search-toggle',
 	STICKY_HEADER_EXPERIMENT_NAME = 'vector.sticky_header_2021_11';
@@ -36,6 +38,8 @@ function show() {
 		// eslint-disable-next-line mediawiki/class-doc
 		header.classList.add( STICKY_HEADER_VISIBLE_CLASS );
 	}
+	// eslint-disable-next-line mediawiki/class-doc
+	document.body.classList.remove( ULS_HIDE_CLASS );
 }
 
 /**
@@ -45,6 +49,8 @@ function hide() {
 	if ( header ) {
 		// eslint-disable-next-line mediawiki/class-doc
 		header.classList.remove( STICKY_HEADER_VISIBLE_CLASS );
+		// eslint-disable-next-line mediawiki/class-doc
+		document.body.classList.add( ULS_HIDE_CLASS );
 	}
 }
 
@@ -438,6 +444,27 @@ function initStickyHeader( observer ) {
 	setupSearchIfNeeded( header );
 	// @ts-ignore
 	addVisualEditorHooks( header, stickyIntersection, observer );
+
+	// Make sure ULS outside sticky header disables the sticky header behaviour.
+	// @ts-ignore
+	mw.hook( 'mw.uls.compact_language_links.open' ).add( function ( $trigger ) {
+		if ( $trigger.attr( 'id' ) !== 'p-lang-btn-sticky-header' ) {
+			const bodyClassList = document.body.classList;
+			bodyClassList.remove( ULS_HIDE_CLASS );
+			bodyClassList.remove( ULS_STICKY_CLASS );
+		}
+	} );
+
+	// Make sure ULS dialog is sticky.
+	// @ts-ignore
+	const langBtn = header.querySelector( '#p-lang-btn-sticky-header' );
+	if ( langBtn ) {
+		langBtn.addEventListener( 'click', function () {
+			const bodyClassList = document.body.classList;
+			bodyClassList.remove( ULS_HIDE_CLASS );
+			bodyClassList.add( ULS_STICKY_CLASS );
+		} );
+	}
 }
 
 module.exports = {
diff --git a/skin.json b/skin.json
index 8de49d1..9961cf6 100644
--- a/skin.json
+++ b/skin.json
@@ -282,7 +282,8 @@
 			"+mediawiki.notification": "skinStyles/mediawiki.notification.less",
 			"+oojs-ui-core.styles": "skinStyles/ooui.less",
 			"mediawiki.special": "skinStyles/mediawiki.special.less",
-			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less"
+			"+ext.relatedArticles.readMore": "skinStyles/ext.relatedArticles.readMore.less",
+			"+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less"
 		}
 	},
 	"config": {
diff --git a/skinStyles/ext.uls.compactlinks.less b/skinStyles/ext.uls.compactlinks.less
new file mode 100644
index 0000000..1a3c59d
--- /dev/null
+++ b/skinStyles/ext.uls.compactlinks.less
@@ -0,0 +1,16 @@
+// Sticky header ULS behavior.
+
+.uls-dialog-sticky {
+	.uls-menu {
+		position: fixed;
+		/* stylelint-disable-next-line declaration-no-important */
+		top: 60px !important;
+	}
+
+	&.uls-dialog-sticky-hide {
+		.uls-menu {
+			/* stylelint-disable-next-line declaration-no-important */
+			display: none !important;
+		}
+	}
+}