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

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.getElementById("section-text")})
+
window.addEventListener('load', function() {
 +
textSection = document.getElementById("section-text")
 +
})
  
  
−
window.addEventListener('scroll',function() {
+
window.addEventListener('scroll', function() {
−
            updateScrollbar();
+
updateScrollbar();
−
            checkNavbarPos();
+
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 checkNavbarPos() {
−
function closeMenu(){
+
if (textSection != null) {
−
        var toggleable = document.querySelectorAll('.toggleable');
+
var navbarTop = document.getElementById("navbar").getBoundingClientRect().top;
−
        for (let item of toggleable) {
+
var mainTagTop = textSection.getBoundingClientRect().top;
−
                item.classList.remove("active");
+
if (navbarTop >= mainTagTop) {
−
        }
+
document.getElementById("navbar").setAttribute("onText", "true");
−
        document.getElementById("fixedOverlay").setAttribute("bg", "none");
+
} else {
−
        document.getElementById("appendable").classList.remove(currentChoice);
+
document.getElementById("navbar").setAttribute("onText", "false");
−
        currentChoice = null;
+
}
−
        const myNode = document.getElementById("appendable");
+
}
−
        while (myNode.firstChild) {
+
var footerTop = document.getElementById("footerWrapper").getBoundingClientRect().top;
−
                myNode.removeChild(myNode.lastChild);
+
var scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
−
        }
+
if (scrollbarBottom >= footerTop) {
−
        document.getElementById("bubbles-to-close").setAttribute("open", "false");
+
if (document.getElementById("scrollbar-container").getAttribute("hiddenScroll") == "false") {
−
        checkNavbarPos();
+
document.getElementById("scrollbar-container").setAttribute("hiddenScroll", "true");
−
}
+
}
−
function openSecBubble(link){
+
} else {
−
  link.classList.add("active");
+
if (document.getElementById("scrollbar-container").getAttribute("hiddenScroll") == "true") {
−
  document.getElementById("appendable").classList.remove(currentChoice);
+
document.getElementById("scrollbar-container").setAttribute("hiddenScroll", "false");
−
  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");
+
//---------------Scrollbar height---------------
−
for (let el of openMenuEls) {
+
function updateScrollbar() {
−
      //---------------Clicking on menu sandwich/close button---------------
+
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
−
      el.addEventListener('click', function() {
+
var height = document.documentElement.scrollHeight - window.innerHeight;
−
            //---------------If menu is open and close button is clicked, close menu---------------
+
var scrolled = (winScroll / height) * 100;
−
            if (this.classList.contains("active")) {
+
document.getElementById("scrollbar").style.height = scrolled + "%";
−
                  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(){
+
//---------------Closing the menu and returning to default values---------------
−
    closeMenu();
+
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();
 +
}
  
−
$(window).resize(function() {
+
function openSecBubble(link) {
−
      resizeBubble();
+
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");
−
      $(function() {
+
for (let el of openMenuEls) {
−
                var elementWidth = $("#appendable").width();
+
//---------------Clicking on menu sandwich/close button---------------
−
                var elementHeight = $("#appendable").height();
+
el.addEventListener('click', function() {
−
                var resizingConstant = (function(){
+
//---------------If menu is open and close button is clicked, close menu---------------
−
                      if(currentChoice == "hp"){
+
if (this.classList.contains("active")) {
−
                          return 1.4
+
closeMenu();
−
                      } else if(currentChoice == "team"){
+
} else {
−
                        return 1.7
+
document.getElementById("popup-main").classList.add("active");
−
                      } else if(currentChoice == "parts"){
+
this.classList.add("active");
−
                          return 1.45
+
fxdOv = document.getElementById("fixedOverlay");
−
                      } else{
+
fxdOv.setAttribute("bg", "dark");
−
                          return 1.15
+
document.getElementById("navbar").setAttribute("onText", "false");
−
                      }
+
document.getElementById("bubbles-to-close").setAttribute("open", "true");
−
                })();
+
if (fxdOv.classList.length != 0) {
−
                if (elementHeight > elementWidth) {
+
console.log("not the main page")
−
                    $("#bubbles #popup-next").css("height", elementHeight * resizingConstant);
+
link = fxdOv.classList[0]
−
                    $("#bubbles #popup-next").css("width", elementHeight * resizingConstant);
+
openSecBubble(document.getElementById(link))
−
                } else {
+
}
−
                    $("#bubbles #popup-next").css("height", elementWidth * resizingConstant);
+
}
−
                    $("#bubbles #popup-next").css("width", elementWidth * resizingConstant);
+
})
−
                }
+
}
−
        })
+
var currentChoice;
−
}
+
var menuLinks = document.getElementsByClassName("main-choice");
−
document.getElementById("bubbles-to-close").addEventListener('click',function(){
+
for (let link of menuLinks) {
−
      var isOpen = document.getElementById("popup-main");
+
link.addEventListener('click', function() {
−
                if (isOpen.classList.contains("active")) {
+
for (let lk of menuLinks) {
−
                  closeMenu();
+
if (lk.classList.contains("active")) {
−
                }
+
lk.classList.remove("active");
−
})
+
const myNode = document.getElementById("appendable");
−
        var menuItems = {
+
while (myNode.firstChild) {
−
            project: {
+
myNode.removeChild(myNode.lastChild);
−
                desc: {
+
}
−
                    name: "Description",
+
}
−
                    link: "./Description"
+
}
−
                },
+
openSecBubble(link)
−
                imp: {
+
})
−
                    name: "Implementation",
+
}
−
                    link: "./Implementation",
+
 
−
                },
+
$('#appendable li a').on("click", function() {
−
                des: {
+
closeMenu();
−
                    name: "Design",
+
})
−
                    link: "./Design",
+
 
−
                },
+
$(window).resize(function() {
−
                exp: {
+
resizeBubble();
−
                    name: "Experiments",
+
});
−
                    link: "./Experiments",
+
 
−
                },
+
function resizeBubble() {
−
                res: {
+
$(function() {
−
                    name: "Results",
+
var elementWidth = $("#appendable").width();
−
                    link: "./Results",
+
var elementHeight = $("#appendable").height();
−
                },
+
var resizingConstant = (function() {
−
                eng: {
+
if (currentChoice == "hp") {
−
                    name: "Engineering",
+
return 1.4
−
                    link: "./Engineering",
+
} else if (currentChoice == "team") {
−
                },
+
return 1.7
−
                pof: {
+
} else if (currentChoice == "parts") {
−
                    name: "Proof of Concept",
+
return 1.45
−
                    link: "./ProofOfConcept",
+
} else {
−
                },
+
return 1.15
−
                mod: {
+
}
−
                    name: "Model",
+
})();
−
                    link: "./Model",
+
if (elementHeight > elementWidth) {
−
                },
+
$("#bubbles #popup-next").css("height", elementHeight * resizingConstant);
−
                sof: {
+
$("#bubbles #popup-next").css("width", elementHeight * resizingConstant);
−
                    name: "Software",
+
} else {
−
                    link: "./Software",
+
$("#bubbles #popup-next").css("height", elementWidth * resizingConstant);
−
                },
+
$("#bubbles #popup-next").css("width", elementWidth * resizingConstant);
−
                con: {
+
}
−
                    name: "Contribution",
+
})
−
                    link: "./Contribution",
+
}
−
                }
+
document.getElementById("bubbles-to-close").addEventListener('click', function() {
−
            },
+
var isOpen = document.getElementById("popup-main");
−
            parts: {
+
if (isOpen.classList.contains("active")) {
−
                par: {
+
closeMenu();
−
                    name: "Parts",
+
}
−
                    link: "./Parts",
+
})
−
                },
+
var menuItems = {
−
                col: {
+
project: {
−
                    name: "Parts Collection",
+
desc: {
−
                    link: "./PartsCollection",
+
name: "Description",
−
                }
+
link: "./Description"
−
            },
+
},
−
            hp: {
+
imp: {
−
                int: {
+
name: "Implementation",
−
                    name: "Integrated<br>Human Practices",
+
link: "./Implementation",
−
                    link: "./Integrated",
+
},
−
                },
+
des: {
−
                col: {
+
name: "Design",
−
                    name: "Education &<br>Public Engagement",
+
link: "./Design",
−
                    link: "./Education",
+
},
−
                }
+
exp: {
−
            },
+
name: "Experiments",
−
            team: {
+
link: "./Experiments",
−
                members: {
+
},
−
                    name: "Members",
+
res: {
−
                    link: "./Team",
+
name: "Results",
−
                },
+
link: "./Results",
−
                coll: {
+
},
−
                    name: "Collaborations",
+
eng: {
−
                    link: "./Collaborations",
+
name: "Engineering",
−
                },
+
link: "./Engineering",
−
                att: {
+
},
−
                    name: "Attributions",
+
pof: {
−
                    link: "./Attributions",
+
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 16:45, 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) 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", } } }