From ce56d8478a3c3d175dd96250e752499cb41514b8 Mon Sep 17 00:00:00 2001 From: Martin Pitt Date: Sat, 1 Jul 2023 13:46:21 +0200 Subject: [PATCH] Initial implementation --- chordpro-web.html | 21 +++++++++++++++++ chordpro-web.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++ chordpro.css | 10 ++++---- poc.html | 22 ------------------ 4 files changed, 86 insertions(+), 26 deletions(-) create mode 100644 chordpro-web.html create mode 100644 chordpro-web.js delete mode 100644 poc.html diff --git a/chordpro-web.html b/chordpro-web.html new file mode 100644 index 0000000..4e55e75 --- /dev/null +++ b/chordpro-web.html @@ -0,0 +1,21 @@ + + + + ChordPro Web + + + + + +

No file loaded

+

+ +
+ +
+ + + + + + diff --git a/chordpro-web.js b/chordpro-web.js new file mode 100644 index 0000000..188646a --- /dev/null +++ b/chordpro-web.js @@ -0,0 +1,59 @@ +import { html, render } from 'https://cdn.pika.dev/lit'; + +const re_directive = /^{(\w+):\s*([^}]+)}$/; + +const el_song = document.getElementById('song'); +const song = []; + +const directive_handlers = { + title: value => { + document.getElementById('title').textContent = value; + document.title = `${value} - ChordPro Web`; + }, + subtitle: value => document.getElementById('artist').textContent = value, + comment: value => song.push(html`

${value}

`), +}; + +function renderChordpro(text) { + let verseLines = null; + let verseHasChords = false; + song.length = 0; + + for (let line of text.split('\n')) { + line = line.trim(); + if (line.startsWith('#')) + continue; + + let m; + if ((m = re_directive.exec(line)) !== null) { + const [_, directive, value] = m; + const handler = directive_handlers[directive]; + if (handler) + handler(value); + else + console.warn('unknown directive:', line); + } else if (line === '') { + if (verseLines == null) + continue; + song.push(html`

${verseLines}

`); + verseLines = null; + verseHasChords = false; + } else { + if (verseLines == null) + verseLines = []; + + // split line into parts on chords + const parts = []; + line.split(/(\[[^\]]+\])/).forEach(part => parts.push( + part[0] == '[' ? html`${part.slice(1, -1)}` : part + )); + verseHasChords ||= parts.length > 1; + parts.push('\n') + verseLines.push(parts); + } + } + + render(song, el_song); +} + +document.getElementById('open').addEventListener('change', async ev => renderChordpro(await ev.target.files[0].text())); diff --git a/chordpro.css b/chordpro.css index 6d300aa..5b25d95 100644 --- a/chordpro.css +++ b/chordpro.css @@ -1,16 +1,18 @@ -h1 { - font-size: xx-large; +body { + font-family: sans-serif; } h2 { - font-size: large; + font-style: italic; +} + +.comment { font-style: italic; } .verse { white-space: pre-line; margin-bottom: 0.3em; - font-family: sans-serif; } .verse.chords { diff --git a/poc.html b/poc.html deleted file mode 100644 index ce6baab..0000000 --- a/poc.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - ChordPro Proof of Concept - - - - - -

Nine Million Bicycles

-

Katie Melua

- -

There are Amnine million bicycles in BeiEmjing - That's a Dmfact, It's a Fthing we can't deny - Like the Dmfact that I will Glove you till I Cdie.

- -

We are twelve billion light years from the edge, - That's a guess, No-one can ever say it's true - But I know that I will always be with you.

- - - -- 2.39.2