m |
|||
(11 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
// Index | // Index | ||
// Create index of h3s dynamically | // Create index of h3s dynamically | ||
+ | let indexbutton = null; | ||
+ | |||
function addIndex() { | function addIndex() { | ||
+ | |||
+ | |||
let mainContent = document.getElementById("section-text"); | let mainContent = document.getElementById("section-text"); | ||
− | + | indexbutton = document.createElement("div"); | |
indexbutton.id = "indexbutton"; | indexbutton.id = "indexbutton"; | ||
indexbutton.className = "indexbutton"; | indexbutton.className = "indexbutton"; | ||
Line 11: | Line 15: | ||
let index = document.createElement("div"); | let index = document.createElement("div"); | ||
index.id = "index"; | index.id = "index"; | ||
− | index. | + | index.classList.add("sideBlock", "notshow") |
+ | index.appendChild(indexbutton); | ||
let boldIndexTitle = document.createElement("b"); | let boldIndexTitle = document.createElement("b"); | ||
boldIndexTitle.innerText = document.getElementById("headingTitleText").value; | boldIndexTitle.innerText = document.getElementById("headingTitleText").value; | ||
Line 17: | Line 22: | ||
let ul = document.createElement("ul"); | let ul = document.createElement("ul"); | ||
index.appendChild(ul); | index.appendChild(ul); | ||
+ | |||
+ | |||
+ | function closeIndex() { | ||
+ | indexbutton.innerHTML = "Index"; | ||
+ | indexbutton.classList.remove("open"); | ||
+ | index.classList.remove("open") | ||
+ | } | ||
+ | |||
+ | function openIndex() { | ||
+ | indexbutton.innerHTML = "✖"; | ||
+ | indexbutton.classList.add("open"); | ||
+ | index.classList.add("open") | ||
+ | } | ||
+ | |||
+ | // let closebutton = document.createElement("div"); | ||
+ | // closebutton.className = "indexbutton"; | ||
+ | // closebutton.innerHTML = "✖"; | ||
+ | // closebutton.onclick = closeIndex; | ||
+ | // index.appendChild(closebutton); | ||
+ | |||
let headings = document.querySelectorAll(".content div.h3"); | let headings = document.querySelectorAll(".content div.h3"); | ||
Line 42: | Line 67: | ||
setTimeout(setActiveFunction, 260); | setTimeout(setActiveFunction, 260); | ||
setTimeout(setActiveFunction, 420); | setTimeout(setActiveFunction, 420); | ||
+ | closeIndex(); | ||
} | } | ||
number++; | number++; | ||
} | } | ||
mainContent.insertBefore(index, mainContent.firstChild); | mainContent.insertBefore(index, mainContent.firstChild); | ||
− | mainContent.insertBefore(indexbutton, mainContent.firstChild); | + | // mainContent.insertBefore(indexbutton, mainContent.firstChild); |
indexbutton.onclick = () => { | indexbutton.onclick = () => { | ||
if (indexbutton.classList.contains("open")) { | if (indexbutton.classList.contains("open")) { | ||
− | + | closeIndex(); | |
− | + | ||
− | + | ||
} else { | } else { | ||
− | + | openIndex(); | |
− | + | ||
− | + | ||
} | } | ||
}; | }; | ||
initializeIndexScroll(); | initializeIndexScroll(); | ||
} | } | ||
− | + | document.addEventListener('DOMContentLoaded', addIndex); | |
// Change index bubble dynamically on scroll | // Change index bubble dynamically on scroll | ||
Line 84: | Line 106: | ||
let calculatedScroll = currentScrollPos + clientWindowMid; | let calculatedScroll = currentScrollPos + clientWindowMid; | ||
let highlightedElement; | let highlightedElement; | ||
− | for (let i | + | for (let i = scrollPositions.length-1; i >= 0; i--) { |
− | if (scrollPositions[i].position | + | if (scrollPositions[i].position < calculatedScroll+160) { |
highlightedElement = scrollPositions[i].element; | highlightedElement = scrollPositions[i].element; | ||
break; | break; | ||
Line 110: | Line 132: | ||
window.addEventListener("scroll", indexScroll); | window.addEventListener("scroll", indexScroll); | ||
+ | const introContainer = document.querySelector(".introContainer"); | ||
function checkHideIndex(){ | function checkHideIndex(){ | ||
− | |||
if (indexbutton == null) return; | if (indexbutton == null) return; | ||
− | if ( | + | let indexbuttonTop = indexbutton.getBoundingClientRect().top; |
− | let | + | if (index.classList.contains("notshow")){ |
− | if ( | + | indexbuttonTop -= 60; |
− | + | } | |
− | + | let introContainerBottom = introContainer.getBoundingClientRect().bottom; | |
+ | let footerTop = footerWrapper.getBoundingClientRect().top; | ||
+ | |||
+ | if (indexbuttonTop < introContainerBottom || indexbuttonTop > footerTop){ | ||
+ | index.classList.add("notshow"); | ||
}else{ | }else{ | ||
− | + | index.classList.remove("notshow"); | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
} | } | ||
window.addEventListener("resize", checkHideIndex); | window.addEventListener("resize", checkHideIndex); | ||
window.addEventListener("scroll", checkHideIndex); | window.addEventListener("scroll", checkHideIndex); |
Latest revision as of 23:36, 18 December 2020
// Index // Create index of h3s dynamically let indexbutton = null;
function addIndex() {
let mainContent = document.getElementById("section-text");
indexbutton = document.createElement("div"); indexbutton.id = "indexbutton"; indexbutton.className = "indexbutton"; indexbutton.innerText = "Index";
let index = document.createElement("div"); index.id = "index"; index.classList.add("sideBlock", "notshow") index.appendChild(indexbutton); let boldIndexTitle = document.createElement("b"); boldIndexTitle.innerText = document.getElementById("headingTitleText").value; index.appendChild(boldIndexTitle); let ul = document.createElement("ul"); index.appendChild(ul);
function closeIndex() {
indexbutton.innerHTML = "Index";
indexbutton.classList.remove("open");
index.classList.remove("open")
}
function openIndex() { indexbutton.innerHTML = "✖"; indexbutton.classList.add("open"); index.classList.add("open") }
// let closebutton = document.createElement("div"); // closebutton.className = "indexbutton"; // closebutton.innerHTML = "✖"; // closebutton.onclick = closeIndex; // index.appendChild(closebutton);
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); closeIndex(); } number++; } mainContent.insertBefore(index, mainContent.firstChild); // mainContent.insertBefore(indexbutton, mainContent.firstChild);
indexbutton.onclick = () => { if (indexbutton.classList.contains("open")) { closeIndex(); } else { openIndex(); } }; initializeIndexScroll(); } document.addEventListener('DOMContentLoaded', 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 = 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 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);
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; let footerTop = footerWrapper.getBoundingClientRect().top;
if (indexbuttonTop < introContainerBottom || indexbuttonTop > footerTop){ index.classList.add("notshow"); }else{ index.classList.remove("notshow"); } } window.addEventListener("resize", checkHideIndex); window.addEventListener("scroll", checkHideIndex);