Track local files

static/js/filter.js

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

static/js/song-controls.js

@@ -0,0 +1,58 @@
+const controls = document.querySelector(".controls");
+const song = document.querySelector("iframe.song").contentWindow;
+
+// Autoscroll
+var scroll;
+var scrollTimeout = 60;
+const minTimeout = 10;
+const maxTimeout = 120;
+const scrollIncrement = 20;
+
+function pageScroll() {
+	song.scrollBy(0, 1);
+	scroll = setTimeout(pageScroll, scrollTimeout);
+}
+
+function updateScrollSpeed() {
+	if (controls.querySelector("#autoscroll").classList.contains("active")) {
+		clearTimeout(scroll);
+		scroll = setTimeout(pageScroll, scrollTimeout);
+	}
+}
+
+controls.querySelector("#autoscroll-increase").addEventListener("click", () => {
+	scrollTimeout = Math.max(minTimeout, scrollTimeout - scrollIncrement);
+	updateScrollSpeed();
+});
+
+controls.querySelector("#autoscroll-decrease").addEventListener("click", () => {
+	scrollTimeout = Math.min(maxTimeout, scrollTimeout + scrollIncrement);
+	updateScrollSpeed();
+});
+
+controls.querySelector("#autoscroll").addEventListener("click", function() {
+	this.classList.toggle("active");
+	if (this.classList.contains("active")) {
+		pageScroll();
+	} else {
+		clearTimeout(scroll);
+	}
+});
+
+// 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");