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

Revision as of 11:58, 25 August 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;
           console.log(scrollbarBottom, footerTop)
           if(scrollbarBottom >= footerTop){
                   if(document.getElementById("scrollbar-container").getAttribute("hidden") == false){
                           console.log("hide")
                           document.getElementById("scrollbar-container").setAttribute("hidden", true);
                   }
           } else {
                   if(document.getElementById("scrollbar-container").getAttribute("hidden") == true){
                           console.log("unhide")
                           document.getElementById("scrollbar-container").setAttribute("hidden", 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 & PE",
                   link: "./Education",
               }
           },
           team: {
               members: {
                   name: "Members",
                   link: "./Team",
               },
               coll: {
                   name: "Collaborations",
                   link: "./Collaborations",
               },
               att: {
                   name: "Attributions",
                   link: "./Attributions",
               }
           }
       }