Difference between revisions of "Template:Vilnius-Lithuania/JS/ContentPage"

Revision as of 14:25, 21 August 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", (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();

// 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 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.firstChild.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;

});