adding cool search

This commit is contained in:
x
2026-01-23 19:44:17 +01:00
parent 7b1e0af0cb
commit 4de2652ffe
3 changed files with 189 additions and 55 deletions

View File

@@ -745,6 +745,73 @@ window.requestAnimFrame = (function () {
// <scroller>
// <search-overlay>
const initSearch = () => {
if (!document.getElementById('search-overlay')) {
const overlay = document.createElement('div');
overlay.id = 'search-overlay';
overlay.innerHTML = `
<div id="search-close">&times;</div>
<input type="text" id="search-input" placeholder="Search Tags..." autocomplete="off">
`;
document.body.appendChild(overlay);
const input = document.getElementById('search-input');
const close = document.getElementById('search-close');
const btns = document.querySelectorAll('#nav-search-btn, #nav-search-btn-guest');
const toggleSearch = (show) => {
if (show) {
overlay.style.display = 'flex';
// Force reflow
overlay.offsetHeight;
overlay.classList.add('visible');
input.focus();
} else {
overlay.classList.remove('visible');
setTimeout(() => {
overlay.style.display = 'none';
}, 200);
}
};
btns.forEach(btn => btn.addEventListener('click', (e) => {
e.preventDefault();
toggleSearch(true);
}));
close.addEventListener('click', () => toggleSearch(false));
// Close on click outside (background)
overlay.addEventListener('click', (e) => {
if (e.target === overlay) toggleSearch(false);
});
// ESC to close
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && overlay.classList.contains('visible')) {
toggleSearch(false);
}
// "k" to open
if (e.key === 'k' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && !overlay.classList.contains('visible')) {
e.preventDefault();
toggleSearch(true);
}
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const val = input.value.trim();
if (val) {
window.location.href = `/tag/${encodeURIComponent(val)}`;
}
}
});
}
};
initSearch();
// </search-overlay>
// </scroller>
})();