refactoring avec claude + ajout scroll-margin-top et désaffichage du panel au click sur les liens du toc
This commit is contained in:
parent
d51fc592ed
commit
01c5b098e4
14 changed files with 149 additions and 121 deletions
|
|
@ -129,20 +129,24 @@ function subscribe(event) {
|
|||
}
|
||||
}
|
||||
|
||||
const panelsNav = document.querySelectorAll(".panel");
|
||||
const panelNavText = document.querySelector(".panel-text");
|
||||
const panelNavToc = document.querySelector(".panel-toc");
|
||||
const panels = document.querySelectorAll(".panel[data-panel]");
|
||||
const navOverlay = document.querySelector("#nav-overlay");
|
||||
const openNavBtns = document.querySelectorAll("button.open-nav");
|
||||
const closeNavBtns = document.querySelectorAll(".panel-close");
|
||||
function closeNav() {
|
||||
panelsNav.forEach(element => {
|
||||
element.classList.remove("panel--visible");
|
||||
});
|
||||
|
||||
function closeAllPanels() {
|
||||
panels.forEach(panel => panel.classList.remove("panel--visible"));
|
||||
navOverlay.classList.remove("nav-overlay--visible");
|
||||
document.body.classList.remove("no-scroll");
|
||||
}
|
||||
|
||||
function openPanel(name) {
|
||||
const panel = document.querySelector(`.panel[data-panel="${name}"]`);
|
||||
if (panel) {
|
||||
panel.classList.add("panel--visible");
|
||||
navOverlay.classList.add("nav-overlay--visible");
|
||||
document.body.classList.add("no-scroll");
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
ragadjust("h1, h2, h4, h5", ["all"]);
|
||||
window.window.scrollTo({
|
||||
|
|
@ -166,10 +170,10 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
|
||||
window.addEventListener("keyup", (event) => {
|
||||
if (event.key === "Escape") {
|
||||
closeNav();
|
||||
closeAllPanels();
|
||||
}
|
||||
});
|
||||
document.querySelectorAll(".panel").forEach((panel) => {
|
||||
panels.forEach((panel) => {
|
||||
panel.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
|
@ -201,25 +205,20 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
});
|
||||
});
|
||||
|
||||
openNavBtns.forEach((openNavBtn) => {
|
||||
openNavBtn.addEventListener("click", (event) => {
|
||||
target = event.currentTarget;
|
||||
if(target.classList.contains("open-nav_text")){
|
||||
panelNavText.classList.add("panel--visible");
|
||||
}else if(target.classList.contains("open-nav_toc")){
|
||||
panelNavToc.classList.add("panel--visible");
|
||||
}
|
||||
navOverlay.classList.add("nav-overlay--visible");
|
||||
document.body.classList.add("no-scroll");
|
||||
document.querySelectorAll("[data-open-panel]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
openPanel(btn.dataset.openPanel);
|
||||
});
|
||||
});
|
||||
|
||||
closeNavBtns.forEach(element => {
|
||||
element.addEventListener("click", () => {
|
||||
closeNav();
|
||||
});
|
||||
document.querySelectorAll(".panel-close").forEach((btn) => {
|
||||
btn.addEventListener("click", closeAllPanels);
|
||||
});
|
||||
navOverlay.addEventListener("click", () => {
|
||||
closeNav();
|
||||
|
||||
navOverlay.addEventListener("click", closeAllPanels);
|
||||
|
||||
// Fermer le panel TOC quand on clique sur un lien
|
||||
document.querySelectorAll(".panel-toc .toc a").forEach((link) => {
|
||||
link.addEventListener("click", closeAllPanels);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue