From 49ae42ec98573c19e1b03e4fdf711fbee90c3708 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Mon, 6 Jan 2025 15:33:11 +0100 Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20du=20responsive=20et=20?= =?UTF-8?q?=C3=A9limination=20du=20code=20mort?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 12 ++--- site/layouts/partials/nav.html | 22 ++++---- .../partials/template/nav-sponsor.html | 12 ++--- site/layouts/partials/template/nav.html | 24 ++++----- src/js/pages/nav.js | 51 +++---------------- 5 files changed, 39 insertions(+), 82 deletions(-) diff --git a/package-lock.json b/package-lock.json index 007f9d3d..f75faf95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3180,9 +3180,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==", + "version": "1.0.30001690", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", + "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", "dev": true, "funding": [ { @@ -10856,9 +10856,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==", + "version": "1.0.30001690", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz", + "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==", "dev": true }, "chalk": { diff --git a/site/layouts/partials/nav.html b/site/layouts/partials/nav.html index 1bf64f2b..19b2346b 100644 --- a/site/layouts/partials/nav.html +++ b/site/layouts/partials/nav.html @@ -1,8 +1,8 @@ -
-
+ - + diff --git a/site/layouts/partials/template/nav-sponsor.html b/site/layouts/partials/template/nav-sponsor.html index a9743ed0..82097e07 100644 --- a/site/layouts/partials/template/nav-sponsor.html +++ b/site/layouts/partials/template/nav-sponsor.html @@ -1,8 +1,5 @@ -
-
Nos partenaires
- +
\ No newline at end of file +
  • Tous nos partenaires
    • +
  • Soutenez Paris Web
    • + diff --git a/site/layouts/partials/template/nav.html b/site/layouts/partials/template/nav.html index f384313a..c14b82c5 100644 --- a/site/layouts/partials/template/nav.html +++ b/site/layouts/partials/template/nav.html @@ -1,8 +1,8 @@ -
    -
    + - \ No newline at end of file + diff --git a/src/js/pages/nav.js b/src/js/pages/nav.js index 0be99de3..16f2e782 100644 --- a/src/js/pages/nav.js +++ b/src/js/pages/nav.js @@ -1,5 +1,6 @@ import debounce from "../util/debounce"; -import throttle from "../util/throttle"; + +const breakpoint = window.matchMedia('(max-width: 68em'); const getFocusableElementsWithin = target => target.querySelectorAll( @@ -111,49 +112,9 @@ const listenButtons = () => { } }; -const listenIntersection = (element, callback) => { - const simulateIntersectionObserver = () => { - const offsetTop = element.offsetTop; - const windowHeight = window.innerHeight; - callback({ isIntersecting: window.scrollY > offsetTop - windowHeight }); - }; - - const throttledSimulateIntersectionObserver = throttle( - simulateIntersectionObserver, - 200 - ); - const debouncedSimulateIntersectionObserver = debounce( - simulateIntersectionObserver, - 50 - ); - - if ("IntersectionObserver" in window) { - const observer = new IntersectionObserver( - entries => { - const entry = entries.find(entry => entry.target === element); - callback(entry); - }, - { - threshold: 0 - } - ); - observer.observe(element); - } else { - window.addEventListener("scroll", () => { - throttledSimulateIntersectionObserver(); - debouncedSimulateIntersectionObserver(); - }); - } - - window.addEventListener("resize", () => { - throttledSimulateIntersectionObserver(); - debouncedSimulateIntersectionObserver(); - }); -}; - -const initModalDialog = () => { +const initModalDialog = (breakpoint) => { const menu = document.querySelector('.menu__content'); - if (window.matchMedia('(min-width: 68em').matches) { + if (breakpoint.matches) { Object.assign(menu, { role: 'dialog', ariaModal: 'true', @@ -167,8 +128,10 @@ const initModalDialog = () => { } const initNavigation = () => { - initModalDialog(); + initModalDialog(breakpoint); listenButtons(); + + breakpoint.addEventListener("change", initModalDialog); }; export default initNavigation;