keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Enhance navigation components with scroll control and styling updates
Deploy to Dreamhost / build (push) Successful in 36s
Details
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-08-29 10:46:03 -05:00
parent b9bbf615c9
commit 9ad4763f8b
4 changed files with 102 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/modules/Navigation.js
+93 -27
View File
@@ -54,6 +54,12 @@ class Navigation {
*/
#slidingViewportEnabled = false;
/**
* Function reference for preventing scroll (needed to remove listener)
* @type {Function}
*/
#preventScrollHandler = (e) => e.preventDefault();
constructor(mobileMenuButtonId, dropDownClass, subMenuLinkClass = "sub-menu-item") {
@@ -62,7 +68,7 @@ class Navigation {
this.#subMenuElementIdentifier = subMenuLinkClass;
this.handleEscapeKey();
// Initialize sliding viewport immediately if styles are detected
this.initializeSlidingViewport();
}
@@ -115,10 +121,17 @@ class Navigation {
*/
toggleMobileMenu(event, button) {
this.toggleAriaExpanded(event, button);
const isExpanded = button.getAttribute("aria-expanded") === "true";
if (!isExpanded) {
if (isExpanded) {
// Prevent scroll when menu is open
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
} else {
// Re-enable scroll when menu is closed
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
// Reset sliding navigation when menu is closed
if (this.#slidingViewportEnabled) {
this.resetSlidingNavigation();
@@ -168,16 +181,27 @@ class Navigation {
// Note: cannot group negation -1*-1*-1 != -(1*1*1)
const isNull = event.relatedTarget == null;
const isNotMenuItem = !isNull && !event.relatedTarget.classList.contains("menu-vdi__toggle")
&& !event.relatedTarget.classList.contains("sub-menu-item")
&& !event.relatedTarget.classList.contains("sub-menu-item")
&& !event.relatedTarget.classList.contains("menu-vdi__link")
&& !event.relatedTarget.classList.contains("menu-vdi__back"); // Don't close on back button click
if (isNull || isNotMenuItem)
if (isNull || isNotMenuItem) {
button.setAttribute("aria-expanded", false);
// Re-enable scroll when menu is closed
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
}
}, true)
}
}
/**
* Handles escape behaviour
* Closes all dropdown when user hits
* escape key
*
* @link {https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event}
*/
/**
* Handles escape behaviour
* Closes all dropdown when user hits
@@ -190,7 +214,11 @@ class Navigation {
if (event.key === "Escape") {
this.#mobileMenuButton.setAttribute("aria-expanded", false);
this.closeAllDropDowns();
// Re-enable scroll when menu is closed
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
// Reset sliding navigation on escape
if (this.#slidingViewportEnabled) {
this.resetSlidingNavigation();
@@ -265,7 +293,7 @@ class Navigation {
initializeSlidingViewport() {
// Check if we should enable sliding viewport (could be based on screen size, user preference, etc.)
this.#slidingViewportEnabled = this.shouldEnableSlidingViewport();
if (this.#slidingViewportEnabled) {
console.log('Sliding viewport enabled, setting up structure');
this.setupSlidingViewportStructure();
@@ -282,30 +310,30 @@ class Navigation {
// Check if sliding viewport styles are loaded by testing if the CSS rule exists
// This allows CSS-based switching between navigation styles
const isMobile = window.innerWidth <= 1000; // 62.5rem converted to px
if (!isMobile) return false;
// Check if sliding viewport CSS is loaded by testing a specific rule
// We need to test the element within the proper context (.nav-main)
try {
const navMain = document.querySelector('.nav-main');
if (!navMain) return false;
const testElement = document.createElement('div');
testElement.className = 'menu-vdi--sliding';
testElement.style.position = 'absolute';
testElement.style.visibility = 'hidden';
testElement.style.height = '1px';
testElement.style.width = '1px';
navMain.appendChild(testElement);
// Get computed styles to check if sliding viewport CSS is active
const computedStyle = window.getComputedStyle(testElement);
const hasOverflowHidden = computedStyle.overflow === 'hidden';
navMain.removeChild(testElement);
return hasOverflowHidden;
} catch (error) {
console.warn('Error detecting sliding viewport styles:', error);
@@ -347,7 +375,7 @@ class Navigation {
// Move existing menu items to main level
const existingItems = Array.from(menuContainer.children);
console.log('Moving', existingItems.length, 'existing items to main level');
existingItems.forEach(item => {
mainLevel.appendChild(item);
});
@@ -357,7 +385,7 @@ class Navigation {
viewport.appendChild(mainLevel);
menuContainer.appendChild(viewport);
console.log('Sliding viewport structure complete');
}
@@ -367,16 +395,16 @@ class Navigation {
*/
setupSlidingClickHandlers(level) {
const parentButtons = level.querySelectorAll('.menu-vdi__toggle');
parentButtons.forEach(button => {
button.addEventListener('click', (event) => {
if (this.#slidingViewportEnabled) {
event.preventDefault();
event.stopPropagation();
const parentItem = button.closest('.menu-vdi__item--parent');
const submenu = parentItem.querySelector('.menu-vdi__submenu');
if (submenu) {
this.navigateToLevel(button.textContent.trim(), submenu);
}
@@ -415,13 +443,13 @@ class Navigation {
// Clone and add submenu items
const submenuItems = submenuElement.cloneNode(true);
submenuItems.className = 'menu-vdi__level-items';
// Convert submenu items to level items and ensure proper visibility
const items = submenuItems.querySelectorAll('.menu-vdi__item');
items.forEach(item => {
// Remove any nested classes that don't apply to sliding mode
item.classList.remove('menu-vdi__item--child', 'menu-vdi__item--grandchild');
// Handle nested items if they exist
const nestedToggle = item.querySelector('.menu-vdi__toggle');
if (nestedToggle) {
@@ -494,7 +522,7 @@ class Navigation {
// Animate back to previous level
this.animateToLevel(this.#currentLevel);
// Ensure menu stays open after back navigation
setTimeout(() => {
if (this.#mobileMenuButton.getAttribute("aria-expanded") === "false") {
@@ -523,17 +551,17 @@ class Navigation {
resetSlidingNavigation() {
const menuContainer = document.getElementById('menu-container');
if (!menuContainer) return;
if (this.#slidingViewportEnabled) {
this.#currentLevel = 0;
this.#navigationStack = [];
const viewport = document.querySelector('.menu-vdi__viewport');
if (viewport) {
// Remove all levels except main
const levels = viewport.querySelectorAll('.menu-vdi__level:not(.menu-vdi__level--main)');
levels.forEach(level => level.remove());
// Reset position
this.animateToLevel(0);
}
@@ -564,13 +592,51 @@ class Navigation {
menuContainer.appendChild(item);
});
}
// Remove viewport structure
viewport.remove();
}
console.log('Sliding structure cleaned up');
}
/**
* Disable scroll on the page
* Prevents scrolling in all directions
*/
disableScroll() {
try {
// Apply overflow hidden to both html and body for better compatibility
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
// Prevent touch scroll on mobile devices
if (this.#preventScrollHandler) {
document.addEventListener("touchmove", this.#preventScrollHandler, { passive: false });
}
} catch (error) {
console.warn("Error disabling scroll:", error);
}
}
/**
* Enable scroll on the page
* Restores normal scrolling behavior
*/
enableScroll() {
try {
// Restore overflow behavior
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
// Re-enable touch scroll on mobile devices
if (this.#preventScrollHandler) {
document.removeEventListener("touchmove", this.#preventScrollHandler);
}
} catch (error) {
console.warn("Error enabling scroll:", error);
}
}
}
export default Navigation;