feat: splitted js in different modules

js/i18n.js

@@ -0,0 +1,57 @@
+// Multi-idioma del contenido: título, subtítulo, texto libre, nota y cada
+// línea de materiales guardan un texto por idioma en vez de uno solo, para
+// poder editarlos y asociarlos al idioma seleccionado sin perder lo ya
+// escrito en los demás.
+
+import { sectionsContainer, languageSelect } from './dom-refs.js';
+
+// Selector común a todo campo traducible: se usa tanto para sincronizar el
+// mapa de traducciones en cada pulsación de tecla como para refrescar los
+// campos visibles al cambiar de idioma. `textarea` cubre tanto "Texto"
+// (.text-input) como "Nota" (.note-input): ambas son un <textarea>.
+export const TRANSLATABLE_FIELDS_SELECTOR = '.title-input, .subtitle-input, .material-input, textarea';
+
+// Idioma actualmente seleccionado para el contenido. La estructura de
+// secciones (cuáles hay, su orden, su tipo) es la misma para todos los
+// idiomas; lo único que cambia es qué texto se muestra en cada campo
+// traducible.
+let currentLanguage = languageSelect.value;
+
+export function getCurrentLanguage() {
+  return currentLanguage;
+}
+
+// Cada input/textarea traducible guarda su propio mapa { idioma: texto }
+// serializado en el propio elemento (data-translations), así viaja solo
+// con guardar/cargar la sección, sin necesidad de un almacén aparte que
+// haya que mantener sincronizado.
+export function getTranslations(el) {
+  try {
+    return JSON.parse(el.dataset.translations || '{}');
+  } catch {
+    return {};
+  }
+}
+
+// Actualiza, dentro del mapa ya guardado en el elemento, el texto del
+// idioma indicado (por defecto el actual), sin tocar el resto de idiomas.
+export function setTranslation(el, text, lang = currentLanguage) {
+  const translations = getTranslations(el);
+  translations[lang] = text;
+  el.dataset.translations = JSON.stringify(translations);
+}
+
+// Al cambiar el idioma del contenido, se sustituye en cada campo traducible
+// (a cualquier nivel de anidamiento) el texto mostrado por el que tenga
+// guardado para el nuevo idioma (vacío si aún no se ha escrito nada en ese
+// idioma). `onLanguageChange` se llama después, para que quien la registre
+// (render.js) pueda repintar la vista previa.
+export function setupLanguageSelect(onLanguageChange) {
+  languageSelect.addEventListener('change', () => {
+    currentLanguage = languageSelect.value;
+    sectionsContainer.querySelectorAll(TRANSLATABLE_FIELDS_SELECTOR).forEach(el => {
+      el.value = getTranslations(el)[currentLanguage] || '';
+    });
+    onLanguageChange();
+  });
+}