pablo/crochet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added customization options

Browse Source
This commit is contained in:
Pablo Moreno
2026-07-15 10:43:42 +02:00
parent c1afd5a6d4
commit 1cb41e36ad
5 changed files with 83 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/page-settings.js
+47 -12
View File
@@ -1,31 +1,44 @@
// Personalización de página: título, autor, color de texto y de fondo,
// tipografía y tamaño/orientación del PDF. A diferencia de las secciones,
// es única para todo el documento (no se repite, reordena ni duplica), así
// que no pasa por serializeSections()/buildSectionsFrom(): se guarda
// aparte (ver storage.js) y se aplica directamente sobre #panel-output.
// Personalización de página: título, autor, color de texto/acento/fondo,
// tipografía, tamaño y alineación de letra, y tamaño/orientación del PDF.
// A diferencia de las secciones, es única para todo el documento (no se
// repite, reordena ni duplica), así que no pasa por
// serializeSections()/buildSectionsFrom(): se guarda aparte (ver
// storage.js) y se aplica directamente sobre #panel-output.
import {
panelOutput,
outputText,
pageTitleInput,
pageAuthorInput,
pageTextColorInput,
pageAccentColorInput,
pageBgColorInput,
pageFontSelect,
pageFontSizeSelect,
pageAlignSelect,
pageSizeSelect,
pageOrientationSelect,
pageSizeStyle,
} from './dom-refs.js';
// Aplica a #panel-output el color de texto/fondo y la tipografía elegidos,
// el tamaño de página al diálogo de impresión (a través de un <style>
// propio, ya que @page no se puede tocar como una propiedad normal desde
// JS), y el título del patrón como título de la pestaña del navegador (que
// de paso el propio navegador suele usar como nombre sugerido al exportar
// a PDF).
// Aplica a #panel-output el color de texto/fondo, la tipografía, el
// tamaño de letra y la alineación elegidos, el tamaño de página al diálogo
// de impresión (a través de un <style> propio, ya que @page no se puede
// tocar como una propiedad normal desde JS), y el título del patrón como
// título de la pestaña del navegador (que de paso el propio navegador
// suele usar como nombre sugerido al exportar a PDF).
export function renderPageMeta() {
panelOutput.style.color = pageTextColorInput.value;
panelOutput.style.backgroundColor = pageBgColorInput.value;
panelOutput.style.fontFamily = pageFontSelect.value;
panelOutput.style.textAlign = pageAlignSelect.value;
// En #panel-output-text (no en #panel-output): los títulos/notas/etc. ya
// usan sus propios tamaños relativos en "em" (ver render.js y
// section-types.js) para escalar junto con este valor. `rem` (lo que usan
// las clases normales de Tailwind, como "text-lg") ignora el font-size de
// cualquier ancestro y solo mira el de <html>, así que aplicar esto más
// arriba (o dejar clases en rem por debajo) no tenía ningún efecto.
outputText.style.fontSize = pageFontSizeSelect.value;
pageSizeStyle.textContent = `@page { size: ${pageSizeSelect.value} ${pageOrientationSelect.value}; }`;
document.title = pageTitleInput.value.trim() || 'Crochet';
@@ -37,6 +50,13 @@ export function renderPageMeta() {
// pinta nada por sí sola en pantalla, solo la consume la regla @media
// print de más abajo.
document.documentElement.style.setProperty('--print-page-bg-color', pageBgColorInput.value);
// El color de acento se expone igual, como variable CSS, para que
// section-types.js pueda usarlo en el título/subtítulo (con una clase
// Tailwind `text-[var(--accent-color)]`) sin que ese módulo tenga que
// importar nada de aquí: ambos solo necesitan estar de acuerdo en el
// nombre de la variable.
document.documentElement.style.setProperty('--accent-color', pageAccentColorInput.value);
}
export function serializePageSettings() {
@@ -44,8 +64,11 @@ export function serializePageSettings() {
title: pageTitleInput.value,
author: pageAuthorInput.value,
textColor: pageTextColorInput.value,
accentColor: pageAccentColorInput.value,
bgColor: pageBgColorInput.value,
font: pageFontSelect.value,
fontSize: pageFontSizeSelect.value,
align: pageAlignSelect.value,
pageSize: pageSizeSelect.value,
orientation: pageOrientationSelect.value,
};
@@ -55,15 +78,27 @@ export function applyPageSettings(settings = {}) {
pageTitleInput.value = settings.title || '';
pageAuthorInput.value = settings.author || '';
pageTextColorInput.value = settings.textColor || '#000000';
pageAccentColorInput.value = settings.accentColor || '#1d4ed8';
pageBgColorInput.value = settings.bgColor || '#ffffff';
pageFontSelect.value = settings.font || 'sans-serif';
pageFontSizeSelect.value = settings.fontSize || '1rem';
pageAlignSelect.value = settings.align || 'left';
pageSizeSelect.value = settings.pageSize || 'A4';
pageOrientationSelect.value = settings.orientation || 'portrait';
renderPageMeta();
}
[pageTitleInput, pageAuthorInput].forEach(el => el.addEventListener('input', renderPageMeta));
[pageTextColorInput, pageBgColorInput, pageFontSelect, pageSizeSelect, pageOrientationSelect].forEach(el => {
[
pageTextColorInput,
pageAccentColorInput,
pageBgColorInput,
pageFontSelect,
pageFontSizeSelect,
pageAlignSelect,
pageSizeSelect,
pageOrientationSelect,
].forEach(el => {
el.addEventListener('input', renderPageMeta);
el.addEventListener('change', renderPageMeta);
});