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

Latest revision as of 16:42, 12 December 2020

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

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

       function checkScrollPos() {
           var footerTop = document.getElementById("footerWrapper").getBoundingClientRect().top;
           var scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
           let scrollWrapper = document.querySelector('.scroll-wrapper');
           if (scrollbarBottom >= footerTop) {
               if (scrollWrapper.getAttribute("hiddenScroll") == "false") scrollWrapper.setAttribute("hiddenScroll", "true");
           } else {
               if (scrollWrapper.getAttribute("hiddenScroll") == "true") scrollWrapper.setAttribute("hiddenScroll", "false");
           }
       }

       function checkBackToTopPos() {
           if ($(window).scrollTop() > 1000) {
               $('#backtotop-wrapper').addClass('scrolled')
           } else $('#backtotop-wrapper').removeClass('scrolled')
       }

       $(document).ready(function() {
           $('#backtotop-wrapper').on('click', function() {
               $('html, body').animate({
                   'scrollTop': $('body').offset().top
               }, 2000);
           });
       });

       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");
               }
           }
       }

       //---------------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("popup-next").classList.remove(currentChoice);
           document.querySelector(".hamb-wrapper").classList.remove("invisible");
           currentChoice = null;
           const myNode = document.getElementById("appendable");
           document.getElementById("bubbles-to-close").setAttribute("open", "false");
           while (myNode.firstChild) {
               myNode.removeChild(myNode.lastChild);
           }
           let node = document.querySelector('.center-link');
           document.querySelector('#popup-next .choices').removeChild(node)
           checkNavbarPos();

       }

       function openSecBubble(link) {
           link.classList.add("active");
           document.getElementById("popup-next").classList.remove(currentChoice);
           currentChoice = link.id;
           document.getElementById("popup-next").classList.add("active");
           var items = menuItems[currentChoice];
           document.getElementById("popup-next").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 (link.id == 'wl') {
                   node.classList.add(counter < 3 ? 'right-align' : 'left-align');
                   counter++;
               }
               node.appendChild(nodeLink);
               document.getElementById("appendable").appendChild(node);
           }
           resizeBubble(link.id);
       }

       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', initializeSecondBubble);
       }
       for (let link of menuLinks) {
           link.addEventListener('click', function() {
               for (let linkRecursive of menuLinks) linkRecursive.removeEventListener('mouseover', initializeSecondBubble);
               for (let linkRecursive of menuLinks) linkRecursive.addEventListener('click', initializeSecondBubble);
               link.initializeSecondBubble;
               setTimeout(function() {
                   for (let linkRecursive of menuLinks) linkRecursive.addEventListener('mouseover', initializeSecondBubble);
               }, 3000)
           })
       }

       function initializeSecondBubble() {
           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);
                   }
               }
           }

           if (document.querySelector('#popup-main').classList.contains('active')) openSecBubble(this)
       }

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

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

       function resizeBubble(type = "project") {
           $(function() {
               var elementWidth = $("#appendable").width();
               var elementHeight = $("#appendable").height();
               var resizingConstant = (function() {
                   if (type == "hp") {
                       return 1.5
                   } else if (type == "team") {
                       return 1.3
                   } else if (type == "project") {
                       return 1.45
                   } else if (type == "dl") {
                       return 1.6
                   } else if (type == "wl") {
                       return 1.2
                   }
               })();
               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: "https://2020.igem.org/Team:Vilnius-Lithuania/Description"
               },
               imp: {
                   name: "Implementation",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Implementation",
               },
               con: {
                   name: "Contribution",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Contribution",
               },
               gd: {
                   name: "Graphic Design",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Graphic_Design"
               },
               aw: {
                   name: "Awards",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Awards"
               }
           },
           wl: {
               des: {
                   name: "Design",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Design",
               },
               eng: {
                   name: "Engineering",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Engineering",
               },
               res: {
                   name: "Results",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Results",
               },
               par: {
                   name: "Parts",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Parts",
               },
               exp: {
                   name: "Experiments",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Experiments",
               },

               saf: {
                   name: "Safety",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Safety",
               }
           },
           dl: {
               mod: {
                   name: "Model",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Model",
               },
               sof: {
                   name: "Software",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Software",
               },
               har: {
                   name: "Hardware",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Hardware",
               },
               mes: {
                   name: "Measurement",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Measurement",
               }
           },
           hp: {
               int: {
                   name: "Integrated
Human Practices",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Human_Practices",
               },
               col: {
                   name: "Education &
Public Engagement",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Education",
               },
               arqr: {
                   name: "The 6th SynBio Sense",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/The_6th_SynBio_Sense",

               }
           },
           team: {
               members: {
                   name: "Members",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Team",
               },
               coll: {
                   name: "Collaborations",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Collaborations",
               },
               att: {
                   name: "Attributions",
                   link: "https://2020.igem.org/Team:Vilnius-Lithuania/Attributions",
               }
           }
       }