fr/guitar
1
0
Fork 1
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Compare commits

base: fr:bb3281250e73b1e12c13b751c52cb95d81f9aad1
Branches Tags
fr:master
fr:fr/transpose
..
compare: fr:622af40508f9e9178b40b13c57a80fbe221917a6
Branches Tags
fr:master
fr:fr/transpose

No commits in common. "bb3281250e73b1e12c13b751c52cb95d81f9aad1" and "622af40508f9e9178b40b13c57a80fbe221917a6" have entirely different histories.
bb3281250e ... 622af40508

3 changed files with 13 additions and 63 deletions
Show Stats Expand all files Collapse all files

5
biome.json
View File

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

61
static/js/song-controls.js
View File

@ -2,8 +2,8 @@ const controls = document.querySelector(".controls");
const song = document.querySelector("iframe.song").contentWindow;
// Autoscroll
let scroll;
let scrollTimeout = 60;
var scroll;
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 =
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; });

10
templates/song.html
View File

@ -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>