diff --git a/js/navbar.js b/js/navbar.js
index 7444a97..18ca89d 100644
--- a/js/navbar.js
+++ b/js/navbar.js
@@ -2,8 +2,11 @@
/* global variables */
/****************************************/
+//enterAnimation is a status linked to mouseenter/leave of the icon
var enterAnimation = false;
+//each
tag of the navbar_text-container
var dropdownList = document.getElementById("navbar_text-container").children[0].children;
+//each tag in the navbar
var aTagList = getNavbarTextContainer();
/****************************************/
@@ -18,7 +21,8 @@ var logoRotate = anime({
autoplay: false,
direction: 'normal',
update: function (anim) {
- //console.log(anim.progress+" : enter ? "+enterAnimation);
+ //at 10% progress the logo rotate at 90deg, so it is invisible
+ //At mouseenter we darken the logo, otherwise we set it to a normal color
if (anim.progress >= 10 && enterAnimation) {
document.getElementsByClassName("navbar_logo")[0].style.filter = "brightness(50%)";
}
@@ -32,22 +36,37 @@ var logoRotate = anime({
/* functions */
/****************************************/
+/**
+ * With a given display property and element, if the length
+ * of the given element is >1, set the [1] element's style to the given display
+ * @param {string} display
+ * @param {documentElement} element
+ */
function setDropdown(display, element) {
if (element.children.length > 1) {
+ //If length > 1, set the style to the given display
element.children[1].style.display = display;
}
}
+/**
+ * @returns the array of a tag in the navbar container
+ */
function getNavbarTextContainer() {
var returnAtag = [];
var container = document.getElementById("navbar_text-container");
+ //For each a tag we found in the text container, push the element to the return array
for (var aTag of container.children[0].children) {
returnAtag.push(aTag.children[0])
}
return returnAtag;
}
+/**
+ * reset every dropdown display to none
+ */
function resetNavbar() {
+ //For each dropdown found with the given classname, will set the display to none
for (dropdownClass of document.getElementsByClassName("navbar_dropdown")) {
dropdownClass.style.display = "none";
}
@@ -57,34 +76,45 @@ function resetNavbar() {
/* main */
/****************************************/
+//Mouse enter for the logo
document.getElementById("navbar_logo-container").addEventListener("mouseenter", function () {
+ //enterAnimation is now true (see update in logoRotate)
enterAnimation = true;
+ //Will play the animation and when finished set enterAnimation to false
logoRotate.play();
logoRotate.finished.then(() => {
enterAnimation = false;
})
});
+//Mouse leave for the logo
document.getElementById("navbar_logo-container").addEventListener("mouseleave", function () {
+ //enterAnimation is now false (see update in logoRotate)
enterAnimation = false;
logoRotate.reverse();
logoRotate.play();
+ //Will play the reversed animation and when finished set enterAnimation to true and and cancel the reverse
logoRotate.finished.then(() => {
logoRotate.reverse();
enterAnimation = true;
})
});
+//For each dropdownElement we add a click event
for (var dropdownElement of dropdownList) {
var dropdownLink = dropdownElement.children[0];
dropdownLink.addEventListener("click", function (e) {
- var dropdownLink = e.target.parentNode;
+ //We reset all navbar
resetNavbar();
+ //we get the parent node of the tag
+ var dropdownLink = e.target.parentNode;
setDropdown("block", dropdownLink);
});
}
+//For any click of the window
window.addEventListener('click', function (e) {
+ //clickState is set to 1 if the click is done outside any dropdownElement or the dropdown itself
var clickState = false;
for (dropdownClass of document.getElementsByClassName("navbar_dropdown")) {
clickState |= dropdownClass.contains(e.target);
@@ -92,6 +122,7 @@ window.addEventListener('click', function (e) {
for (aTag of aTagList) {
clickState |= aTag.contains(e.target);
}
+ //if the mouse is outside any aTag/dropdownClass we reset any navbar
if (!clickState) {
resetNavbar();
}