89 lines
3.2 KiB
JavaScript
89 lines
3.2 KiB
JavaScript
(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);
|
|
});
|
|
})(); |