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

Latest revision as of 19:33, 23 October 2020

// Index // Create index of h3s dynamically let indexbutton = null; let indexbutton2 = null; let _headingElements = null; let sideblockOverlay = null; let _initializeIndexScroll;

function addIndex(headingElements, indexTitle = "Design", mainContent = document.getElementById("section-text")) {

   _headingElements = headingElements;

indexbutton = document.createElement("div"); // indexbutton.id = "indexbutton"; indexbutton.className = "indexbutton";

   indexbutton.innerText = "Index";
   
   indexbutton2 = indexbutton.cloneNode(true);
   indexbutton2.className = "indexbutton2";

let index = document.createElement("div"); index.id = "index";

   index.classList.add("sideBlock", "notshow");
   index.appendChild(indexbutton);
   

let boldIndexTitle = document.createElement("b"); boldIndexTitle.innerText = indexTitle; index.appendChild(boldIndexTitle); let ul = document.createElement("ul");

   index.appendChild(ul);
   

function closeIndex() { indexbutton.innerHTML = "Index"; indexbutton.classList.remove("open"); index.classList.remove("open"); indexbutton2.innerHTML = "Index";

       indexbutton2.classList.remove("open");
       sideblockOverlay.classList.remove("open");

}

function openIndex() { indexbutton.innerHTML = "✖"; indexbutton.classList.add("open"); indexbutton2.innerHTML = "✖"; indexbutton2.classList.add("open"); index.classList.add("open");

       sideblockOverlay.classList.add("open");

}

let number = 1; for (let heading of headingElements) {

       if (heading.id == undefined || heading.id == "") heading.id = "heading" + number;

let li = document.createElement("li"); if (number == 1) li.className = "active"; ul.appendChild(li); let div = document.createElement("div"); li.appendChild(div); let a = document.createElement("a");

       a.href = "#" + heading.id;
       let textToSet = heading.innerText.toLowerCase();
       a.innerText = heading.innerText;
       if (textToSet === "detection" || textToSet === "treatment" || textToSet == "prevention"){
           div.className = "bigSection";
           a.classList.add("indexsection");
       }

li.appendChild(a); li.onclick = () => { const setActiveFunction = () => { Array.from(ul.children).forEach((childLi) => { childLi.className = ""; }); li.className = "active"; }; setTimeout(setActiveFunction, 100); setTimeout(setActiveFunction, 260); setTimeout(setActiveFunction, 420); closeIndex(); } number++;

   }
   sideblockOverlay = document.createElement("div");
   sideblockOverlay.className = "sideBlockOverlay";
   sideblockOverlay.onclick = closeIndex;

mainContent.parentElement.insertBefore(index, mainContent.parentElement.firstChild); mainContent.parentElement.insertBefore(indexbutton2, mainContent.parentElement.firstChild); mainContent.parentElement.insertBefore(sideblockOverlay, mainContent.parentElement.firstChild);

indexbutton.onclick = () => { if (indexbutton.classList.contains("open")) { closeIndex(); } else { openIndex(); }

   };
   indexbutton2.onclick = indexbutton.onclick;
   
   
   // Change index bubble dynamically on scroll
   let scrollPositions = [];

   function activateBubble(id) {
       let ul = document.querySelector("#index ul");
       Array.from(ul.children).forEach((childLi) => {
           // if (childLi.dataset.href == "#" + id){
           if (childLi.lastElementChild.getAttribute("href") == "#" + id) {
               childLi.className = "active";
               return;
           }
           childLi.className = "";
       });
   }

   function indexScroll() {
       let currentScrollPos = document.scrollingElement.scrollTop;
       let clientWindowMid = document.scrollingElement.clientHeight*0.1;

       let calculatedScroll = currentScrollPos + clientWindowMid;
       let highlightedElement;
       for (let i = scrollPositions.length-1; i >= 0; i--) {
           if (scrollPositions[i].position < calculatedScroll+160) {
               highlightedElement = scrollPositions[i].element;
               break;
           }
       }
       if (highlightedElement == undefined || highlightedElement.id == undefined) return;
       activateBubble(highlightedElement.id);
   }

   function getPosition(element) {
       let yPosition = 0;
   
       while(element) {
           yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
           element = element.offsetParent;
       }
   
       return yPosition;
   }

   function initializeIndexScroll() {
       scrollPositions = [];
       let headings = Array.from(_headingElements);
       headings.forEach((heading) => {
           let position = getPosition(heading);//heading.parentElement.offsetTop + heading.offsetTop;
           scrollPositions.push({
               element: heading,
               position
           });
       });
   }
   _initializeIndexScroll = initializeIndexScroll;
   window.addEventListener("resize", ()=>setTimeout(initializeIndexScroll, 500));
   window.addEventListener("scroll", indexScroll);
   setTimeout(initializeIndexScroll, 500);

   const introContainer = document.querySelector(".introContainer");

   function checkHideIndex(){
       if (indexbutton == null) return;
       let indexbuttonTop = indexbutton.getBoundingClientRect().top;
       if (index.classList.contains("notshow")){
           indexbuttonTop -= 60;
       }
       let introContainerBottom = introContainer.getBoundingClientRect().bottom;
       if (window.footerWrapper === undefined) return;
       let footerTop = footerWrapper.getBoundingClientRect().top;
       
       if (indexbuttonTop < introContainerBottom || indexbuttonTop > footerTop){
           index.classList.add("notshow");
           indexbutton.classList.add("notshow");
       }else{
           index.classList.remove("notshow");
           indexbutton.classList.remove("notshow");
       }
   }
   window.addEventListener("resize", checkHideIndex);
   window.addEventListener("scroll", checkHideIndex);

}