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

m
 
(55 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
//---------------Checking if the page is content page---------------
 
//---------------Checking if the page is content page---------------
−
var textSection = null;
+
        var textSection = null;
−
window.addEventListener('load', function(){textSection = document.getElementById("section-text")})
+
        var navbar = document.getElementById("navbar");
−
 
+
        window.addEventListener('load', function() {
−
 
+
            textSection = document.querySelector('.elevate-navbar');
−
window.addEventListener('scroll',function() {
+
            checkScrollPos();
 +
            checkBackToTopPos();
 +
        })
 +
        window.addEventListener('scroll', function() {
 
             updateScrollbar();
 
             updateScrollbar();
 
             checkNavbarPos();
 
             checkNavbarPos();
−
              
+
             checkScrollPos();
−
})
+
            checkBackToTopPos();
−
function checkNavbarPos(){
+
        });
−
          if(textSection != null){
+
 
−
                    var navbarTop = document.getElementById("navbar").getBoundingClientRect().top;
+
        function checkScrollPos() {
−
                    var mainTagTop = textSection.getBoundingClientRect().top;
+
−
                    if(navbarTop >= mainTagTop){
+
−
                            document.getElementById("navbar").setAttribute("onText", "true");
+
−
                    } else {
+
−
                            document.getElementById("navbar").setAttribute("onText", "false");
+
−
                    }
+
−
            }
+
 
             var footerTop = document.getElementById("footerWrapper").getBoundingClientRect().top;
 
             var footerTop = document.getElementById("footerWrapper").getBoundingClientRect().top;
 
             var scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
 
             var scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
−
             if(scrollbarBottom >= footerTop){
+
            let scrollWrapper = document.querySelector('.scroll-wrapper');
−
                    document.getElementById("scrollbar-container").setAttribute("hidden", true);
+
             if (scrollbarBottom >= footerTop) {
−
                    } else {
+
                if (scrollWrapper.getAttribute("hiddenScroll") == "false") scrollWrapper.setAttribute("hiddenScroll", "true");
−
                            document.getElementById("scrollbar-container").setAttribute("hidden", false);
+
            } else {
−
                    }
+
                if (scrollWrapper.getAttribute("hiddenScroll") == "true") scrollWrapper.setAttribute("hiddenScroll", "false");
−
}
+
            }
 +
        }
  
−
//---------------Scrollbar height---------------
+
        function checkBackToTopPos() {
−
function updateScrollbar() {
+
            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 winScroll = document.body.scrollTop || document.documentElement.scrollTop;
−
             var height = document.documentElement.scrollHeight - window.innerHeight;
+
             var height = document.documentElement.scrollHeight - window.innerHeight;;
 
             var scrolled = (winScroll / height) * 100;
 
             var scrolled = (winScroll / height) * 100;
 
             document.getElementById("scrollbar").style.height = scrolled + "%";
 
             document.getElementById("scrollbar").style.height = scrolled + "%";
−
}
+
        }
  
−
//---------------Closing the menu and returning to default values---------------
+
        //---------------Closing the menu and returning to default values---------------
−
function closeMenu(){
+
        function closeMenu() {
−
        var toggleable = document.querySelectorAll('.toggleable');
+
            var toggleable = document.querySelectorAll('.toggleable');
−
        for (let item of toggleable) {
+
            for (let item of toggleable) {
−
                item.classList.remove("active");
+
                item.classList.remove("active");
−
        }
+
            }
−
        document.getElementById("fixedOverlay").setAttribute("bg", "none");
+
            document.getElementById("fixedOverlay").setAttribute("bg", "none");
−
        document.getElementById("appendable").classList.remove(currentChoice);
+
            document.getElementById("popup-next").classList.remove(currentChoice);
−
        currentChoice = null;
+
            document.querySelector(".hamb-wrapper").classList.remove("invisible");
−
        const myNode = document.getElementById("appendable");
+
            currentChoice = null;
−
        while (myNode.firstChild) {
+
            const myNode = document.getElementById("appendable");
−
                myNode.removeChild(myNode.lastChild);
+
            document.getElementById("bubbles-to-close").setAttribute("open", "false");
−
        }
+
            while (myNode.firstChild) {
−
        document.getElementById("bubbles-to-close").setAttribute("open", "false");
+
                myNode.removeChild(myNode.lastChild);
−
        checkNavbarPos();
+
            }
−
}
+
            let node = document.querySelector('.center-link');
−
function openSecBubble(link){
+
            document.querySelector('#popup-next .choices').removeChild(node)
−
  link.classList.add("active");
+
            checkNavbarPos();
−
  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)
+
−
  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;
+
−
        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---------------
+
        function openSecBubble(link) {
−
      el.addEventListener('click', function() {
+
            link.classList.add("active");
−
            //---------------If menu is open and close button is clicked, close menu---------------
+
            document.getElementById("popup-next").classList.remove(currentChoice);
−
            if (this.classList.contains("active")) {
+
            currentChoice = link.id;
−
                  closeMenu();
+
            document.getElementById("popup-next").classList.add("active");
−
            } else {
+
            var items = menuItems[currentChoice];
−
                  document.getElementById("popup-main").classList.add("active");
+
            document.getElementById("popup-next").classList.add(currentChoice)
−
                  this.classList.add("active");
+
            let counter = 0;
−
                  fxdOv = document.getElementById("fixedOverlay");
+
            for (const [key, value] of Object.entries(menuItems[currentChoice])) {
−
                  fxdOv.setAttribute("bg", "dark");
+
                var node = document.createElement("li");
−
                  document.getElementById("navbar").setAttribute("onText", "false");
+
                var nodeLink = document.createElement("a");
−
                  document.getElementById("bubbles-to-close").setAttribute("open", "true");
+
                nodeLink.href = value.link;
−
                  if(fxdOv.classList.length != 0){
+
                nodeLink.innerHTML = value.name;
−
                          console.log("not the main page")
+
                if (link.id == 'wl') {
−
                          link = fxdOv.classList[0]
+
                    node.classList.add(counter < 3 ? 'right-align' : 'left-align');
−
                          openSecBubble(document.getElementById(link))
+
                    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 currentChoice;
−
var menuLinks = document.getElementsByClassName("main-choice");
+
        var menuLinks = document.getElementsByClassName("main-choice");
−
for (let link of menuLinks) {
+
        for (let link of menuLinks) {
−
      link.addEventListener('click', function() {
+
            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) {
 
             for (let lk of menuLinks) {
−
                  if (lk.classList.contains("active")) {
+
                if (lk.classList.contains("active")) {
−
                          lk.classList.remove("active");
+
                    lk.classList.remove("active");
−
                          const myNode = document.getElementById("appendable");
+
                    const myNode = document.getElementById("appendable");
−
                          while (myNode.firstChild) {
+
                    while (myNode.firstChild) {
−
                                  myNode.removeChild(myNode.lastChild);
+
                        myNode.removeChild(myNode.lastChild);
−
                          }
+
 
                     }
 
                     }
−
            }
+
                }
−
            openSecBubble(link)
+
            }
−
      })
+
−
}
+
  
−
$('#appendable li a').on("click", function(){
+
            if (document.querySelector('#popup-main').classList.contains('active')) openSecBubble(this)
−
    closeMenu();
+
        }
−
})
+
  
−
$(window).resize(function() {
+
        $('#appendable li a').on("click", function() {
−
      resizeBubble();
+
            closeMenu();
−
});
+
        })
  
−
function resizeBubble() {
+
        $(window).resize(function() {
−
      $(function() {
+
            resizeBubble();
 +
        });
 +
 
 +
        function resizeBubble(type = "project") {
 +
            $(function() {
 
                 var elementWidth = $("#appendable").width();
 
                 var elementWidth = $("#appendable").width();
 
                 var elementHeight = $("#appendable").height();
 
                 var elementHeight = $("#appendable").height();
−
                 var resizingConstant = (function(){
+
                 var resizingConstant = (function() {
−
                      if(currentChoice == "hp"){
+
                    if (type == "hp") {
−
                          return 1.4
+
                        return 1.5
−
                      } else if(currentChoice == "team"){
+
                    } else if (type == "team") {
−
                         return 1.7
+
                         return 1.3
−
                      } else if(currentChoice == "parts"){
+
                    } else if (type == "project") {
−
                          return 1.45
+
                        return 1.45
−
                      } else{
+
                    } else if (type == "dl") {
−
                          return 1.15
+
                        return 1.6
−
                      }
+
                    } else if (type == "wl") {
 +
                        return 1.2
 +
                    }
 
                 })();
 
                 })();
 
                 if (elementHeight > elementWidth) {
 
                 if (elementHeight > elementWidth) {
Line 139: Line 188:
 
                     $("#bubbles #popup-next").css("width", 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();
 +
            }
 
         })
 
         })
−
}
 
−
document.getElementById("bubbles-to-close").addEventListener('click',function(){
 
−
      var isOpen = document.getElementById("popup-main");
 
−
                if (isOpen.classList.contains("active")) {
 
−
                  closeMenu();
 
−
                }
 
−
})
 
 
         var menuItems = {
 
         var menuItems = {
 
             project: {
 
             project: {
 
                 desc: {
 
                 desc: {
 
                     name: "Description",
 
                     name: "Description",
−
                     link: "./Description"
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Description"
 
                 },
 
                 },
 
                 imp: {
 
                 imp: {
 
                     name: "Implementation",
 
                     name: "Implementation",
−
                     link: "./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: {
 
                 des: {
 
                     name: "Design",
 
                     name: "Design",
−
                     link: "./Design",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Design",
 
                 },
 
                 },
−
                 exp: {
+
                 eng: {
−
                     name: "Experiments",
+
                     name: "Engineering",
−
                     link: "./Experiments",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Engineering",
 
                 },
 
                 },
 
                 res: {
 
                 res: {
 
                     name: "Results",
 
                     name: "Results",
−
                     link: "./Results",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Results",
 
                 },
 
                 },
−
                 eng: {
+
                 par: {
−
                     name: "Engineering",
+
                     name: "Parts",
−
                     link: "./Engineering",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Parts",
 
                 },
 
                 },
−
                 pof: {
+
                 exp: {
−
                     name: "Proof of Concept",
+
                     name: "Experiments",
−
                     link: "./ProofOfConcept",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Experiments",
 
                 },
 
                 },
 +
 +
                saf: {
 +
                    name: "Safety",
 +
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Safety",
 +
                }
 +
            },
 +
            dl: {
 
                 mod: {
 
                 mod: {
 
                     name: "Model",
 
                     name: "Model",
−
                     link: "./Model",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Model",
 
                 },
 
                 },
 
                 sof: {
 
                 sof: {
 
                     name: "Software",
 
                     name: "Software",
−
                     link: "./Software",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Software",
 
                 },
 
                 },
−
                 con: {
+
                 har: {
−
                     name: "Contribution",
+
                     name: "Hardware",
−
                     link: "./Contribution",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Hardware",
−
                }
+
−
            },
+
−
            parts: {
+
−
                par: {
+
−
                    name: "Parts",
+
−
                    link: "./Parts",
+
 
                 },
 
                 },
−
                 col: {
+
                 mes: {
−
                     name: "Parts Collection",
+
                     name: "Measurement",
−
                     link: "./PartsCollection",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Measurement",
 
                 }
 
                 }
 
             },
 
             },
Line 203: Line 267:
 
                 int: {
 
                 int: {
 
                     name: "Integrated<br>Human Practices",
 
                     name: "Integrated<br>Human Practices",
−
                     link: "./Integrated",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Human_Practices",
 
                 },
 
                 },
 
                 col: {
 
                 col: {
−
                     name: "Education & PE",
+
                     name: "Education &<br>Public Engagement",
−
                     link: "./Education",
+
                     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",
 +
 
 
                 }
 
                 }
 
             },
 
             },
Line 213: Line 282:
 
                 members: {
 
                 members: {
 
                     name: "Members",
 
                     name: "Members",
−
                     link: "./Team",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Team",
 
                 },
 
                 },
 
                 coll: {
 
                 coll: {
 
                     name: "Collaborations",
 
                     name: "Collaborations",
−
                     link: "./Collaborations",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Collaborations",
 
                 },
 
                 },
 
                 att: {
 
                 att: {
 
                     name: "Attributions",
 
                     name: "Attributions",
−
                     link: "./Attributions",
+
                     link: "https://2020.igem.org/Team:Vilnius-Lithuania/Attributions",
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }

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",
               }
           }
       }