mixtape/static/js/filter.js

54 lines
1.8 KiB
JavaScript
Raw Normal View History

2024-02-09 09:42:05 +01:00
const filters = document.querySelector(".filters");
const buttons = Array.from(filters.querySelectorAll(".button"));
const search = document.querySelector("input[type='search']");
const form = document.querySelector("form");
2024-02-08 13:31:46 +01:00
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() {
2024-12-30 13:54:28 +01:00
const searchTerm = sanitizeString(search.value);
2024-02-08 13:31:46 +01:00
const songs = Array.from(songList.children);
songs.forEach(song => {
2024-12-30 13:59:42 +01:00
const matching = (
(song.dataset.title.includes(searchTerm) || (song.dataset.artist && song.dataset.artist.includes(searchTerm))) &&
(!selectedCategory || song.dataset.category === selectedCategory)
);
2024-02-08 13:31:46 +01:00
song.classList.toggle("hidden", !matching);
});
}
2024-12-30 13:54:28 +01:00
function sanitizeString(string) {
return string.trim().toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "")
}
2024-02-08 13:31:46 +01:00
// Event listeners
2024-02-09 09:42:05 +01:00
search.addEventListener("input", filterSongs);
// Filtering happens before the reset itself without this timeout
form.addEventListener("reset", () => setTimeout(filterSongs, 0));
2024-02-08 13:31:46 +01:00
buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));
// Normalize song titles
Array.from(songList.children).forEach(song => {
2024-12-30 13:54:28 +01:00
song.dataset.title = sanitizeString(song.dataset.title);
if (song.dataset.artist) {
song.dataset.artist = sanitizeString(song.dataset.artist);
}
2024-02-08 13:31:46 +01:00
});
// Display the filter section on JS-enabled browsers
window.addEventListener("load", () => filters.classList.remove = "hidden");