37 lines
1.8 KiB
JavaScript
37 lines
1.8 KiB
JavaScript
// Pestañas (solo en móvil, ver css/main.css): alternar entre el panel de
|
|
// "Secciones" y el de "Vista previa". A partir del breakpoint md la clase
|
|
// `panel-hidden-mobile` no tiene efecto y ambos paneles quedan visibles
|
|
// permanentemente, lado a lado. También la exportación a PDF, que se apoya
|
|
// en showTab() para asegurarse de que "Vista previa" esté visible antes de
|
|
// imprimir.
|
|
|
|
import { panelTop, panelOutput } from './dom-refs.js';
|
|
|
|
const tabSections = document.getElementById('tab-sections');
|
|
const tabOutput = document.getElementById('tab-output');
|
|
|
|
function showTab(tab) {
|
|
const showSections = tab === 'sections';
|
|
panelTop.classList.toggle('panel-hidden-mobile', !showSections);
|
|
panelOutput.classList.toggle('panel-hidden-mobile', showSections);
|
|
tabSections.classList.toggle('tab-active', showSections);
|
|
tabOutput.classList.toggle('tab-active', !showSections);
|
|
}
|
|
|
|
tabSections.addEventListener('click', () => showTab('sections'));
|
|
tabOutput.addEventListener('click', () => showTab('output'));
|
|
|
|
// Exportar #panel-output a PDF: se usa el diálogo de impresión del propio
|
|
// navegador (con "Guardar como PDF") en vez de una librería externa, ya que
|
|
// las librerías tipo html2canvas no renderizan bien los colores oklch que
|
|
// usa Tailwind v4. La hoja de estilos de impresión (css/main.css) aísla
|
|
// #panel-output para que solo se exporte el resultado.
|
|
document.getElementById('export-pdf').addEventListener('click', () => {
|
|
// `panel-hidden-mobile` está restringida a "screen" en el CSS, así que
|
|
// nunca debería afectar a la impresión, pero por si algún navegador
|
|
// calcula el ancho de la vista de impresión igual al de pantalla en
|
|
// móvil, se cambia de pestaña antes de imprimir para curarse en salud.
|
|
showTab('output');
|
|
window.print();
|
|
});
|