105 lines
4.4 KiB
JavaScript
105 lines
4.4 KiB
JavaScript
// 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, 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';
|
|
|
|
// El color de fondo también se guarda en una variable CSS en :root, para
|
|
// que css/main.css pueda pintar con él toda la hoja al imprimir (no solo
|
|
// la caja de #panel-output, que puede quedarse más corta que la página).
|
|
// Se hace así, en vez de aplicar el color directamente a <body>, para no
|
|
// cambiar también el fondo de toda la pantalla de edición: la variable no
|
|
// 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() {
|
|
return {
|
|
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,
|
|
};
|
|
}
|
|
|
|
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,
|
|
pageAccentColorInput,
|
|
pageBgColorInput,
|
|
pageFontSelect,
|
|
pageFontSizeSelect,
|
|
pageAlignSelect,
|
|
pageSizeSelect,
|
|
pageOrientationSelect,
|
|
].forEach(el => {
|
|
el.addEventListener('input', renderPageMeta);
|
|
el.addEventListener('change', renderPageMeta);
|
|
});
|