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

m
Line 1: Line 1:
 
// Title bubble animation
 
// Title bubble animation
 
function animate() {
 
function animate() {
−
    let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
+
let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop;
−
    let scroll = scrollTop / window.innerHeight;
+
let scroll = scrollTop / window.innerHeight;
−
    if (scroll > 1) scroll = 1;
+
if (scroll > 1) scroll = 1;
−
    let unit = "vw";
+
let unit = "vw";
−
    if (window.innerWidth/window.innerHeight > 1) unit = "vh"
+
if (window.innerWidth / window.innerHeight > 1) unit = "vh"
−
    $(".introContainer span").css("top", (60*scroll) + unit);
+
$(".introContainer span").css("top", (60 * scroll) + unit);
−
    // $(".introContainer span").css("background-position", "0 calc(" + (scrollTop) + "px - " + (50*scroll + 10) + unit + ")");
+
// $(".introContainer span").css("background-position", "0 calc(" + (scrollTop) + "px - " + (50*scroll + 10) + unit + ")");
  
−
    if (document.getElementById("indexbutton") == undefined) return;
+
if (document.getElementById("indexbutton") == undefined) return;
−
    let onTextBool = document.getElementById("navbar").getAttribute("onText");
+
let onTextBool = document.getElementById("navbar").getAttribute("onText");
−
    document.getElementById("indexbutton").setAttribute("onText", onTextBool);
+
document.getElementById("indexbutton").setAttribute("onText", onTextBool);
 
}
 
}
 
window.addEventListener("scroll", animate, {passive: 1});
 
window.addEventListener("scroll", animate, {passive: 1});
Line 20: Line 20:
 
// Create index of h3s dynamically
 
// Create index of h3s dynamically
 
