Template:Vilnius-Lithuania/JS/menuOverlay
//---------------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");
while (myNode.firstChild) {
myNode.removeChild(myNode.lastChild);
}
let node = document.querySelector('.center-link');
document.querySelector('#popup-next .choices').removeChild(node)
document.getElementById("bubbles-to-close").setAttribute("open", "false");
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",
}
}
}