Line 1: | Line 1: | ||
//---------------Checking if the page is content page--------------- | //---------------Checking if the page is content page--------------- | ||
− | + | var textSection = null; | |
− | + | window.addEventListener('load', function(){textSection = document.getElementById("section-text")}) | |
− | + | ||
− | + | ||
− | + | ||
− | + | window.addEventListener('scroll',function() { | |
− | + | updateScrollbar(); | |
+ | checkNavbarPos(); | ||
+ | |||
+ | }) | ||
+ | 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 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("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){ | |
− | + | link.classList.add("active"); | |
− | + | 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--------------- | |
− | + | 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(){ | |
− | + | closeMenu(); | |
− | + | }) | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | $(window).resize(function() { | |
− | + | resizeBubble(); | |
− | + | }); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | function resizeBubble() { | |
− | + | $(function() { | |
− | + | var elementWidth = $("#appendable").width(); | |
− | + | var elementHeight = $("#appendable").height(); | |
− | + | var resizingConstant = (function(){ | |
− | + | if(currentChoice == "hp"){ | |
− | + | return 1.4 | |
− | + | } else if(currentChoice == "team"){ | |
− | + | return 1.7 | |
− | + | } else if(currentChoice == "parts"){ | |
− | + | return 1.45 | |
− | + | } else{ | |
− | + | return 1.15 | |
− | + | } | |
− | + | })(); | |
− | + | 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: "./Description" | |
− | + | }, | |
− | + | imp: { | |
− | + | name: "Implementation", | |
− | + | link: "./Implementation", | |
− | + | }, | |
− | + | des: { | |
− | + | name: "Design", | |
− | + | link: "./Design", | |
− | + | }, | |
− | + | exp: { | |
− | + | name: "Experiments", | |
− | + | link: "./Experiments", | |
− | + | }, | |
− | + | res: { | |
− | + | name: "Results", | |
− | + | link: "./Results", | |
− | + | }, | |
− | + | eng: { | |
− | + | name: "Engineering", | |
− | + | link: "./Engineering", | |
− | + | }, | |
− | + | pof: { | |
− | + | name: "Proof of Concept", | |
− | + | link: "./ProofOfConcept", | |
− | + | }, | |
− | + | mod: { | |
− | + | name: "Model", | |
− | + | link: "./Model", | |
− | + | }, | |
− | + | sof: { | |
− | + | name: "Software", | |
− | + | link: "./Software", | |
− | + | }, | |
− | + | con: { | |
− | + | name: "Contribution", | |
− | + | link: "./Contribution", | |
− | + | } | |
− | + | }, | |
− | + | parts: { | |
− | + | par: { | |
− | + | name: "Parts", | |
− | + | link: "./Parts", | |
− | + | }, | |
− | + | col: { | |
− | + | name: "Parts Collection", | |
− | + | link: "./PartsCollection", | |
− | + | } | |
− | + | }, | |
− | + | hp: { | |
− | + | int: { | |
− | + | name: "Integrated<br>Human Practices", | |
− | + | link: "./Integrated", | |
− | + | }, | |
− | + | col: { | |
− | + | name: "Education &<br>Public Engagement", | |
− | + | link: "./Education", | |
− | + | } | |
− | + | }, | |
− | + | team: { | |
− | + | members: { | |
− | + | name: "Members", | |
− | + | link: "./Team", | |
− | + | }, | |
− | + | coll: { | |
− | + | name: "Collaborations", | |
− | + | link: "./Collaborations", | |
− | + | }, | |
− | + | att: { | |
− | + | name: "Attributions", | |
− | + | link: "./Attributions", | |
− | + | } | |
− | + | } | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + |
Revision as of 18:06, 4 October 2020
//---------------Checking if the page is content page--------------- var textSection = null; window.addEventListener('load', function(){textSection = document.getElementById("section-text")})
window.addEventListener('scroll',function() {
updateScrollbar(); checkNavbarPos();
}) 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 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("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){
link.classList.add("active"); 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--------------- 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(){
closeMenu();
})
$(window).resize(function() {
resizeBubble();
});
function resizeBubble() {
$(function() { var elementWidth = $("#appendable").width(); var elementHeight = $("#appendable").height(); var resizingConstant = (function(){ if(currentChoice == "hp"){ return 1.4 } else if(currentChoice == "team"){ return 1.7 } else if(currentChoice == "parts"){ return 1.45 } else{ return 1.15 } })(); 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: "./Description" }, imp: { name: "Implementation", link: "./Implementation", }, des: { name: "Design", link: "./Design", }, exp: { name: "Experiments", link: "./Experiments", }, res: { name: "Results", link: "./Results", }, eng: { name: "Engineering", link: "./Engineering", }, pof: { name: "Proof of Concept", link: "./ProofOfConcept", }, mod: { name: "Model", link: "./Model", }, sof: { name: "Software", link: "./Software", }, con: { name: "Contribution", link: "./Contribution", } }, parts: { par: { name: "Parts", link: "./Parts", }, col: { name: "Parts Collection", link: "./PartsCollection", } }, hp: { int: { name: "Integrated
Human Practices", link: "./Integrated", }, col: { name: "Education &
Public Engagement", link: "./Education", } }, team: { members: { name: "Members", link: "./Team", }, coll: { name: "Collaborations", link: "./Collaborations", }, att: { name: "Attributions", link: "./Attributions", } } }