Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Navbar fully functionnal with dropdown. Added getNavbarTextContainer(), resetNavbar() functions and dropdownList, aTagList variables

Browse source
This commit is contained in:
Yohan Boujon 2023-06-19 21:05:34 +02:00
parent d072c19c8f
commit da3809cd35
1 changed files with 68 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
js/navbar.js
View file

@ -1,4 +1,14 @@
var enterAnimation; /****************************************/
/* global variables */
/****************************************/
var enterAnimation = false;
var dropdownList = document.getElementById("navbar_text-container").children[0].children;
var aTagList = getNavbarTextContainer();
/****************************************/
/* animjs */
/****************************************/
var logoRotate = anime({ var logoRotate = anime({
targets: '.navbar_logo', targets: '.navbar_logo',
@ -7,19 +17,46 @@ var logoRotate = anime({
easing: 'easeOutExpo', easing: 'easeOutExpo',
autoplay: false, autoplay: false,
direction: 'normal', direction: 'normal',
update: function(anim){ update: function (anim) {
console.log(anim.progress+" : enter ? "+enterAnimation); //console.log(anim.progress+" : enter ? "+enterAnimation);
if(anim.progress >= 10 && enterAnimation) if (anim.progress >= 10 && enterAnimation) {
{
document.getElementsByClassName("navbar_logo")[0].style.filter = "brightness(50%)"; document.getElementsByClassName("navbar_logo")[0].style.filter = "brightness(50%)";
} }
if(anim.progress <= 10 && !enterAnimation) if (anim.progress <= 10 && !enterAnimation) {
{
document.getElementsByClassName("navbar_logo")[0].style.filter = ""; document.getElementsByClassName("navbar_logo")[0].style.filter = "";
} }
} }
}); });
/****************************************/
/* functions */
/****************************************/
function setDropdown(display, element) {
if (element.children.length > 1) {
element.children[1].style.display = display;
}
}
function getNavbarTextContainer() {
var returnAtag = [];
var container = document.getElementById("navbar_text-container");
for (var aTag of container.children[0].children) {
returnAtag.push(aTag.children[0])
}
return returnAtag;
}
function resetNavbar() {
for (dropdownClass of document.getElementsByClassName("navbar_dropdown")) {
dropdownClass.style.display = "none";
}
}
/****************************************/
/* main */
/****************************************/
document.getElementById("navbar_logo-container").addEventListener("mouseenter", function () { document.getElementById("navbar_logo-container").addEventListener("mouseenter", function () {
enterAnimation = true; enterAnimation = true;
logoRotate.play(); logoRotate.play();
@ -29,7 +66,6 @@ document.getElementById("navbar_logo-container").addEventListener("mouseenter",
}); });
document.getElementById("navbar_logo-container").addEventListener("mouseleave", function () { document.getElementById("navbar_logo-container").addEventListener("mouseleave", function () {
console.log("leave")
enterAnimation = false; enterAnimation = false;
logoRotate.reverse(); logoRotate.reverse();
logoRotate.play(); logoRotate.play();
@ -38,3 +74,25 @@ document.getElementById("navbar_logo-container").addEventListener("mouseleave",
enterAnimation = true; enterAnimation = true;
}) })
}); });
for (var dropdownElement of dropdownList) {
var dropdownLink = dropdownElement.children[0];
dropdownLink.addEventListener("click", function (e) {
var dropdownLink = e.target.parentNode;
resetNavbar();
setDropdown("block", dropdownLink);
});
}
window.addEventListener('click', function (e) {
var clickState = false;
for (dropdownClass of document.getElementsByClassName("navbar_dropdown")) {
clickState |= dropdownClass.contains(e.target);
}
for (aTag of aTagList) {
clickState |= aTag.contains(e.target);
}
if (!clickState) {
resetNavbar();
}
});