From a1284ca5a5a9711deef20bf0f0f1afbfda50a212 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Mon, 19 Jun 2023 21:32:17 +0200
Subject: [PATCH] Added comments

---
 js/navbar.js | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

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 <li> tag of the navbar_text-container
 var dropdownList = document.getElementById("navbar_text-container").children[0].children;
+//each <a> 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 <a> 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();
     }