Bolt 211 add dropdown options for subnav

components/o-header/src/js/subnav.js

@@ -1,5 +1,6 @@
 import viewport from '@financial-times/o-viewport';
 import * as oUtils from '@financial-times/o-utils';
+import { initSubnavDropdowns } from './subnavDropdown.js';
 
 function init(headerEl) {
 	const subnav = headerEl.querySelector('[data-o-header-subnav]');
@@ -88,6 +89,8 @@ function init(headerEl) {
 		button.onclick = scroll;
 	});
 
+	initSubnavDropdowns(headerEl);
+
 	checkCurrentPosition();
 }
 

components/o-header/src/js/subnavDropdown.js

@@ -0,0 +1,135 @@
+const INTENT_ENTER = 300;
+const INTENT_LEAVE = 400;
+const DEFAULT_DROPDOWN_WIDTH = 285;
+const POSITIONING_OFFSET = 8;
+
+const expandedDropdowns = new Set();
+const keydownListeners = new WeakMap();
+let scrollListenerAdded = false;
+
+function handleScroll() {
+	expandedDropdowns.forEach(dropdown => {
+		const parent = dropdown.parentNode;
+		positionDropdown(dropdown, parent);
+	});
+}
+
+function addDropdownEvents(parent, dropdown) {
+	let timeout;
+
+	parent.addEventListener('mouseenter', () => {
+		clearTimeout(timeout);
+
+		if (isDropdownOpen(dropdown)) {
+			return;
+		}
+
+		positionDropdown(dropdown, parent);
+
+		timeout = setTimeout(() => {
+			if (expandedDropdowns.size > 0) {
+				closeAllDropdowns();
+			}
+			showDropdown(dropdown);
+		}, INTENT_ENTER);
+	});
+
+	const handleKeydown = (event) => {
+		const key = event.key;
+
+		if (key === 'Escape' && isDropdownOpen(dropdown)) {
+			hideDropdown(dropdown);
+		}
+	};
+
+	keydownListeners.set(dropdown, handleKeydown);
+	document.addEventListener('keydown', handleKeydown);
+
+	parent.addEventListener('mouseleave', () => {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			if (isDropdownOpen(dropdown)) {
+				hideDropdown(dropdown);
+			}
+		}, INTENT_LEAVE);
+	});
+}
+
+function closeAllDropdowns() {
+	const dropdownsToClose = new Set(expandedDropdowns);
+	dropdownsToClose.forEach(hideDropdown);
+}
+
+function isDropdownOpen(dropdown) {
+	return expandedDropdowns.has(dropdown);
+}
+
+function positionDropdown(dropdown, hoverTarget) {
+	if (!hoverTarget) {
+		return;
+	}
+
+	const targetRect = hoverTarget.getBoundingClientRect();
+	const viewportWidth = window.innerWidth;
+
+	const dropdownWidth = DEFAULT_DROPDOWN_WIDTH;
+
+	let left = targetRect.left;
+
+	if (left + dropdownWidth > viewportWidth) {
+		left = Math.max(POSITIONING_OFFSET, viewportWidth - dropdownWidth - POSITIONING_OFFSET);
+	}
+
+	Object.assign(dropdown.style, {
+		position: 'fixed',
+		top: `${targetRect.bottom + POSITIONING_OFFSET}px`,
+		left: `${left}px`,
+		zIndex: '10000',
+		transform: 'none',
+		right: 'auto',
+		bottom: 'auto',
+		margin: '0'
+	});
+}
+
+function showDropdown(dropdown) {
+	dropdown.setAttribute('aria-hidden', 'false');
+	dropdown.setAttribute('aria-expanded', 'true');
+	dropdown.style.display = 'block';
+
+	expandedDropdowns.add(dropdown);
+
+	if (!scrollListenerAdded) {
+		window.addEventListener('scroll', handleScroll, true);
+		scrollListenerAdded = true;
+	}
+}
+
+function hideDropdown(dropdown) {
+	dropdown.setAttribute('aria-hidden', 'true');
+	dropdown.setAttribute('aria-expanded', 'false');
+	dropdown.style.display = 'none';
+
+	expandedDropdowns.delete(dropdown);
+
+	const keydownListener = keydownListeners.get(dropdown);
+	if (keydownListener) {
+		document.removeEventListener('keydown', keydownListener);
+		keydownListeners.delete(dropdown);
+	}
+
+	if (expandedDropdowns.size === 0 && scrollListenerAdded) {
+		window.removeEventListener('scroll', handleScroll, true);
+		scrollListenerAdded = false;
+	}
+}
+
+function initSubnavDropdowns(headerEl) {
+	const dropdowns = Array.from(headerEl.querySelectorAll('[data-o-header-subnav-dropdown]'));
+	const parents = dropdowns.map(dropdown => dropdown.parentNode);
+
+	parents.forEach((parent, i) => addDropdownEvents(parent, dropdowns[i]));
+}
+
+export { initSubnavDropdowns };
+export default { initSubnavDropdowns };