Synced with mixtape upstream

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)
+

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;
 	}
 }
+

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 {
 		}
 	}
 }
+

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 = (
-		const matching = title.includes(searchTerm) && (!selectedCategory || song.dataset.category === selectedCategory);
+			(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");
+

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() {
+function updateScrollSpeed() {
-	if (this.classList.contains("active")) {
+	if (controls.querySelector("#autoscroll").classList.contains("active")) {
 		clearTimeout(scroll);
-	} else {
+		scroll = setTimeout(pageScroll, scrollTimeout);
-		pageScroll();
 	}
+}
+
+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");
+

templates/index.html

@@ -21,7 +21,13 @@
 		</section>
 		<section class="song-list">
 			{% for song in section.pages %}
-				<div class="{{ macros::primary_category(song=song) }}" data-title="{{ song.title }}" data-category="{{ macros::primary_category(song=song) }}">
+				<div class="{{ macros::primary_category(song=song) }}"
+					data-title="{{ song.title }}"
+					data-category="{{ macros::primary_category(song=song) }}"
+					{% if song.taxonomies["artist"] %}
+						data-artist="{{ song.taxonomies["artist"][0] }}"
+					{% endif %}
+				>
 					<div class="meta">
 						<div class="title">{{ song.title }}</div>
 						{% if song.taxonomies["artist"] %}

templates/macros.html

@@ -1,5 +1,5 @@
 {% macro primary_category(song) %}
-{%- if song.taxonomies["album"] -%}
+	{%- if song.taxonomies["album"] -%}
-{{ song.taxonomies["album"][0] }}
+		{{ song.taxonomies["album"][0] }}
-{%- endif -%}
+	{%- endif -%}
 {% endmacro %}

templates/song.html

@@ -1,4 +1,5 @@
 {% extends "index.html" %}
+
 {% block content %}
 	<main class="song">
 		{% for asset in page.assets %}
@@ -10,13 +11,15 @@
 						<div class="button icon-font-size" id="font-size-reset"></div>
 						<div class="button icon-add" id="font-size-increase"></div>
 					</section>
-					<section class="transpose">
+					<!--<section class="transpose">-->
-						<div class="button icon-subtract" id="transpose-decrease"></div>
+					<!--	<div class="button icon-subtract" id="transpose-decrease"></div>-->
-						<div class="button icon-transpose" id="transpose-reset"></div>
+					<!--	<div class="button icon-transpose" id="transpose-reset"></div>-->
-						<div class="button icon-add" id="transpose-increase"></div>
+					<!--	<div class="button icon-add" id="transpose-increase"></div>-->
-					</section>
+					<!--</section>-->
 					<section class="autoscroll">
+						<div class="button icon-subtract" id="autoscroll-decrease"></div>
 						<div class="button icon-scroll" id="autoscroll"></div>
+						<div class="button icon-add" id="autoscroll-increase"></div>
 					</section>
 				</nav>
 			{% endif %}
@@ -27,3 +30,4 @@
 {% block script %}
 	<script src="{{ get_url(path="/js/song-controls.js") }}"></script>
 {% endblock %}
+