Add custom booklet headers/footers feature
The headers/footers are defined with the |customHeader| and
|customFooter| keys respectively in the concert JSON definition.
Change-Id: I461266ca8680a1b79abc85e004c92b810a4782fd
diff --git a/index.html b/index.html
index 48204f1..5eb4d21 100644
--- a/index.html
+++ b/index.html
@@ -34,11 +34,12 @@
</section>
<section id="booklet" class="booklet" hidden>
<div class="booklet-header">
- <h2 id="concert-title" class="booklet-header-title">Concert de Nadal 2020</h2>
- <div id="concert-subtitle" class="booklet-header-subtitle">Joves i adults</div>
+ <h2 id="concert-title" class="booklet-header-title"></h2>
+ <div id="concert-subtitle" class="booklet-header-subtitle"></div>
</div>
- <div id="booklet-content" class="booklet-content">
- </div>
+ <div id="booklet-custom-header" class="booklet-custom-header"></div>
+ <div id="booklet-content" class="booklet-content"></div>
+ <div id="booklet-custom-footer" class="booklet-custom-footer"></div>
</section>
</div>
<div id="update-available" class="update-available" hidden>
diff --git a/js/script.js b/js/script.js
index 90ae29b..abe30b0 100644
--- a/js/script.js
+++ b/js/script.js
@@ -79,6 +79,13 @@
document.getElementById('concert-title').textContent = booklet.title;
document.getElementById('concert-subtitle').textContent = booklet.subtitle;
+ if ('customHeader' in booklet)
+ document.getElementById('booklet-custom-header').innerHTML =
+ booklet.customHeader;
+ if ('customFooter' in booklet)
+ document.getElementById('booklet-custom-footer').innerHTML =
+ booklet.customFooter;
+
var bookletContent = document.getElementById('booklet-content');
bookletContent.textContent = '';
booklet.songs.forEach(song => {