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

m
 
(45 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() {
+
        var navbar = document.getElementById("navbar");
−
textSection = document.getElementsByClassName("elevate-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");
 +
            }
 +
        }
  
−
window.addEventListener('scroll', function() {
+
        function checkBackToTopPos() {
−
updateScrollbar();
+
            if ($(window).scrollTop() > 1000) {
−
checkNavbarPos();
+
                $('#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 = document.getElementById("navbar").getBoundingClientRect().top;
 
−
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 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 checkNavbarPos() {
−
function updateScrollbar() {
+
            if (textSection != null) {
−
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+
                var navbarTop = navbar.getBoundingClientRect().top;
−
var height = document.documentElement.scrollHeight - window.innerHeight;
+
                var mainTagTop = textSection.getBoundingClientRect().top;
−
var scrolled = (winScroll / height) * 100;
+
                if (navbarTop >= mainTagTop) {
−
document.getElementById("scrollbar").style.height = scrolled + "%";
+
                    if (document.getElementById("bubbles-to-close").getAttribute("open") != true) navbar.setAttribute("onText", "true");
−
}
+
                } else {
 +
                    navbar.setAttribute("onText", "false");
 +
                }
 +
            }
 +
        }
  
−
//---------------Closing the menu and returning to default values---------------
+
        //---------------Scrollbar height---------------
−
function closeMenu() {
+
        function updateScrollbar() {
−
var toggleable = document.querySelectorAll('.toggleable');
+
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
−
for (let item of toggleable) {
+
            var height = document.documentElement.scrollHeight - window.innerHeight;;
−
item.classList.remove("active");
+
            var scrolled = (winScroll / height) * 100;
−
}
+
            document.getElementById("scrollbar").style.height = scrolled + "%";
−
document.getElementById("fixedOverlay").setAttribute("bg", "none");
+
        }
−
document.getElementById("appendable").classList.remove(currentChoice);
+
−
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) {
+
        //---------------Closing the menu and returning to default values---------------
−
link.classList.add("active");
+
        function closeMenu() {
−
document.getElementById("appendable").classList.remove(currentChoice);
+
            var toggleable = document.querySelectorAll('.toggleable');
−
currentChoice = link.id;
+
            for (let item of toggleable) {
−
document.getElementById("popup-next").classList.add("active");
+
                item.classList.remove("active");
−
var items = menuItems[currentChoice];
+
            }
−
document.getElementById("appendable").classList.add(currentChoice)
+
            document.getElementById("fixedOverlay").setAttribute("bg", "none");
−
let counter = 0;
+
            document.getElementById("popup-next").classList.remove(currentChoice);
−
for (const [key, value] of Object.entries(menuItems[currentChoice])) {
+
            document.querySelector(".hamb-wrapper").classList.remove("invisible");
−
var node = document.createElement("li");
+
            currentChoice = null;
−
var nodeLink = document.createElement("a");
+
            const myNode = document.getElementById("appendable");
−
nodeLink.href = value.link;
+
            document.getElementById("bubbles-to-close").setAttribute("open", "false");
−
nodeLink.innerHTML = value.name;
+
            while (myNode.firstChild) {
−
if (currentChoice = "project") {
+
                myNode.removeChild(myNode.lastChild);
−
counter++;
+
            }
−
if (counter <= 5) node.classList.add('right-align');
+
            let node = document.querySelector('.center-link');
−
}
+
            document.querySelector('#popup-next .choices').removeChild(node)
−
node.appendChild(nodeLink);
+
            checkNavbarPos();
−
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");
+
−
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) {
+
−
console.log("not the main page")
+
−
link = fxdOv.classList[0]
+
−
openSecBubble(document.getElementById(link))
+
−
}
+
−
}
+
−
})
+
−
}
+
−
var currentChoice;
+
−
var menuLinks = document.getElementsByClassName("main-choice");
+
−
for (let link of menuLinks) {
+
−
link.addEventListener('click', 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() {
+
        function openSecBubble(link) {
−
closeMenu();
+
            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);
 +
        }
  
−
$(window).resize(function() {
+
        var openMenuEls = document.getElementsByClassName("menu-wrapper");
−
resizeBubble();
+
        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 resizeBubble() {
+
        function initializeSecondBubble() {
−
$(function() {
+
            for (let lk of menuLinks) {
−
var elementWidth = $("#appendable").width();
+
                if (lk.classList.contains("active")) {
−
var elementHeight = $("#appendable").height();
+
                    lk.classList.remove("active");
−
var resizingConstant = (function() {
+
                    const myNode = document.getElementById("appendable");
−
if (currentChoice == "hp") {
+
                    while (myNode.firstChild) {
−
return 1.4
+
                        myNode.removeChild(myNode.lastChild);
−
} else if (currentChoice == "team") {
+
                    }
−
return 1.7
+
                }
−
} else if (currentChoice == "parts") {
+
            }
−
return 1.45
+
 
−
} else {
+
            if (document.querySelector('#popup-main').classList.contains('active')) openSecBubble(this)
−
return 1.15
+
        }
−
}
+
 
−
})();
+
        $('#appendable li a').on("click", function() {
−
if (elementHeight > elementWidth) {
+
            closeMenu();
−
$("#bubbles #popup-next").css("height", elementHeight * resizingConstant);
+
        })
−
$("#bubbles #popup-next").css("width", elementHeight * resizingConstant);
+
 
−
} else {
+
        $(window).resize(function() {
−
$("#bubbles #popup-next").css("height", elementWidth * resizingConstant);
+
            resizeBubble();
−
$("#bubbles #popup-next").css("width", elementWidth * resizingConstant);
+
        });
−
}
+
 
−
})
+
        function resizeBubble(type = "project") {
−
}
+
            $(function() {
−
document.getElementById("bubbles-to-close").addEventListener('click', function() {
+
                var elementWidth = $("#appendable").width();
−
var isOpen = document.getElementById("popup-main");
+
                var elementHeight = $("#appendable").height();
−
if (isOpen.classList.contains("active")) {
+
                var resizingConstant = (function() {
−
closeMenu();
+
                    if (type == "hp") {
−
}
+
                        return 1.5
−
})
+
                    } else if (type == "team") {
−
var menuItems = {
+
                        return 1.3
−
project: {
+
                    } else if (type == "project") {
−
desc: {
+
                        return 1.45
−
name: "Description",
+
                    } else if (type == "dl") {
−
link: "./Description"
+
                        return 1.6
−
},
+
                    } else if (type == "wl") {
−
imp: {
+
                        return 1.2
−
name: "Implementation",
+
                    }
−
link: "./Implementation",
+
                })();
−
},
+
                if (elementHeight > elementWidth) {
−
des: {
+
                    $("#bubbles #popup-next").css("height", elementHeight * resizingConstant);
−
name: "Design",
+
                    $("#bubbles #popup-next").css("width", elementHeight * resizingConstant);
−
link: "./Design",
+
                } else {
−
},
+
                    $("#bubbles #popup-next").css("height", elementWidth * resizingConstant);
−
exp: {
+
                    $("#bubbles #popup-next").css("width", elementWidth * resizingConstant);
−
name: "Experiments",
+
                }
−
link: "./Experiments",
+
            })
−
},
+
        }
−
res: {
+
        document.getElementById("bubbles-to-close").addEventListener('click', function() {
−
name: "Results",
+
            var isOpen = document.getElementById("popup-main");
−
link: "./Results",
+
            if (isOpen.classList.contains("active")) {
−
},
+
                closeMenu();
−
eng: {
+
            }
−
name: "Engineering",
+
        })
−
link: "./Engineering",
+
        var menuItems = {
−
},
+
            project: {
−
pof: {
+
                desc: {
−
name: "Proof of Concept",
+
                    name: "Description",
−
link: "./ProofOfConcept",
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Description"
−
},
+
                },
−
mod: {
+
                imp: {
−
name: "Model",
+
                    name: "Implementation",
−
link: "./Model",
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Implementation",
−
},
+
                },
−
sof: {
+
                con: {
−
name: "Software",
+
                    name: "Contribution",
−
link: "./Software",
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Contribution",
−
},
+
                },
−
con: {
+
                gd: {
−
name: "Contribution",
+
                    name: "Graphic Design",
−
link: "./Contribution",
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Graphic_Design"
−
}
+
                },
−
},
+
                aw: {
−
parts: {
+
                    name: "Awards",
−
par: {
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Awards"
−
name: "Parts",
+
                }
−
link: "./Parts",
+
            },
−
},
+
            wl: {
−
col: {
+
                des: {
−
name: "Parts Collection",
+
                    name: "Design",
−
link: "./PartsCollection",
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Design",
−
}
+
                },
−
},
+
                eng: {
−
hp: {
+
                    name: "Engineering",
−
int: {
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Engineering",
−
name: "Integrated<br>Human Practices",
+
                },
−
link: "./Integrated",
+
                res: {
−
},
+
                    name: "Results",
−
col: {
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Results",
−
name: "Education &<br>Public Engagement",
+
                },
−
link: "./Education",
+
                par: {
−
}
+
                    name: "Parts",
−
},
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Parts",
−
team: {
+
                },
−
members: {
+
                exp: {
−
name: "Members",
+
                    name: "Experiments",
−
link: "./Team",
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Experiments",
−
},
+
                },
−
coll: {
+
 
−
name: "Collaborations",
+
                saf: {
−
link: "./Collaborations",
+
                    name: "Safety",
−
},
+
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Safety",
−
att: {
+
                }
−
name: "Attributions",
+
            },
−
link: "./Attributions",
+
            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<br>Human Practices",
 +
                    link: "https://2020.igem.org/Team:Vilnius-Lithuania/Human_Practices",
 +
                },
 +
                col: {
 +
                    name: "Education &<br>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",
 +
                }
 +
            }
 +
        }

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