function addIndex() {
 
function addIndex() {
−
    let mainContent = document.getElementById("section-text");
+
let mainContent = document.getElementById("section-text");
  
−
    let indexbutton = document.createElement("div");
+
let indexbutton = document.createElement("div");
−
    indexbutton.id = "indexbutton";
+
indexbutton.id = "indexbutton";
−
    indexbutton.className = "indexbutton";
+
indexbutton.className = "indexbutton";
−
    indexbutton.innerText = "Index";
+
indexbutton.innerText = "Index";
  
−
    let index = document.createElement("div");
+
let index = document.createElement("div");
−
    index.id = "index";
+
index.id = "index";
−
    index.className = "index";
+
index.className = "index";
−
    let boldIndexTitle = document.createElement("b");
+
let boldIndexTitle = document.createElement("b");
−
    boldIndexTitle.innerText = document.getElementById("headingTitleText").value;
+
boldIndexTitle.innerText = document.getElementById("headingTitleText").value;
−
    index.appendChild(boldIndexTitle);
+
index.appendChild(boldIndexTitle);
−
    let ul = document.createElement("ul");
+
let ul = document.createElement("ul");
−
    index.appendChild(ul);
+
index.appendChild(ul);
−
   
+
−
    let headings = document.querySelectorAll(".content div.h3");
+
  
−
    let number = 1;
+
let headings = document.querySelectorAll(".content div.h3");
−
    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 = ()=>{
+
let number = 1;
−
        if (indexbutton.classList.contains("open")){
+
for (let heading of headings) {
−
            indexbutton.innerHTML = "Index";
+
heading.id = "heading" + number;
−
            indexbutton.classList.remove("open");
+
let li = document.createElement("li");
−
            index.classList.remove("open")
+
if (number == 1) li.className = "active";
−
        }else{
+
ul.appendChild(li);
−
            indexbutton.innerHTML = "Close";
+
let div = document.createElement("div");
−
            indexbutton.classList.add("open");
+
li.appendChild(div);
−
            index.classList.add("open")
+
let a = document.createElement("a");
−
        }
+
a.href = "#heading" + number;
−
    };
+
a.innerText = heading.innerText;
−
    initializeIndexScroll();
+
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);
 
window.addEventListener("load", addIndex);
Line 83: Line 83:
 
// Change index bubble dynamically on scroll
 
// Change index bubble dynamically on scroll
 
let scrollPositions = [];
 
let scrollPositions = [];
−
function activateBubble(id){
+
 
−
    let ul = document.querySelector("#index ul");
+
function activateBubble(id) {
−
    Array.from(ul.children).forEach((childLi)=>{
+
let ul = document.querySelector("#index ul");
−
        // if (childLi.dataset.href == "#" + id){
+
Array.from(ul.children).forEach((childLi) => {
−
        if (childLi.firstChild.getAttribute("href") == "#" + id){
+
// if (childLi.dataset.href == "#" + id){
−
            childLi.className = "active";
+
if (childLi.lastElementChild.getAttribute("href") == "#" + id) {
−
            return;
+
childLi.className = "active";
−
        }
+
return;
−
        childLi.className = "";
+
}
−
    });
+
childLi.className = "";
 +
});
 
}
 
}
−
function indexScroll(){
 
−
    let currentScrollPos = document.documentElement.scrollTop;
 
−
    let clientWindowMid = document.documentElement.clientHeight*0.1;
 
  
−
    let calculatedScroll = currentScrollPos + clientWindowMid;
+
function indexScroll() {
−
    let highlightedElement;
+
let currentScrollPos = document.documentElement.scrollTop;
−
    for (let i = 0, n = scrollPositions.length; i < n; i++){
+
let clientWindowMid = document.documentElement.clientHeight * 0.1;
−
        if (scrollPositions[i].position > calculatedScroll){
+
 
−
            highlightedElement = scrollPositions[i].element;
+
let calculatedScroll = currentScrollPos + clientWindowMid;
−
            break;
+
let highlightedElement;
−
        }
+
for (let i = 0, n = scrollPositions.length; i < n; i++) {
−
    }
+
if (scrollPositions[i].position > calculatedScroll) {
−
    if (highlightedElement == undefined || highlightedElement.id == undefined) return;
+
highlightedElement = scrollPositions[i].element;
−
    activateBubble(highlightedElement.id);
+
break;
 +
}
 +
}
 +
if (highlightedElement == undefined || highlightedElement.id == undefined) return;
 +
activateBubble(highlightedElement.id);
 
}
 
}
  
−
function initializeIndexScroll(){
+
function initializeIndexScroll() {
−
    scrollPositions = [];
+
scrollPositions = [];
−
    let mainContent = document.getElementById("section-text");
+
let mainContent = document.getElementById("section-text");
−
    let headings = document.querySelectorAll(".content div.h3");
+
let headings = document.querySelectorAll(".content div.h3");
−
    headings.forEach((heading) => {
+
headings.forEach((heading) => {
−
        let position = mainContent.offsetTop + heading.offsetTop;
+
let position = mainContent.offsetTop + heading.offsetTop;
−
        scrollPositions.push({element: heading, position});
+
scrollPositions.push({
−
    });
+
element: heading,
−
   
+
position
 +
});
 +
});
 +
 
 
}
 
}
 
window.addEventListener("resize", initializeIndexScroll);
 
window.addEventListener("resize", initializeIndexScroll);
Line 124: Line 129:
  
 
// Set heading text
 
// Set heading text
−
window.addEventListener("load", ()=>{
+
window.addEventListener("load", () => {
−
    let text = document.getElementById("headingTitleText").value;
+
let text = document.getElementById("headingTitleText").value;
−
    document.querySelector(".introContainer div.heading").innerText = text;
+
document.querySelector(".introContainer div.heading").innerText = text;
−
    document.querySelector(".introContainer div.heading.other").innerText = text;
+
document.querySelector(".introContainer div.heading.other").innerText = text;
 
});
 
});

Revision as of 16:11, 25 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 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; });