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. | + | window.addEventListener('load', function() { |
+ | textSection = document.querySelector(".elevate-navbar"); | ||
+ | console.log(textSection) | ||
+ | }) | ||
− | window.addEventListener('scroll', | + | window.addEventListener('scroll', updateScrollbar); |
− | + | window.addEventListener('scroll', checkNavbarPos); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | function checkNavbarPos() { | |
− | function | + | if (textSection != null) { |
− | + | var navbarTop = document.getElementById("navbar").getBoundingClientRect().bottom; | |
− | + | var mainTagTop = textSection.getBoundingClientRect().top; | |
− | + | console.log(navbarTop, mainTagTop) | |
− | + | 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) | ||
+ | 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 (currentChoice = "project") { | ||
+ | counter++; | ||
+ | if (counter <= 5) node.classList.add('right-align'); | ||
+ | } | ||
+ | node.appendChild(nodeLink); | ||
+ | document.getElementById("appendable").appendChild(node); | ||
+ | } | ||
+ | resizeBubble(); | ||
+ | } | ||
− | function 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"); |
− | document.getElementById("bubbles-to-close").addEventListener('click',function(){ | + | 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:07, 4 October 2020
//---------------Checking if the page is content page--------------- var textSection = null; window.addEventListener('load', function() { textSection = document.querySelector(".elevate-navbar");
console.log(textSection)
})
window.addEventListener('scroll', updateScrollbar);
window.addEventListener('scroll', checkNavbarPos);
function checkNavbarPos() {
if (textSection != null) {
var navbarTop = document.getElementById("navbar").getBoundingClientRect().bottom;
var mainTagTop = textSection.getBoundingClientRect().top;
console.log(navbarTop, mainTagTop)
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) 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 (currentChoice = "project") { counter++; if (counter <= 5) node.classList.add('right-align'); } 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",
}
}
}