Skip to content
Snippets Groups Projects
Commit 038de5cf authored by alexisben's avatar alexisben
Browse files

merge sticky function to menu class

parent e962fca2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/js/theme/nav/mainMenu.js
+ 47
− 12
View file @ 038de5cf
import breakpoints from '../utils/breakpoints';
const CLASSES = {
mainMenuOpened: 'is-opened',
bodyOverlay: 'has-overlay',
scrollingDown: 'is-scrolling-down',
menusOpened: 'is-menu-opened',
sticky: 'is-sticky'
};
class MainMenu {
constructor () {
this.element = document.querySelector('nav[role="navigation"]');
constructor (selector) {
this.element = document.querySelector(selector);
this.menu = this.element.querySelector('.menu');
this.mainButton = this.element.querySelector('button');
this.dropdownsButtons = this.element.querySelectorAll('.has-children a[role="button"]');
this.isOpened = false;
this.isActive = false;
this.state = {
isOpened: false,
isActive: false,
previousScrollY: window.scrollY
};
this.listen();
}
......@@ -21,23 +32,47 @@ class MainMenu {
this.toggleDropdown(button);
});
});
['scroll', 'touchmove'].forEach(event => {
window.addEventListener(event, this.onScroll.bind(this));
});
}
resize () {
this.isActive = window.innerWidth <= breakpoints.md;
this.state.isActive = window.innerWidth <= breakpoints.md;
}
toggleMain () {
this.isOpened = !this.isOpened;
this.mainButton.setAttribute('aria-expanded', this.isOpened ? 'true' : 'false');
this.menu.classList.toggle('show');
document.body.classList.toggle('has-overlay');
this.isOpened = !this.state.isOpened;
this.mainButton.setAttribute('aria-expanded', this.state.isOpened);
this.menu.classList.toggle(CLASSES.mainMenuOpened);
document.body.classList.toggle(CLASSES.bodyOverlay);
}
toggleDropdown (button) {
const expanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', expanded ? 'false' : 'true');
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
}
onScroll () {
const offset = this.element.offsetHeight,
y = window.scrollY;
console.log(y > offset);
if (y > offset) {
this.element.classList.add(CLASSES.sticky);
} else {
this.element.classList.remove(CLASSES.sticky);
}
if (y > this.state.previousScrollY && y > offset) {
document.documentElement.classList.add(CLASSES.scrollingDown);
} else {
document.documentElement.classList.remove(CLASSES.scrollingDown);
}
this.state.previousScrollY = y;
}
}
export default new MainMenu();
export default new MainMenu('header[role="banner"]');
assets/js/theme/nav/responsive.js
+ 1
− 1
View file @ 038de5cf
const events = ['load', 'resize'];
let navBtn = document.querySelector('nav[role="navigation"] button'),
menuHeader = document.querySelector('.menu'),
bodyOverlay = document.querySelector('body'),
bodyOverlay = document.querySelector('body'), // document.body
dropdownBtns = document.querySelectorAll('.has-children a[role="button"]'),
breckpointMd = 768,
classMobile = 'show';
......
assets/js/theme/nav/stickyNav.js
+ 44
− 44
View file @ 038de5cf
const events = ['scroll', 'touchmove'];
let previousY = 0,
y = 0,
classSticky = 'is-sticky',
classScrollingDown = 'is-scrolling-down',
classMenuOpen = 'is-menu-open',
header = document.querySelector('header[role="banner"]'),
offset = header.offsetHeight,
dropdowns = header.querySelectorAll('[data-bs-toggle="dropdown"]'),
menu = header.querySelector('.menu');
// const events = ['scroll', 'touchmove'];
// let previousY = 0,
// y = 0,
// classSticky = 'is-sticky',
// classScrollingDown = 'is-scrolling-down',
// classMenuOpen = 'is-menu-open',
// header = document.querySelector('header[role="banner"]'),
// offset = header.offsetHeight,
// dropdowns = header.querySelectorAll('[data-bs-toggle="dropdown"]'),
// menu = header.querySelector('.menu');
dropdowns.forEach((dropdown) => {
dropdown.addEventListener('hidden.bs.dropdown', () => {
if (!header.querySelector('[aria-expanded="true"]')) {
document.documentElement.classList.remove(classMenuOpen);
}
});
dropdown.addEventListener('show.bs.dropdown', () => {
document.documentElement.classList.add(classMenuOpen);
});
});
// // dropdowns.forEach((dropdown) => {
// // dropdown.addEventListener('hidden.bs.dropdown', () => {
// // if (!header.querySelector('[aria-expanded="true"]')) {
// // document.documentElement.classList.remove(classMenuOpen);
// // }
// // });
// // dropdown.addEventListener('show.bs.dropdown', () => {
// // document.documentElement.classList.add(classMenuOpen);
// // });
// // });
menu.addEventListener('show.bs.collapse', () => {
document.documentElement.classList.add(classMenuOpen);
});
// // menu.addEventListener('show.bs.collapse', () => {
// // document.documentElement.classList.add(classMenuOpen);
// // });
menu.addEventListener('hide.bs.collapse', () => {
document.documentElement.classList.remove(classMenuOpen);
});
// // menu.addEventListener('hide.bs.collapse', () => {
// // document.documentElement.classList.remove(classMenuOpen);
// // });
events.forEach((event) => {
window.addEventListener(event, () => {
y = window.scrollY;
// events.forEach((event) => {
// window.addEventListener(event, () => {
// y = window.scrollY;
if (y > offset) {
header.classList.add(classSticky);
} else {
header.classList.remove(classSticky);
}
// if (y > offset) {
// header.classList.add(classSticky);
// } else {
// header.classList.remove(classSticky);
// }
if (y > previousY && y > offset) {
document.documentElement.classList.add(classScrollingDown);
// document.documentElement.style.setProperty(scrollMarginTop, '100px');
} else {
document.documentElement.classList.remove(classScrollingDown);
// document.documentElement.style.setProperty(scrollMarginTop, '200px');
}
// if (y > previousY && y > offset) {
// document.documentElement.classList.add(classScrollingDown);
// // document.documentElement.style.setProperty(scrollMarginTop, '100px');
// } else {
// document.documentElement.classList.remove(classScrollingDown);
// // document.documentElement.style.setProperty(scrollMarginTop, '200px');
// }
previousY = y;
});
});
// previousY = y;
// });
// });
assets/sass/_theme/_configuration.sass
+ 1
− 0
View file @ 038de5cf
......@@ -65,6 +65,7 @@ $grid-gutter-sm: 20px
$zindex-nav-accessibility: 1010 !default
$zindex-stretched-link: 2 !default
$zindex-header: 10 !default
$zindex-body-overlay: 9 !default
// Header
$header-color: $main-color !default
......
assets/sass/_theme/design-system/layout.sass
+ 1
− 0
View file @ 038de5cf
......@@ -19,6 +19,7 @@ body
display: block
inset: 82px 0 0 0
position: fixed
z-index: $zindex-body-overlay
main
// Create padding-top for fixed header under md
......
assets/sass/_theme/design-system/nav.sass
+ 29
− 28
View file @ 038de5cf
......@@ -69,35 +69,36 @@
span
font-size: px2rem(14)
&.show
flex-grow: 1
display: block
a
text-decoration: none
.nav-level-1
li
a
padding: 1rem 0
> li:not(:last-child)
border-bottom: 1px solid #adb5bd
li.has-children
a[role="button"]
align-items: center
display: flex
justify-content: space-between
@include icon("caret-bottom", after)
&::after
font-size: .375rem
line-height: 1
.dropdown-menu
display: none
padding-top: 0
a[aria-expanded=true]
@include icon("caret-top", after)
@include media-breakpoint-down(md)
&.is-opened
flex-grow: 1
display: block
a
text-decoration: none
.nav-level-1
li
a
padding: 1rem 0
> li:not(:last-child)
border-bottom: 1px solid #adb5bd
li.has-children
a[role="button"]
align-items: center
display: flex
justify-content: space-between
@include icon("caret-bottom", after)
&::after
font-size: .375rem
line-height: 1
.dropdown-menu
display: none
padding-top: 0
a[aria-expanded=true]
@include icon("caret-top", after)
+ .dropdown-menu
display: block
+ .dropdown-menu
display: block
.share
display: flex
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment