mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2024-12-22 16:53:34 +01:00
Opción para ocultar los acordes.
This commit is contained in:
parent
bbf76fa6a3
commit
9c7fcd1ec3
3 changed files with 90 additions and 46 deletions
|
|
@ -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] + '%';
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -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,6 +60,16 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<h3>Canción</h3>
|
<h3>Canción</h3>
|
||||||
<div id="wholeSongDiv">
|
<div id="wholeSongDiv">
|
||||||
|
<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 %}
|
{% for verse in song.verses %}
|
||||||
<div class="{{ verse.kind }}">
|
<div class="{{ verse.kind }}">
|
||||||
{% for line in verse.lines %}
|
{% for line in verse.lines %}
|
||||||
|
|
@ -93,6 +105,7 @@
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{% for audio in audios %}
|
{% for audio in audios %}
|
||||||
{% if forloop.first %}
|
{% if forloop.first %}
|
||||||
<h3>Audios</h3>
|
<h3>Audios</h3>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue