mixtape/static/js/filter.js

const filters  = document.querySelector(".filters");
const buttons  = Array.from(filters.querySelectorAll(".button"));
const search   = document.querySelector("input[type='search']");
const form     = document.querySelector("form");
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 = sanitizeString(search.value);
	const songs = Array.from(songList.children);
	songs.forEach(song => {
		const matching = (
			(song.dataset.title.includes(searchTerm) || (song.dataset.artist && song.dataset.artist.includes(searchTerm))) &&
			(!selectedCategory || song.dataset.category === selectedCategory)
		);
		song.classList.toggle("hidden", !matching);
	});
}

function sanitizeString(string) {
	return string.trim().toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "")
}

// Event listeners
search.addEventListener("input", filterSongs);
// Filtering happens before the reset itself without this timeout
form.addEventListener("reset", () => setTimeout(filterSongs, 0));
buttons.forEach(button => button.addEventListener("click", () => buttonToggle(button)));

// Normalize song titles
Array.from(songList.children).forEach(song => {
	song.dataset.title = sanitizeString(song.dataset.title);
	if (song.dataset.artist) {
		song.dataset.artist = sanitizeString(song.dataset.artist);
	}
});

// Display the filter section on JS-enabled browsers
window.addEventListener("load", () => filters.classList.remove = "hidden");