-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
48 lines (42 loc) · 1.42 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const dataEl = document.getElementById('search-items'),
searchEl = document.getElementById('search');
let activeEl;
/**
* Adds each menu item to the search list.
*
* @param {HTMLElement} el - The menu item element to be processed.
*/
function processMenuItem(el) {
const option = document.createElement('option'),
text = el.innerText.trim(),
sanitized = text.toLowerCase().replace(/[^a-z]+/g, '-'),
parentEl = el.closest('ul')?.closest('li')?.querySelector(':scope > a'),
parentText = parentEl?.innerText?.trim(),
id = 'gen-' + sanitized + '-' + Math.random().toString(36).substring(2);
option.value = parentText ? parentText + ' > ' + text : text;
el.id = id;
option.setAttribute('data-source-id', id);
dataEl.appendChild(option);
}
/**
* Shows the menu item matching the search input text.
*/
function handleSearch() {
const matchingOption = Array.from(dataEl.querySelectorAll('option'))
.filter(el => el.value === searchEl.value)[0],
id = matchingOption?.getAttribute('data-source-id'),
el = document.getElementById(id);
if (el) {
activeEl?.classList?.remove('active');
el.classList.add('active');
activeEl = el;
}
}
/**
* Initializes the search functionality.
*/
function init() {
document.querySelectorAll('.l2 a').forEach(processMenuItem);
searchEl.addEventListener('input', handleSearch);
}
init();