hash functionality and styling for generador

2026-01-28 13:07:58 +01:00 · 2026-01-23 20:49:33 +01:00 · 2026-01-23 20:49:33 +01:00 · e81f07ac08
commit e81f07ac08
parent 8c1c0d47c3
2 changed files with 105 additions and 20 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,3 +2,4 @@
 public/
 audios/
 songs.dat
+generador_public/
--- a/res_gen/templates/generador.html
+++ b/res_gen/templates/generador.html
@ -4,19 +4,19 @@
 		<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="https://canciones.sanleandrovalencia.es/favicon.svg"/>
+		<link rel="stylesheet" type="text/css" href="https://canciones.sanleandrovalencia.es/main.css"/>
+		<link rel="stylesheet" type="text/css" href="https://canciones.sanleandrovalencia.es/index.css">
+		<link rel="stylesheet" type="text/css" href="https://canciones.sanleandrovalencia.es/song.css">
 <style>
-.chorded .hideChorded {
-	display: none;
-}
-.lyrics .hideLyrics {
-	display: none;
-}
+button.external,
 a.external {
 	background-image: url(img/link-external.svg);
-	background-position: center right;
+	background-size: 0.9em;
+	padding-right: 1.8em;
+	background-position-x: 96%;
+	background-position-y: center;
 	background-repeat: no-repeat;
-	background-size: 0.857em;
-	padding-right: 1em;
 }
 a {
 	color: #36c;
@ -24,6 +24,30 @@ a {
 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>
@ -39,9 +63,6 @@ a:hover {
 				<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>&nbsp;mm (alto)</label> &times;
-				<label><input class="lyricsonly" type="number" size="4" name="paperwidth"  id="paperwidth" required>&nbsp;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>
@ -50,6 +71,10 @@ a:hover {
 					<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>&nbsp;mm (alto)</label> &times;
+				<label><input class="lyricsonly" type="number" size="4" name="paperwidth"  id="paperwidth" required>&nbsp;mm (ancho)</label>
 				</p><p>
 				Columnas: <label>
 					<input type="checkbox" name="ifcolumns" value="true" checked onclick="toggleCols(event)">&nbsp;Habilitar</label> | <label><input type="number" name="columns" id="columns" value="2" size="3" min="1" max="10" required> columnas</label>
@ -84,12 +109,24 @@ a:hover {
 			<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 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()">
+						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>
+				</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()">
+						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>
 			</p>
 			<ol id='songlist'></ol>
 			<template id='songtemplate'>
@ -107,11 +144,16 @@ a:hover {
 			</template>
 			<h2>Generar el cancionero</h2>
 			<p>
-				<input type="submit" value="Generar cancionero en PDF">
-				<input type="reset" value="Restablecer formulario">
+				<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);
@ -142,6 +184,7 @@ function songDelete(event) {
 	const li = event.target.parentElement;
 	const ol = li.parentElement;
 	ol.removeChild(li);
+	regenHash();
 }

 function clearSongs() {
@ -158,6 +201,17 @@ function selectRandomizeOptions(select, optionParent) {
 	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;
@ -187,6 +241,27 @@ function addSongs(random) {
 	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";
@ -232,6 +307,7 @@ function setSong(event) {
 		a.href = ""
 		a.classList = [];
 	}
+	regenHash();
 }

 function toggleCols(event) {
@ -253,6 +329,14 @@ function toggleColSep(event) {
 		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>