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

m
 
(8 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
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
 
// 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) return;
 
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);
+
cp__image.style.top = (60 * scroll) + unit;
−
// $(".introContainer span").css("background-position", "0 calc(" + (scrollTop) + "px - " + (50*scroll + 10) + unit + ")");
+
  
−
if (document.getElementById("indexbutton") == undefined) return;
+
cp__heading1.style.marginTop = (70 * scroll) + unit;
−
let onTextBool = document.getElementById("navbar").getAttribute("onText");
+
cp__heading2.style.marginTop = (70 * scroll) + unit;
−
document.getElementById("indexbutton").setAttribute("onText", onTextBool);
+
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("scroll", animate, {passive: 1});
 
window.addEventListener("resize", animate, {passive: 1});
 
window.addEventListener("resize", animate, {passive: 1});
−
document.addEventListener("load", animate, {passive: 1});
+
window.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;
 
−
});
 

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