From bb3281250e73b1e12c13b751c52cb95d81f9aad1 Mon Sep 17 00:00:00 2001
From: Filip Rojek <filip@filiprojek.cz>
Date: Wed, 12 Mar 2025 23:43:05 +0100
Subject: [PATCH] Transpose added

---
 biome.json                 |  5 +++++
 static/js/song-controls.js | 40 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 biome.json

diff --git a/biome.json b/biome.json
new file mode 100644
index 0000000..775f21e
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,5 @@
+{
+  "formatter": {
+    "enabled": false
+  }
+}
diff --git a/static/js/song-controls.js b/static/js/song-controls.js
index 164d206..32bf56a 100644
--- a/static/js/song-controls.js
+++ b/static/js/song-controls.js
@@ -62,3 +62,43 @@ controls
 
 // Display the controls on JS-enabled browsers
 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; });