From: Martin Pitt <martin@piware.de>
Date: Wed, 23 Sep 2026 21:28:17 +0000 (+0200)
Subject: Render chorus sections
X-Git-Url: https://piware.de/gitweb/?a=commitdiff_plain;h=a63aa935b9a2e9b5f1d3677e15cbd48a2a9ccea6;p=chordpro-web.git

Render chorus sections
---

diff --git a/chordpro-web.js b/chordpro-web.js
index 93a859a..a7914c1 100644
--- a/chordpro-web.js
+++ b/chordpro-web.js
@@ -86,17 +86,25 @@ directive_handlers.c = directive_handlers.comment;
 function renderChordpro(text) {
     const song = [];
     const chords = [];
+    let chorus = null; // content of the chorus being parsed, if any
     let verseLines = [];
     let verseHasChords = false;
 
     const flushVerse = () => {
         if (verseLines.length === 0)
             return;
-        song.push(html`<p class="verse${verseHasChords ? ' chords' : ''}">${verseLines}</p>`);
+        (chorus ?? song).push(html`<p class="verse${verseHasChords ? ' chords' : ''}">${verseLines}</p>`);
         verseLines = [];
         verseHasChords = false;
     };
 
+    const endChorus = () => {
+        if (chorus === null)
+            return;
+        song.push(html`<div class="chorus">${chorus}</div>`);
+        chorus = null;
+    };
+
     for (let line of text.split('\n')) {
         line = line.trim();
         if (line.startsWith('#'))
@@ -105,12 +113,20 @@ function renderChordpro(text) {
         const m = re_directive.exec(line);
         if (m) {
             flushVerse();
-            const [, directive, value] = m;
-            const handler = directive_handlers[directive];
-            if (handler)
-                song.push(handler(value ?? '', chords));
-            else
-                console.warn('unknown directive:', line);
+            const [, directive, value = ''] = m;
+            const target = chorus ?? song;
+            if (['start_of_chorus', 'soc'].includes(directive)) {
+                endChorus();
+                chorus = [];
+            } else if (['end_of_chorus', 'eoc'].includes(directive)) {
+                endChorus();
+            } else {
+                const handler = directive_handlers[directive];
+                if (handler)
+                    target.push(handler(value, chords));
+                else
+                    console.warn('unknown directive:', line);
+            }
         } else if (line === '') {
             flushVerse();
         } else {
@@ -134,6 +150,7 @@ function renderChordpro(text) {
         }
     }
     flushVerse();
+    endChorus();
     if (chords.length > 0)
         song.push(html`<div class="diagrams">${chords.map(chordDiagram)}</div>`);
 
diff --git a/chordpro.css b/chordpro.css
index 628b0fd..09e370f 100644
--- a/chordpro.css
+++ b/chordpro.css
@@ -70,6 +70,11 @@ h2, .comment {
   white-space: pre-line;
 }
 
+.chorus {
+  border-left: 3px solid #39F;
+  padding-left: 0.7em;
+}
+
 /* A segment is one chord and the lyrics up to the next chord, stacked as two
    rows. Its width is the wider of the two, so chords can never overlap each
    other or the next segment. Line wrapping only happens between segments;