Compare commits

...

2 Commits

Author SHA1 Message Date
3059c20f12 adding CSS 2024-07-08 12:07:47 +02:00
75a782977f Adding special preparser for /b chords 2024-07-08 12:06:41 +02:00
4 changed files with 23 additions and 8 deletions

View File

@@ -1,4 +1,4 @@
import { get_chord_sheet_html } from "./Editor.js";
import { get_chord_sheet_html } from "./Editor";
window.onload = () => {
const chord_sheet_html = get_chord_sheet_html(`

View File

@@ -48,13 +48,11 @@ function render_sheet_html(sheet: Sheet, renderChord:any): string {
}
function render_chord(chord: Chord, renderer:any): string {
return "<span class='chord' style='cursor: pointer;'>" + renderer(chord) + "</span>"
return "<span class='chord'>" + renderer(chord) + "</span>"
}
export function get_chord_sheet_html(normalized_txt: string): string {
const parseChord = chordParserFactory();
const parseChord = chordParserFactory( { customFilters : []} );
const renderChord = chordRendererFactory({ useShortNamings: true });
const lines = normalized_txt.split("\n")
@@ -65,11 +63,18 @@ export function get_chord_sheet_html(normalized_txt: string): string {
let sheet_line = new Line();
if (words.length > 1 || words[0] == '') {
let space_before_chord = 0;
for (const word of words) {
for (let word of words) {
if (word != '') {
if (space_before_chord > 0 || sheet_line.chords.length > 0) {
space_before_chord++;
}
//preprocessing for special slash notation
if (word.indexOf('/') > -1) {
const parts = word.split('/')
if (/^(b|#)\d+$/.test(parts[1])) {
word = parts[0] + "(" + parts[1] + ")"
}
}
const chord = parseChord(word);
if (chord.error) {
sheet_line.lyrics = line;

9
src/index.css Normal file
View File

@@ -0,0 +1,9 @@
#chord_sheet {
font-family: monospace;
font-size: 13px;
}
.chord {
font-weight: bold;
cursor: pointer;
}

View File

@@ -2,12 +2,13 @@
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
<title>Chord Sheet Editor</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>Hello world!</h1>
<h2>Tip: Check your console</h2>
<div id="chord_sheet" style="font-family: monospace;"></div>
<div id="chord_sheet"></div>
<script type="module" src="App.ts"></script>
</body>