parroquia-san-leandro/cancionero-web
1
0
Fork 0
mirror of https://gitlab.com/parroquia-san-leandro/cancionero-web.git synced 2024-12-22 08:43:33 +01:00
Code Releases Activity

Opción para ocultar los acordes.

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/static/sizes.js
View file

@ -1,12 +0,0 @@
SIZE_STEPS = [30, 50, 67, 80, 90, 100, 110, 120, 133, 150, 170, 200, 240, 300];
currSize = SIZE_STEPS.indexOf(100)
/** Changes the size of the lyrics and chords. */
function size(steps) {
if (steps === 0) {
currSize = SIZE_STEPS.indexOf(100);
}
currSize += steps;
document.getElementById('wholeSongDiv').style.fontSize = SIZE_STEPS[currSize] + '%';
}

43
res/static/transpose.js → res/static/song.js
View file

@ -1,3 +1,24 @@
/* ===========================================
FONT SIZE
=========================================== */
SIZE_STEPS = [30, 50, 67, 80, 90, 100, 110, 120, 133, 150, 170, 200, 240, 300];
currSize = SIZE_STEPS.indexOf(100)
/** Changes the size of the lyrics and chords. */
function size(steps) {
if (steps === 0) {
currSize = SIZE_STEPS.indexOf(100);
}
currSize += steps;
document.getElementById('wholeSongDiv').style.fontSize = SIZE_STEPS[currSize] + '%';
}
/* ===========================================
TRANSPOSE CHORDS
=========================================== */
ENG_INDEX = {'C': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4, 'Fb': 4, 'F': 5, 'E#': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9, 'A#': 10, 'Bb': 10, 'B': 11, 'Cb': 11, 'B#': 0} ENG_INDEX = {'C': 0, 'C#': 1, 'Db': 1, 'D': 2, 'D#': 3, 'Eb': 3, 'E': 4, 'Fb': 4, 'F': 5, 'E#': 5, 'F#': 6, 'Gb': 6, 'G': 7, 'G#': 8, 'Ab': 8, 'A': 9, 'A#': 10, 'Bb': 10, 'B': 11, 'Cb': 11, 'B#': 0}
LAT_INDEX = {'Do': 0, 'Do#': 1, 'Reb': 1, 'Re': 2, 'Re#': 3, 'Mib': 3, 'Mi': 4, 'Fab': 4, 'Fa': 5, 'Mi#': 5, 'Fa#': 6, 'Solb': 6, 'Sol': 7, 'Sol#': 8, 'Lab': 8, 'La': 9, 'La#': 10, 'Sib': 10, 'Si': 11, 'Dob': 11, 'Si#': 0} LAT_INDEX = {'Do': 0, 'Do#': 1, 'Reb': 1, 'Re': 2, 'Re#': 3, 'Mib': 3, 'Mi': 4, 'Fab': 4, 'Fa': 5, 'Mi#': 5, 'Fa#': 6, 'Solb': 6, 'Sol': 7, 'Sol#': 8, 'Lab': 8, 'La': 9, 'La#': 10, 'Sib': 10, 'Si': 11, 'Dob': 11, 'Si#': 0}
CHORDS_LAT = ['Do', 'Do#', 'Re', 'Re#', 'Mi', 'Fa', 'Fa#', 'Sol', 'Sol#', 'La', 'Sib', 'Si'] CHORDS_LAT = ['Do', 'Do#', 'Re', 'Re#', 'Mi', 'Fa', 'Fa#', 'Sol', 'Sol#', 'La', 'Sib', 'Si']
@ -42,3 +63,25 @@ function setTransposeSelector(n) {
function getTranspose() { function getTranspose() {
return Number.parseInt(document.getElementById("transposeSelect").value) return Number.parseInt(document.getElementById("transposeSelect").value)
} }
/* ===========================================
HIDE CHORDS
=========================================== */
// Init
document.addEventListener("DOMContentLoaded", function () {
var show = localStorage.getItem("show_chords") == "true";
showChords(show);
document.getElementById("showChords").checked = show;
}, false);
function showChords(show) {
if (show || show == "true") {
document.getElementById("songLyrics").style.display = "none";
document.getElementById("songChords").style.display = "block";
} else {
document.getElementById("songLyrics").style.display = "block";
document.getElementById("songChords").style.display = "none";
}
localStorage.setItem("show_chords", show);
}

81
res/templates/song.html
View file

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