From 54997f2dfb43932a4eae39e9d71065fff3543b2c Mon Sep 17 00:00:00 2001
From: Isarra <zhorishna@gmail.com>
Date: Wed, 28 Aug 2019 03:04:05 +0000
Subject: [PATCH] Use click to toggle for desktop dropdown menus

Still fall back to hover for nojs.

Bug: T211357
Change-Id: I9636a0e3c127173ffb7881c8760d39b715ae475f
---
 resources/main.js                   | 46 +++++++++++++++++++++++++++--
 resources/mixins.less               | 28 ------------------
 resources/screen-desktop-small.less | 30 +++++++++++++++++--
 resources/screen-desktop.less       | 25 +++++++++++-----
 4 files changed, 87 insertions(+), 42 deletions(-)

diff --git a/resources/main.js b/resources/main.js
index 7f882b8..b5cc589 100644
--- a/resources/main.js
+++ b/resources/main.js
@@ -1,10 +1,50 @@
 /**
- * Timeless-specific scripts
+ * Focus on search box when 'Tab' key is pressed once
  */
 $( function () {
+	$( '#searchInput' ).attr( 'tabindex', $( document ).lastTabIndex() + 1 );
+} );
+
+/**
+ * Desktop menu click-toggling
+ */
+$( function () {
+	// sidebar-chunk only applies to desktop-small, but the toggles are hidden at
+	// other resolutions regardless and the css overrides any visible effects. So
+	// whatever.
+	var dropdowns = '#personal, #p-variants-desktop, .sidebar-chunk';
 
 	/**
-	 * Focus on search box when 'Tab' key is pressed once
+	 * Close all dropdowns
 	 */
-	$( '#searchInput' ).attr( 'tabindex', $( document ).lastTabIndex() + 1 );
+	function closeOpen() {
+		$( dropdowns ).each( function () {
+			if ( $( this ).hasClass( 'dropdown-active' ) ) {
+				$( this ).removeClass( 'dropdown-active' );
+			}
+		} );
+	}
+
+	/**
+	 * Click behaviour
+	 */
+	$( dropdowns ).on( 'click', function ( e ) {
+		var wasOpen = false;
+		// Check if it's already open so we don't open it again
+		if ( $( this ).hasClass( 'dropdown-active' ) ) {
+			wasOpen = true;
+		}
+		closeOpen();
+		e.stopPropagation(); // stop hiding it!
+		if ( !wasOpen ) {
+			$( this ).addClass( 'dropdown-active' );
+		}
+	} );
+	$( document ).click( function ( e ) {
+		if ( $( e.target ).closest( dropdowns ).length > 0 ) {
+			// Clicked inside an open menu; don't close anything
+		} else {
+			closeOpen();
+		}
+	} );
 } );
diff --git a/resources/mixins.less b/resources/mixins.less
index 2131324..f05b869 100644
--- a/resources/mixins.less
+++ b/resources/mixins.less
@@ -160,34 +160,6 @@
 	}
 }
 
-// stupid pokey alignment for menus on the left... (desktop-small dropdowns)
-.dropdown-pokey-left() {
-	&:hover h2 span {
-		&:before,
-		&:after {
-			display: block;
-		}
-	}
-
-	h2 span {
-		.dropdown-pokey();
-
-		&:before,
-		&:after {
-			right: 0;
-			display: none;
-		}
-
-		&:before {
-			top: 34px;
-		}
-
-		&:after {
-			top: 36px;
-		}
-	}
-}
-
 // Categories on bottom of page
 
 .categories-bottom() {
diff --git a/resources/screen-desktop-small.less b/resources/screen-desktop-small.less
index 2cee4ee..2942a29 100644
--- a/resources/screen-desktop-small.less
+++ b/resources/screen-desktop-small.less
@@ -68,7 +68,7 @@
 	}
 }
 
-.sidebar-chunk:hover {
+.client-nojs .sidebar-chunk:hover {
 	.sidebar-inner {
 		display: block !important;
 	}
@@ -99,9 +99,33 @@
 	.sidebar-inner {
 		.dropdown-menu( left );
 	}
+}
 
-	.sidebar-chunk {
-		.dropdown-pokey-left();
+#mw-site-navigation .sidebar-chunk h2 span {
+	.dropdown-pokey();
+
+	&:before,
+	&:after {
+		right: 1px;
+		display: none;
+	}
+
+	&:before {
+		top: 34px;
+	}
+
+	&:after {
+		top: 36px;
+	}
+}
+
+#mw-site-navigation .dropdown-active,
+.client-nojs #mw-site-navigation .sidebar-chunk:hover {
+	h2 span {
+		&:before,
+		&:after {
+			display: block;
+		}
 	}
 }
 
diff --git a/resources/screen-desktop.less b/resources/screen-desktop.less
index bd1267d..02de4f5 100644
--- a/resources/screen-desktop.less
+++ b/resources/screen-desktop.less
@@ -121,12 +121,20 @@ div.mw-notification-area {
 			word-wrap: break-word;
 		}
 	}
+}
 
-	&:hover {
-		.pokey,
-		.dropdown {
-			display: block !important;
-		}
+.client-nojs #personal:hover {
+	.pokey,
+	.dropdown {
+		display: block !important;
+	}
+}
+
+#mw-wrapper .dropdown-active {
+	.pokey,
+	.dropdown,
+	.sidebar-inner {
+		display: block !important;
 	}
 }
 
@@ -153,15 +161,16 @@ div.mw-notification-area {
 		// Override the mobile thing
 		top: 2.25em !important;
 		padding-bottom: 2em;
+		margin-right: 2px;
 
 		.selected a {
 			color: @text;
 		}
 	}
+}
 
-	&:hover .dropdown {
-		display: block !important;
-	}
+.client-nojs #ca-languages:hover .dropdown {
+	display: block !important;
 }
 
 .mw-wiki-logo {