70 lines
3.0 KiB
JavaScript
70 lines
3.0 KiB
JavaScript
// 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.
|
|
|
|
import {
|
|
panelOutput,
|
|
pageTitleInput,
|
|
pageAuthorInput,
|
|
pageTextColorInput,
|
|
pageBgColorInput,
|
|
pageFontSelect,
|
|
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).
|
|
export function renderPageMeta() {
|
|
panelOutput.style.color = pageTextColorInput.value;
|
|
panelOutput.style.backgroundColor = pageBgColorInput.value;
|
|
panelOutput.style.fontFamily = pageFontSelect.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);
|
|
}
|
|
|
|
export function serializePageSettings() {
|
|
return {
|
|
title: pageTitleInput.value,
|
|
author: pageAuthorInput.value,
|
|
textColor: pageTextColorInput.value,
|
|
bgColor: pageBgColorInput.value,
|
|
font: pageFontSelect.value,
|
|
pageSize: pageSizeSelect.value,
|
|
orientation: pageOrientationSelect.value,
|
|
};
|
|
}
|
|
|
|
export function applyPageSettings(settings = {}) {
|
|
pageTitleInput.value = settings.title || '';
|
|
pageAuthorInput.value = settings.author || '';
|
|
pageTextColorInput.value = settings.textColor || '#000000';
|
|
pageBgColorInput.value = settings.bgColor || '#ffffff';
|
|
pageFontSelect.value = settings.font || 'sans-serif';
|
|
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 => {
|
|
el.addEventListener('input', renderPageMeta);
|
|
el.addEventListener('change', renderPageMeta);
|
|
});
|