avusd/lib/modules/apostrophe-assets/public/js/site.js

$(function() {
	// Start with your project-level client-side javascript here.
	// JQuery and lodash (_) are both included with Apostrophe, so no need to
	// worry about including them on your own.
	
	
	//
	// This is the Javascript to handle displaying and hiding the mega menus.
	// We are using this instead of CSS and the hover selector because we want to allow for touch screen users to be able to open it and have it stay open when they tap.
	// Clicking also makes for a less confusing UI for users that have a hard time figuring out what is going on.
	//
	
	let $topMenuItems = $("nav.navbar ul > li");
	// let $topMenuContent = $("nav.navbar ul > li > div.dropdown-content");

	// function focusLost(event) {
	// 	let currentTarget = $(event.currentTarget);
	// 	// Get the element that focus is switching to.  This is held by the focus event that caused the focusout event to fire.
	// 	//let focused = event.originalEvent ? event.originalEvent.target : null;
	// 	// Test whether the newly focused element is one of the navigation elements.
	// 	//let isNav = focused ? $(focused).parents("nav.navbar ul > li").length > 0 : false;
	//
	// 	// Hide the menu if the newly focused element isn't one of the menu elements.
	// 	//if(!isNav) {
	// 		//currentTarget.parent().removeClass('display');
	// 	//}
	//
	// 	//When clicking the same link (to close the menu) there is a race condition where the focusLost event might happen before the click event, in which case the menu flashes.
	// 	//To fix this we will detect the special case of the user clicking the same link that is open, and ignoring the focus out in that event.
	//
	// 	if(currentTarget.is("li")) {
	// 		setTimeout(() => currentTarget.removeClass('display'), 200);
	// 	}
	// }

	// Handle the menu losing focus.  This should remove visibility of the menu normally, but not when the click will result in one of the menus from displaying or hiding (clicking the same menu button).
	//$topMenuContent.focusout(function(event) {
	//	focusLost(event);
	//});
	//$topMenuItems.focusout(function(event) {
	//	focusLost(event);
	//});
	// Handle one of the top level menu items being clicked.  This normally shows the mega menu div and chevron by applying a "display" class to the li element for the menu.
	// If the menu already is open then the menu should close.  If another menu was already open then close it here so that there is a nice smooth transition.
	$topMenuItems.click((event) => {
		let $clickedMenuItem = $(event.currentTarget);

		if($clickedMenuItem.hasClass('display')) {
			$topMenuItems.removeClass('display');
		}
		else {
			$topMenuItems.removeClass('display');
			$clickedMenuItem.addClass('display');

			//My attempts to set a specific handler.  HTML just sucks at navigation management.

			// let $menuContent = $clickedMenuItem.children('div.dropdown-content');
			// function eventHandler(event) {
			// 	lostFocus(event, eventHandler, $clickedMenuItem);
			// }
			// //$menuContent.find(':focusable').first().focus();
			// $(document).focusout(eventHandler);
		}
	});

	//
	// I have been forced to use this general focusout handle to detect when the user leaves the menu so we can close it.
	// Originally I tried to register a focusout handler on the menu when it opened, but ultimately it wasn't possible.
	// I then tried to setup a background div that would capture clicks outside the menu, but that was not working and would have not been great anyway.
	//
	$(document).focusout(function(event) {
		//Give time for the focus event to complete first.  This way we can call document.activeElement and actually get it.
		setTimeout(() => {
			// Find the active menu (if there is one).
			let $content = $('li.display div.dropdown-content');

			// If there is an active menu, check to see if the active element is a child of the menu.  If not then close the menu.
			if($content.length && !$.contains($content[0], document.activeElement)) {
				$content.parents('li.display').removeClass('display');
			}
		}, 50);
	});
});