6 385
edições
Widget:Test: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Widget:Test (ver código-fonte)
Edição das 23h52min de 26 de dezembro de 2024
, 26 de dezembro de 2024sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 62: | Linha 62: | ||
}); | }); | ||
document.addEventListener('keydown', function (event) { | |||
// Verifica se o dropdown está visível | |||
if (dropdown.style.display === 'none' || !dropdown.childNodes.length) { | if (dropdown.style.display === 'none' || !dropdown.childNodes.length) { | ||
return; // | return; // Sai da função se o dropdown estiver escondido ou vazio | ||
} | } | ||
const activeItem = document.querySelector('.dropdown-item.active'); | |||
if (event.key === 'ArrowDown') { | if (event.key === 'ArrowDown') { | ||
if (activeItem) { | if (activeItem) { | ||
activeItem.classList.remove('active'); | activeItem.classList.remove('active'); | ||
const nextItem = activeItem.nextElementSibling || dropdown.firstChild; | const nextItem = activeItem.nextElementSibling || dropdown.firstChild; // Vai para o próximo ou volta para o início | ||
nextItem.classList.add('active'); | nextItem.classList.add('active'); | ||
nextItem.scrollIntoView({ block: "nearest" }); // Garante que o item fique visível | nextItem.scrollIntoView({ block: "nearest" }); // Garante que o item fique visível | ||
} else { | } else { | ||
dropdown.firstChild.classList.add('active'); | dropdown.firstChild.classList.add('active'); // Ativa o primeiro item se nenhum estiver ativo | ||
dropdown.firstChild.scrollIntoView({ block: "nearest" }); | dropdown.firstChild.scrollIntoView({ block: "nearest" }); | ||
} | } | ||
event.preventDefault(); // Evita | event.preventDefault(); // Evita comportamento padrão | ||
} else if (event.key === 'ArrowUp') { | } else if (event.key === 'ArrowUp') { | ||
if (activeItem) { | if (activeItem) { | ||
activeItem.classList.remove('active'); | activeItem.classList.remove('active'); | ||
const previousItem = activeItem.previousElementSibling || dropdown.lastChild; | const previousItem = activeItem.previousElementSibling || dropdown.lastChild; // Vai para o anterior ou volta para o final | ||
previousItem.classList.add('active'); | previousItem.classList.add('active'); | ||
previousItem.scrollIntoView({ block: "nearest" }); | previousItem.scrollIntoView({ block: "nearest" }); | ||
} else { | } else { | ||
dropdown.lastChild.classList.add('active'); | dropdown.lastChild.classList.add('active'); // Ativa o último item se nenhum estiver ativo | ||
dropdown.lastChild.scrollIntoView({ block: "nearest" }); | dropdown.lastChild.scrollIntoView({ block: "nearest" }); | ||
} | } | ||
event.preventDefault(); | event.preventDefault(); | ||
} else if (event.key === 'Enter') { | } else if (event.key === 'Enter') { | ||
if (activeItem) { | if (activeItem) { | ||
activeItem.click(); | activeItem.click(); // Simula um clique no item ativo | ||
} | } | ||
event.preventDefault(); | event.preventDefault(); | ||
} | } | ||
}); | }); | ||