1 files changed, 354 insertions, 0 deletions
diff --git a/themes/twentynineteen/js/touch-keyboard-navigation.js b/themes/twentynineteen/js/touch-keyboard-navigation.js
new file mode 100644
index 00000000..2fa19056
--- /dev/null
+++ b/themes/twentynineteen/js/touch-keyboard-navigation.js
@@ -0,0 +1,354 @@
+/**
+ * Touch & Keyboard navigation.
+ *
+ * Contains handlers for touch devices and keyboard navigation.
+ */
+
+(function() {
+
+	/**
+	 * Debounce
+	 *
+	 * @param {Function} func
+	 * @param {number} wait
+	 * @param {boolean} immediate
+	 */
+	function debounce(func, wait, immediate) {
+		'use strict';
+
+		var timeout;
+		wait      = (typeof wait !== 'undefined') ? wait : 20;
+		immediate = (typeof immediate !== 'undefined') ? immediate : true;
+
+		return function() {
+
+			var context = this, args = arguments;
+			var later = function() {
+				timeout = null;
+
+				if (!immediate) {
+					func.apply(context, args);
+				}
+			};
+
+			var callNow = immediate && !timeout;
+
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+
+			if (callNow) {
+				func.apply(context, args);
+			}
+		};
+	}
+
+	/**
+	 * Add class
+	 *
+	 * @param {Object} el
+	 * @param {string} cls
+	 */
+	function addClass(el, cls) {
+		if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) {
+			el.className += ' ' + cls;
+		}
+	}
+
+	/**
+	 * Delete class
+	 *
+	 * @param {Object} el
+	 * @param {string} cls
+	 */
+	function deleteClass(el, cls) {
+		el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' );
+	}
+
+	/**
+	 * Has class?
+	 *
+	 * @param {Object} el
+	 * @param {string} cls
+	 *
+	 * @returns {boolean} Has class
+	 */
+	function hasClass(el, cls) {
+
+		if ( el.className.match( '(?:^|\\s)' + cls + '(?!\\S)' ) ) {
+			return true;
+		}
+	}
+
+	/**
+	 * Toggle Aria Expanded state for screenreaders
+	 *
+	 * @param {Object} ariaItem
+	 */
+	function toggleAriaExpandedState( ariaItem ) {
+		'use strict';
+
+		var ariaState = ariaItem.getAttribute('aria-expanded');
+
+		if ( ariaState === 'true' ) {
+			ariaState = 'false';
+		} else {
+			ariaState = 'true';
+		}
+
+		ariaItem.setAttribute('aria-expanded', ariaState);
+	}
+
+	/**
+	 * Open sub-menu
+	 *
+	 * @param {Object} currentSubMenu
+	 */
+	function openSubMenu( currentSubMenu ) {
+		'use strict';
+
+		// Update classes
+		// classList.add is not supported in IE11
+		currentSubMenu.parentElement.className += ' off-canvas';
+		currentSubMenu.parentElement.lastElementChild.className += ' expanded-true';
+
+		// Update aria-expanded state
+		toggleAriaExpandedState( currentSubMenu );
+	}
+
+	/**
+	 * Close sub-menu
+	 *
+	 * @param {Object} currentSubMenu
+	 */
+	function closeSubMenu( currentSubMenu ) {
+		'use strict';
+
+		var menuItem     = getCurrentParent( currentSubMenu, '.menu-item' ); // this.parentNode
+		var menuItemAria = menuItem.querySelector('a[aria-expanded]');
+		var subMenu      = currentSubMenu.closest('.sub-menu');
+
+		// If this is in a sub-sub-menu, go back to parent sub-menu
+		if ( getCurrentParent( currentSubMenu, 'ul' ).classList.contains( 'sub-menu' ) ) {
+
+			// Update classes
+			// classList.remove is not supported in IE11
+			menuItem.className = menuItem.className.replace( 'off-canvas', '' );
+			subMenu.className  = subMenu.className.replace( 'expanded-true', '' );
+
+			// Update aria-expanded and :focus states
+			toggleAriaExpandedState( menuItemAria );
+
+		// Or else close all sub-menus
+		} else {
+
+			// Update classes
+			// classList.remove is not supported in IE11
+			menuItem.className = menuItem.className.replace( 'off-canvas', '' );
+			menuItem.lastElementChild.className = menuItem.lastElementChild.className.replace( 'expanded-true', '' );
+
+			// Update aria-expanded and :focus states
+			toggleAriaExpandedState( menuItemAria );
+		}
+	}
+
+	/**
+	 * Find first ancestor of an element by selector
+	 *
+	 * @param {Object} child
+	 * @param {String} selector
+	 * @param {String} stopSelector
+	 */
+	function getCurrentParent( child, selector, stopSelector ) {
+
+		var currentParent = null;
+
+		while ( child ) {
+
+			if ( child.matches(selector) ) {
+
+				currentParent = child;
+				break;
+
+			} else if ( stopSelector && child.matches(stopSelector) ) {
+
+				break;
+			}
+
+			child = child.parentElement;
+		}
+
+		return currentParent;
+	}
+
+	/**
+	 * Remove all off-canvas states
+	 */
+	function removeAllFocusStates() {
+		'use strict';
+
+		var siteBranding            = document.getElementsByClassName( 'site-branding' )[0];
+		var getFocusedElements      = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
+		var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
+		var i;
+		var o;
+
+		for ( i = 0; i < getFocusedElements.length; i++) {
+			getFocusedElements[i].blur();
+		}
+
+		for ( o = 0; o < getFocusedClassElements.length; o++) {
+			deleteClass( getFocusedClassElements[o], 'is-focused' );
+		}
+	}
+
+	/**
+	 * Matches polyfill for IE11
+	 */
+	if (!Element.prototype.matches) {
+		Element.prototype.matches = Element.prototype.msMatchesSelector;
+	}
+
+	/**
+	 * Toggle `focus` class to allow sub-menu access on touch screens.
+	 */
+	function toggleSubmenuDisplay() {
+
+		document.addEventListener('touchstart', function(event) {
+
+			if ( event.target.matches('a') ) {
+
+				var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : '';
+
+				// Open submenu if url is #
+				if ( '#' === url && event.target.nextSibling.matches('.submenu-expand') ) {
+					openSubMenu( event.target );
+				}
+			}
+
+			// Check if .submenu-expand is touched
+			if ( event.target.matches('.submenu-expand') ) {
+				openSubMenu(event.target);
+
+			// Check if child of .submenu-expand is touched
+			} else if ( null != getCurrentParent( event.target, '.submenu-expand' ) &&
+								getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) {
+				openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) );
+
+			// Check if .menu-item-link-return is touched
+			} else if ( event.target.matches('.menu-item-link-return') ) {
+				closeSubMenu( event.target );
+
+			// Check if child of .menu-item-link-return is touched
+			} else if ( null != getCurrentParent( event.target, '.menu-item-link-return' ) && getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
+				closeSubMenu( event.target );
+			}
+
+			// Prevent default mouse/focus events
+			removeAllFocusStates();
+
+		}, false);
+
+		document.addEventListener('touchend', function(event) {
+
+			var mainNav = getCurrentParent( event.target, '.main-navigation' );
+
+			if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) {
+				// Prevent default mouse events
+				event.preventDefault();
+
+			} else if (
+				event.target.matches('.submenu-expand') ||
+				null != getCurrentParent( event.target, '.submenu-expand' ) &&
+				getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ||
+				event.target.matches('.menu-item-link-return') ||
+				null != getCurrentParent( event.target, '.menu-item-link-return' ) &&
+				getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
+					// Prevent default mouse events
+					event.preventDefault();
+			}
+
+			// Prevent default mouse/focus events
+			removeAllFocusStates();
+
+		}, false);
+
+		document.addEventListener('focus', function(event) {
+
+			if ( event.target.matches('.main-navigation > div > ul > li a') ) {
+
+				// Remove Focused elements in sibling div
+				var currentDiv        = getCurrentParent( event.target, 'div', '.main-navigation' );
+				var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling;
+				var focusedElement    = currentDivSibling.querySelector( '.is-focused' );
+				var focusedClass      = 'is-focused';
+				var prevLi            = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).previousElementSibling;
+				var nextLi            = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).nextElementSibling;
+
+				if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) {
+					deleteClass( focusedElement, focusedClass );
+				}
+
+				// Add .is-focused class to top-level li
+				if ( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ) ) {
+					addClass( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ), focusedClass );
+				}
+
+				// Check for previous li
+				if ( prevLi && hasClass( prevLi, focusedClass ) ) {
+					deleteClass( prevLi, focusedClass );
+				}
+
+				// Check for next li
+				if ( nextLi && hasClass( nextLi, focusedClass ) ) {
+					deleteClass( nextLi, focusedClass );
+				}
+			}
+
+		}, true);
+
+		document.addEventListener('click', function(event) {
+
+			// Remove all focused menu states when clicking outside site branding
+			if ( event.target !== document.getElementsByClassName( 'site-branding' )[0] ) {
+				removeAllFocusStates();
+			} else {
+				// nothing
+			}
+
+		}, false);
+	}
+
+	/**
+	 * Run our sub-menu function as soon as the document is `ready`
+	 */
+	document.addEventListener( 'DOMContentLoaded', function() {
+		toggleSubmenuDisplay();
+	});
+
+	/**
+	 * Run our sub-menu function on selective refresh in the customizer
+	 */
+	document.addEventListener( 'customize-preview-menu-refreshed', function( e, params ) {
+		if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) {
+			toggleSubmenuDisplay();
+		}
+	});
+
+	/**
+	 * Run our sub-menu function every time the window resizes
+	 */
+	var isResizing = false;
+	window.addEventListener( 'resize', function() {
+		isResizing = true;
+		debounce( function() {
+			if ( isResizing ) {
+				return;
+			}
+
+			toggleSubmenuDisplay();
+			isResizing = false;
+
+		}, 150 );
+	} );
+
+})();