mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2026-01-28 13:07:58 +01:00
356 lines
12 KiB
HTML
356 lines
12 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" />
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg"/>
|
|
<link rel="stylesheet" type="text/css" href="main.css"/>
|
|
<link rel="stylesheet" type="text/css" href="song.css">
|
|
<style>
|
|
button.external,
|
|
a.external {
|
|
background-image: url(img/link-external.svg);
|
|
background-size: 0.9em;
|
|
padding-right: 1.8em;
|
|
background-position-x: 96%;
|
|
background-position-y: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
a {
|
|
color: #36c;
|
|
}
|
|
a:hover {
|
|
color: #3056a9;
|
|
}
|
|
#songlist > *,
|
|
.mainButtons input[type="button"],
|
|
.mainButtons button {
|
|
margin-bottom: .5em;
|
|
}
|
|
label.forCheckbox {
|
|
text-wrap: nowrap;
|
|
}
|
|
button.icon img {
|
|
width: 1em;
|
|
height: 0.9em;
|
|
pointer-events: none;
|
|
}
|
|
img.redFilter {
|
|
filter: invert(55%) sepia(67%) saturate(876%) hue-rotate(-40deg) brightness(90%) contrast(103%);
|
|
}
|
|
img.greenFilter {
|
|
filter: invert(61%) sepia(78%) saturate(626%) hue-rotate(43deg) brightness(70%) contrast(102%);
|
|
}
|
|
span.songSelector {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
column-gap: 0.3em;
|
|
}
|
|
</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:
|
|
<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>
|
|
<strong>o</strong>
|
|
elige tú
|
|
<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>
|
|
</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 class="controls mainButtons">
|
|
Añadir
|
|
<span class="buttonpair flex-reverse">
|
|
<button type="button" class="icon right pair-sub" title="Añadir una canción aleatoria" onclick="addRandomSong()">
|
|
<<<<<<< HEAD
|
|
aleatoria <img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/random.svg"></button>
|
|
<button type="button" class="icon left pair-sup" title="Añadir una canción vacía" onclick="addSong()">
|
|
<img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/new.svg"> una canción</button>
|
|
=======
|
|
aleatoria <img class="greenFilter" src="img/random.svg"></button>
|
|
<button type="button" class="icon left pair-sup" title="Añadir una canción vacía" onclick="addSong()">
|
|
<img class="greenFilter" src="img/new.svg"> una canción</button>
|
|
>>>>>>> 326fe44 (hash functionality and styling for generador)
|
|
</span>
|
|
<br>
|
|
Añadir
|
|
<span class="buttonpair flex-reverse">
|
|
<button type="button" class="icon right pair-sub" title="Añade una canción aleatoria por categoría" onclick="addRandomSongs()">
|
|
<<<<<<< HEAD
|
|
aleatorias <img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/random.svg"></button>
|
|
<button type="button" class="icon left pair-sup" title="Añade una canción por categoría" onclick="addFirstSongs()">
|
|
<img class="greenFilter" src="https://canciones.sanleandrovalencia.es/svg/new.svg"> varias canciones</button>
|
|
</span>
|
|
<br>
|
|
<button type="button" class="icon" onclick="clearSongs()"><img class="redFilter" src="https://canciones.sanleandrovalencia.es/svg/trash.svg"> Borrar todas</button>
|
|
=======
|
|
aleatorias <img class="greenFilter" src="img/random.svg"></button>
|
|
<button type="button" class="icon left pair-sup" title="Añade una canción por categoría" onclick="addFirstSongs()">
|
|
<img class="greenFilter" src="img/new.svg"> varias canciones</button>
|
|
</span>
|
|
<br>
|
|
<button type="button" class="icon" onclick="clearSongs()"><img class="redFilter" src="img/trash.svg"> Borrar todas</button>
|
|
>>>>>>> 326fe44 (hash functionality and styling for generador)
|
|
</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>
|
|
<button type="submit">Generar cancionero en PDF</button>
|
|
<button type="button" class="external" onclick="goToSongWebsite(event)">Web con lista de canciones</button>
|
|
<button type="reset">Restablecer formulario</button>
|
|
</p>
|
|
</form>
|
|
<script>
|
|
function goToSongWebsite() {
|
|
window.navigation.navigate("https://canciones.sanleandrovalencia.es/preparar-misa.html" + window.location.hash);
|
|
}
|
|
|
|
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);
|
|
regenHash();
|
|
}
|
|
|
|
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 addSpecificSong(n) {
|
|
const li = addSong();
|
|
const select = li.firstElementChild;
|
|
for (let opt of select.options) {
|
|
if (opt.textContent.slice(0, opt.textContent.indexOf(".")) == n) {
|
|
select.value = opt.value;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
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 getSongList() {
|
|
const ol = document.getElementById("songlist");
|
|
let res = [];
|
|
for (let li of ol.childNodes) {
|
|
let opt = li.firstElementChild.selectedOptions[0];
|
|
if (opt.value) {
|
|
let num = opt.textContent.substring(0, opt.textContent.indexOf('.'));
|
|
res.push(num);
|
|
}
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function regenHash() {
|
|
const list = getSongList();
|
|
if (list.length == 0)
|
|
history.replaceState(null, "", window.location.pathname + window.location.search);
|
|
else
|
|
history.replaceState(null, "", "#" + getSongList().join(","));
|
|
}
|
|
|
|
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 = [];
|
|
}
|
|
regenHash();
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
window.addEventListener("load", function () {
|
|
if (window.location.hash) {
|
|
// Load songs
|
|
for (let n of window.location.hash.slice(1).split(","))
|
|
addSpecificSong(n);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|