biome.json

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

static/js/song-controls.js

@@ -2,8 +2,8 @@ const controls = document.querySelector(".controls");
 const song = document.querySelector("iframe.song").contentWindow;
 
 // Autoscroll
-let scroll;
+var scroll;
-let scrollTimeout = 60;
+var scrollTimeout = 60;
 const minTimeout = 10;
 const maxTimeout = 120;
 const scrollIncrement = 20;
@@ -45,60 +45,15 @@ function pageScale(value) {
 		song.document.body.style.transform = "scale(1)";
 		return;
 	}
-	const currentScale =
+	const currentScale = parseFloat(song.document.body.style.transform.split("scale(")[1]) || 1;
-		parseFloat(song.document.body.style.transform.split("scale(")[1]) || 1;
 	song.document.body.style.transform = "scale(" + (currentScale + value) + ")";
 }
 
-controls
+controls.querySelector("#font-size-increase").addEventListener("click", () => pageScale(0.1));
-	.querySelector("#font-size-increase")
+controls.querySelector("#font-size-decrease").addEventListener("click", () => pageScale(-0.1));
-	.addEventListener("click", () => pageScale(0.1));
+controls.querySelector("#font-size-reset").addEventListener("click", () => pageScale(0));
-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">
+					<!--<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>