|
|
| 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();
