File size: 3,292 Bytes
f4a41d8 |
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
(function () {
window.addEventListener('DOMContentLoaded', () => {
const searchBox = document.createElement('div');
searchBox.id = 'search-box';
const searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Search...';
const searchResults = document.createElement('ul');
searchResults.id = 'search-results';
searchBox.appendChild(searchInput);
searchBox.appendChild(searchResults);
const body = document.querySelector('body');
body.appendChild(searchBox);
// let uiButtons = document.querySelectorAll('#tabs>.tab-nav button');
let lastAltKeyDownTime = 0;
let searchBoxIsVisible = false;
function openSearchBox() {
searchBox.classList.add('visible');
searchInput.focus();
searchBoxIsVisible = true;
}
function closeSearchBox() {
searchBox.classList.remove('visible');
searchInput.value = '';
searchResults.innerHTML = '';
searchBoxIsVisible = false;
}
function handleClickOutsideSearchBox(event) {
if (searchBoxIsVisible && !searchBox.contains(event.target)) {
closeSearchBox();
}
}
function handleAltKeyDown(event) {
let now = Date.now();
if ((event.key === 'Alt' && now - lastAltKeyDownTime < 500) || (event.ctrlKey && event.code === 'Space')) {
openSearchBox();
}
lastAltKeyDownTime = now;
}
function handleSearchInput(event) {
let uiButtons = document.querySelectorAll('#tabs>.tab-nav button');
let searchTerm = event.target.value.trim();
if (searchTerm.length === 0) {
searchResults.innerHTML = '';
return;
}
let matchingResults = [];
for (let i = 0; i < uiButtons.length; i++) {
let button = uiButtons[i];
let buttonText = button.textContent.toLowerCase();
if (buttonText.includes(searchTerm.toLowerCase())) {
matchingResults.push(button);
}
}
let html = matchingResults.map(button => `<li>${button.textContent}</li>`).join('');
searchResults.innerHTML = html;
}
function handleSearchResultClick(event) {
let uiButtons = document.querySelectorAll('#tabs>.tab-nav button');
let target = event.target;
while (target && target.tagName !== 'LI') {
target = target.parentNode;
}
if (target) {
let buttonText = target.textContent.trim();
let button = Array.from(uiButtons).find(button => button.textContent.trim() === buttonText);
button.click();
closeSearchBox();
}
}
document.addEventListener('keydown', handleAltKeyDown);
searchInput.addEventListener('input', handleSearchInput);
searchResults.addEventListener('click', handleSearchResultClick);
document.addEventListener('click', handleClickOutsideSearchBox);
});
})(); |