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

m
m
Line 2: Line 2:
 
// 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");
  
Line 12: Line 14:
 
index.id = "index";
 
index.id = "index";
 
index.className = "sideBlock";
 
index.className = "sideBlock";
 +
index.appendChild(indexbutton);
 
let boldIndexTitle = document.createElement("b");
 
let boldIndexTitle = document.createElement("b");
 
boldIndexTitle.innerText = document.getElementById("headingTitleText").value;
 
boldIndexTitle.innerText = document.getElementById("headingTitleText").value;
Line 17: Line 20:
 
let ul = document.createElement("ul");
 
let ul = document.createElement("ul");
 
index.appendChild(ul);
 
index.appendChild(ul);
 +
 +
 +
function closeIndex() {
 +
indexbutton.innerHTML = "Index";
 +
indexbutton.classList.remove("open");
 +
index.classList.remove("open")
 +
}
 +
 +
function openIndex() {
 +
indexbutton.innerHTML = "✖";
 +
indexbutton.classList.add("open");
 +
index.classList.add("open")
 +
}
 +
 +
// let closebutton = document.createElement("div");
 +
// closebutton.className = "indexbutton";
 +
// closebutton.innerHTML = "✖";
 +
// closebutton.onclick = closeIndex;
 +
// index.appendChild(closebutton);
 +
  
 
let headings = document.querySelectorAll(".content div.h3");
 
let headings = document.querySelectorAll(".content div.h3");
Line 42: Line 65:
 
setTimeout(setActiveFunction, 260);
 
setTimeout(setActiveFunction, 260);
 
setTimeout(setActiveFunction, 420);
 
setTimeout(setActiveFunction, 420);
 +
closeIndex();
 
}
 
}
 
number++;
 
number++;
 
}
 
}
 
mainContent.insertBefore(index, mainContent.firstChild);
 
mainContent.insertBefore(index, mainContent.firstChild);
−
mainContent.insertBefore(indexbutton, mainContent.firstChild);
+
// mainContent.insertBefore(indexbutton, mainContent.firstChild);
  
 
indexbutton.onclick = () => {
 
indexbutton.onclick = () => {
 
if (indexbutton.classList.contains("open")) {
 
if (indexbutton.classList.contains("open")) {
−
indexbutton.innerHTML = "Index";
+
closeIndex();
−
indexbutton.classList.remove("open");
+
−
index.classList.remove("open")
+
 
} else {
 
} else {
−
indexbutton.innerHTML = "Close";
+
openIndex();
−
indexbutton.classList.add("open");
+
−
index.classList.add("open")
+
 
}
 
}
 
};
 
};
Line 117: Line 137:
 
let onTextBool = document.getElementById("navbar").getAttribute("onText");
 
let onTextBool = document.getElementById("navbar").getAttribute("onText");
 
if (onTextBool === "false"){
 
if (onTextBool === "false"){
−
indexbutton.setAttribute("onText", false);
+
index.setAttribute("onText", false);
 
return;
 
return;
 
}else{
 
}else{
Line 123: Line 143:
 
let footerTop = footerWrapper.getBoundingClientRect().top;
 
let footerTop = footerWrapper.getBoundingClientRect().top;
 
let scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
 
let scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom;
−
indexbutton.setAttribute("onText", scrollbarBottom < footerTop);
+
index.setAttribute("onText", scrollbarBottom < footerTop);
 
}
 
}
 
}
 
}
 
window.addEventListener("resize", checkHideIndex);
 
window.addEventListener("resize", checkHideIndex);
 
window.addEventListener("scroll", checkHideIndex);
 
window.addEventListener("scroll", checkHideIndex);

Revision as of 15:33, 5 October 2020

// Index // 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 = "sideBlock"; index.appendChild(indexbutton); let boldIndexTitle = document.createElement("b"); boldIndexTitle.innerText = document.getElementById("headingTitleText").value; index.appendChild(boldIndexTitle); let ul = document.createElement("ul"); index.appendChild(ul);


function closeIndex() { indexbutton.innerHTML = "Index"; indexbutton.classList.remove("open"); index.classList.remove("open") }

function openIndex() { indexbutton.innerHTML = "✖"; indexbutton.classList.add("open"); index.classList.add("open") }

// let closebutton = document.createElement("div"); // closebutton.className = "indexbutton"; // closebutton.innerHTML = "✖"; // closebutton.onclick = closeIndex; // index.appendChild(closebutton);


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); closeIndex(); } number++; } mainContent.insertBefore(index, mainContent.firstChild); // mainContent.insertBefore(indexbutton, mainContent.firstChild);

indexbutton.onclick = () => { if (indexbutton.classList.contains("open")) { closeIndex(); } else { openIndex(); } }; 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);


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"){ index.setAttribute("onText", false); return; }else{ if (footerWrapper === undefined) return; let footerTop = footerWrapper.getBoundingClientRect().top; let scrollbarBottom = document.getElementById("scrollbar-container").getBoundingClientRect().bottom; index.setAttribute("onText", scrollbarBottom < footerTop); } } window.addEventListener("resize", checkHideIndex); window.addEventListener("scroll", checkHideIndex);