Files
cv-site/static/js/cv-functions.js
T
juanatsap f87a1a5c28 fix: implement complete hover synchronization for PDF/Print buttons
CRITICAL BUG FIX: Hover states now sync between action bar and hamburger menu

Changes:
1. Added mouseenter/mouseleave handlers to menu PDF button
   - templates/partials/navigation/hamburger-menu.html:178-181
   - Added .menu-pdf-btn class for targeting
   - Added hyperscript hover sync events

2. Updated syncPdfHover() function
   - static/js/cv-functions.js:71-82
   - Now selects both .pdf-btn and .menu-pdf-btn
   - Both buttons get .pdf-hover-sync class on hover

3. Updated syncPrintHover() function
   - static/js/cv-functions.js:88-99
   - Now selects both .print-btn and .menu-print-btn
   - Both buttons get .print-hover-sync class on hover

4. Added CSS for menu PDF button hover sync
   - static/css/main.css:2690-2700
   - .menu-pdf-btn.pdf-hover-sync styling (white bg, red icon)
   - Matches action bar PDF button hover state

5. Created comprehensive hover sync test
   - tests/mjs/8-hover-sync.test.mjs
   - Tests all 4 hover scenarios (bar→menu, menu→bar for both buttons)
   - Validates event handlers and CSS class application
   - Manual verification instructions included

Behavior now correct:
 Hovering action bar PDF button highlights menu PDF button
 Hovering action bar Print button highlights menu Print button
 Hovering menu PDF button highlights action bar PDF button
 Hovering menu Print button highlights action bar Print button

Fixes documented bug from PROJECT-MEMORY.md Section 3.
2025-11-17 14:35:32 +00:00

122 lines
3.5 KiB
JavaScript

/**
* CV Site - Core Toggle Functions
* =================================
* Global JavaScript functions for CV toggles and interactions
* These replace hyperscript def functions to avoid the 3-function parser limit
*/
/**
* Toggle CV Length (Short/Long)
* @param {boolean} isLong - true for long CV, false for short
*/
function toggleCVLength(isLong) {
const paper = document.querySelector('.cv-paper');
const otherToggle = document.querySelector('#lengthToggle') || document.querySelector('#lengthToggleMenu');
if (isLong) {
paper?.classList.remove('cv-short');
paper?.classList.add('cv-long');
localStorage.setItem('cv-length', 'long');
if (otherToggle) otherToggle.checked = true;
} else {
paper?.classList.remove('cv-long');
paper?.classList.add('cv-short');
localStorage.setItem('cv-length', 'short');
if (otherToggle) otherToggle.checked = false;
}
}
/**
* Toggle Icons Display
* @param {boolean} showIcons - true to show icons, false to hide
*/
function toggleIcons(showIcons) {
const paper = document.querySelector('.cv-paper');
const otherToggle = document.querySelector('#iconToggle') || document.querySelector('#iconToggleMenu');
if (showIcons) {
paper?.classList.add('show-icons');
localStorage.setItem('cv-icons', 'true');
if (otherToggle) otherToggle.checked = true;
} else {
paper?.classList.remove('show-icons');
localStorage.setItem('cv-icons', 'false');
if (otherToggle) otherToggle.checked = false;
}
}
/**
* Toggle Theme (Default/Clean)
* @param {boolean} isClean - true for clean theme, false for default
*/
function toggleTheme(isClean) {
const body = document.body;
const otherToggle = document.querySelector('#themeToggle') || document.querySelector('#themeToggleMenu');
if (isClean) {
body?.classList.add('theme-clean');
localStorage.setItem('cv-theme', 'clean');
if (otherToggle) otherToggle.checked = true;
} else {
body?.classList.remove('theme-clean');
localStorage.setItem('cv-theme', 'default');
if (otherToggle) otherToggle.checked = false;
}
}
/**
* Sync PDF Button Hover State
* @param {boolean} show - true to add hover class, false to remove
*/
function syncPdfHover(show) {
// Select both action bar PDF button and menu PDF button
const pdfButtons = document.querySelectorAll('.pdf-btn, .menu-pdf-btn');
pdfButtons.forEach(button => {
if (show) {
button.classList.add('pdf-hover-sync');
} else {
button.classList.remove('pdf-hover-sync');
}
});
}
/**
* Sync Print Button Hover State
* @param {boolean} show - true to add hover class, false to remove
*/
function syncPrintHover(show) {
// Select both action bar Print button and menu Print button
const printButtons = document.querySelectorAll('.print-btn, .menu-print-btn');
printButtons.forEach(button => {
if (show) {
button.classList.add('print-hover-sync');
} else {
button.classList.remove('print-hover-sync');
}
});
}
/**
* Highlight Zoom Control
* @param {boolean} show - true to highlight, false to remove highlight
*/
function highlightZoomControl(show) {
const zoomWrapper = document.querySelector('#zoom-wrapper');
if (show) {
zoomWrapper?.classList.add('highlight');
} else {
zoomWrapper?.classList.remove('highlight');
}
}
// Make functions globally available
window.toggleCVLength = toggleCVLength;
window.toggleIcons = toggleIcons;
window.toggleTheme = toggleTheme;
window.syncPdfHover = syncPdfHover;
window.syncPrintHover = syncPrintHover;
window.highlightZoomControl = highlightZoomControl;