host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit header navigation (main navigation menu)

Browse source
This commit is contained in:
Paul Nicoué 2022-06-09 17:30:38 +02:00
parent 9bda79a1d5
commit e90e57ff02
6 changed files with 186 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

76
assets/js/app.js
View file

@ -25,8 +25,12 @@ let scrollOffset = 0;
// NAVIGATION MENU ANIMATION //
const mainNavBtn = document.querySelector('.header-bar__nav-button');
const mainNavMenu = document.querySelector('.header-bar__nav-menu');
const headerNavBtn = document.querySelector('.header-bar__nav-button');
const headerNavMenu = document.querySelector('.header-bar__nav-menu');
const touchPosition = {
initialX: null,
initialY: null
};
// ----------------------------------------------------------------------------
// UTILS
@ -250,17 +254,65 @@ function toggleHeaderBar() {
// NAVIGATION MENU ANIMATION //
// Show main navigation menu on button click event
function showMainNavMenu() {
if (mainNavBtn && mainNavMenu) {
mainNavBtn.addEventListener('click', function(e) {
mainNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
mainNavMenu.classList.toggle('header-bar__nav-menu--visible');
// document.body.classList.toggle('body--hidden-overflow-y');
});
// Toggle header navigation
function toggleHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
document.body.classList.toggle('body--hidden-overflow-y');
}
}
// Close header navigation
function closeHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
headerNavMenu.classList.remove('header-bar__nav-menu--visible');
document.body.classList.remove('body--hidden-overflow-y');
}
}
// Toggle header navigation on button click event
function toggleHeaderNavOnClick() {
headerNavBtn.addEventListener('click', toggleHeaderNav);
}
// Close header navigation on document click event
function closeHeaderNavOnClick() {
document.addEventListener('click', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible')) {
if (!headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
closeHeaderNav(e);
}
}
});
}
// Close header navigation on touchstart and touchmove events (swipe right)
function closeHeaderNavOnSwipe() {
headerNavMenu.addEventListener('touchstart', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX === null && touchPosition.initialY === null) {
touchPosition.initialX = event.touches[0].clientX;
touchPosition.initialY = event.touches[0].clientY;
}
}, {passive: true});
headerNavMenu.addEventListener('touchmove', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX !== null && touchPosition.initialY !== null) {
touchPosition.currentX = event.touches[0].clientX;
touchPosition.currentY = event.touches[0].clientY;
touchPosition.diffX = touchPosition.initialX - touchPosition.currentX;
touchPosition.diffY = touchPosition.initialY - touchPosition.currentY;
if (Math.abs(touchPosition.diffX) > Math.abs(touchPosition.diffY)) {
if (touchPosition.diffX < 0) {
closeHeaderNav(e);
}
}
touchPosition.initialX = null;
touchPosition.initialY = null;
}
}, {passive: true});
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -291,4 +343,6 @@ document.addEventListener('scroll', function() {
// NAVIGATION MENU ANIMATION //
showMainNavMenu();
toggleHeaderNavOnClick();
closeHeaderNavOnClick();
closeHeaderNavOnSwipe();