mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2025-06-06 15:03:13 +02:00
Nuevo generador de cancioneros en línea.
This commit is contained in:
parent
3d9bb9a26b
commit
c622a27e34
13 changed files with 5870 additions and 0 deletions
258
res_gen/templates/generador.html
Normal file
258
res_gen/templates/generador.html
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
<!doctype html>
|
||||
<html lang="es_ES">
|
||||
<head>
|
||||
<title>Generador de cancioneros</title>
|
||||
<meta charset='utf-8' />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style>
|
||||
.chorded .hideChorded {
|
||||
display: none;
|
||||
}
|
||||
.lyrics .hideLyrics {
|
||||
display: none;
|
||||
}
|
||||
a.external {
|
||||
background-image: url(img/link-external.svg);
|
||||
background-position: center right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0.857em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
a {
|
||||
color: #36c;
|
||||
}
|
||||
a:hover {
|
||||
color: #3056a9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Generador de cancioneros</h1>
|
||||
<form id="form" action="generar_pdf.php" method="post" target="_blank">
|
||||
<h2>Ajustes generales</h2>
|
||||
<p>
|
||||
Selecciona el tipo de cancionero:
|
||||
<label><input type="radio" name="chorded" value="true" onchange="setChorded(event)" required>Con acordes</label>
|
||||
<label><input type="radio" name="chorded" value="false" onchange="setChorded(event)" required>Sin acordes</label>
|
||||
</p>
|
||||
<fieldset>
|
||||
<legend>Propiedades de página</legend>
|
||||
<p class="hideChorded">
|
||||
Tamaño del papel:
|
||||
<label><input class="lyricsonly" type="number" size="4" name="paperheight" id="paperheight" required> mm (alto)</label> ×
|
||||
<label><input class="lyricsonly" type="number" size="4" name="paperwidth" id="paperwidth" required> mm (ancho)</label>
|
||||
<strong>o</strong> elige un tamaño estándar
|
||||
<select class="lyricsonly" onchange="setPaperSize(event)">
|
||||
<option value=""></option>
|
||||
<option value="paperheight=297,paperwidth=210">A4 (vertical)</option>
|
||||
<option value="paperheight=210,paperwidth=297">A4 (horizontal)</option>
|
||||
<option value="paperheight=210,paperwidth=148">A5 (vertical)</option>
|
||||
<option value="paperheight=148,paperwidth=210">A5 (horizontal)</option>
|
||||
<option value="paperheight=210,paperwidth=99">Cancionero San Leandro</option>
|
||||
</select>
|
||||
</p><p>
|
||||
Columnas: <label>
|
||||
<input type="checkbox" name="ifcolumns" value="true" checked onclick="toggleCols(event)"> Habilitar</label> | <label><input type="number" name="columns" id="columns" value="2" size="3" min="1" max="10" required> columnas</label>
|
||||
</p><p>
|
||||
Separación extra entre columnas: <label>
|
||||
<input type="checkbox" name="ifcolumnsep" onclick="toggleColSep(event)" value="true"> Habilitar</label> | <label><input type="number" size="4" min="0.1" step="0.1" name="columnsep" id="columnsep" disabled="true" required> cm.</label>
|
||||
</p>
|
||||
<p class="hideChorded">
|
||||
<label>Margen en los bordes: <input class="lyricsonly" type="number" min="0.1" step="0.1" size="4" name="margin" value="1.5" required> cm.</label>
|
||||
</p>
|
||||
</fieldset>
|
||||
<fieldset class="hideChorded">
|
||||
<legend>Tamaño de letra</legend>
|
||||
<p class="hideChorded">
|
||||
Tamaño general: <label><input class="lyricsonly" type="number" min="8" size="4" name="fontsize" value="14" required> pt.</label>
|
||||
</p>
|
||||
<p class="hideChorded">
|
||||
Tamaño de títulos de canción: <label><input class="lyricsonly" type="number" min="8" size="4" name="titlefontsize" value="20" required> pt.</label>
|
||||
</p>
|
||||
<p class="hideChorded">
|
||||
Tamaño de subtítulos de canción: <label><input class="lyricsonly" type="number" min="8" size="4" name="subtitlefontsize" value="10" required> pt.</label>
|
||||
</p>
|
||||
</fieldset>
|
||||
<p>
|
||||
<label>¿Cuando debe cortarse una canción? <select name="breaksallowed">
|
||||
<option value="0">Sin restricción</option>
|
||||
<option value="1">Entre columnas o de una página par a impar</option>
|
||||
<option value="2">Solo entre columnas</option>
|
||||
<option value="3">Nunca</option>
|
||||
</select></label>
|
||||
</p><p>
|
||||
<label>Título del cancionero: <input type="text" name="title" size="40" value="Cancionero" required></label>
|
||||
</p>
|
||||
<h2>Lista de canciones</h2>
|
||||
<p>
|
||||
<input type="button" value="Borrar todas" onclick="clearSongs()">
|
||||
<input type="button" value="Añadir canción" onclick="addSong()">
|
||||
<input type="button" value="Añadir canción aleatoria" onclick="addRandomSong()">
|
||||
<input type="button" value="Añadir la primera canción de cada sección" onclick="addFirstSongs()">
|
||||
<input type="button" value="Añadir una canción por sección (aleatorias)" onclick="addRandomSongs()">
|
||||
</p>
|
||||
<ol id='songlist'></ol>
|
||||
<template id='songtemplate'>
|
||||
<li><select name="songs[]" onchange="setSong(event)" required>
|
||||
<option value="">Selecciona una canción</option>{% for category, songs in categorized_songs %}
|
||||
<optgroup label="— {{ category }}">{% for s in songs %}
|
||||
<option value="{{ s.latex_file }}">{{ s.number }}. {{ s.name }}</option>{% endfor %}
|
||||
</optgroup>{% endfor %}
|
||||
</select>
|
||||
<input type="button" value="Subir" onclick="songUp(event)">
|
||||
<input type="button" value="Bajar" onclick="songDown(event)">
|
||||
<input type="button" value="Quitar" onclick="songDelete(event)">
|
||||
<a target="_blank"></a>
|
||||
</li>
|
||||
</template>
|
||||
<h2>Generar el cancionero</h2>
|
||||
<p>
|
||||
<input type="submit" value="Generar cancionero en PDF">
|
||||
<input type="reset" value="Restablecer formulario">
|
||||
</p>
|
||||
</form>
|
||||
<script>
|
||||
function addSong() {
|
||||
let ol = document.getElementById("songlist");
|
||||
let node = document.getElementById("songtemplate").content.firstElementChild.cloneNode(true);
|
||||
ol.appendChild(node);
|
||||
return node;
|
||||
}
|
||||
|
||||
function songUp(event) {
|
||||
const li = event.target.parentElement;
|
||||
const prev = li.previousElementSibling;
|
||||
const ol = li.parentElement;
|
||||
if (prev)
|
||||
ol.insertBefore(li, prev);
|
||||
}
|
||||
|
||||
function songDown(event) {
|
||||
const li = event.target.parentElement;
|
||||
const next = li.nextElementSibling;
|
||||
const after = next?.nextElementSibling;
|
||||
const ol = li.parentElement;
|
||||
if (after)
|
||||
ol.insertBefore(li, after);
|
||||
else if (next)
|
||||
ol.appendChild(li);
|
||||
}
|
||||
|
||||
function songDelete(event) {
|
||||
const li = event.target.parentElement;
|
||||
const ol = li.parentElement;
|
||||
ol.removeChild(li);
|
||||
}
|
||||
|
||||
function clearSongs() {
|
||||
const ol = document.getElementById("songlist");
|
||||
ol.replaceChildren();
|
||||
}
|
||||
|
||||
function selectRandomizeOptions(select, optionParent) {
|
||||
const options = optionParent.getElementsByTagName("option");
|
||||
do {
|
||||
const i = Math.floor(Math.random() * options.length);
|
||||
select.value = options[i].value;
|
||||
} while (!select.value);
|
||||
select.dispatchEvent(new Event("change"));
|
||||
}
|
||||
|
||||
function addRandomSong() {
|
||||
const li = addSong();
|
||||
const select = li.firstElementChild;
|
||||
selectRandomizeOptions(select, select);
|
||||
}
|
||||
|
||||
function addFirstSongs() {
|
||||
addSongs(false);
|
||||
}
|
||||
|
||||
function addRandomSongs() {
|
||||
addSongs(true);
|
||||
}
|
||||
|
||||
function addSongs(random) {
|
||||
const li = addSong();
|
||||
const groups = li.firstElementChild.getElementsByTagName("optgroup");
|
||||
for (let g of groups) {
|
||||
const select = addSong().firstElementChild;
|
||||
if (random) {
|
||||
selectRandomizeOptions(select, g);
|
||||
} else {
|
||||
select.value = g.firstElementChild.value;
|
||||
select.dispatchEvent(new Event("change"));
|
||||
}
|
||||
}
|
||||
li.parentElement.removeChild(li);
|
||||
}
|
||||
|
||||
function setChorded(event) {
|
||||
const radio = event.target;
|
||||
const chorded = radio.checked && radio.value === "true";
|
||||
const elems = document.getElementsByClassName("lyricsonly");
|
||||
for (const e of elems)
|
||||
e.disabled = chorded;
|
||||
const form = document.getElementById("form");
|
||||
if (chorded) {
|
||||
form.classList.remove("lyrics");
|
||||
form.classList.add("chorded");
|
||||
} else if (radio.checked) {
|
||||
form.classList.remove("chorded");
|
||||
form.classList.add("lyrics");
|
||||
}
|
||||
}
|
||||
|
||||
function setPaperSize(event) {
|
||||
const select = event.target;
|
||||
for (let x of select.value.split(',')) {
|
||||
const pair = x.split('=');
|
||||
document.getElementById(pair[0]).value = pair[1];
|
||||
}
|
||||
}
|
||||
|
||||
function setSong(event) {
|
||||
const select = event.target;
|
||||
const a = select.parentElement.lastElementChild;
|
||||
let validSong = false;
|
||||
if (select.value) {
|
||||
const title = select.selectedOptions[0].textContent;
|
||||
let num = title.substring(0, title.indexOf('.'));
|
||||
while (num.length < 3)
|
||||
num = '0' + num;
|
||||
if (num != '000') {
|
||||
validSong = true;
|
||||
a.textContent = "Ver la letra";
|
||||
a.classList = ["external"]
|
||||
a.href = `https://canciones.sanleandrovalencia.es/${num}`;
|
||||
}
|
||||
}
|
||||
if (!validSong) {
|
||||
a.textContent = "";
|
||||
a.href = ""
|
||||
a.classList = [];
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCols(event) {
|
||||
const input = event.target;
|
||||
const cols = document.getElementById("columns");
|
||||
if (input.checked)
|
||||
cols.value = 2;
|
||||
else
|
||||
cols.value = 1;
|
||||
cols.disabled = !input.checked;
|
||||
}
|
||||
|
||||
function toggleColSep(event) {
|
||||
const input = event.target;
|
||||
const colsep = document.getElementById("columnsep");
|
||||
if (input.checked)
|
||||
colsep.value = 0.5;
|
||||
else
|
||||
colsep.value = "";
|
||||
colsep.disabled = !input.checked;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue