(Created page with "// Index // Create index of h3s dynamically function addIndex() { let mainContent = document.getElementById("section-text"); let indexbutton = document.createElement("div")...") |
m |
||
Line 11: | Line 11: | ||
let index = document.createElement("div"); | let index = document.createElement("div"); | ||
index.id = "index"; | index.id = "index"; | ||
− | index.className = " | + | index.className = "sideBlock"; |
let boldIndexTitle = document.createElement("b"); | let boldIndexTitle = document.createElement("b"); | ||
boldIndexTitle.innerText = document.getElementById("headingTitleText").value; | boldIndexTitle.innerText = document.getElementById("headingTitleText").value; |
Revision as of 10:05, 31 August 2020
// Index // Create index of h3s dynamically function addIndex() { let mainContent = document.getElementById("section-text");
let indexbutton = document.createElement("div"); indexbutton.id = "indexbutton"; indexbutton.className = "indexbutton"; indexbutton.innerText = "Index";
let index = document.createElement("div"); index.id = "index"; index.className = "sideBlock"; let boldIndexTitle = document.createElement("b"); boldIndexTitle.innerText = document.getElementById("headingTitleText").value; index.appendChild(boldIndexTitle); let ul = document.createElement("ul"); index.appendChild(ul);
let headings = document.querySelectorAll(".content div.h3");
let number = 1; for (let heading of headings) { 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; a.innerText = heading.innerText; 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); } number++; } mainContent.insertBefore(index, mainContent.firstChild); mainContent.insertBefore(indexbutton, mainContent.firstChild);
indexbutton.onclick = () => { if (indexbutton.classList.contains("open")) { indexbutton.innerHTML = "Index"; indexbutton.classList.remove("open"); index.classList.remove("open") } else { indexbutton.innerHTML = "Close"; indexbutton.classList.add("open"); index.classList.add("open") } }; initializeIndexScroll(); } window.addEventListener("load", addIndex);
// 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.documentElement.scrollTop; let clientWindowMid = document.documentElement.clientHeight*0.1;
let calculatedScroll = currentScrollPos + clientWindowMid; let highlightedElement; for (let i = 0, n = scrollPositions.length; i < n; i++) { if (scrollPositions[i].position > calculatedScroll) { highlightedElement = scrollPositions[i].element; break; } } if (highlightedElement == undefined || highlightedElement.id == undefined) return; activateBubble(highlightedElement.id); }
function initializeIndexScroll() { scrollPositions = []; let mainContent = document.getElementById("section-text"); let headings = document.querySelectorAll(".content div.h3"); headings.forEach((heading) => { let position = mainContent.offsetTop + heading.offsetTop; scrollPositions.push({ element: heading, position }); });
} window.addEventListener("resize", initializeIndexScroll); window.addEventListener("scroll", indexScroll);
function checkHideIndex(){
let indexbutton = document.getElementById("indexbutton");
if (indexbutton == null) return;
if (window.innerWidth > 420) return;
let onTextBool = document.getElementById("navbar").getAttribute("onText");
if (onTextBool === "false"){
indexbutton.setAttribute("onText", false);
return;
}else{
if (footerWrapper === undefined) return;
let footerTop = footerWrapper.getBoundingClientRect().top;
let scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
indexbutton.setAttribute("onText", scrollbarBottom < footerTop);
}
}
window.addEventListener("resize", checkHideIndex);
window.addEventListener("scroll", checkHideIndex);