Refactor navigation.js to Javascript ES6 (#1423)

.eslintrc

@@ -1,6 +1,6 @@
 {
     "extends": [
-        "plugin:@wordpress/eslint-plugin/es5"
+        "plugin:@wordpress/eslint-plugin/esnext"
     ],
     "env": {
         "browser": true

js/navigation.js

@@ -5,19 +5,21 @@
  * navigation support for dropdown menus.
  */
 ( function() {
-	var container, button, menu, links, i, len;
+	const siteNavigation = document.getElementById( 'site-navigation' );
 
-	container = document.getElementById( 'site-navigation' );
+	// Return early if the navigation don't exist.
-	if ( ! container ) {
+	if ( ! siteNavigation ) {
 		return;
 	}
 
-	button = container.getElementsByTagName( 'button' )[0];
+	const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];
+
+	// Return early if the button don't exist.
 	if ( 'undefined' === typeof button ) {
 		return;
 	}
 
-	menu = container.getElementsByTagName( 'ul' )[0];
+	const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ];
 
 	// Hide menu toggle button if menu is empty and return early.
 	if ( 'undefined' === typeof menu ) {
@@ -26,87 +28,72 @@
 	}
 
 	if ( ! menu.classList.contains( 'nav-menu' ) ) {
-		menu.className += ' nav-menu';
+		menu.classList.add( 'nav-menu' );
 	}
 
-	button.onclick = function() {
+	// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
-		if ( container.classList.contains( 'toggled' ) ) {
+	button.addEventListener( 'click', function() {
-			container.className = container.className.replace( ' toggled', '' );
+		siteNavigation.classList.toggle( 'toggled' );
+
+		if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
 			button.setAttribute( 'aria-expanded', 'false' );
 		} else {
-			container.className += ' toggled';
 			button.setAttribute( 'aria-expanded', 'true' );
 		}
-	};
+	} );
 
-	// Close small menu when user clicks outside
+	// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
 	document.addEventListener( 'click', function( event ) {
-		var isClickInside = container.contains( event.target );
+		const isClickInside = siteNavigation.contains( event.target );
 
 		if ( ! isClickInside ) {
-			container.className = container.className.replace( ' toggled', '' );
+			siteNavigation.classList.remove( 'toggled' );
 			button.setAttribute( 'aria-expanded', 'false' );
 		}
 	} );
 
 	// Get all the link elements within the menu.
-	links = menu.getElementsByTagName( 'a' );
+	const links = menu.getElementsByTagName( 'a' );
 
-	// Each time a menu link is focused or blurred, toggle focus.
+	// Get all the link elements with children within the menu.
-	for ( i = 0, len = links.length; i < len; i++ ) {
+	const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
-		links[i].addEventListener( 'focus', toggleFocus, true );
+
-		links[i].addEventListener( 'blur', toggleFocus, true );
+	// Toggle focus each time a menu link is focused or blurred.
+	for ( const link of links ) {
+		link.addEventListener( 'focus', toggleFocus, true );
+		link.addEventListener( 'blur', toggleFocus, true );
+	}
+
+	// Toggle focus each time a menu link with children receive a touch event.
+	for ( const link of linksWithChildren ) {
+		link.addEventListener( 'touchstart', toggleFocus, false );
 	}
 
 	/**
 	 * Sets or removes .focus class on an element.
 	 */
 	function toggleFocus() {
-		var self = this;
+		if ( event.type === 'focus' || event.type === 'blur' ) {
-
+			let self = this;
 			// Move up through the ancestors of the current link until we hit .nav-menu.
 			while ( ! self.classList.contains( 'nav-menu' ) ) {
 				// On li elements toggle the class .focus.
 				if ( 'li' === self.tagName.toLowerCase() ) {
-				if ( self.classList.contains( 'focus' ) ) {
+					self.classList.toggle( 'focus' );
-					self.className = self.className.replace( ' focus', '' );
+				}
-				} else {
+				self = self.parentNode;
-					self.className += ' focus';
 			}
 		}
 
-			self = self.parentElement;
+		if ( event.type === 'touchstart' ) {
+			const menuItem = this.parentNode;
+			event.preventDefault();
+			for ( const link of menuItem.parentNode.children ) {
+				if ( menuItem !== link ) {
+					link.classList.remove( 'focus' );
 				}
 			}
-
+			menuItem.classList.toggle( 'focus' );
-	/**
-	 * Toggles `focus` class to allow submenu access on tablets.
-	 */
-	( function() {
-		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 ( 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 ( i = 0; i < parentLink.length; ++i ) {
-				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
 		}
 	}
-	}( container ) );
 }() );