refactor: Migrate zoom control and expand/collapse to hyperscript
- Move initZoomControlButtons() from main.js to hyperscript handlers - zoom-toggle-button: on click call toggleZoomControl() - zoom-close: on click call hideZoomControl() - show-zoom-menu-btn: on click call showZoomControl() - Move expandAllSections/collapseAllSections from JS to utils._hs - Add zoom visibility functions to zoom._hs: - showZoomControl(), hideZoomControl(), toggleZoomControl() - Update hamburger menu links to use hyperscript calls Eliminates ~75 more lines of JavaScript in favor of declarative hyperscript, continuing the pattern of moving behavior to ._hs files.
This commit is contained in:
juanatsap
@@ -134,6 +134,27 @@ def handleScroll()
|
||||
set :lastScroll to currentScroll
|
||||
end
|
||||
|
||||
-- ==============================================================================
|
||||
-- EXPAND/COLLAPSE ALL SECTIONS
|
||||
-- ==============================================================================
|
||||
-- Expand all <details> elements in the CV
|
||||
def expandAllSections(evt)
|
||||
if evt then call evt.preventDefault() end
|
||||
set details to document.querySelectorAll('details')
|
||||
for d in details
|
||||
set d's @open to ''
|
||||
end
|
||||
end
|
||||
|
||||
-- Collapse all <details> elements in the CV
|
||||
def collapseAllSections(evt)
|
||||
if evt then call evt.preventDefault() end
|
||||
set details to document.querySelectorAll('details')
|
||||
for d in details
|
||||
call d.removeAttribute('open')
|
||||
end
|
||||
end
|
||||
|
||||
-- ==============================================================================
|
||||
-- FOOTER HOVER INTERACTION
|
||||
-- ==============================================================================
|
||||
|
||||
@@ -100,14 +100,42 @@ def initZoomControl(control)
|
||||
end
|
||||
|
||||
-- ==============================================================================
|
||||
-- ZOOM CLOSE HANDLER
|
||||
-- ZOOM VISIBILITY HANDLERS
|
||||
-- ==============================================================================
|
||||
-- Called when clicking the close button on zoom control
|
||||
def handleZoomClose(control)
|
||||
add .zoom-hidden to control
|
||||
set localStorage['cv-zoom-visible'] to 'false'
|
||||
-- Show zoom control
|
||||
def showZoomControl()
|
||||
set control to document.getElementById('zoom-control')
|
||||
set menuBtn to document.getElementById('show-zoom-menu-btn')
|
||||
if control is not null
|
||||
remove .zoom-hidden from control
|
||||
set localStorage['cv-zoom-visible'] to 'true'
|
||||
end
|
||||
if menuBtn is not null
|
||||
add .zoom-hidden to menuBtn
|
||||
end
|
||||
end
|
||||
|
||||
-- Hide zoom control
|
||||
def hideZoomControl()
|
||||
set control to document.getElementById('zoom-control')
|
||||
set menuBtn to document.getElementById('show-zoom-menu-btn')
|
||||
if control is not null
|
||||
add .zoom-hidden to control
|
||||
set localStorage['cv-zoom-visible'] to 'false'
|
||||
end
|
||||
if menuBtn is not null
|
||||
remove .zoom-hidden from menuBtn
|
||||
end
|
||||
end
|
||||
|
||||
-- Toggle zoom control visibility
|
||||
def toggleZoomControl()
|
||||
set control to document.getElementById('zoom-control')
|
||||
if control is not null
|
||||
if control.classList.contains('zoom-hidden')
|
||||
call showZoomControl()
|
||||
else
|
||||
call hideZoomControl()
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
+1
-81
@@ -55,24 +55,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand all <details> sections in the CV
|
||||
* @param {Event} event - Click event
|
||||
*/
|
||||
window.expandAllSections = function(event) {
|
||||
event.preventDefault();
|
||||
document.querySelectorAll('details').forEach(d => d.setAttribute('open', ''));
|
||||
};
|
||||
|
||||
/**
|
||||
* Collapse all <details> sections in the CV
|
||||
* @param {Event} event - Click event
|
||||
*/
|
||||
window.collapseAllSections = function(event) {
|
||||
event.preventDefault();
|
||||
document.querySelectorAll('details').forEach(d => d.removeAttribute('open'));
|
||||
};
|
||||
|
||||
/**
|
||||
* Auto-open sidebar accordions in landscape mobile mode AND desktop
|
||||
* Ensures sidebar content is always visible except in portrait mobile
|
||||
@@ -504,68 +486,6 @@
|
||||
// INITIALIZATION
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Initialize zoom control button handlers
|
||||
* Handles close button, show button, and toggle button
|
||||
*/
|
||||
function initZoomControlButtons() {
|
||||
const closeBtn = document.getElementById('zoom-close');
|
||||
const showBtn = document.getElementById('show-zoom-menu-btn');
|
||||
const toggleBtn = document.getElementById('zoom-toggle-button');
|
||||
const zoomControl = document.getElementById('zoom-control');
|
||||
|
||||
// Helper function to toggle zoom visibility
|
||||
function toggleZoom(show) {
|
||||
if (show) {
|
||||
zoomControl.classList.remove('zoom-hidden');
|
||||
if (showBtn) showBtn.classList.add('zoom-hidden');
|
||||
// Don't add zoom-active class - button stays same color
|
||||
localStorage.setItem('cv-zoom-visible', 'true');
|
||||
} else {
|
||||
zoomControl.classList.add('zoom-hidden');
|
||||
if (showBtn) showBtn.classList.remove('zoom-hidden');
|
||||
// Don't remove zoom-active class - wasn't added
|
||||
localStorage.setItem('cv-zoom-visible', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
// Close button handler
|
||||
if (closeBtn && zoomControl) {
|
||||
closeBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('Zoom close clicked');
|
||||
toggleZoom(false);
|
||||
});
|
||||
}
|
||||
|
||||
// Show button handler (hamburger menu)
|
||||
if (showBtn && zoomControl) {
|
||||
showBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log('Zoom show clicked');
|
||||
toggleZoom(true);
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle button handler (fixed button)
|
||||
if (toggleBtn && zoomControl) {
|
||||
toggleBtn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const isVisible = !zoomControl.classList.contains('zoom-hidden');
|
||||
console.log('Zoom toggle clicked, currently visible:', isVisible);
|
||||
toggleZoom(!isVisible);
|
||||
});
|
||||
}
|
||||
|
||||
// No need to set initial state since we don't use zoom-active class anymore
|
||||
const isVisible = localStorage.getItem('cv-zoom-visible');
|
||||
|
||||
console.log('Zoom control initialized. localStorage cv-zoom-visible:', isVisible);
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize all CV interactive features when DOM is ready
|
||||
*/
|
||||
@@ -576,8 +496,8 @@
|
||||
initErrorToastClose();
|
||||
initHTMXHandlers();
|
||||
handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
|
||||
initZoomControlButtons();
|
||||
// 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
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user