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:
@@ -170,6 +170,24 @@ def setFooterHover(show)
|
|||||||
end
|
end
|
||||||
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
|
-- KEYBOARD SHORTCUTS
|
||||||
-- ==============================================================================
|
-- ==============================================================================
|
||||||
|
|||||||
+2
-93
@@ -91,18 +91,7 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
// Menu close on nav click is now handled by scrollToSection() in utils._hs
|
||||||
* 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');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
// PREFERENCES & LANGUAGE
|
// PREFERENCES & LANGUAGE
|
||||||
@@ -265,16 +254,7 @@
|
|||||||
toast?.classList.remove('show');
|
toast?.classList.remove('show');
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
// Error toast close handled by hyperscript inline in error-toast.html
|
||||||
* 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');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
// HTMX EVENT HANDLERS
|
// HTMX EVENT HANDLERS
|
||||||
@@ -491,9 +471,7 @@
|
|||||||
*/
|
*/
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
initMenuSystem();
|
initMenuSystem();
|
||||||
initMenuCloseOnClick();
|
|
||||||
initPreferences();
|
initPreferences();
|
||||||
initErrorToastClose();
|
|
||||||
initHTMXHandlers();
|
initHTMXHandlers();
|
||||||
handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
|
handleLandscapeAccordions(); // Auto-open sidebar accordions in landscape mode
|
||||||
// Note: Scroll behavior now handled by hyperscript in index.html body tag
|
// Note: Scroll behavior now handled by hyperscript in index.html body tag
|
||||||
@@ -501,75 +479,6 @@
|
|||||||
// initScrollBehaviorJS() removed - hyperscript handleScroll() is preferred
|
// 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)
|
// HYPERSCRIPT-POWERED FEATURES (NO JS NEEDED)
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
<div id="error-toast" class="error-toast no-print" role="alert" aria-live="assertive" style="display: none;">
|
<div id="error-toast" class="error-toast no-print" role="alert" aria-live="assertive" style="display: none;">
|
||||||
<span class="error-icon">⚠️</span>
|
<span class="error-icon">⚠️</span>
|
||||||
<span id="error-message"></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>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|||||||
Reference in New Issue
Block a user