|
|
Line 1: |
Line 1: |
| + | // 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; |
| + | }); |
| + | |
| // Title bubble animation | | // Title bubble animation |
| function animate() { | | function animate() { |
Line 17: |
Line 24: |
| document.addEventListener("load", animate, {passive: 1}); | | document.addEventListener("load", animate, {passive: 1}); |
| animate(); | | animate(); |
− |
| |
− | // 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);
| |
− | 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);
| |
− |
| |
− | // 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;
| |
− | });
| |
− |
| |
− | window.addEventListener("resize", checkHideIndex);
| |
− | window.addEventListener("scroll", checkHideIndex);
| |
− |
| |
− | 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);
| |
− | }
| |
− | }
| |
// 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;
});
// 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", (60 * scroll) + unit);
// $(".introContainer span").css("background-position", "0 calc(" + (scrollTop) + "px - " + (50*scroll + 10) + unit + ")");
if (document.getElementById("indexbutton") == undefined) return;
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});
animate();