parroquia-san-leandro/cancionero-web
1
0
Fork 0
mirror of https://gitlab.com/parroquia-san-leandro/cancionero-web.git synced 2026-01-28 13:07:58 +01:00
Code Releases Activity

preparar-misa: estilo y logica botones.

Browse source
This commit is contained in:
Carlos Galindo 2025-05-20 09:40:49 +02:00
commit 67a3629c8a
7 changed files with 119 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

125
res/templates/preparar-misa.html
View file

@ -12,6 +12,30 @@
.hidePreview .preview {
display: none;
}
#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>
@ -22,35 +46,48 @@
<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>
<label class="forCheckbox"><input class="init" id="controlsCheckbox" type="checkbox" onchange="toggleControls(event)" checked> Modificar la lista</label>
<label class="forCheckbox"><input class="init" id="previewCheckbox" type="checkbox" onchange="togglePreview(event)"> Ver las canciones</label>
<label class="forCheckbox"><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 class="controls mainButtons">
Añadir
<span class="buttonpair flex-reverse">
<button class="icon right pair-sub" title="Añadir una canción aleatoria" onclick="addRandomSong()">
aleatoria <img class="greenFilter" src="svg/random.svg"></button>
<button class="icon left pair-sup" title="Añadir una canción vacía" onclick="addSong()">
<img class="greenFilter" src="svg/new.svg"> una canción</button>
</span>
<br>
Añadir
<span class="buttonpair flex-reverse">
<button class="icon right pair-sub" title="Añade una canción aleatoria por categoría" onclick="addRandomSongs()">
aleatorias <img class="greenFilter" src="svg/random.svg"></button>
<button class="icon left pair-sup" title="Añade una canción por categoría" onclick="addFirstSongs()">
<img class="greenFilter" src="svg/new.svg"> varias canciones</button>
</span>
<br>
<button class="icon" onclick="clearSongs()"><img class="redFilter" src="svg/trash.svg"> Borrar todas</button>
</p>
<ul id="songlist"></ul>
<div id="songlist"></div>
<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)">
<div><span class="controls songSelector"><select name="songs[]" required onchange="songSelect(event)">
<option value="">Selecciona una canción</option>{% for category, songs in categorized_songs %}
<optgroup label="&mdash; {{ 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>
<button class="icon" title="Subir" onclick="songUp(event)"><img class="greenFilter" src="svg/up.svg"></button>
<button class="icon" title="Bajar" onclick="songDown(event)"><img class="greenFilter" src="svg/down.svg"></button>
<button class="icon" title="Quitar" onclick="songDelete(event)"><img class="redFilter" src="svg/trash.svg"></button>
</span>
<div class="preview"></div>
</div>
</template>
</main>
<script>
@ -148,27 +185,49 @@ function addSongs(random) {
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) {
function getSongList() {
const ol = document.getElementById("songlist");
let res = [];
for (let li of ol.childNodes) {
let song = li.firstElementChild.firstElementChild.value;
res.push(song);
let value = li.firstElementChild.firstElementChild.value;
if (value)
res.push(value);
}
return res;
}
function toggleControls(event) {
if (event.target.checked) {
document.body.classList.remove("hideControls");
} else {
if (getSongList().length == 0) {
event.target.checked = true;
} else {
document.body.classList.add("hideControls");
let preview = document.getElementById('previewCheckbox');
if (!preview.checked) {
preview.checked = true;
preview.dispatchEvent(new Event("change"));
}
}
}
}
function togglePreview(event) {
if (event.target.checked) {
document.body.classList.remove("hidePreview");
} else {
document.body.classList.add("hidePreview");
let controls = document.getElementById('controlsCheckbox');
if (!controls.checked) {
controls.checked = true;
controls.dispatchEvent(new Event("change"));
}
}
}
function shareList(event) {
const res = getSongList();
if (res.length > 0) {
let hash = res.join(",");
document.getElementById("sharelink").href = "#" + hash;