mirror of
https://gitlab.com/parroquia-san-leandro/cancionero-web.git
synced 2026-01-28 13:07:58 +01:00
Página preparar-misa.html y fragmentos de canciones
This commit is contained in:
parent
c622a27e34
commit
434cbc1c25
10 changed files with 391 additions and 21 deletions
204
res/templates/preparar-misa.html
Normal file
204
res/templates/preparar-misa.html
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
{% include "head.html" with path=path title=title only %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="{{ path|urlencode }}/song.css">
|
||||
<script src="{{ path|urlencode }}/song.js"></script>
|
||||
<style>
|
||||
.hideControls .controls {
|
||||
display: none;
|
||||
}
|
||||
.hidePreview .preview {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% include "header.html" %}
|
||||
<main>
|
||||
<h1>Preparar una misa</h1>
|
||||
<p>A continuación puedes crear una web con una lista de canciones y
|
||||
<input type="button" onclick="shareList(event)" value="compartirla">.</p>
|
||||
<p>Si prefieres crear un PDF, <a href="https://cgj.es/cancionero-generador/">pulsa aquí</a>.</p>
|
||||
<p>
|
||||
<label><input class="init" id="controlsCheckbox" type="checkbox" onchange="toggleControls(event)" checked> Modificar la lista</label>
|
||||
<label><input class="init" id="previewCheckbox" type="checkbox" onchange="togglePreview(event)"> Ver las canciones</label>
|
||||
<label><input id="showChords" type="checkbox" checked onchange="showChords(this.checked)"/> Mostrar acordes</label>
|
||||
</p>
|
||||
<p class="controls">
|
||||
<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>
|
||||
<ul id="songlist"></ul>
|
||||
<input type="button" onclick="shareList(event)" value="Compartir enlace al cancionero">
|
||||
<dialog id="sharedialog">
|
||||
<p>Copia y comparte el enlace: <a id="sharelink" href="">tus canciones</a></p>
|
||||
<input type="button" onclick="event.target.parentElement.close()" value="Cerrar">
|
||||
</dialog>
|
||||
<template id='songtemplate'>
|
||||
<li><span class="controls"><select name="songs[]" required onchange="songSelect(event)">
|
||||
<option value="">Selecciona una canción</option>{% for category, songs in categorized_songs %}
|
||||
<optgroup label="— {{ category }}">{% for s in songs %}
|
||||
<option value="{{ s.number }}">{{ 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)"></span>
|
||||
<div class="preview"></div>
|
||||
</li>
|
||||
</template>
|
||||
</main>
|
||||
<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.parentElement;
|
||||
const prev = li.previousElementSibling;
|
||||
const ol = li.parentElement;
|
||||
if (prev)
|
||||
ol.insertBefore(li, prev);
|
||||
}
|
||||
|
||||
function songDown(event) {
|
||||
const li = event.target.parentElement.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.parentElement;
|
||||
const ol = li.parentElement;
|
||||
ol.removeChild(li);
|
||||
}
|
||||
|
||||
function songSelect(event) {
|
||||
const option = event.target.selectedOptions[0];
|
||||
const div = event.target.parentElement.parentElement.getElementsByClassName("preview")[0];
|
||||
if (option.value) {
|
||||
fetch("./{{ parts_dir }}/" + String(option.value).padStart(3, '0') + ".html")
|
||||
.then(r => r.text())
|
||||
.then(text => div.innerHTML = text);
|
||||
} else {
|
||||
div.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
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.firstElementChild;
|
||||
select.value = n;
|
||||
select.dispatchEvent(new Event("change"));
|
||||
}
|
||||
|
||||
function addRandomSong() {
|
||||
const li = addSong();
|
||||
const select = li.firstElementChild.firstElementChild;
|
||||
selectRandomizeOptions(select, select);
|
||||
}
|
||||
|
||||
function addFirstSongs() {
|
||||
addSongs(false);
|
||||
}
|
||||
|
||||
function addRandomSongs() {
|
||||
addSongs(true);
|
||||
}
|
||||
|
||||
function addSongs(random) {
|
||||
const li = addSong();
|
||||
const groups = li.firstElementChild.firstElementChild.getElementsByTagName("optgroup");
|
||||
for (let g of groups) {
|
||||
const select = addSong().firstElementChild.firstElementChild;
|
||||
if (random) {
|
||||
selectRandomizeOptions(select, g);
|
||||
} else {
|
||||
select.value = g.firstElementChild.value;
|
||||
select.dispatchEvent(new Event("change"));
|
||||
}
|
||||
}
|
||||
li.parentElement.removeChild(li);
|
||||
}
|
||||
|
||||
function toggleControls(event) {
|
||||
if (event.target.checked)
|
||||
document.body.classList.remove("hideControls");
|
||||
else
|
||||
document.body.classList.add("hideControls");
|
||||
}
|
||||
|
||||
function togglePreview(event) {
|
||||
if (event.target.checked)
|
||||
document.body.classList.remove("hidePreview");
|
||||
else
|
||||
document.body.classList.add("hidePreview");
|
||||
}
|
||||
|
||||
function shareList(event) {
|
||||
const ol = document.getElementById("songlist");
|
||||
let res = [];
|
||||
for (let li of ol.childNodes) {
|
||||
let song = li.firstElementChild.firstElementChild.value;
|
||||
res.push(song);
|
||||
}
|
||||
if (res.length > 0) {
|
||||
let hash = res.join(",");
|
||||
document.getElementById("sharelink").href = "#" + hash;
|
||||
document.getElementById("sharedialog").showModal();
|
||||
} else {
|
||||
alert("Tu cancionero no tiene canciones...");
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
for (let e of document.getElementsByClassName("init")) {
|
||||
e.dispatchEvent(new Event("change"));
|
||||
}
|
||||
if (window.location.hash) {
|
||||
// Load songs
|
||||
for (let n of window.location.hash.slice(1).split(","))
|
||||
addSpecificSong(n);
|
||||
// Set default settings
|
||||
let controls = document.getElementById("controlsCheckbox");
|
||||
controls.checked = false;
|
||||
controls.dispatchEvent(new Event("change"));
|
||||
let preview = document.getElementById("previewCheckbox");
|
||||
preview.checked = true;
|
||||
preview.dispatchEvent(new Event("change"));
|
||||
let showChords = document.getElementById("showChords");
|
||||
showChords.checked = false;
|
||||
showChords.dispatchEvent(new Event("change"));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
{% include "footer.html" %}
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue