From 59e9325dc575fe744ca510a050c02e2243c7f52c Mon Sep 17 00:00:00 2001 From: Martijn Versluis <martijnversluis@users.noreply.github.com> Date: Sat, 14 Dec 2024 21:47:36 +0100 Subject: [PATCH] Render section label outside content Resolves #1474 As requested by @edonv in #1443 --- src/formatter/templates/html_div_formatter.ts | 9 +- .../templates/html_table_formatter.ts | 13 +- test/formatter/html_div_formatter.test.ts | 40 ++++++ test/formatter/html_table_formatter.test.ts | 126 ++++++++++++++++-- 4 files changed, 168 insertions(+), 20 deletions(-) diff --git a/src/formatter/templates/html_div_formatter.ts b/src/formatter/templates/html_div_formatter.ts index e7c4b198..1e4ee82b 100644 --- a/src/formatter/templates/html_div_formatter.ts +++ b/src/formatter/templates/html_div_formatter.ts @@ -40,10 +40,13 @@ export default ( ${ each(bodyParagraphs, (paragraph) => ` <div class="${ paragraphClasses(paragraph) }"> ${ when(paragraph.isLiteral(), () => ` - <div class="row"> - ${ when(isPresent(paragraph.label), () => ` + ${ when(isPresent(paragraph.label), () => ` + <div class="row"> <h3 class="label">${ paragraph.label }</h3> - `) } + </div> + `) } + + <div class="row"> <div class="literal">${ newlinesToBreaks(renderSection(paragraph, configuration)) }</div> </div> `).else(() => ` diff --git a/src/formatter/templates/html_table_formatter.ts b/src/formatter/templates/html_table_formatter.ts index 8989654c..ac6c5d95 100644 --- a/src/formatter/templates/html_table_formatter.ts +++ b/src/formatter/templates/html_table_formatter.ts @@ -42,11 +42,18 @@ export default ( ${ each(bodyParagraphs, (paragraph) => ` <div class="${ paragraphClasses(paragraph) }"> ${ when(paragraph.isLiteral(), () => ` + ${ when(isPresent(paragraph.label), () => ` + <table class="row"> + <tr> + <td> + <h3 class="label">${ paragraph.label }</h3> + </td> + </tr> + </table> + `) } + <table class="literal"> <tr> - ${ when(isPresent(paragraph.label), () => ` - <td class="label">${ paragraph.label }</td> - `) } <td class="contents">${ newlinesToBreaks(renderSection(paragraph, configuration)) }</td> </tr> </table> diff --git a/test/formatter/html_div_formatter.test.ts b/test/formatter/html_div_formatter.test.ts index 7961d710..165fa4a4 100644 --- a/test/formatter/html_div_formatter.test.ts +++ b/test/formatter/html_div_formatter.test.ts @@ -169,6 +169,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph tab"> <div class="row"> <h3 class="label">Tab 1</h3> + </div> + <div class="row"> <div class="literal"> Tab line 1<br> Tab line 2 @@ -179,6 +181,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph abc"> <div class="row"> <h3 class="label">ABC 1</h3> + </div> + <div class="row"> <div class="literal"> ABC line 1<br> ABC line 2 @@ -189,6 +193,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph ly"> <div class="row"> <h3 class="label">LY 1</h3> + </div> + <div class="row"> <div class="literal"> LY line 1<br> LY line 2 @@ -211,6 +217,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph grid"> <div class="row"> <h3 class="label">Grid 1</h3> + </div> + <div class="row"> <div class="literal"> Grid line 1<br> Grid line 2 @@ -371,6 +379,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph tab"> <div class="row"> <h3 class="label">Tab 1</h3> + </div> + <div class="row"> <div class="literal"> Tab line 1<br> Tab line 2 @@ -381,6 +391,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph abc"> <div class="row"> <h3 class="label">ABC 1</h3> + </div> + <div class="row"> <div class="literal"> ABC line 1<br> ABC line 2 @@ -391,6 +403,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph ly"> <div class="row"> <h3 class="label">LY 1</h3> + </div> + <div class="row"> <div class="literal"> LY line 1<br> LY line 2 @@ -413,6 +427,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph grid"> <div class="row"> <h3 class="label">Grid 1</h3> + </div> + <div class="row"> <div class="literal"> Grid line 1<br> Grid line 2 @@ -753,6 +769,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph tab"> <div class="row"> <h3 class="label">Tab 1</h3> + </div> + <div class="row"> <div class="literal"> Tab line 1<br> Tab line 2 @@ -763,6 +781,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph abc"> <div class="row"> <h3 class="label">ABC 1</h3> + </div> + <div class="row"> <div class="literal"> ABC line 1<br> ABC line 2 @@ -773,6 +793,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph ly"> <div class="row"> <h3 class="label">LY 1</h3> + </div> + <div class="row"> <div class="literal"> LY line 1<br> LY line 2 @@ -795,6 +817,9 @@ describe('HtmlDivFormatter', () => { <div class="paragraph grid"> <div class="row"> <h3 class="label">Grid 1</h3> + </div> + + <div class="row"> <div class="literal"> Grid line 1<br> Grid line 2 @@ -956,6 +981,9 @@ describe('HtmlDivFormatter', () => { <div class="paragraph tab"> <div class="row"> <h3 class="label">Tab 1</h3> + </div> + + <div class="row"> <div class="literal"> Tab line 1<br> Tab line 2 @@ -966,6 +994,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph abc"> <div class="row"> <h3 class="label">ABC 1</h3> + </div> + <div class="row"> <div class="literal"> ABC line 1<br> ABC line 2 @@ -976,6 +1006,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph ly"> <div class="row"> <h3 class="label">LY 1</h3> + </div> + <div class="row"> <div class="literal"> LY line 1<br> LY line 2 @@ -998,6 +1030,8 @@ describe('HtmlDivFormatter', () => { <div class="paragraph grid"> <div class="row"> <h3 class="label">Grid 1</h3> + </div> + <div class="row"> <div class="literal"> Grid line 1<br> Grid line 2 @@ -1114,6 +1148,9 @@ describe('HtmlDivFormatter', () => { <div class="paragraph ${type}"> <div class="row"> <h3 class="label">${type} section</h3> + </div> + + <div class="row"> <div class="literal"> ${type.toUpperCase()} LINE 1<br> ${type.toUpperCase()} LINE 2 @@ -1138,6 +1175,9 @@ describe('HtmlDivFormatter', () => { <div class="paragraph ${type}"> <div class="row"> <h3 class="label">${type} section</h3> + </div> + + <div class="row"> <div class="literal"> ${type} line 1<br> ${type} line 2 diff --git a/test/formatter/html_table_formatter.test.ts b/test/formatter/html_table_formatter.test.ts index 68e593ea..b3d1c2b6 100644 --- a/test/formatter/html_table_formatter.test.ts +++ b/test/formatter/html_table_formatter.test.ts @@ -151,9 +151,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph tab"> + <table class="row"> + <tr> + <td> + <h3 class="label">Tab 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">Tab 1</td> <td class="contents"> Tab line 1<br> Tab line 2 @@ -163,9 +170,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph abc"> + <table class="row"> + <tr> + <td> + <h3 class="label">ABC 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">ABC 1</td> <td class="contents"> ABC line 1<br> ABC line 2 @@ -175,9 +189,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph ly"> + <table class="row"> + <tr> + <td> + <h3 class="label">LY 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">LY 1</td> <td class="contents"> LY line 1<br> LY line 2 @@ -202,9 +223,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph grid"> + <table class="row"> + <tr> + <td> + <h3 class="label">Grid 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">Grid 1</td> <td class="contents"> Grid line 1<br> Grid line 2 @@ -349,9 +377,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph tab"> + <table class="row"> + <tr> + <td> + <h3 class="label">Tab 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">Tab 1</td> <td class="contents"> Tab line 1<br> Tab line 2 @@ -361,9 +396,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph abc"> + <table class="row"> + <tr> + <td> + <h3 class="label">ABC 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">ABC 1</td> <td class="contents"> ABC line 1<br> ABC line 2 @@ -373,9 +415,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph ly"> + <table class="row"> + <tr> + <td> + <h3 class="label">LY 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">LY 1</td> <td class="contents"> LY line 1<br> LY line 2 @@ -400,9 +449,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph grid"> + <table class="row"> + <tr> + <td> + <h3 class="label">Grid 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">Grid 1</td> <td class="contents"> Grid line 1<br> Grid line 2 @@ -741,9 +797,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph tab"> + <table class="row"> + <tr> + <td> + <h3 class="label">Tab 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">Tab 1</td> <td class="contents"> Tab line 1<br> Tab line 2 @@ -753,9 +816,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph abc"> + <table class="row"> + <tr> + <td> + <h3 class="label">ABC 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">ABC 1</td> <td class="contents"> ABC line 1<br> ABC line 2 @@ -765,9 +835,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph ly"> + <table class="row"> + <tr> + <td> + <h3 class="label">LY 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">LY 1</td> <td class="contents"> LY line 1<br> LY line 2</td> @@ -791,9 +868,16 @@ describe('HtmlTableFormatter', () => { </div> <div class="paragraph grid"> + <table class="row"> + <tr> + <td> + <h3 class="label">Grid 1</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">Grid 1</td> <td class="contents"> Grid line 1<br> Grid line 2 @@ -947,9 +1031,16 @@ describe('HtmlTableFormatter', () => { const expectedOutput = html` <div class="chord-sheet"> <div class="paragraph ${type}"> + <table class="row"> + <tr> + <td> + <h3 class="label">${type} section</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">${type} section</td> <td class="contents"> ${type.toUpperCase()} LINE 1<br> ${type.toUpperCase()} LINE 2 @@ -973,9 +1064,16 @@ describe('HtmlTableFormatter', () => { const expectedOutput = html` <div class="chord-sheet"> <div class="paragraph ${type}"> + <table class="row"> + <tr> + <td> + <h3 class="label">${type} section</h3> + </td> + </tr> + </table> + <table class="literal"> <tr> - <td class="label">${type} section</td> <td class="contents"> ${type} line 1<br> ${type} line 2