m |
|||
Line 7: | Line 7: | ||
if (window.innerWidth/window.innerHeight > 1) unit = "vh" | if (window.innerWidth/window.innerHeight > 1) unit = "vh" | ||
$(".introContainer span").css("top", (50*scroll) + unit); | $(".introContainer span").css("top", (50*scroll) + unit); | ||
− | + | ||
+ | let onTextBool = document.getElementById("navbar").getAttribute("onText"); | ||
document.getElementById("indexbutton").setAttribute("onText", onTextBool); | document.getElementById("indexbutton").setAttribute("onText", onTextBool); | ||
} | } | ||
Line 40: | Line 41: | ||
if (number == 1) li.className = "active"; | if (number == 1) li.className = "active"; | ||
ul.appendChild(li); | ul.appendChild(li); | ||
− | + | li.innerText = heading.innerText; | |
− | + | li.dataset.href = "#heading" + number; | |
− | + | li.onclick = ()=>{ | |
− | + | const setActiveFunction = ()=>{ | |
− | + | Array.from(ul.children).forEach((childLi)=>{ | |
− | + | childLi.className = ""; | |
+ | }); | ||
+ | li.className = "active"; | ||
+ | }; | ||
+ | setTimeout(setActiveFunction, 100); | ||
+ | setTimeout(setActiveFunction, 300); | ||
+ | setTimeout(setActiveFunction, 500); | ||
+ | let introContainer = document.querySelector("div.introContainer"); | ||
+ | //document.documentElement.scrollTo(0, introContainer.clientHeight + heading.offsetTop - 160); | ||
+ | window.scroll({ | ||
+ | top: introContainer.clientHeight + heading.offsetTop - 160, | ||
+ | left: 0, | ||
+ | behavior: 'smooth' | ||
}); | }); | ||
− | + | } | |
− | } | + | |
− | + | ||
number++; | number++; | ||
} | } | ||
Line 75: | Line 86: | ||
let ul = document.querySelector("#index ul"); | let ul = document.querySelector("#index ul"); | ||
Array.from(ul.children).forEach((childLi)=>{ | Array.from(ul.children).forEach((childLi)=>{ | ||
+ | if (childLi.dataset.href == "#" + id){ | ||
+ | childLi.className = "active"; | ||
+ | return; | ||
+ | } | ||
childLi.className = ""; | childLi.className = ""; | ||
}); | }); | ||
− | |||
− | |||
} | } | ||
function indexScroll(){ | function indexScroll(){ |
Revision as of 08:48, 29 July 2020
// Title bubble animation function animate() {
let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; let scroll = scrollTop / window.innerHeight; if (scroll > 1) scroll = 1; let unit = "vw"; if (window.innerWidth/window.innerHeight > 1) unit = "vh" $(".introContainer span").css("top", (50*scroll) + unit);
let onTextBool = document.getElementById("navbar").getAttribute("onText"); document.getElementById("indexbutton").setAttribute("onText", onTextBool);
} window.addEventListener("scroll", animate, {passive: 1}); window.addEventListener("resize", animate, {passive: 1}); document.addEventListener("load", animate, {passive: 1});
// 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 = "index"; 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); li.innerText = heading.innerText; li.dataset.href = "#heading" + number; li.onclick = ()=>{ const setActiveFunction = ()=>{ Array.from(ul.children).forEach((childLi)=>{ childLi.className = ""; }); li.className = "active"; }; setTimeout(setActiveFunction, 100); setTimeout(setActiveFunction, 300); setTimeout(setActiveFunction, 500); let introContainer = document.querySelector("div.introContainer"); //document.documentElement.scrollTo(0, introContainer.clientHeight + heading.offsetTop - 160); window.scroll({ top: introContainer.clientHeight + heading.offsetTop - 160, left: 0, behavior: 'smooth' }); } 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(); // does this work?
} 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){ 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);
// Set heading text window.addEventListener("load", ()=>{
let text = document.getElementById("headingTitleText").value; document.querySelector(".introContainer div.heading").innerText = text; document.querySelector(".introContainer div.heading.other").innerText = text;
});