122 lines
4.0 KiB
JavaScript
122 lines
4.0 KiB
JavaScript
/* ============================================
|
|
CARGA DE INCLUDES (menu y footer)
|
|
============================================ */
|
|
async function loadInclude(selector, url) {
|
|
try {
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
const html = await response.text();
|
|
const container = document.querySelector(selector);
|
|
if (container) container.innerHTML = html;
|
|
} catch (error) {
|
|
console.error(`Error cargando ${url}:`, error);
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
SWITCH DE TEMA (claro por defecto)
|
|
============================================ */
|
|
function initTheme() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const current = document.documentElement.getAttribute('data-theme') || 'light';
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', next);
|
|
localStorage.setItem('theme', next);
|
|
}
|
|
|
|
// Ejecutar al cargar la página
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initTheme();
|
|
|
|
const themeBtn = document.querySelector('.theme-toggle');
|
|
if (themeBtn) {
|
|
themeBtn.addEventListener('click', toggleTheme);
|
|
}
|
|
});
|
|
/* ============================================
|
|
CALCULAR ANCHO DEL SCROLLBAR
|
|
============================================ */
|
|
function getScrollbarWidth() {
|
|
return window.innerWidth - document.documentElement.clientWidth;
|
|
}
|
|
|
|
function applyScrollbarCompensation() {
|
|
const scrollbarWidth = getScrollbarWidth();
|
|
document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
|
|
}
|
|
|
|
/* ============================================
|
|
MENÚ FULLSCREEN
|
|
============================================ */
|
|
function openMenu() {
|
|
const menu = document.getElementById('fullscreen-menu');
|
|
const overlay = document.getElementById('menu-overlay');
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
|
|
if (menu && overlay) {
|
|
applyScrollbarCompensation();
|
|
menu.classList.add('is-open');
|
|
overlay.classList.add('is-open');
|
|
document.body.classList.add('menu-open');
|
|
menuToggle.setAttribute('aria-expanded', 'true');
|
|
}
|
|
}
|
|
|
|
function closeMenu() {
|
|
const menu = document.getElementById('fullscreen-menu');
|
|
const overlay = document.getElementById('menu-overlay');
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
|
|
if (menu && overlay) {
|
|
menu.classList.remove('is-open');
|
|
overlay.classList.remove('is-open');
|
|
document.body.classList.remove('menu-open');
|
|
menuToggle.setAttribute('aria-expanded', 'false');
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
INICIALIZACIÓN
|
|
============================================ */
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
// Cargar menú y footer
|
|
await Promise.all([
|
|
loadInclude('#menu-container', 'includes/menu.html'),
|
|
loadInclude('#footer-container', 'includes/footer.html')
|
|
]);
|
|
|
|
// Inicializar tema
|
|
initTheme();
|
|
|
|
// Eventos del tema
|
|
const themeBtn = document.querySelector('.theme-toggle');
|
|
if (themeBtn) themeBtn.addEventListener('click', toggleTheme);
|
|
|
|
// Eventos del menú
|
|
const menuToggle = document.querySelector('.menu-toggle');
|
|
const menuClose = document.querySelector('.menu-close');
|
|
const menuOverlay = document.getElementById('menu-overlay');
|
|
const menuLinks = document.querySelectorAll('.fullscreen-menu a');
|
|
|
|
if (menuToggle) menuToggle.addEventListener('click', openMenu);
|
|
if (menuClose) menuClose.addEventListener('click', closeMenu);
|
|
if (menuOverlay) menuOverlay.addEventListener('click', closeMenu);
|
|
|
|
// Cerrar menú al hacer clic en un enlace
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', closeMenu);
|
|
});
|
|
|
|
// Cerrar menú con tecla Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') closeMenu();
|
|
});
|
|
|
|
// Año dinámico en el footer
|
|
const yearEl = document.getElementById('current-year');
|
|
if (yearEl) yearEl.textContent = new Date().getFullYear();
|
|
}); |