forked from rebillar/site-accueil-insa
76 lines
No EOL
1.8 KiB
JavaScript
Executable file
76 lines
No EOL
1.8 KiB
JavaScript
Executable file
let sidenav = $("#menuSidenav");
|
|
let hamburger = $("#hamburger");
|
|
let backButton = $("#back-button");
|
|
|
|
let openedSidenavClass = 'sidenav-open';
|
|
let activeBackgroundClass = 'active-background';
|
|
|
|
/*
|
|
* Open navigation menu, change Hamburger icon to selected state
|
|
* and display the back button overlay over the page
|
|
*/
|
|
|
|
function openNav() {
|
|
sidenav.addClass(openedSidenavClass);
|
|
backButton.addClass(activeBackgroundClass);
|
|
enableHamburger();
|
|
}
|
|
|
|
|
|
/*
|
|
* Close navigation menu, change Hamburger icon back to default state
|
|
* and hide the back button overlay
|
|
*/
|
|
function closeNav() {
|
|
sidenav.removeClass(openedSidenavClass);
|
|
backButton.removeClass(activeBackgroundClass);
|
|
disableHamburger();
|
|
}
|
|
|
|
|
|
/*
|
|
* Toggle the navigation bar
|
|
*/
|
|
function toggleNav() {
|
|
if (sidenav.hasClass(openedSidenavClass)) {
|
|
closeNav();
|
|
} else {
|
|
openNav();
|
|
}
|
|
}
|
|
|
|
function disableHamburger() {
|
|
hamburger.removeClass("change-clic");
|
|
}
|
|
|
|
function enableHamburger() {
|
|
hamburger.addClass("change-clic");
|
|
}
|
|
|
|
/*
|
|
* Open navigation menu when swiping right (if not swiping on an image)
|
|
*/
|
|
var img = document.querySelector('.sidenav');
|
|
// Create a manager to manager the element
|
|
var manager = new Hammer.Manager(img, {touchAction: "auto"}); // enable the touch action to allow scrolling on the sidenav
|
|
// Create a recognizer
|
|
var Swipe = new Hammer.Swipe();
|
|
// Add the recognizer to the manager
|
|
manager.add(Swipe);
|
|
|
|
// Subscribe to the swipe event
|
|
manager.on('swipe', function(e) {
|
|
var direction = e.offsetDirection;
|
|
if (direction === 4) { // right
|
|
openNav();
|
|
} else if (direction === 2) { // left
|
|
closeNav();
|
|
}
|
|
});
|
|
|
|
// Animate hamburger on hover
|
|
hamburger.hover(function(){
|
|
hamburger.addClass("change-hover");
|
|
}, function(){
|
|
hamburger.removeClass("change-hover");
|
|
}); |