Merge branch 'chord-key-fix' into 'master'

Fix music key transpose

See merge request openlp/web-remote!41
This commit is contained in:
Mateus Meyer Jiacomelli 2022-06-15 16:52:16 +00:00
commit c275cc070f
2 changed files with 27 additions and 9 deletions

View File

@ -22,6 +22,7 @@ export class ChordProPipe implements PipeTransform {
*/
private chordRegex = /\[([^\]]*)\]/;
private readonly MAX_HALF_STEPS = 11;
private readonly KEY_PREFIX = '=';
constructor(private sanitizer: DomSanitizer) {
this.notesSharpNotation['german'] = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'H'];
@ -150,6 +151,7 @@ export class ChordProPipe implements PipeTransform {
}
let chordText = '';
let lastChord = '';
let isLastChordKey = false;
if (!song.match(comp.chordRegex)) {
return `<div class="no-chords">${song}</div>`;
}
@ -157,7 +159,11 @@ export class ChordProPipe implements PipeTransform {
if (index % 2 === 0) {
// text
if (lastChord) {
chordText += `<span data-chord="${lastChord}">${part.substring(0, 1)}</span>${part.substring(1)}`;
if (isLastChordKey) {
chordText += `<span class="music-key" data-chord="${lastChord}">${part.substring(0, 1)}</span>${part.substring(1)}`;
} else {
chordText += `<span data-chord="${lastChord}">${part.substring(0, 1)}</span>${part.substring(1)}`;
}
lastChord = '';
} else {
chordText += part;
@ -165,10 +171,17 @@ export class ChordProPipe implements PipeTransform {
} else {
// chord
lastChord = part.replace(/[[]]/, '');
isLastChordKey = lastChord[0] === this.KEY_PREFIX;
if (nHalfSteps !== 0) {
lastChord = lastChord.split('/').map(chord => {
if (isLastChordKey) {
chord = chord.substring(1);
}
const chordRoot = comp.chordRoot(chord);
const newRoot = comp.transposeChord(chordRoot, nHalfSteps);
let newRoot = comp.transposeChord(chordRoot, nHalfSteps);
if (isLastChordKey) {
newRoot = this.KEY_PREFIX + newRoot;
}
return newRoot + comp.restOfChord(chord);
}).join('/');
}

View File

@ -4,13 +4,18 @@
line-height: 2;
}
span[data-chord]:before {
position: relative;
top: -1em;
display: inline-block;
content: attr(data-chord);
width: 0;
color: yellow;
span[data-chord] {
&.music-key {
margin-right: 2rem;
}
&:before {
position: relative;
top: -1em;
display: inline-block;
content: attr(data-chord);
width: 0;
color: yellow;
}
}
}