From c02fda7df1ccfdc2dc8cc6b4dba756a8d1f0ab15 Mon Sep 17 00:00:00 2001 From: Filip Rojek Date: Tue, 25 Feb 2025 00:52:03 +0100 Subject: [PATCH] Synced with mixtape upstream --- makefile | 3 ++- sass/chordpro.scss | 5 +++-- sass/style.scss | 4 +++- static/js/filter.js | 18 ++++++++++++++---- static/js/song-controls.js | 34 +++++++++++++++++++++++++++++----- templates/index.html | 8 +++++++- templates/macros.html | 6 +++--- templates/song.html | 14 +++++++++----- 8 files changed, 70 insertions(+), 22 deletions(-) diff --git a/makefile b/makefile index d386a54..22e9876 100644 --- a/makefile +++ b/makefile @@ -10,7 +10,7 @@ SRC_EXTENSION := .cho SONG_CHO := $(foreach dir,$(SRC_DIR),$(wildcard $(dir)/*$(SRC_EXTENSION))) SONG_PDF := $(patsubst %$(SRC_EXTENSION),%.pdf,$(SONG_CHO)) SONG_HTML := $(patsubst %$(SRC_EXTENSION),%.html,$(SONG_CHO)) -SONGBOOK := songbook.pdf +SONGBOOK := content/songbook.pdf .DEFAULT_GOAL := pdf @@ -38,3 +38,4 @@ songbook: pdf .PHONY: clean clean: rm -f $(SONG_PDF) $(SONG_HTML) $(SONGBOOK) + diff --git a/sass/chordpro.scss b/sass/chordpro.scss index f42da17..af004c7 100644 --- a/sass/chordpro.scss +++ b/sass/chordpro.scss @@ -19,13 +19,13 @@ table { } .song { - padding: 1em 0 0 1em; + padding: 3em 0 1em 1em; } .title { font-size: 1.5em; font-weight: bold; - margin-bottom: 1em; + margin-bottom: 2em; } .chords { @@ -78,3 +78,4 @@ table { color: $col-black; } } + diff --git a/sass/style.scss b/sass/style.scss index 941c2be..d866dfd 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -191,7 +191,8 @@ main.song { &.font-size>.button:hover, &.font-size>.button.active { background-color: #bf616a } &.transpose>.button:hover, &.transpose>.button.active { background-color: #5e81ac } - &.autoscroll>.button.active { background-color: #d08770 } + &.autoscroll>.button:hover, &.autoscroll>.button.active { background-color: #d08770 } + &.autoscroll>#autoscroll.active { background-color: #bf616a } .button{ display: grid; @@ -234,3 +235,4 @@ main.song { } } } + diff --git a/static/js/filter.js b/static/js/filter.js index 83fd7c7..5d61411 100644 --- a/static/js/filter.js +++ b/static/js/filter.js @@ -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"); + diff --git a/static/js/song-controls.js b/static/js/song-controls.js index 3d89728..a7bc5a2 100644 --- a/static/js/song-controls.js +++ b/static/js/song-controls.js @@ -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"); + diff --git a/templates/index.html b/templates/index.html index 8f16597..a6aae89 100644 --- a/templates/index.html +++ b/templates/index.html @@ -21,7 +21,13 @@
{% for song in section.pages %} -
+
{{ song.title }}
{% if song.taxonomies["artist"] %} diff --git a/templates/macros.html b/templates/macros.html index ad98349..34a25ff 100644 --- a/templates/macros.html +++ b/templates/macros.html @@ -1,5 +1,5 @@ {% macro primary_category(song) %} -{%- if song.taxonomies["album"] -%} -{{ song.taxonomies["album"][0] }} -{%- endif -%} + {%- if song.taxonomies["album"] -%} + {{ song.taxonomies["album"][0] }} + {%- endif -%} {% endmacro %} diff --git a/templates/song.html b/templates/song.html index e286794..ce1561a 100644 --- a/templates/song.html +++ b/templates/song.html @@ -1,4 +1,5 @@ {% extends "index.html" %} + {% block content %}
{% for asset in page.assets %} @@ -10,13 +11,15 @@
-
-
-
-
-
+ + + + +
+
+
{% endif %} @@ -27,3 +30,4 @@ {% block script %} {% endblock %} +