Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

improve design

Browse source
This commit is contained in:
isUnknown 2024-11-26 13:21:42 +01:00
parent 26047fb0e1
commit 266765fa75
26 changed files with 99 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

101
assets/js/script.js
View file

@ -38,41 +38,6 @@ function roundToNearestHalf(num) {
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 * 8;
const observer = new IntersectionObserver(toggleVisibility, {
root: null,
rootMargin: `-${top}px 0px 0px 0px`,
threshold: 0,
});
observer.observe(entries);
leftBtn.classList.add("transition");
rightBtn.classList.add("transition");
}
function toggleLogoState() {
const scrollY = window.scrollY || window.pageYOffset;
@ -83,36 +48,6 @@ function toggleLogoState() {
}
}
function togglePanel(side, event) {
document.querySelector(`.panel--${side}`).classList.toggle("open");
const isOpen = document
.querySelector(`.panel--${side}`)
.classList.contains("open");
const scrollY = window.scrollY || window.pageYOffset;
if (isOpen) {
if (window.innerWidth < 640) {
document.querySelector("html").style.overflowY = "hidden";
document.querySelector("#main-header").classList.remove("minimized");
}
} else {
if (window.innerWidth < 640) {
document.querySelector("html").style.overflowY = "";
if (scrollY > 10) {
document.querySelector("#main-header").classList.add("minimized");
}
}
}
event.stopPropagation();
}
function closePanels() {
document.querySelectorAll(".panel").forEach((panel) => {
panel.classList.remove("open");
});
}
function fixFootNotes() {
const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');
@ -141,6 +76,7 @@ function slugify(str) {
return removeAccents(str.toLowerCase());
}
const subscribeBtn = document.querySelector("#subscribe-btn");
function showSubscribeField(event) {
event.preventDefault();
const button = event.target;
@ -169,6 +105,16 @@ function subscribe(event) {
}
}
const panelNav = document.querySelector(".panel");
const navOverlay = document.querySelector("#nav-overlay");
const openNavBtn = document.querySelector("button.open-nav");
const closeNavBtn = document.querySelector(".panel-close");
function closeNav() {
panelNav.classList.remove("panel--visible");
navOverlay.classList.remove("nav-overlay--visible");
document.body.classList.remove("no-scroll");
}
document.addEventListener("DOMContentLoaded", () => {
ragadjust("h1, h2, h3, h4, h5", ["all"]);
window.window.scrollTo({
@ -186,17 +132,9 @@ document.addEventListener("DOMContentLoaded", () => {
fixFootNotes();
// Wait for fonts applied
setTimeout(() => {
enableToggleEntriesVisibility();
}, 100);
window.addEventListener("click", () => {
closePanels();
});
window.addEventListener("keyup", (event) => {
if (event.key === "Escape") {
closePanels();
closeNav();
}
});
document.querySelectorAll(".panel").forEach((panel) => {
@ -231,25 +169,18 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
const panelNav = document.querySelector(".panel");
const navOverlay = document.querySelector("#nav-overlay");
const openNavBtn = document.querySelector("button.open-nav");
openNavBtn.addEventListener("click", () => {
panelNav.classList.add("panel--visible");
navOverlay.classList.add("nav-overlay--visible");
document.body.classList.add("no-scroll");
});
const closeNavBtn = document.querySelector(".panel-close");
closeNavBtn.addEventListener("click", () => {
panelNav.classList.remove("panel--visible");
navOverlay.classList.remove("nav-overlay--visible");
document.body.classList.remove("no-scroll");
closeNav();
});
navOverlay.addEventListener("click", () => {
panelNav.classList.remove("panel--visible");
navOverlay.classList.remove("nav-overlay--visible");
document.body.classList.remove("no-scroll");
closeNav();
});
subscribeBtn.addEventListener("click", showSubscribeField);
});