Toggle focus class to allow submenu access on tablets

Automattic · Jan 13, 2016 · 7c5b0d8 · 7c5b0d8
1 parent d40faf1
commit 7c5b0d8
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/js/navigation.js b/js/navigation.js
@@ -78,4 +78,35 @@
 			self = self.parentElement;
 		}
 	}
+
+	/**
+	 * Toggles `focus` class to allow submenu access on tablets.
+	 */
+	( function ( container ) {
+		var touchStartFn,
+			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
+
+		if ( 'ontouchstart' in window ) {
+			touchStartFn = function( e ) {
+				var menuItem = this.parentNode;
+
+				if ( ! menuItem.classList.contains( 'focus' ) ) {
+					e.preventDefault();
+					for( var i = 0; i < menuItem.parentNode.children.length; ++i ) {
+						if ( menuItem === menuItem.parentNode.children[i] ) {
+							continue;
+						}
+						menuItem.parentNode.children[i].classList.remove( 'focus' );
+					}
+					menuItem.classList.add( 'focus' );
+				} else {
+					menuItem.classList.remove( 'focus' );
+				}
+			};
+
+			for ( var i = 0; i < parentLink.length; ++i ) {
+				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
+			}
+		}
+	} ( container ) );
 } )();