55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
// Keyboard navigation for service cards
|
|
(function initKeyboardNav(){
|
|
let selectedIndex = -1;
|
|
const searchInput = document.getElementById('search-input');
|
|
|
|
// Wait for services to load
|
|
const checkServicesLoaded = setInterval(() => {
|
|
if(window.servicesData){
|
|
clearInterval(checkServicesLoaded);
|
|
setupKeyboardNav();
|
|
}
|
|
}, 100);
|
|
|
|
function setupKeyboardNav(){
|
|
const { allServices } = window.servicesData;
|
|
|
|
const selectCard = (index) => {
|
|
const visibleCards = allServices.filter(card => card.style.display !== 'none');
|
|
if(visibleCards.length === 0) return;
|
|
|
|
// Remove previous selection
|
|
visibleCards.forEach(card => card.classList.remove('selected'));
|
|
|
|
// Update index
|
|
if(index < 0) index = visibleCards.length - 1;
|
|
if(index >= visibleCards.length) index = 0;
|
|
selectedIndex = index;
|
|
|
|
// Add selection
|
|
visibleCards[selectedIndex].classList.add('selected');
|
|
visibleCards[selectedIndex].scrollIntoView({behavior: 'smooth', block: 'nearest'});
|
|
};
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if(document.activeElement === searchInput) return;
|
|
|
|
const visibleCards = allServices.filter(card => card.style.display !== 'none');
|
|
|
|
if(e.key === 'ArrowRight' || e.key === 'ArrowDown'){
|
|
e.preventDefault();
|
|
selectCard(selectedIndex + 1);
|
|
} else if(e.key === 'ArrowLeft' || e.key === 'ArrowUp'){
|
|
e.preventDefault();
|
|
selectCard(selectedIndex - 1);
|
|
} else if(e.key === 'Enter' && selectedIndex >= 0){
|
|
e.preventDefault();
|
|
visibleCards[selectedIndex].click();
|
|
} else if(e.key === 'Escape'){
|
|
visibleCards.forEach(card => card.classList.remove('selected'));
|
|
selectedIndex = -1;
|
|
}
|
|
});
|
|
}
|
|
})();
|