feat: splitted js in different modules

js/page-settings.js

@@ -0,0 +1,60 @@
+// 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';
+}
+
+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);
+});