58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
// 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();
|
|
});
|
|
}
|