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 = () => { window.onload = () => {
const chord_sheet_html = get_chord_sheet_html(` 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 { 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 { export function get_chord_sheet_html(normalized_txt: string): string {
const parseChord = chordParserFactory(); const parseChord = chordParserFactory( { customFilters : []} );
const renderChord = chordRendererFactory({ useShortNamings: true }); const renderChord = chordRendererFactory({ useShortNamings: true });
const lines = normalized_txt.split("\n") 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(); let sheet_line = new Line();
if (words.length > 1 || words[0] == '') { if (words.length > 1 || words[0] == '') {
let space_before_chord = 0; let space_before_chord = 0;
for (const word of words) { for (let word of words) {
if (word != '') { if (word != '') {
if (space_before_chord > 0 || sheet_line.chords.length > 0) { if (space_before_chord > 0 || sheet_line.chords.length > 0) {
space_before_chord++; 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); const chord = parseChord(word);
if (chord.error) { if (chord.error) {
sheet_line.lyrics = line; 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> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Webpack App</title> <title>Chord Sheet Editor</title>
<link rel="stylesheet" href="index.css" />
</head> </head>
<body> <body>
<h1>Hello world!</h1> <h1>Hello world!</h1>
<h2>Tip: Check your console</h2> <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> <script type="module" src="App.ts"></script>
</body> </body>