Files
cv-site/static/js/main.js
T
juanatsap cf6b825bde refactor: Add scrollToSection and fix missing functions
- Add scrollToSection() to utils._hs (was missing after cv-functions.js removal)
- Move error toast close handler to inline hyperscript
- Remove initMenuCloseOnClick() - now integrated into scrollToSection()
- Remove initErrorToastClose() - now hyperscript inline handler
- Remove unused initScrollBehaviorJS() fallback (~70 lines dead code)

This fixes the navigation menu scroll functionality and eliminates
more JavaScript in favor of hyperscript.
2025-11-30 06:06:10 +00:00

575 lines
25 KiB
JavaScript

// CV Interactive Features - CSP-Compliant External JavaScript
// Extracted from inline scripts for security hardening
(function() {
'use strict';
// =============================================================================
// GLOBAL VARIABLES
// =============================================================================
// Flag to keep header visible after navigation
let keepHeaderVisible = false;
// Flag to track language switch in progress
let languageSwitching = false;
// Expose for testing (read-only access)
Object.defineProperty(window, 'languageSwitching', {
get: () => languageSwitching
});
// =============================================================================
// NAVIGATION & MENU SYSTEM
// =============================================================================
/**
* Initialize minimal menu control system
* CSS handles most logic, JS just bridges hamburger to menu
*/
function initMenuSystem() {
const hamburgerBtn = document.querySelector('.hamburger-btn');
const menu = document.getElementById('navigation-menu');
if (!hamburgerBtn || !menu) return;
// Show menu on hamburger hover - CSS handles the rest
hamburgerBtn.addEventListener('mouseenter', () => menu.classList.add('menu-hover'));
// Hide menu when leaving hamburger if not hovering menu
hamburgerBtn.addEventListener('mouseleave', () => {
setTimeout(() => {
if (!menu.matches(':hover')) menu.classList.remove('menu-hover');
}, 100);
});
// Hide menu when leaving menu
menu.addEventListener('mouseleave', () => menu.classList.remove('menu-hover'));
// Position submenu dynamically (needed because fixed positioning)
const submenuTrigger = document.querySelector('.menu-item-submenu');
const submenuContent = document.querySelector('.submenu-content');
if (submenuTrigger && submenuContent) {
submenuTrigger.addEventListener('mouseenter', function() {
submenuContent.style.top = `${this.getBoundingClientRect().top}px`;
});
}
}
/**
* Auto-open sidebar accordions in landscape mobile mode AND desktop
* Ensures sidebar content is always visible except in portrait mobile
*/
function handleLandscapeAccordions() {
function openSidebarAccordionsIfNeeded() {
const isLandscape = window.matchMedia('(max-width: 915px) and (orientation: landscape)').matches;
const isDesktop = window.matchMedia('(min-width: 769px)').matches;
const isPortraitMobile = window.matchMedia('(max-width: 768px) and (orientation: portrait)').matches;
// Open accordions in landscape mobile OR desktop view
// Keep them closed ONLY in portrait mobile (≤768px)
if (isLandscape || isDesktop) {
document.querySelectorAll('.sidebar-accordion').forEach(accordion => {
accordion.setAttribute('open', '');
});
} else if (isPortraitMobile) {
// In portrait mobile, leave them closed (user can expand manually)
// Don't remove 'open' attribute if user has opened them
}
}
// Run on load
openSidebarAccordionsIfNeeded();
// Run on orientation change
window.addEventListener('orientationchange', () => {
setTimeout(openSidebarAccordionsIfNeeded, 100);
});
// Run on resize (for desktop browser testing)
window.addEventListener('resize', () => {
openSidebarAccordionsIfNeeded();
});
}
// Menu close on nav click is now handled by scrollToSection() in utils._hs
// =============================================================================
// PREFERENCES & LANGUAGE
// =============================================================================
/**
* Initialize user preferences from localStorage
* Handles language, theme, length, and icons persistence across sessions
*/
function initPreferences() {
// Language preference
const urlLang = new URLSearchParams(window.location.search).get('lang');
const savedLang = localStorage.getItem('cv-language');
if (!urlLang && savedLang) {
// URL is clean but we have a saved preference - redirect with lang parameter
const url = new URL(window.location);
url.searchParams.set('lang', savedLang);
window.location.replace(url.toString());
} else if (urlLang) {
// Save URL language to localStorage
localStorage.setItem('cv-language', urlLang);
}
// Apply other preferences from localStorage on page load
// This ensures client-side preferences override server defaults
const savedTheme = localStorage.getItem('cv-theme');
let savedLength = localStorage.getItem('cv-length');
let savedIcons = localStorage.getItem('cv-icons');
// Migrate old localStorage values to new ones (one-time auto-migration)
if (savedLength === 'extended') {
savedLength = 'long';
localStorage.setItem('cv-length', 'long');
}
if (savedIcons === 'true') {
savedIcons = 'show';
localStorage.setItem('cv-icons', 'show');
} else if (savedIcons === 'false') {
savedIcons = 'hide';
localStorage.setItem('cv-icons', 'hide');
}
// Apply theme preference
const cvContainer = document.querySelector('.cv-container');
if (savedTheme === 'clean') {
cvContainer?.classList.add('theme-clean');
const themeToggles = document.querySelectorAll('#themeToggle, #themeToggleMenu');
themeToggles.forEach(toggle => toggle.checked = true);
} else if (savedTheme === 'default') {
cvContainer?.classList.remove('theme-clean');
const themeToggles = document.querySelectorAll('#themeToggle, #themeToggleMenu');
themeToggles.forEach(toggle => toggle.checked = false);
}
// Apply length preference
const cvPaper = document.querySelector('.cv-paper');
if (cvPaper && savedLength) {
if (savedLength === 'long') {
cvPaper.classList.remove('cv-short');
cvPaper.classList.add('cv-long');
const lengthToggles = document.querySelectorAll('#lengthToggle, #lengthToggleMenu');
lengthToggles.forEach(toggle => toggle.checked = true);
} else {
cvPaper.classList.remove('cv-long');
cvPaper.classList.add('cv-short');
const lengthToggles = document.querySelectorAll('#lengthToggle, #lengthToggleMenu');
lengthToggles.forEach(toggle => toggle.checked = false);
}
}
// Apply icons preference
if (cvPaper && savedIcons !== null) {
if (savedIcons === 'show') {
cvPaper.classList.add('show-icons');
const iconToggles = document.querySelectorAll('#iconToggle, #iconToggleMenu');
iconToggles.forEach(toggle => toggle.checked = true);
} else {
cvPaper.classList.remove('show-icons');
const iconToggles = document.querySelectorAll('#iconToggle, #iconToggleMenu');
iconToggles.forEach(toggle => toggle.checked = false);
}
}
}
// =============================================================================
// ERROR HANDLING
// =============================================================================
/**
* Display error toast notification
* CSS handles auto-hide animation via @keyframes toastLifecycle
* @param {string} message - Error message to display
*/
window.showError = function(message) {
const errorToast = document.getElementById('error-toast');
const errorMessage = document.getElementById('error-message');
errorMessage.textContent = message;
errorToast.classList.remove('show'); // Reset if already showing
// Trigger reflow to restart animation
void errorToast.offsetWidth;
errorToast.classList.add('show'); // CSS animation handles lifecycle
};
/**
* Display PDF download toast notification
* Shows progress and completion status for PDF downloads
* @param {Object} options - Toast configuration
* @param {string} options.icon - Icon emoji (📥, ✅, ⚠️)
* @param {string} options.title - Toast title
* @param {string} options.message - Toast message
* @param {number} options.duration - Auto-hide duration in ms (default: 5000)
*/
window.showPDFToast = function(options = {}) {
const toast = document.getElementById('pdf-toast');
const icon = document.getElementById('pdf-toast-icon');
const title = document.getElementById('pdf-toast-title');
const message = document.getElementById('pdf-toast-message');
const progressBar = document.getElementById('pdf-toast-progress');
// Set content
if (options.icon) icon.textContent = options.icon;
if (options.title) title.textContent = options.title;
if (options.message) message.textContent = options.message;
// Reset animation
toast.classList.remove('show');
void toast.offsetWidth; // Trigger reflow
// Reset progress bar animation
if (progressBar) {
progressBar.style.animation = 'none';
void progressBar.offsetWidth;
// Set duration if provided
const duration = options.duration || 5000;
progressBar.style.animation = `progressShrink ${duration}ms linear forwards`;
}
// Show toast
toast.classList.add('show');
// Auto-hide after duration
if (options.autoHide !== false) {
const duration = options.duration || 5000;
setTimeout(() => {
toast.classList.remove('show');
}, duration);
}
};
/**
* Hide PDF toast immediately
*/
window.hidePDFToast = function() {
const toast = document.getElementById('pdf-toast');
toast?.classList.remove('show');
};
// Error toast close handled by hyperscript inline in error-toast.html
// =============================================================================
// HTMX EVENT HANDLERS
// =============================================================================
/**
* Initialize HTMX global event handlers
* Handles errors, analytics, and post-swap behaviors
*/
function initHTMXHandlers() {
// Variable to store scroll position for swaps that should preserve position
let savedScrollPosition = 0;
let shouldRestoreScroll = false;
// Save scroll position before swap
document.addEventListener('htmx:beforeSwap', function(evt) {
try {
const target = evt.detail.target;
// Only preserve scroll for toggle operations (not language changes)
// Language changes target #cv-content, toggles target .cv-paper or body
if (target && (target.classList?.contains('cv-paper') || target.tagName === 'BODY')) {
savedScrollPosition = window.pageYOffset;
shouldRestoreScroll = true;
} else {
shouldRestoreScroll = false;
}
} catch (e) {
console.error('Error in htmx:beforeSwap handler:', e);
}
});
// Restore scroll position after swap (only for toggles)
document.addEventListener('htmx:afterSettle', function(evt) {
try {
if (shouldRestoreScroll && savedScrollPosition >= 0) {
window.scrollTo(0, savedScrollPosition);
savedScrollPosition = 0;
shouldRestoreScroll = false;
}
} catch (e) {
console.error('Error in htmx:afterSettle handler:', e);
}
});
// Skeleton loader for language transitions
// Add .loading class when language button is clicked
document.addEventListener('htmx:beforeRequest', function(evt) {
try {
const element = evt.detail.elt;
if (element && element.classList && element.classList.contains('selector-btn')) {
// Set flag to track language switching
languageSwitching = true;
// Add loading class to page containers
const page1 = document.getElementById('cv-inner-content-page-1');
const page2 = document.getElementById('cv-inner-content-page-2');
if (page1) page1.classList.add('loading');
if (page2) page2.classList.add('loading');
console.log('Skeleton loader: Added .loading class to page containers');
}
} catch (e) {
console.error('Error in skeleton loader beforeRequest handler:', e);
}
});
// Remove .loading class after language transition completes
document.addEventListener('htmx:afterSettle', function(evt) {
try {
if (languageSwitching) {
// Wait for final render to complete
setTimeout(function() {
const page1 = document.getElementById('cv-inner-content-page-1');
const page2 = document.getElementById('cv-inner-content-page-2');
if (page1) page1.classList.remove('loading');
if (page2) page2.classList.remove('loading');
// Reset flag
languageSwitching = false;
console.log('Skeleton loader: Removed .loading class from page containers');
}, 100);
}
} catch (e) {
console.error('Error in skeleton loader afterSettle handler:', e);
}
});
// Sync toggle states between desktop and mobile menu
document.addEventListener('htmx:afterSwap', function(evt) {
try {
// After any swap, sync the corresponding elements
const target = evt.detail.target;
// Sync language buttons when CV page content swaps
if (target && target.classList && target.classList.contains('cv-page-content-wrapper')) {
const urlParams = new URLSearchParams(window.location.search);
const currentLang = urlParams.get('lang') || 'en';
const enBtn = document.querySelector('button[aria-label="English"]');
const esBtn = document.querySelector('button[aria-label="Español"]');
if (enBtn && esBtn) {
if (currentLang === 'en') {
enBtn.classList.add('active');
esBtn.classList.remove('active');
} else {
esBtn.classList.add('active');
enBtn.classList.remove('active');
}
}
}
// Sync theme toggles (body swap) - though theme now uses hyperscript
if (target && target.classList.contains('cv-container')) {
const desktopToggle = document.getElementById('themeToggle');
const mobileToggle = document.getElementById('themeToggleMenu');
if (desktopToggle && mobileToggle) {
const isClean = document.querySelector('.cv-container')?.classList.contains('theme-clean');
desktopToggle.checked = isClean;
mobileToggle.checked = isClean;
}
}
// Sync length and logo toggles (.cv-paper swap)
if (target && target.classList && target.classList.contains('cv-paper')) {
// Sync length toggles
const desktopToggle = document.getElementById('lengthToggle');
const mobileToggle = document.getElementById('lengthToggleMenu');
if (desktopToggle && mobileToggle) {
const isLong = target.classList.contains('cv-long');
desktopToggle.checked = isLong;
mobileToggle.checked = isLong;
console.log(`Toggle sync - Length: desktop=${isLong}, mobile=${isLong}`);
}
// Sync icon toggles
const desktopIconToggle = document.getElementById('iconToggle');
const mobileIconToggle = document.getElementById('iconToggleMenu');
if (desktopIconToggle && mobileIconToggle) {
const showIcons = target.classList.contains('show-icons');
desktopIconToggle.checked = showIcons;
mobileIconToggle.checked = showIcons;
console.log(`Toggle sync - Icons: desktop=${showIcons}, mobile=${showIcons}`);
}
}
} catch (e) {
console.error('Error syncing toggles:', e);
}
});
// HTMX Global Error Handlers
document.addEventListener('htmx:responseError', function(evt) {
console.error('HTMX Response Error:', evt.detail);
console.error('Error details:', {
xhr: evt.detail.xhr,
target: evt.detail.target,
requestConfig: evt.detail.requestConfig
});
const lang = document.documentElement.lang;
const message = lang === 'es'
? 'Error al cargar el contenido. Por favor, inténtelo de nuevo.'
: 'Failed to load content. Please try again.';
window.showError(message);
});
document.addEventListener('htmx:sendError', function(evt) {
console.error('HTMX Send Error:', evt.detail);
const lang = document.documentElement.lang;
const message = lang === 'es'
? 'Error de conexión. Verifique su conexión a internet.'
: 'Connection error. Please check your internet connection.';
window.showError(message);
});
document.addEventListener('htmx:timeout', function(evt) {
console.error('HTMX Timeout:', evt.detail);
const lang = document.documentElement.lang;
const message = lang === 'es'
? 'La solicitud tardó demasiado. Por favor, inténtelo de nuevo.'
: 'Request timed out. Please try again.';
window.showError(message);
});
document.addEventListener('htmx:afterSwap', function(evt) {
// Smooth scroll to top on language change
if (evt.detail.target.id === 'cv-content') {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Track HTMX navigation events with Matomo
if (typeof _paq !== 'undefined' && evt.detail.target.id === 'cv-content') {
// Track language change as virtual pageview
const lang = new URLSearchParams(window.location.search).get('lang') || 'en';
_paq.push(['setCustomUrl', window.location.href]);
_paq.push(['setDocumentTitle', document.title]);
_paq.push(['trackPageView']);
}
});
// Log successful swaps for debugging
document.addEventListener('htmx:afterRequest', function(evt) {
if (evt.detail.successful) {
console.log('HTMX request successful:', evt.detail.pathInfo.requestPath);
}
});
}
// =============================================================================
// INITIALIZATION
// =============================================================================
/**
* Initialize all CV interactive features when DOM is ready
*/
document.addEventListener('DOMContentLoaded', function() {
initMenuSystem();
initPreferences();
initHTMXHandlers();
handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
// Note: Scroll behavior now handled by hyperscript in index.html body tag
// Note: Zoom control buttons now handled by hyperscript (zoom._hs)
// initScrollBehaviorJS() removed - hyperscript handleScroll() is preferred
});
// =============================================================================
// HYPERSCRIPT-POWERED FEATURES (NO JS NEEDED)
// =============================================================================
// The following features have been moved to hyperscript for better
// maintainability, declarative syntax, and cleaner HTML templates.
// All hyperscript functions are defined in /static/hyperscript/functions._hs
// ZOOM CONTROL (Phase 5 - Eliminated ~343 lines)
// -----------------------------------------------
// Now handled by hyperscript in zoom-control.html
// Features:
// - Slider updates and real-time zoom application
// - Reset button (back to 100%)
// - Close/show toggle with localStorage persistence
// - Keyboard shortcuts (Ctrl/Cmd +/-/0)
// - Draggable positioning with bounds checking
// - Mobile detection and auto-disable
// - LocalStorage persistence (zoom level, visibility, position)
// SCROLL BEHAVIOR (Phase 6 - Eliminated ~59 lines)
// ------------------------------------------------
// Now handled by hyperscript on <body> element in index.html
// Functions: initScrollBehavior(), handleScroll()
// Features:
// - Header hide/show based on scroll direction (100px threshold)
// - Back-to-top button visibility (appears after 300px scroll)
// - At-bottom positioning for fixed buttons (within 50px of page bottom)
// - Menu visibility coordination when open
// - State tracking: lastScroll, scrollThreshold, keepHeaderVisible
// PRINT FUNCTION (Phase 6 - Eliminated ~44 lines, Fixed bug)
// ----------------------------------------------------------
// Now handled by hyperscript in action-buttons.html and hamburger-menu.html
// Function: printFriendly()
// Features:
// - Stores current theme, length, and zoom state
// - Applies clean theme + short version for printing
// - Resets zoom to 100% for consistent print output
// - Calls window.print()
// - Restores original state after print dialog closes
// - Properly restores zoom by triggering slider input event (fixes Phase 5 bug)
// MODALS (Phase 4A - Eliminated ~47 lines)
// ----------------------------------------
// Now handled by native HTML5 <dialog> element
// Features:
// - Open/close with .showModal() and .close()
// - Backdrop clicks (via ::backdrop CSS pseudo-element)
// - Escape key to close (built-in browser behavior)
// - Body scroll prevention (automatic with modal dialogs)
// - Focus trapping (automatic accessibility feature)
// No JavaScript needed! All modal logic is now in HTML/CSS.
// =============================================================================
// PDF MODAL HELPER FUNCTION
// =============================================================================
/**
* Opens the PDF download modal
* Called from references section links with action="downloadPDF"
*/
window.openPdfModal = function() {
const pdfModal = document.querySelector('#pdf-modal');
if (pdfModal) {
// Apply mobile centering via inline styles with !important (overrides CSS !important)
if (window.innerWidth <= 768) {
// Reset inset FIRST (before setting top/left)
pdfModal.style.setProperty('inset', 'auto', 'important');
pdfModal.style.setProperty('margin', '0', 'important');
// Now set positioning with !important (after inset reset)
pdfModal.style.setProperty('position', 'fixed', 'important');
pdfModal.style.setProperty('top', '50%', 'important');
pdfModal.style.setProperty('left', '50%', 'important');
pdfModal.style.setProperty('right', 'auto', 'important');
pdfModal.style.setProperty('bottom', 'auto', 'important');
pdfModal.style.setProperty('transform', 'translate(-50%, -50%)', 'important');
}
pdfModal.showModal();
}
};
// =============================================================================
// TOTAL REDUCTION SUMMARY
// =============================================================================
// Baseline: 954 lines
// Phase 4A: -285 lines (Native APIs, CSS, HTMX)
// Phase 5: -343 lines (Hyperscript zoom control)
// Phase 6: -87 lines (Hyperscript scroll & print + organization)
// Current: 239 lines (74.9% reduction)
// =============================================================================
})();