From 1c8af16dfb9c848376c78cde300267ebe20633d4 Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Tue, 23 Aug 2022 11:21:11 -0500
Subject: [PATCH] Replace body:not( .vector-toc-collapsed ) with
 .vector-toc-not-collapsed class

Follow up to Ibf837775d972deb29e9619cc6c12c919aae5155a

Change-Id: Ib50f6e4a61a09f54763a740bd12cdae3ee63abef
---
 resources/skins.vector.es6/main.js                 |  5 ++---
 resources/skins.vector.es6/tableOfContents.js      |  6 ++++++
 .../components/StickyHeader.less                   | 14 ++++++--------
 .../components/TableOfContents.less                | 10 +++-------
 .../components/TableOfContentsCollapsed.less       |  2 +-
 5 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/resources/skins.vector.es6/main.js b/resources/skins.vector.es6/main.js
index 894934b1a..b5b593c48 100644
--- a/resources/skins.vector.es6/main.js
+++ b/resources/skins.vector.es6/main.js
@@ -120,9 +120,8 @@ const updateTocLocation = () => {
 	const isTocCollapsed = document.body.classList.contains( TOC_COLLAPSED_CLASS );
 	const isStickyHeaderVisible = document.body.classList.contains( STICKY_HEADER_VISIBLE_CLASS );
 	const isBelowDesktop = belowDesktopMedia.matches;
-	if ( isTocCollapsed ) {
-		const tocLocation = isStickyHeaderVisible && !isBelowDesktop ? 'stickyheader' : 'sidebar';
-		stickyHeader.moveToc( tocLocation );
+	if ( isTocCollapsed && isStickyHeaderVisible && !isBelowDesktop ) {
+		stickyHeader.moveToc( 'stickyheader' );
 	} else {
 		stickyHeader.moveToc( 'sidebar' );
 	}
diff --git a/resources/skins.vector.es6/tableOfContents.js b/resources/skins.vector.es6/tableOfContents.js
index df57a4831..17fccf685 100644
--- a/resources/skins.vector.es6/tableOfContents.js
+++ b/resources/skins.vector.es6/tableOfContents.js
@@ -7,6 +7,7 @@ const PARENT_SECTION_CLASS = 'sidebar-toc-level-1';
 const LINK_CLASS = 'sidebar-toc-link';
 const TOGGLE_CLASS = 'sidebar-toc-toggle';
 const TOC_COLLAPSED_CLASS = 'vector-toc-collapsed';
+const TOC_NOT_COLLAPSED_CLASS = 'vector-toc-not-collapsed';
 const TOC_ID = 'mw-panel-toc';
 /**
  * TableOfContents Mustache templates
@@ -332,10 +333,15 @@ module.exports = function tableOfContents( props ) {
 	 * Bind event listener for clicking on show/hide Table of Contents links.
 	 */
 	function bindCollapseToggleListeners() {
+		// Initialize toc collapsed status
+		document.body.classList.add( TOC_NOT_COLLAPSED_CLASS );
+
 		const showHideTocElement = document.querySelectorAll( '#sidebar-toc-label button' );
 		showHideTocElement.forEach( function ( btn ) {
 			btn.addEventListener( 'click', () => {
 				document.body.classList.toggle( TOC_COLLAPSED_CLASS );
+				document.body.classList.toggle( TOC_NOT_COLLAPSED_CLASS );
+
 				props.onToggleCollapse();
 			} );
 		} );
diff --git a/resources/skins.vector.styles/components/StickyHeader.less b/resources/skins.vector.styles/components/StickyHeader.less
index 275170eb2..51b3adaf5 100644
--- a/resources/skins.vector.styles/components/StickyHeader.less
+++ b/resources/skins.vector.styles/components/StickyHeader.less
@@ -79,18 +79,16 @@
 		min-width: 0;
 	}
 
+	// Hide TOC in sticky header by default
 	&-toc-container {
+		display: none;
+	}
+
+	.vector-toc-collapsed &-toc-container {
+		display: block;
 		position: relative;
 		margin-left: -@icon-padding-md;
 
-		.vector-menu-heading {
-			display: none;
-
-			.vector-toc-collapsed & {
-				display: block;
-			}
-		}
-
 		.sidebar-toc {
 			margin: 0;
 		}
diff --git a/resources/skins.vector.styles/components/TableOfContents.less b/resources/skins.vector.styles/components/TableOfContents.less
index 088e2582a..bcce8761f 100644
--- a/resources/skins.vector.styles/components/TableOfContents.less
+++ b/resources/skins.vector.styles/components/TableOfContents.less
@@ -19,7 +19,7 @@
 	// Needed to align TOC with bottom of title
 	// 1.5em from .mw-table-of-contents-container + 1.5em from .sidebar-toc = 3em
 	@media ( min-width: @min-width-desktop ) {
-		body:not(.vector-toc-collapsed) @{selector-main-menu-closed} ~ & {
+		.vector-toc-not-collapsed @{selector-main-menu-closed} ~ & {
 			margin-top: 1.5em;
 		}
 	}
@@ -105,9 +105,9 @@
 }
 
 // T302076: Add fade scrollable indicator when TOC is in sidebar
-// Avoid showing indicator when the TOC is collapsed in the page title, sticky header, or floating
+// Avoid showing indicator when the TOC is floating, or collapsed in the page title/sticky header
 @media ( min-width: @min-width-desktop ) {
-	@{sidebar-toc-selector}:after {
+	.vector-toc-not-collapsed .sidebar-toc:after {
 		content: '';
 		display: block;
 		position: absolute;
@@ -119,10 +119,6 @@
 		background-repeat: no-repeat;
 		background-position: -@sidebar-toc-right-padding; // T311436 Hacky way to prevent the fade from covering the scrollbar
 		pointer-events: none; // Make the link below the fade clickable
-
-		.vector-toc-collapsed & {
-			display: none;
-		}
 	}
 }
 
diff --git a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
index f95328eb1..d61c1b72d 100644
--- a/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
+++ b/resources/skins.vector.styles/components/TableOfContentsCollapsed.less
@@ -142,7 +142,7 @@
 				}
 			}
 
-			body:not( .vector-toc-collapsed ) {
+			.vector-toc-not-collapsed {
 				.vector-toc-collapse-button {
 					display: inline-block;
 				}