Difference between revisions of "Template:Vilnius-Lithuania/JS/menuOverlay"

Revision as of 20:18, 19 October 2020

//---------------Checking if the page is content page---------------

       var textSection = null;
       var navbar = document.getElementById("navbar");
       window.addEventListener('load', function() {
           textSection = $(".elevate-navbar");
       })
       window.addEventListener('scroll', function() {
           updateScrollbar();
           checkNavbarPos();
       });

       function checkNavbarPos() {
           if (textSection != null) {
               var navbarTop = navbar.getBoundingClientRect().top;
               var mainTagTop = textSection.getBoundingClientRect().top;
               if (navbarTop >= mainTagTop) {
                   if (document.getElementById("bubbles-to-close").getAttribute("open") != true) navbar.setAttribute("onText", "true");
               } else {
                   navbar.setAttribute("onText", "false");
               }
           }
           var footerTop = document.getElementById("footerWrapper").getBoundingClientRect().top;
           var scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
           if (scrollbarBottom >= footerTop) {
               if (document.getElementById("scrollbar-container").getAttribute("hiddenScroll") == "false") {
                   document.getElementById("scrollbar-container").setAttribute("hiddenScroll", "true");
               }
           } else {
               if (document.getElementById("scrollbar-container").getAttribute("hiddenScroll") == "true") {
                   document.getElementById("scrollbar-container").setAttribute("hiddenScroll", "false");
               }
           }
       }

       //---------------Scrollbar height---------------
       function updateScrollbar() {
           var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
           var height = document.documentElement.scrollHeight - window.innerHeight;;
           var scrolled = (winScroll / height) * 100;
           document.getElementById("scrollbar").style.height = scrolled + "%";
       }

       //---------------Closing the menu and returning to default values---------------
       function closeMenu() {
           var toggleable = document.querySelectorAll('.toggleable');
           for (let item of toggleable) {
               item.classList.remove("active");
           }
           document.getElementById("fixedOverlay").setAttribute("bg", "none");
           document.getElementById("appendable").classList.remove(currentChoice);
           document.querySelector(".hamb-wrapper").classList.remove("invisible");
           currentChoice = null;
           const myNode = document.getElementById("appendable");
           while (myNode.firstChild) {
               myNode.removeChild(myNode.lastChild);
           }
           document.getElementById("bubbles-to-close").setAttribute("open", "false");
           checkNavbarPos();

       }

       function openSecBubble(link) {
           link.classList.add("active");
           document.getElementById("appendable").classList.remove(currentChoice);
           currentChoice = link.id;
           document.getElementById("popup-next").classList.add("active");
           var items = menuItems[currentChoice];
           document.getElementById("appendable").classList.add(currentChoice)
           let counter = 0;
           for (const [key, value] of Object.entries(menuItems[currentChoice])) {
               var node = document.createElement("li");
               var nodeLink = document.createElement("a");
               nodeLink.href = value.link;
               nodeLink.innerHTML = value.name;
               if (currentChoice = "project") {
                   counter++;
                   if (counter <= 5) node.classList.add('right-align');
               }
               node.appendChild(nodeLink);
               document.getElementById("appendable").appendChild(node);
           }
           resizeBubble();
       }

       var openMenuEls = document.getElementsByClassName("menu-wrapper");
       for (let el of openMenuEls) {
           //---------------Clicking on menu sandwich/close button---------------
           el.addEventListener('click', function() {
               //---------------If menu is open and close button is clicked, close menu---------------
               if (this.classList.contains("active")) {
                   closeMenu();
               } else {
                   document.getElementById("popup-main").classList.add("active");
                   this.classList.add("active");
                   document.querySelector(".hamb-wrapper").classList.add("invisible");
                   fxdOv = document.getElementById("fixedOverlay");
                   fxdOv.setAttribute("bg", "dark");
                   document.getElementById("navbar").setAttribute("onText", "false");
                   document.getElementById("bubbles-to-close").setAttribute("open", "true");
                   if (fxdOv.classList.length != 0) {
                       link = fxdOv.classList[0]
                       openSecBubble(document.getElementById(link))
                   }
               }
           })
       }
       var currentChoice;
       var menuLinks = document.getElementsByClassName("main-choice");
       for (let link of menuLinks) {
           link.addEventListener('mouseover', function() {
               for (let lk of menuLinks) {
                   if (lk.classList.contains("active")) {
                       lk.classList.remove("active");
                       const myNode = document.getElementById("appendable");
                       while (myNode.firstChild) {
                           myNode.removeChild(myNode.lastChild);
                       }
                   }
               }
               openSecBubble(link)
           })
       }

       $('#appendable li a').on("click", function() {
           closeMenu();
       })

       $(window).resize(function() {
           resizeBubble();
       });

       function resizeBubble() {
           $(function() {
               var elementWidth = $("#appendable").width();
               var elementHeight = $("#appendable").height();
               var resizingConstant = (function() {
                   if (currentChoice == "hp") {
                       return 1.4
                   } else if (currentChoice == "team") {
                       return 1.7
                   } else if (currentChoice == "parts") {
                       return 1.45
                   } else {
                       return 1.15
                   }
               })();
               if (elementHeight > elementWidth) {
                   $("#bubbles #popup-next").css("height", elementHeight * resizingConstant);
                   $("#bubbles #popup-next").css("width", elementHeight * resizingConstant);
               } else {
                   $("#bubbles #popup-next").css("height", elementWidth * resizingConstant);
                   $("#bubbles #popup-next").css("width", elementWidth * resizingConstant);
               }
           })
       }
       document.getElementById("bubbles-to-close").addEventListener('click', function() {
           var isOpen = document.getElementById("popup-main");
           if (isOpen.classList.contains("active")) {
               closeMenu();
           }
       })
       var menuItems = {
           project: {
               desc: {
                   name: "Description",
                   link: "./Description"
               },
               imp: {
                   name: "Implementation",
                   link: "./Implementation",
               },
               des: {
                   name: "Design",
                   link: "./Design",
               },
               exp: {
                   name: "Experiments",
                   link: "./Experiments",
               },
               res: {
                   name: "Results",
                   link: "./Results",
               },
               eng: {
                   name: "Engineering",
                   link: "./Engineering",
               },
               pof: {
                   name: "Proof of Concept",
                   link: "./ProofOfConcept",
               },
               mod: {
                   name: "Model",
                   link: "./Model",
               },
               sof: {
                   name: "Software",
                   link: "./Software",
               },
               con: {
                   name: "Contribution",
                   link: "./Contribution",
               }
           },
           parts: {
               par: {
                   name: "Parts",
                   link: "./Parts",
               },
               col: {
                   name: "Parts Collection",
                   link: "./PartsCollection",
               }
           },
           hp: {
               int: {
                   name: "Integrated
Human Practices",
                   link: "./Integrated",
               },
               col: {
                   name: "Education &
Public Engagement",
                   link: "./Education",
               }
           },
           team: {
               members: {
                   name: "Members",
                   link: "./Team",
               },
               coll: {
                   name: "Collaborations",
                   link: "./Collaborations",
               },
               att: {
                   name: "Attributions",
                   link: "./Attributions",
               }
           }
       }