// Index // Create index of h3s dynamically let indexbutton = null; let indexbutton2 = null; let _headingElements = null; let sideblockOverlay = null;
function addIndex(headingElements) {
_headingElements = headingElements;
let mainContent = document.getElementById("section-text");
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 = "Design"; 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) { 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" + number; 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 initializeIndexScroll() { scrollPositions = []; let headings = Array.from(_headingElements); headings.forEach((heading) => { let position = heading.parentElement.offsetTop + heading.offsetTop; scrollPositions.push({ element: heading, position }); });
} 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);
}