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.
This commit is contained in:
juanatsap
2025-11-30 06:06:10 +00:00
parent 7ab150a48e
commit cf6b825bde
3 changed files with 22 additions and 94 deletions
+18
View File
@@ -170,6 +170,24 @@ def setFooterHover(show)
end
end
-- ==============================================================================
-- NAVIGATION SCROLL
-- ==============================================================================
-- Smooth scroll to a section by ID
def scrollToSection(evt, sectionId)
if evt then call evt.preventDefault() end
set el to document.getElementById(sectionId)
if el is not null
call el.scrollIntoView({ behavior: 'smooth' })
-- Close the menu after navigation
set menu to document.querySelector('.navigation-menu')
if menu is not null
remove .menu-hover from menu
remove .menu-open from menu
end
end
end
-- ==============================================================================
-- KEYBOARD SHORTCUTS
-- ==============================================================================
+2 -93
View File
@@ -91,18 +91,7 @@
});
}
/**
* Close menu when navigation links are clicked
* CSS handles scrolling with scroll-behavior: smooth
*/
function initMenuCloseOnClick() {
document.addEventListener('click', (e) => {
const navLink = e.target.closest('.submenu-content a[href^="#"]');
if (navLink) {
document.querySelector('.navigation-menu')?.classList.remove('menu-hover', 'menu-open');
}
});
}
// Menu close on nav click is now handled by scrollToSection() in utils._hs
// =============================================================================
// PREFERENCES & LANGUAGE
@@ -265,16 +254,7 @@
toast?.classList.remove('show');
};
/**
* Close button handler for error toast
*/
function initErrorToastClose() {
document.addEventListener('click', (e) => {
if (e.target.closest('.error-close')) {
document.getElementById('error-toast')?.classList.remove('show');
}
});
}
// Error toast close handled by hyperscript inline in error-toast.html
// =============================================================================
// HTMX EVENT HANDLERS
@@ -491,9 +471,7 @@
*/
document.addEventListener('DOMContentLoaded', function() {
initMenuSystem();
initMenuCloseOnClick();
initPreferences();
initErrorToastClose();
initHTMXHandlers();
handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
// Note: Scroll behavior now handled by hyperscript in index.html body tag
@@ -501,75 +479,6 @@
// initScrollBehaviorJS() removed - hyperscript handleScroll() is preferred
});
/**
* JavaScript-based scroll behavior (fallback for hyperscript)
* Desktop: Hide header on scroll down, show on scroll up
* Mobile (≤900px): Always show header (CSS handles this, but we skip adding class)
*/
function initScrollBehaviorJS() {
let lastScrollY = 0;
const scrollThreshold = 100;
const actionBar = document.querySelector('.action-bar');
const navMenu = document.querySelector('.navigation-menu');
if (!actionBar) return;
function isMobileViewport() {
return window.innerWidth <= 900;
}
function handleScroll() {
const currentScrollY = window.scrollY || window.pageYOffset;
// Skip header hiding logic on mobile - CSS override handles visibility
// but we still avoid adding the class for cleaner state
if (isMobileViewport()) {
// On mobile, always ensure header is visible
actionBar.classList.remove('header-hidden');
if (navMenu) navMenu.classList.remove('header-hidden');
lastScrollY = currentScrollY;
return;
}
// At top of page - always show header
if (currentScrollY <= scrollThreshold) {
actionBar.classList.remove('header-hidden');
if (navMenu && navMenu.classList.contains('menu-open')) {
navMenu.classList.remove('header-hidden');
}
}
// Scrolling DOWN past threshold - hide header
else if (currentScrollY > lastScrollY && currentScrollY > scrollThreshold) {
actionBar.classList.add('header-hidden');
if (navMenu && navMenu.classList.contains('menu-open')) {
navMenu.classList.add('header-hidden');
}
}
// Scrolling UP - show header
else if (currentScrollY < lastScrollY) {
actionBar.classList.remove('header-hidden');
if (navMenu && navMenu.classList.contains('menu-open')) {
navMenu.classList.remove('header-hidden');
}
}
lastScrollY = currentScrollY;
}
// Use passive listener for better scroll performance
window.addEventListener('scroll', handleScroll, { passive: true });
// Also handle resize (viewport changes)
window.addEventListener('resize', function() {
if (isMobileViewport()) {
actionBar.classList.remove('header-hidden');
if (navMenu) navMenu.classList.remove('header-hidden');
}
});
console.log('Scroll behavior JS initialized');
}
// =============================================================================
// HYPERSCRIPT-POWERED FEATURES (NO JS NEEDED)
// =============================================================================
+2 -1
View File
@@ -3,6 +3,7 @@
<div id="error-toast" class="error-toast no-print" role="alert" aria-live="assertive" style="display: none;">
<span class="error-icon">⚠️</span>
<span id="error-message"></span>
<button aria-label="Close error message" class="error-close">×</button>
<button aria-label="Close error message" class="error-close"
_="on click remove .show from #error-toast">×</button>
</div>
{{end}}