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