mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2025-06-04 05:53:13 +02:00
258 lines
8.4 KiB
HTML
258 lines
8.4 KiB
HTML
<!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>
|