Edited for FR guitar

static/js/filter.js

@@ -0,0 +1,44 @@
+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 = 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("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 = 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");

static/js/song-controls.js

@@ -0,0 +1,35 @@
+const controls = document.querySelector(".controls");
+const song = document.querySelector("iframe.song").contentWindow;
+
+// Autoscroll
+var scroll;
+function pageScroll() {
+	song.scrollBy(0, 1);
+	scroll = setTimeout(pageScroll, 80);
+}
+
+document.querySelector("#autoscroll").addEventListener("click", function() {
+	if (this.classList.contains("active")) {
+		clearTimeout(scroll);
+	} else {
+		pageScroll();
+	}
+	this.classList.toggle("active");
+});
+
+// Scaling
+function pageScale(value) {
+	if (value === 0) {
+		song.document.body.style.transform = "scale(1)";
+		return;
+	}
+	const currentScale = parseFloat(song.document.body.style.transform.split("scale(")[1]) || 1;
+	song.document.body.style.transform = "scale(" + (currentScale + value) + ")";
+}
+
+controls.querySelector("#font-size-increase").addEventListener("click", () => pageScale(0.1));
+controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
+controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
+
+// Display the controls on JS-enabled browsers
+window.addEventListener("load", () => controls.classList.remove = "hidden");