forked from fr/guitar
Synced with mixtape upstream
This commit is contained in:
@ -20,15 +20,21 @@ function buttonToggle(clickedButton) {
|
||||
}
|
||||
|
||||
function filterSongs() {
|
||||
const searchTerm = search.value.trim().toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
|
||||
const searchTerm = sanitizeString(search.value);
|
||||
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);
|
||||
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
|
||||
@ -37,8 +43,12 @@ buttons.forEach(button => button.addEventListener("click", () => buttonToggle(bu
|
||||
|
||||
// Normalize song titles
|
||||
Array.from(songList.children).forEach(song => {
|
||||
song.dataset.title = song.dataset.title.toLowerCase().normalize("NFD").replace(/\p{Diacritic}/gu, "");
|
||||
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");
|
||||
|
||||
|
@ -3,18 +3,40 @@ 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, 80);
|
||||
scroll = setTimeout(pageScroll, scrollTimeout);
|
||||
}
|
||||
|
||||
document.querySelector("#autoscroll").addEventListener("click", function() {
|
||||
if (this.classList.contains("active")) {
|
||||
function updateScrollSpeed() {
|
||||
if (controls.querySelector("#autoscroll").classList.contains("active")) {
|
||||
clearTimeout(scroll);
|
||||
} else {
|
||||
pageScroll();
|
||||
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
|
||||
@ -31,5 +53,7 @@ controls.querySelector("#font-size-increase").addEventListener("click", () => pa
|
||||
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");
|
||||
|
||||
|
Reference in New Issue
Block a user