135 lines
3.3 KiB
JavaScript
135 lines
3.3 KiB
JavaScript
const verticalUnit = getUnit("--unit--vertical");
|
|
|
|
function getUnit(id) {
|
|
const remFactor = 16;
|
|
const rawUnit =
|
|
getComputedStyle(document.documentElement).getPropertyValue(id) || "1.7rem";
|
|
const remUnit = parseFloat(rawUnit);
|
|
const pxUnit = remUnit * remFactor;
|
|
return pxUnit;
|
|
}
|
|
|
|
function throttle(callback, limit) {
|
|
let waiting = false;
|
|
return function () {
|
|
if (!waiting) {
|
|
callback.apply(this, arguments);
|
|
waiting = true;
|
|
setTimeout(function () {
|
|
waiting = false;
|
|
}, limit);
|
|
}
|
|
};
|
|
}
|
|
|
|
function toggleTab(data, tab) {
|
|
if (data.activeTab === tab) {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
setTimeout(() => {
|
|
data.isOpen = false;
|
|
data.activeTab = "";
|
|
}, 500);
|
|
} else {
|
|
data.activeTab = tab;
|
|
data.isOpen = true;
|
|
scrollToElem(".active-tab");
|
|
}
|
|
}
|
|
|
|
function scrollToElem(selector) {
|
|
document.querySelector(".active-tab").scrollTop = 0;
|
|
setTimeout(() => {
|
|
const yOffset = -7 * verticalUnit;
|
|
const elem = document.querySelector(selector);
|
|
const top = elem.getBoundingClientRect().top;
|
|
window.scrollTo({
|
|
top: top + window.scrollY + yOffset,
|
|
behavior: "smooth",
|
|
});
|
|
}, 100);
|
|
}
|
|
|
|
function setWindowHeightFactor() {
|
|
const windowHeight = window.innerHeight;
|
|
const min = 650;
|
|
const delta = windowHeight - min;
|
|
const factor = roundToNearestHalf(delta / 300) + 1;
|
|
|
|
const head = document.querySelector("head");
|
|
const style = document.createElement("style");
|
|
style.innerText = `:root { --window-height-factor:${factor} }`;
|
|
head.appendChild(style);
|
|
}
|
|
|
|
function roundToNearestHalf(num) {
|
|
const round = Math.round(num * 2) / 2;
|
|
return Math.max(round, 0);
|
|
}
|
|
|
|
function enableToggleEntriesVisibility() {
|
|
const entries = document.querySelector("#entry-btns");
|
|
|
|
const leftBtn = entries.querySelector(".entry-btn--left");
|
|
const rightBtn = entries.querySelector(".entry-btn--right");
|
|
const leftBtnWidth = leftBtn.offsetWidth;
|
|
const rightBtnWidth = rightBtn.offsetWidth;
|
|
|
|
leftBtn.style = `--width: ${leftBtnWidth}px`;
|
|
rightBtn.style = `--width: ${rightBtnWidth}px`;
|
|
|
|
const toggleVisibility = (items) => {
|
|
items.forEach((item) => {
|
|
const isIntersecting = item.isIntersecting;
|
|
if (isIntersecting) {
|
|
entries.classList.remove("minimized");
|
|
} else {
|
|
entries.classList.add("minimized");
|
|
}
|
|
});
|
|
};
|
|
|
|
const top = verticalUnit * 6;
|
|
|
|
const observer = new IntersectionObserver(toggleVisibility, {
|
|
root: null,
|
|
rootMargin: `-${top}px 0px 0px 0px`,
|
|
threshold: 0,
|
|
});
|
|
|
|
observer.observe(entries);
|
|
}
|
|
|
|
function toggleLogoState() {
|
|
const scrollY = window.scrollY || window.pageYOffset;
|
|
|
|
if (scrollY > 10) {
|
|
document.querySelector("#main-header").classList.add("minimized");
|
|
} else {
|
|
document.querySelector("#main-header").classList.remove("minimized");
|
|
}
|
|
}
|
|
|
|
function togglePanel(side) {
|
|
document.querySelector(`.panel--${side}`).classList.toggle("open");
|
|
document.querySelector("#main-header").classList.remove("minimized");
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
window.window.scrollTo({
|
|
top: 0,
|
|
});
|
|
|
|
window.addEventListener("scroll", () => {
|
|
toggleLogoState();
|
|
});
|
|
|
|
setWindowHeightFactor();
|
|
|
|
// Wait for fonts applied
|
|
setTimeout(() => {
|
|
enableToggleEntriesVisibility();
|
|
}, 100);
|
|
});
|