Transpose added

.gitea/workflows/build_and_deploy.yaml

@@ -21,7 +21,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        run: git clone git@git.filiprojek.cz:fr/guitar.git /workspace/fr/guitar
+        run: git clone https://git.filiprojek.cz/fr/guitar.git /workspace/fr/guitar
 
       - name: Build Chordpro
         run: make pdf html songbook

biome.json

@@ -0,0 +1,5 @@
+{
+  "formatter": {
+    "enabled": false
+  }
+}

content/alenka-v-risi-divu/alenka-v-risi-divu.cho

@@ -0,0 +1,58 @@
+{title: Alenka v říši divů}
+{artist: Karel Zich}
+{columns: 2}
+
+{sov}
+[G]Telegram s adresou svět,
+[C]píšu v něm pět vlídných vět –[D] jedné [G]dívce.[D]
+[G]Kdopak ví, kam jej zítra pošta doručí
+[C]a kolik náhod mu poručí,
+[D]chtěl bych jen vidět zář očí, které [G]budou jej číst.[D]
+{eov}
+
+{soc}
+[G]A šel bych cestou prašnou, co nikdo nezměří,
+sám [C]jedenkrát bych s plnou brašnou cinknul u dveří,
+bude [D]v očích mít úžas jak Alenka v říši di[G]vů.[D]
+[G]I když dá mi košem, až řádky bude číst,
+já [C]chtěl bych být tím listonošem, neboť jsem si jist,
+bude [D]v očích mít úžas jak [C]Alenka v říši [G]divů.[D]
+{eoc}
+
+{sov}
+Já nechal všechna okna dokořán
+a díval se na svět ze všech stran, jak se koulí.
+A celý den přemítám o dívce neznámé,
+proč už se dávno neznáme,
+snad adresu najde toto poselství mé.
+{eov}
+
+{soc}
+[G]A šel bych cestou prašnou, co nikdo nezměří,
+sám [C]jedenkrát bych s plnou brašnou cinknul u dveří,
+bude [D]v očích mít úžas jak Alenka v říši di[G]vů.[D]
+[G]I když dá mi košem, až řádky bude číst,
+já [C]chtěl bych být tím listonošem, neboť jsem si jist,
+bude [D]v očích mít úžas jak [C]Alenka v říši [G]divů.[D]
+{eoc}
+
+{column_break}
+
+{sov}
+Odmítli můj telegram
+a řekli: „Poslat jej není kam – adresa schází.“
+A celý den přemítám o dívce neznámé,
+proč už se dávno neznáme,
+snad adresu najde poselství.
+{eov}
+
+{soc}
+[G]A šel bych cestou prašnou, co nikdo nezměří,
+sám [C]jedenkrát bych s plnou brašnou cinknul u dveří,
+bude [D]v očích mít úžas jak Alenka v říši di[G]vů.[D]
+[G]I když dá mi košem, až řádky bude číst,
+já [C]chtěl bych být tím listonošem, neboť jsem si jist,
+bude [D]v očích mít úžas jak [C]Alenka v říši [G]divů.[D]
+
+bude [D]v očích mít úžas jak [C]Alenka v říši [G]divů.[D]
+{eoc}

content/alenka-v-risi-divu/index.md

@@ -0,0 +1,6 @@
++++
+title = "Alenka v říši divů"
+[taxonomies]
+category = ["classic"]
+artist = ["Karel Zich"]
++++

static/js/song-controls.js

@@ -2,8 +2,8 @@ const controls = document.querySelector(".controls");
 const song = document.querySelector("iframe.song").contentWindow;
 
 // Autoscroll
-var scroll;
-var scrollTimeout = 60;
+let scroll;
+let scrollTimeout = 60;
 const minTimeout = 10;
 const maxTimeout = 120;
 const scrollIncrement = 20;
@@ -45,15 +45,60 @@ function pageScale(value) {
 		song.document.body.style.transform = "scale(1)";
 		return;
 	}
-	const currentScale = parseFloat(song.document.body.style.transform.split("scale(")[1]) || 1;
+	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));
-
+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");
+window.addEventListener("load", () => (controls.classList.remove = "hidden"));
 
+// Transpose
+let transCounter = 0;
+const chords = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B",];
+const chordsFlat = ["C", "Db", "D", "Eb", "E", "F", "Gb", "G", "Ab", "A", "Bb", "B",];
+
+function transposeChord(chord, steps) {
+	let useFlats = chord.includes("b");
+	let chordList = useFlats ? chordsFlat : chords;
+
+	let match = chord.match(/^([A-G][#b]?)/);
+	if (!match) return chord;
+
+	let root = match[1];
+	let index = chordList.indexOf(root);
+	if (index === -1) return chord;
+
+	let newIndex = (index + steps + 12) % 12;
+	let transposedRoot = chordList[newIndex];
+
+	return transposedRoot + chord.slice(root.length);
+}
+
+function transposeSong(steps) {
+	const iframe = document.querySelector("iframe.song");
+	const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+	innerDoc.querySelectorAll("tr.chords td").forEach((td) => {
+		let chord = td.textContent.trim();
+		if (chord) {
+			td.textContent = transposeChord(chord, steps);
+		}
+	});
+}
+
+document.querySelector("#transpose-decrease").addEventListener("click", () => { transposeSong(-1); transCounter -= 1 });
+
+document.querySelector("#transpose-increase").addEventListener("click", () => { transposeSong(1); transCounter += 1 });
+
+document.querySelector("#transpose-reset").addEventListener("click", () => { transposeSong(transCounter * -1); transCounter = 0; });

templates/song.html

@@ -11,11 +11,11 @@
 						<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">-->
-					<!--	<div class="button icon-subtract" id="transpose-decrease"></div>-->
-					<!--	<div class="button icon-transpose" id="transpose-reset"></div>-->
-					<!--	<div class="button icon-add" id="transpose-increase"></div>-->
-					<!--</section>-->
+					<section class="transpose">
+						<div class="button icon-subtract" id="transpose-decrease"></div>
+						<div class="button icon-transpose" id="transpose-reset"></div>
+						<div class="button icon-add" id="transpose-increase"></div>
+					</section>
 					<section class="autoscroll">
 						<div class="button icon-subtract" id="autoscroll-decrease"></div>
 						<div class="button icon-scroll" id="autoscroll"></div>