You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.8 KiB
104 lines
3.8 KiB
{% extends "/Bases/StandardWebPage.html.twig" %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="InnerContent">
|
|
<h1>{{ "Variants of"|translate }} "{{ TuneDetails.Title }}"</h1>
|
|
{% for x in TuneVariants %}
|
|
<div>
|
|
<button class="accordion">{{ "Variant"|translate }} {{ loop.index }}</button>
|
|
<div class="panel">
|
|
<div class="container">
|
|
<div class="left">
|
|
<div class="DLContainer">
|
|
<dl>
|
|
<dt>{{ "Time Signature"|translate }}</dt>
|
|
<dd>{{ x.TimeSignature }}</dd>
|
|
|
|
<dt>{{ "Key Signature"|translate }}</dt>
|
|
<dd>{{ x.KeySignature }}</dd>
|
|
|
|
<dt>{{ "Copyright"|translate }}</dt>
|
|
<dd>{{ TuneDetails.Copyright }}</dd>
|
|
|
|
<dt>{{ "Number of Parts"|translate }}</dt>
|
|
<dd>{{ TuneDetails.Parts|json_encode }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div id="music-container--{{ x.ID }}"></div>
|
|
<div>
|
|
<h2>{{ "ABC Notation"|translate }}</h2>
|
|
<pre id="RawABCReadout">
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<h2>{{ "Audio"|translate }}</h2>
|
|
<audio id="midiPlayer" controls></audio>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="InnerContent">
|
|
<h1>{{ "Dances for"|translate }} "{{ TuneDetails.Title }}"</h1>
|
|
{% for x in Dances %}
|
|
<div>
|
|
<button class="accordion">{{ x.Title }}</button>
|
|
<div class="panel">
|
|
<h2>Steps</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th colspan="2">{{ "Bars"|translate }}</th>
|
|
<th>{{ "Description"|translate }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for step in x.Steps %}
|
|
<tr>
|
|
<th>{{ step.BarCountAtStart }}</th>
|
|
<th>{{ step.BarCountAtEnd }}</th>
|
|
<td>{{ step.Description }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
var acc = document.getElementsByClassName("accordion");
|
|
var i;
|
|
|
|
for (i = 0; i < acc.length; i++) {
|
|
acc[i].addEventListener("click", function() {
|
|
/* Toggle between adding and removing the "active" class,
|
|
to highlight the button that controls the panel */
|
|
this.classList.toggle("active");
|
|
|
|
/* Toggle between hiding and showing the active panel */
|
|
var panel = this.nextElementSibling;
|
|
if (panel.style.display === "block") {
|
|
panel.style.display = "none";
|
|
} else {
|
|
panel.style.display = "block";
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
{% for x in TuneVariants %}
|
|
RenderABC("music-container--{{ x.ID }}", '{{ x.ID }}');
|
|
{% endfor %}
|
|
</script>
|
|
{% endblock %}
|