Fix ability to expand nav submenus on large-viewport touch interfaces (…

…#971)

* Revert: touch devices: open submenus on the desktop horizontal menu (#949)

* Allow tapping submenu expansion arrows on touch screens

Props @pierlon

* Add touch-enabled JS polyfill for IE11

* Use any-pointer:course media query instead of excluding dual-mode interfaces

assets/js/index.js

@@ -69,6 +69,21 @@ if ( ! Element.prototype.matches ) {
 		};
 }
 
+// Add a class to the body for when touch is enabled for browsers that don't support media queries
+// for interaction media features. Adapted from <https://codepen.io/Ferie/pen/vQOMmO>
+( function() {
+	var matchMedia = function() {
+		// Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
+		var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
+		var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
+		return window.matchMedia && window.matchMedia( query ).matches;
+	};
+
+	if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
+		document.body.classList.add( 'touch-enabled' );
+	}
+}() );
+
 /*	-----------------------------------------------------------------------------------------------
 	Cover Modals
 --------------------------------------------------------------------------------------------------- */
@@ -524,37 +539,6 @@ twentytwenty.primaryMenu = {
 				self = self.parentElement;
 			}
 		}
-
-		/**
-		 * Toggles `focus` class to allow submenu access on tablets.
-		 */
-		( function( menuObj ) {
-			var touchStartFn, j,
-				parentLink = menuObj.querySelectorAll( '.primary-menu .menu-item-has-children > a' );
-
-			if ( 'ontouchstart' in window ) {
-				touchStartFn = function( e ) {
-					var menuItem = this.parentNode;
-
-					if ( ! menuItem.classList.contains( 'focus' ) ) {
-						e.preventDefault();
-						for ( j = 0; j < menuItem.parentNode.children.length; ++j ) {
-							if ( menuItem === menuItem.parentNode.children[j] ) {
-								continue;
-							}
-							menuItem.parentNode.children[i].classList.remove( 'focus' );
-						}
-						menuItem.classList.add( 'focus' );
-					} else {
-						menuItem.classList.remove( 'focus' );
-					}
-				};
-
-				for ( j = 0; j < parentLink.length; ++j ) {
-					parentLink[j].addEventListener( 'touchstart', touchStartFn, false );
-				}
-			}
-		}( menu ) );
 	}
 }; // twentytwenty.primaryMenu
 

style.css

@@ -1711,6 +1711,38 @@ ul.primary-menu {
 	transform: rotate(180deg);
 }
 
+/*
+ * Enable nav submenu expansion with tapping on arrows on large-viewport
+ * touch interfaces (e.g. tablets or laptops with touch screens).
+ * These rules are supported by all browsers (>IE11) and when JS is disabled.
+ */
+@media (any-pointer: coarse) {
+
+	.primary-menu > li.menu-item-has-children > a {
+		padding-right: 0;
+		margin-right: 2rem;
+	}
+
+	.primary-menu ul li.menu-item-has-children > a {
+		margin-right: 4.5rem;
+		padding-right: 0;
+		width: unset;
+	}
+
+}
+
+/* Repeat previous rules for IE11 (when JS enabled for polyfill). */
+body.touch-enabled .primary-menu > li.menu-item-has-children > a {
+	padding-right: 0;
+	margin-right: 2rem;
+}
+
+body.touch-enabled .primary-menu ul li.menu-item-has-children > a {
+	margin-right: 4.5rem;
+	padding-right: 0;
+	width: unset;
+}
+
 /* -------------------------------------------------------------------------- */
 
 /*	5. Menu Modal