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

m
 
(11 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
// Title bubble animation
+
const cp__heading1 = document.querySelector(".introContainer div.heading");
−
function animate() {
+
const cp__heading2 = document.querySelector(".introContainer div.heading.other");
−
    let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
+
const cp__image = document.querySelector(".introContainer span");
−
    let scroll = scrollTop / window.innerHeight;
+
const cp__container = document.querySelector(".introContainer");
−
    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;
+
function setHeading(heading) {
−
     let onTextBool = document.getElementById("navbar").getAttribute("onText");
+
     cp__heading1.innerText = heading;
−
     document.getElementById("indexbutton").setAttribute("onText", onTextBool);
+
     cp__heading2.innerText = heading;
 
}
 
}
−
window.addEventListener("scroll", animate, {passive: 1});
 
−
window.addEventListener("resize", animate, {passive: 1});
 
−
document.addEventListener("load", animate, {passive: 1});
 
−
animate();
 
  
−
// Create index of h3s dynamically
+
// Title bubble animation
−
function addIndex() {
+
function animate() {
−
    let mainContent = document.getElementById("section-text");
+
let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
 +
let scroll = scrollTop / window.innerHeight;
 +
if (scroll > 1) return;
 +
let unit = "vw";
 +
if (window.innerWidth / window.innerHeight > 1) unit = "vh";
 +
cp__image.style.top = (60 * scroll) + unit;
  
−
    let indexbutton = document.createElement("div");
+
cp__heading1.style.marginTop = (70 * scroll) + unit;
−
    indexbutton.id = "indexbutton";
+
cp__heading2.style.marginTop = (70 * scroll) + unit;
−
    indexbutton.className = "indexbutton";
+
cp__container.style.backgroundPositionY = (35 * scroll) + unit;
−
    indexbutton.innerText = "Index";
+
  
−
    let index = document.createElement("div");
+
// let remainRight = window.innerWidth - cp__heading1.getBoundingClientRect().right - 2;
−
    index.id = "index";
+
// if (remainRight < 20){
−
    index.className = "index";
+
// cp__heading1.style.transform = "translateX(0px)";
−
    let boldIndexTitle = document.createElement("b");
+
// cp__heading2.style.transform = "translateX(0px)";
−
    boldIndexTitle.innerText = document.getElementById("headingTitleText").value;
+
// return;
−
    index.appendChild(boldIndexTitle);
+
// }
−
    let ul = document.createElement("ul");
+
// let skewAmount = remainRight * scroll;
−
    index.appendChild(ul);
+
−
   
+
−
    let headings = document.querySelectorAll(".content div.h3");
+
  
−
    let number = 1;
+
// cp__heading1.style.transform = `translateX(${skewAmount}px)`;
−
    for (let heading of headings) {
+
// cp__heading2.style.transform = `translateX(${-skewAmount}px)`;
−
        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 (document.getElementById("indexbutton") == undefined) return;
−
        if (indexbutton.classList.contains("open")){
+
// let onTextBool = document.getElementById("navbar").getAttribute("onText");
−
            indexbutton.innerHTML = "Index";
+
// document.getElementById("indexbutton").setAttribute("onText", onTextBool);
−
            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);
+
window.addEventListener("scroll", animate, {passive: 1});
−
 
+
window.addEventListener("resize", animate, {passive: 1});
−
// Change index bubble dynamically on scroll
+
window.addEventListener("load", animate, {passive: 1});
−
let scrollPositions = [];
+
animate();
−
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;
+
−
});
+

Latest revision as of 23:48, 3 December 2020

const cp__heading1 = document.querySelector(".introContainer div.heading"); const cp__heading2 = document.querySelector(".introContainer div.heading.other"); const cp__image = document.querySelector(".introContainer span"); const cp__container = document.querySelector(".introContainer");

function setHeading(heading) { 

   cp__heading1.innerText = heading;
   cp__heading2.innerText = heading;

}

// 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) return; let unit = "vw"; if (window.innerWidth / window.innerHeight > 1) unit = "vh"; cp__image.style.top = (60 * scroll) + unit;

cp__heading1.style.marginTop = (70 * scroll) + unit; cp__heading2.style.marginTop = (70 * scroll) + unit; cp__container.style.backgroundPositionY = (35 * scroll) + unit;

// let remainRight = window.innerWidth - cp__heading1.getBoundingClientRect().right - 2; // if (remainRight < 20){ // cp__heading1.style.transform = "translateX(0px)"; // cp__heading2.style.transform = "translateX(0px)"; // return; // } // let skewAmount = remainRight * scroll;

// cp__heading1.style.transform = `translateX(${skewAmount}px)`; // cp__heading2.style.transform = `translateX(${-skewAmount}px)`;

// 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}); window.addEventListener("load", animate, {passive: 1}); animate();