|
| 1 | +import { parseUrlHashTag } from './hashTagParser.js'; |
| 2 | + |
| 3 | +// media query match that indicates mobile/tablet width |
| 4 | +const isDesktop = window.matchMedia('(min-width: 900px)'); |
| 5 | + |
| 6 | +function closeOnEscape(e) { |
| 7 | + if (e.code === 'Escape') { |
| 8 | + const nav = document.getElementById('nav'); |
| 9 | + const navSections = nav.querySelector('.nav-sections'); |
| 10 | + const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); |
| 11 | + if (navSectionExpanded && isDesktop.matches) { |
| 12 | + // eslint-disable-next-line no-use-before-define |
| 13 | + toggleAllNavSections(navSections); |
| 14 | + navSectionExpanded.focus(); |
| 15 | + } else if (!isDesktop.matches) { |
| 16 | + // eslint-disable-next-line no-use-before-define |
| 17 | + toggleMenu(nav, navSections); |
| 18 | + nav.querySelector('button').focus(); |
| 19 | + } |
| 20 | + } |
| 21 | +} |
| 22 | + |
| 23 | +function closeOnFocusLost(e) { |
| 24 | + const nav = e.currentTarget; |
| 25 | + if (!nav.contains(e.relatedTarget)) { |
| 26 | + const navSections = nav.querySelector('.nav-sections'); |
| 27 | + const navSectionExpanded = navSections.querySelector('[aria-expanded="true"]'); |
| 28 | + if (navSectionExpanded && isDesktop.matches) { |
| 29 | + // eslint-disable-next-line no-use-before-define |
| 30 | + toggleAllNavSections(navSections, false); |
| 31 | + } else if (!isDesktop.matches) { |
| 32 | + // eslint-disable-next-line no-use-before-define |
| 33 | + toggleMenu(nav, navSections, false); |
| 34 | + } |
| 35 | + } |
| 36 | +} |
| 37 | + |
| 38 | +function openOnKeydown(e) { |
| 39 | + const focused = document.activeElement; |
| 40 | + const isNavDrop = focused.className === 'nav-drop'; |
| 41 | + if (isNavDrop && (e.code === 'Enter' || e.code === 'Space')) { |
| 42 | + const dropExpanded = focused.getAttribute('aria-expanded') === 'true'; |
| 43 | + // eslint-disable-next-line no-use-before-define |
| 44 | + toggleAllNavSections(focused.closest('.nav-sections')); |
| 45 | + focused.setAttribute('aria-expanded', dropExpanded ? 'false' : 'true'); |
| 46 | + } |
| 47 | +} |
| 48 | + |
| 49 | +function focusNavSection() { |
| 50 | + document.activeElement.addEventListener('keydown', openOnKeydown); |
| 51 | +} |
| 52 | + |
| 53 | +/** |
| 54 | + * Recursively gets all LI elements from menu section |
| 55 | + * |
| 56 | + * @param menu |
| 57 | + * @param elements |
| 58 | + * @returns {*[]} |
| 59 | + */ |
| 60 | +function getLiElements(menu, elements = []) { |
| 61 | + const uls = menu.querySelectorAll('ul'); |
| 62 | + |
| 63 | + /* |
| 64 | + @TODO: handle nested ul > li > ul; makes sure it wont get into infinite loop; optimization (?); |
| 65 | + */ |
| 66 | + uls.forEach((ul) => { |
| 67 | + ul.childNodes.forEach((n) => { |
| 68 | + if (n.nodeName === 'ul') { |
| 69 | + getLiElements(n, elements); |
| 70 | + } |
| 71 | + // if (n.nodeName === 'li' && n.querySelectorAll('ul').length > 0) { |
| 72 | + // getLiElements(n.querySelectorAll('ul'), elements); |
| 73 | + // } |
| 74 | + if (n.nodeType !== 3) { |
| 75 | + elements.push(n); |
| 76 | + } |
| 77 | + }); |
| 78 | + }); |
| 79 | + return elements; |
| 80 | +} |
| 81 | + |
| 82 | +/** |
| 83 | + * Parses nav fragment; disable visible elements based on hash tags |
| 84 | + * |
| 85 | + * @param navSections |
| 86 | + * @returns {*} |
| 87 | + */ |
| 88 | +function parseNavSections(navSections) { |
| 89 | + const visibleMenuItems = navSections.querySelectorAll(':scope .default-content-wrapper > ul > li'); |
| 90 | + |
| 91 | + visibleMenuItems.forEach((section) => { |
| 92 | + const liElements = getLiElements(section); |
| 93 | + liElements.forEach((liElement) => { |
| 94 | + const link = liElement.querySelector('a') && liElement.querySelector('a').href; |
| 95 | + if (link) { |
| 96 | + const hashTags = parseUrlHashTag(link); |
| 97 | + console.table(`Hash tags for ${link}`, hashTags); |
| 98 | + // liElement.parentNode.removeChild(liElement); |
| 99 | + } |
| 100 | + }); |
| 101 | + }); |
| 102 | + return visibleMenuItems; |
| 103 | +} |
| 104 | + |
| 105 | +/** |
| 106 | + * Toggles all nav sections |
| 107 | + * @param {Element} sections The container element |
| 108 | + * @param {Boolean} expanded Whether the element should be expanded or collapsed |
| 109 | + */ |
| 110 | +function toggleAllNavSections(sections, expanded = false) { |
| 111 | + sections |
| 112 | + .querySelectorAll('.nav-sections .default-content-wrapper > ul > li') |
| 113 | + .forEach((section) => { |
| 114 | + section.setAttribute('aria-expanded', expanded); |
| 115 | + }); |
| 116 | +} |
| 117 | + |
| 118 | +/** |
| 119 | + * Toggles the entire nav |
| 120 | + * @param {Element} nav The container element |
| 121 | + * @param {Element} navSections The nav sections within the container element |
| 122 | + * @param {*} forceExpanded Optional param to force nav expand behavior when not null |
| 123 | + */ |
| 124 | +function toggleMenu(nav, navSections, forceExpanded = null) { |
| 125 | + const expanded = forceExpanded !== null ? !forceExpanded : nav.getAttribute('aria-expanded') === 'true'; |
| 126 | + const button = nav.querySelector('.nav-hamburger button'); |
| 127 | + document.body.style.overflowY = expanded || isDesktop.matches ? '' : 'hidden'; |
| 128 | + nav.setAttribute('aria-expanded', expanded ? 'false' : 'true'); |
| 129 | + toggleAllNavSections(navSections, expanded || isDesktop.matches ? 'false' : 'true'); |
| 130 | + button.setAttribute('aria-label', expanded ? 'Open navigation' : 'Close navigation'); |
| 131 | + // enable nav dropdown keyboard accessibility |
| 132 | + const navDrops = navSections.querySelectorAll('.nav-drop'); |
| 133 | + if (isDesktop.matches) { |
| 134 | + navDrops.forEach((drop) => { |
| 135 | + if (!drop.hasAttribute('tabindex')) { |
| 136 | + drop.setAttribute('tabindex', 0); |
| 137 | + drop.addEventListener('focus', focusNavSection); |
| 138 | + } |
| 139 | + }); |
| 140 | + } else { |
| 141 | + navDrops.forEach((drop) => { |
| 142 | + drop.removeAttribute('tabindex'); |
| 143 | + drop.removeEventListener('focus', focusNavSection); |
| 144 | + }); |
| 145 | + } |
| 146 | + |
| 147 | + // enable menu collapse on escape keypress |
| 148 | + if (!expanded || isDesktop.matches) { |
| 149 | + // collapse menu on escape press |
| 150 | + window.addEventListener('keydown', closeOnEscape); |
| 151 | + // collapse menu on focus lost |
| 152 | + nav.addEventListener('focusout', closeOnFocusLost); |
| 153 | + } else { |
| 154 | + window.removeEventListener('keydown', closeOnEscape); |
| 155 | + nav.removeEventListener('focusout', closeOnFocusLost); |
| 156 | + } |
| 157 | +} |
| 158 | + |
| 159 | +export { |
| 160 | + isDesktop, |
| 161 | + parseNavSections, |
| 162 | + toggleAllNavSections, |
| 163 | + toggleMenu, |
| 164 | +}; |
0 commit comments