1 import { html, render } from 'https://cdn.pika.dev/lit';
3 const re_directive = /^{(\w+):\s*([^}]+)}$/;
5 const el_song = document.getElementById('song');
8 const directive_handlers = {
10 document.getElementById('title').textContent = value;
11 document.title = `${value} - ChordPro Web`;
13 subtitle: value => document.getElementById('artist').textContent = value,
14 comment: value => song.push(html`<p class="comment">${value}</p>`),
17 function renderChordpro(text) {
18 let verseLines = null;
19 let verseHasChords = false;
22 for (let line of text.split('\n')) {
24 if (line.startsWith('#'))
28 if ((m = re_directive.exec(line)) !== null) {
29 const [_, directive, value] = m;
30 const handler = directive_handlers[directive];
34 console.warn('unknown directive:', line);
35 } else if (line === '') {
36 if (verseLines == null)
38 song.push(html`<p class="verse${verseHasChords ? ' chords' : ''}">${verseLines}</p>`);
40 verseHasChords = false;
42 if (verseLines == null)
45 // split line into parts on chords
47 line.split(/(\[[^\]]+\])/).forEach(part => parts.push(part[0] == '['
48 ? html`<span class="chord">${part.slice(1, -1)}</span>`
49 : (part ? html`<span class="text">${part}</span>` : null)
51 verseHasChords ||= parts.length > 1;
53 verseLines.push(parts);
57 render(song, el_song);
60 document.getElementById('open').addEventListener('change', async ev => renderChordpro(await ev.target.files[0].text()));