Opción para ocultar los acordes.

This commit is contained in:
Carlos Galindo 2021-06-30 17:20:46 +02:00
parent bbf76fa6a3
commit 9c7fcd1ec3
3 changed files with 90 additions and 46 deletions

View file

@ -3,8 +3,7 @@
<head>
{% include "head.html" with path=".." only %}
<link rel="stylesheet" type="text/css" href="../song.css"/>
<script async src="../transpose.js"></script>
<script async src="../sizes.js"></script>
<script async src="../song.js"></script>
</head>
<body>
{% include "header.html" with path=".." %}
@ -26,6 +25,9 @@
<button class="small" onclick="size(+1)">+</button>
</div>
{% if song.chorded %}
<div>
<label><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
</div>
<div>
<label>Transponer acordes </label>
<button class="small" onclick="transposeAdd(-2)">-2</button>
@ -58,40 +60,51 @@
{% endif %}
<h3>Canción</h3>
<div id="wholeSongDiv">
{% for verse in song.verses %}
<div class="{{ verse.kind }}">
{% for line in verse.lines %}
{% spaceless %}
{% for chord, lyric in line.zipped_arr %}
<table class="chordedline">
<tr class="chord">
<td rowspan="{{ chord.rowspan|default:'1' }}">
{% if chord.class %}
<span class="{{ chord.class }}"></span>
{% endif %}
{% for c in chord.chord.items %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% endif %}
{% endfor %}
</td>
</tr>
<tr class="lyric">
<td>
{% if 'rowspan' not in chord %}
<span>{{ lyric|safe }}</span>
{% endif %}
</td>
</tr>
</table>
{% endfor %}
{% if not forloop.last %} <br/> {% endif %}
{% endspaceless %}
<div id="songLyrics" style="display: none;">
{% for verse in song.verses %}
<div class="{{ verse.kind }}">
{% for line in verse.lines %}
{{ line }}<br/>
{% endfor %}
</div>
{% endfor %}
</div>
<div id="songChords">
{% for verse in song.verses %}
<div class="{{ verse.kind }}">
{% for line in verse.lines %}
{% spaceless %}
{% for chord, lyric in line.zipped_arr %}
<table class="chordedline">
<tr class="chord">
<td rowspan="{{ chord.rowspan|default:'1' }}">
{% if chord.class %}
<span class="{{ chord.class }}"></span>
{% endif %}
{% for c in chord.chord.items %}
{% if c.chord %}
<span class="c">{{ c.text|safe }}</span>
{% else %}
<span>{{ c.text|safe }}</span>
{% endif %}
{% endfor %}
</td>
</tr>
<tr class="lyric">
<td>
{% if 'rowspan' not in chord %}
<span>{{ lyric|safe }}</span>
{% endif %}
</td>
</tr>
</table>
{% endfor %}
{% if not forloop.last %} <br/> {% endif %}
{% endspaceless %}
{% endfor %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
{% for audio in audios %}
{% if forloop.first %}