m |
|||
(16 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
var textSection = null; | var textSection = null; | ||
var navbar = document.getElementById("navbar"); | var navbar = document.getElementById("navbar"); | ||
− | + | window.addEventListener('load', function() { | |
textSection = document.querySelector('.elevate-navbar'); | textSection = document.querySelector('.elevate-navbar'); | ||
+ | checkScrollPos(); | ||
+ | checkBackToTopPos(); | ||
}) | }) | ||
window.addEventListener('scroll', function() { | window.addEventListener('scroll', function() { | ||
updateScrollbar(); | updateScrollbar(); | ||
checkNavbarPos(); | 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); | ||
+ | }); | ||
+ | }); | ||
Line 21: | Line 49: | ||
navbar.setAttribute("onText", "false"); | navbar.setAttribute("onText", "false"); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
} | } | ||
Line 47: | Line 67: | ||
} | } | ||
document.getElementById("fixedOverlay").setAttribute("bg", "none"); | document.getElementById("fixedOverlay").setAttribute("bg", "none"); | ||
− | document.getElementById(" | + | document.getElementById("popup-next").classList.remove(currentChoice); |
document.querySelector(".hamb-wrapper").classList.remove("invisible"); | document.querySelector(".hamb-wrapper").classList.remove("invisible"); | ||
currentChoice = null; | currentChoice = null; | ||
const myNode = document.getElementById("appendable"); | const myNode = document.getElementById("appendable"); | ||
+ | document.getElementById("bubbles-to-close").setAttribute("open", "false"); | ||
while (myNode.firstChild) { | while (myNode.firstChild) { | ||
myNode.removeChild(myNode.lastChild); | myNode.removeChild(myNode.lastChild); | ||
} | } | ||
− | document. | + | let node = document.querySelector('.center-link'); |
+ | document.querySelector('#popup-next .choices').removeChild(node) | ||
checkNavbarPos(); | checkNavbarPos(); | ||
Line 61: | Line 83: | ||
function openSecBubble(link) { | function openSecBubble(link) { | ||
link.classList.add("active"); | link.classList.add("active"); | ||
− | document.getElementById(" | + | document.getElementById("popup-next").classList.remove(currentChoice); |
currentChoice = link.id; | currentChoice = link.id; | ||
document.getElementById("popup-next").classList.add("active"); | document.getElementById("popup-next").classList.add("active"); | ||
var items = menuItems[currentChoice]; | var items = menuItems[currentChoice]; | ||
− | document.getElementById(" | + | document.getElementById("popup-next").classList.add(currentChoice) |
let counter = 0; | let counter = 0; | ||
for (const [key, value] of Object.entries(menuItems[currentChoice])) { | for (const [key, value] of Object.entries(menuItems[currentChoice])) { | ||
Line 72: | Line 94: | ||
nodeLink.href = value.link; | nodeLink.href = value.link; | ||
nodeLink.innerHTML = value.name; | nodeLink.innerHTML = value.name; | ||
− | if ( | + | if (link.id == 'wl') { |
+ | node.classList.add(counter < 3 ? 'right-align' : 'left-align'); | ||
counter++; | counter++; | ||
− | |||
} | } | ||
node.appendChild(nodeLink); | node.appendChild(nodeLink); | ||
document.getElementById("appendable").appendChild(node); | document.getElementById("appendable").appendChild(node); | ||
} | } | ||
− | resizeBubble(); | + | resizeBubble(link.id); |
} | } | ||
Line 112: | Line 134: | ||
link.addEventListener('click', function() { | link.addEventListener('click', function() { | ||
for (let linkRecursive of menuLinks) linkRecursive.removeEventListener('mouseover', initializeSecondBubble); | for (let linkRecursive of menuLinks) linkRecursive.removeEventListener('mouseover', initializeSecondBubble); | ||
+ | for (let linkRecursive of menuLinks) linkRecursive.addEventListener('click', initializeSecondBubble); | ||
link.initializeSecondBubble; | link.initializeSecondBubble; | ||
setTimeout(function() { | setTimeout(function() { | ||
Line 132: | Line 155: | ||
if (document.querySelector('#popup-main').classList.contains('active')) openSecBubble(this) | if (document.querySelector('#popup-main').classList.contains('active')) openSecBubble(this) | ||
} | } | ||
− | |||
$('#appendable li a').on("click", function() { | $('#appendable li a').on("click", function() { | ||
Line 142: | Line 164: | ||
}); | }); | ||
− | function resizeBubble() { | + | function resizeBubble(type = "project") { |
$(function() { | $(function() { | ||
var elementWidth = $("#appendable").width(); | var elementWidth = $("#appendable").width(); | ||
var elementHeight = $("#appendable").height(); | var elementHeight = $("#appendable").height(); | ||
var resizingConstant = (function() { | var resizingConstant = (function() { | ||
− | if ( | + | if (type == "hp") { |
− | return 1. | + | return 1.5 |
− | } else if ( | + | } else if (type == "team") { |
− | return 1. | + | return 1.3 |
− | } else if ( | + | } else if (type == "project") { |
return 1.45 | return 1.45 | ||
− | } else { | + | } else if (type == "dl") { |
− | return 1. | + | return 1.6 |
+ | } else if (type == "wl") { | ||
+ | return 1.2 | ||
} | } | ||
})(); | })(); | ||
Line 182: | Line 206: | ||
link: "https://2020.igem.org/Team:Vilnius-Lithuania/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: "https://2020.igem.org/Team:Vilnius-Lithuania/Design", | link: "https://2020.igem.org/Team:Vilnius-Lithuania/Design", | ||
}, | }, | ||
− | + | eng: { | |
− | name: " | + | name: "Engineering", |
− | link: "https://2020.igem.org/Team:Vilnius-Lithuania/ | + | link: "https://2020.igem.org/Team:Vilnius-Lithuania/Engineering", |
}, | }, | ||
res: { | res: { | ||
Line 194: | Line 232: | ||
link: "https://2020.igem.org/Team:Vilnius-Lithuania/Results", | link: "https://2020.igem.org/Team:Vilnius-Lithuania/Results", | ||
}, | }, | ||
− | + | par: { | |
− | name: " | + | name: "Parts", |
− | link: "https://2020.igem.org/Team:Vilnius-Lithuania/ | + | link: "https://2020.igem.org/Team:Vilnius-Lithuania/Parts", |
}, | }, | ||
− | + | exp: { | |
− | name: " | + | name: "Experiments", |
− | link: "https://2020.igem.org/Team:Vilnius-Lithuania/ | + | 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", | ||
Line 210: | Line 255: | ||
link: "https://2020.igem.org/Team:Vilnius-Lithuania/Software", | link: "https://2020.igem.org/Team:Vilnius-Lithuania/Software", | ||
}, | }, | ||
− | + | har: { | |
− | name: " | + | name: "Hardware", |
− | link: "https://2020.igem.org/Team:Vilnius-Lithuania/ | + | link: "https://2020.igem.org/Team:Vilnius-Lithuania/Hardware", |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}, | }, | ||
− | + | mes: { | |
− | name: " | + | name: "Measurement", |
− | link: "https://2020.igem.org/Team:Vilnius-Lithuania/ | + | link: "https://2020.igem.org/Team:Vilnius-Lithuania/Measurement", |
} | } | ||
}, | }, | ||
Line 233: | Line 272: | ||
name: "Education &<br>Public Engagement", | name: "Education &<br>Public Engagement", | ||
link: "https://2020.igem.org/Team:Vilnius-Lithuania/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", | ||
+ | |||
} | } | ||
}, | }, |
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", } } }