Use click to toggle for desktop dropdown menus

Still fall back to hover for nojs.

Bug: T211357
Change-Id: I9636a0e3c127173ffb7881c8760d39b715ae475f

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();
+		}
+	} );
 } );

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() {

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;
+		}
 	}
 }
 

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 {