42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
|
const filters = document.querySelector(".filters");
|
||
|
|
const buttons = Array.from(filters.querySelectorAll(".button"));
|
||
|
|
const search = document.querySelector("input[type='text']");
|
||
|
|
const songList = document.querySelector(".song-list");
|
||
|
|
|
||
|
|
let selectedCategory = null;
|
||
|
|
|
||
|
|
function buttonToggle(clickedButton) {
|
||
|
|
buttons.forEach(button => {
|
||
|
|
if (button === clickedButton && !button.classList.contains("selected")) {
|
||
|
|
button.classList.add("selected");
|
||
|
|
selectedCategory = button.dataset.category;
|
||
|
|
} else {
|
||
|
|
button.classList.remove("selected");
|
||
|
|
if (button.dataset.category == selectedCategory) selectedCategory = null;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
filterSongs();
|
||
|
|
}
|
||
|
|
|
||
|
|
function filterSongs() {
|
||
|
|
const searchTerm = search.value.trim().toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
|
||
|
|
const songs = Array.from(songList.children);
|
||
|
|
songs.forEach(song => {
|
||
|
|
const title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
|
||
|
|
const matching = title.includes(searchTerm) && (!selectedCategory || song.dataset.category === selectedCategory);
|
||
|
|
song.classList.toggle("hidden", !matching);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Event listeners
|
||
|
|
search.addEventListener("keyup", filterSongs);
|
||
|
|
buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
|
||
|
|
|
||
|
|
// Normalize song titles
|
||
|
|
Array.from(songList.children).forEach(song => {
|
||
|
|
song.dataset.title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
|
||
|
|
});
|
||
|
|
|
||
|
|
// Display the filter section on JS-enabled browsers
|
||
|
|
window.addEventListener("load", () => filters.classList.remove = "hidden");
|