From c8f43c006c149612f060e1238371d004c981e099 Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Mon, 22 Jan 2024 12:28:53 +0000 Subject: [PATCH 1/3] update code to update handleScroll --- website/src/components/detailsToggle/index.js | 56 ++++++++++++------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js index 076d053846c..6e4f3f7768c 100644 --- a/website/src/components/detailsToggle/index.js +++ b/website/src/components/detailsToggle/index.js @@ -3,33 +3,51 @@ import styles from './styles.module.css'; function detailsToggle({ children, alt_header = null }) { const [isOn, setOn] = useState(false); - const [hoverActive, setHoverActive] = useState(true); + const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling const [hoverTimeout, setHoverTimeout] = useState(null); const handleToggleClick = () => { - setHoverActive(true); // Disable hover when clicked setOn(current => !current); // Toggle the current state -}; - -const handleMouseEnter = () => { - if (isOn) return; // Ignore hover if already open - setHoverActive(true); // Enable hover - const timeout = setTimeout(() => { - if (hoverActive) setOn(true); - }, 500); - setHoverTimeout(timeout); -}; - -const handleMouseLeave = () => { - if (!isOn) { + }; + + const handleMouseEnter = () => { + if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling + const timeout = setTimeout(() => { + if (!isScrolling) setOn(true); + }, 700); // + setHoverTimeout(timeout); + }; + + const handleMouseLeave = () => { + if (!isOn) { + clearTimeout(hoverTimeout); + setOn(false); + } + }; + + const handleScroll = () => { + if (isOn) { + setIsScrolling(true); clearTimeout(hoverTimeout); setOn(false); } -}; -useEffect(() => { - return () => clearTimeout(hoverTimeout); -}, [hoverTimeout]); + // Reset scrolling state after a delay + setTimeout(() => { + setIsScrolling(false); + }, 800); + }; + + useEffect(() => { + window.addEventListener('scroll', handleScroll); + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + + useEffect(() => { + return () => clearTimeout(hoverTimeout); + }, [hoverTimeout]); return (
From c2cfcdd59b52e3d7e303ce32d93e67b055a8c816 Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Mon, 22 Jan 2024 13:13:19 +0000 Subject: [PATCH 2/3] update --- website/src/components/detailsToggle/index.js | 59 ++++++++++++++----- .../detailsToggle/styles.module.css | 1 + 2 files changed, 44 insertions(+), 16 deletions(-) diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js index 6e4f3f7768c..b88d955587c 100644 --- a/website/src/components/detailsToggle/index.js +++ b/website/src/components/detailsToggle/index.js @@ -1,41 +1,68 @@ import React, { useState, useEffect } from 'react'; import styles from './styles.module.css'; -function detailsToggle({ children, alt_header = null }) { +function DetailsToggle({ children, alt_header = null, index }) { const [isOn, setOn] = useState(false); - const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling + const [isScrolling, setIsScrolling] = useState(false); const [hoverTimeout, setHoverTimeout] = useState(null); const handleToggleClick = () => { - setOn(current => !current); // Toggle the current state + if (isOn) { + closeToggle(); + } else { + closePreviouslyOpenToggle(); + openToggle(); + } }; const handleMouseEnter = () => { - if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling + if (isScrolling) return; const timeout = setTimeout(() => { - if (!isScrolling) setOn(true); - }, 700); // + closeToggle(); // close the toggle first + openToggle(); // then open it + }, 700); setHoverTimeout(timeout); + closePreviouslyOpenToggle(); }; - + const handleMouseLeave = () => { if (!isOn) { clearTimeout(hoverTimeout); - setOn(false); + closeToggle(); } }; const handleScroll = () => { - if (isOn) { - setIsScrolling(true); - clearTimeout(hoverTimeout); - setOn(false); - } + setIsScrolling(true); + clearTimeout(hoverTimeout); + + if (isOn) { + closeToggle(); + } - // Reset scrolling state after a delay setTimeout(() => { setIsScrolling(false); - }, 800); + }, 300); + }; + + const openToggle = () => { + setOn(true); + }; + + const closeToggle = () => { + setOn(false); + }; + + const closePreviouslyOpenToggle = () => { + const allToggles = document.querySelectorAll('.detailsToggle'); + allToggles.forEach((toggle, toggleIndex) => { + if (toggleIndex !== index) { + const toggleIsOpen = toggle.querySelector(`.${styles.body}`).style.display === 'block'; + if (toggleIsOpen) { + toggle.querySelector(`.${styles.body}`).style.display = 'none'; + } + } + }); }; useEffect(() => { @@ -72,4 +99,4 @@ function detailsToggle({ children, alt_header = null }) { ); } -export default detailsToggle; +export default DetailsToggle; diff --git a/website/src/components/detailsToggle/styles.module.css b/website/src/components/detailsToggle/styles.module.css index b9c2f09df06..b3f4a4886dc 100644 --- a/website/src/components/detailsToggle/styles.module.css +++ b/website/src/components/detailsToggle/styles.module.css @@ -27,6 +27,7 @@ width: 1.25rem; vertical-align: middle; transition: transform 0.3s; /* Smooth transition for toggle icon */ + } :local(.toggleUpsideDown) { From 61d73daa03e54ede4c5985d08db2848d4400045e Mon Sep 17 00:00:00 2001 From: mirnawong1 Date: Mon, 22 Jan 2024 15:53:52 +0000 Subject: [PATCH 3/3] update handlescroll --- website/src/components/detailsToggle/index.js | 53 +++++-------------- 1 file changed, 12 insertions(+), 41 deletions(-) diff --git a/website/src/components/detailsToggle/index.js b/website/src/components/detailsToggle/index.js index b88d955587c..fc51af35428 100644 --- a/website/src/components/detailsToggle/index.js +++ b/website/src/components/detailsToggle/index.js @@ -1,68 +1,39 @@ import React, { useState, useEffect } from 'react'; import styles from './styles.module.css'; -function DetailsToggle({ children, alt_header = null, index }) { +function detailsToggle({ children, alt_header = null }) { const [isOn, setOn] = useState(false); - const [isScrolling, setIsScrolling] = useState(false); + const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling const [hoverTimeout, setHoverTimeout] = useState(null); const handleToggleClick = () => { - if (isOn) { - closeToggle(); - } else { - closePreviouslyOpenToggle(); - openToggle(); - } + setOn(current => !current); // Toggle the current state }; const handleMouseEnter = () => { - if (isScrolling) return; + if (isOn || isScrolling) return; // Ignore hover if already open or if scrolling const timeout = setTimeout(() => { - closeToggle(); // close the toggle first - openToggle(); // then open it - }, 700); + if (!isScrolling) setOn(true); + }, 700); // setHoverTimeout(timeout); - closePreviouslyOpenToggle(); }; - + const handleMouseLeave = () => { if (!isOn) { clearTimeout(hoverTimeout); - closeToggle(); + setOn(false); } }; const handleScroll = () => { setIsScrolling(true); clearTimeout(hoverTimeout); + //setOn(false); - if (isOn) { - closeToggle(); - } - + // Reset scrolling state after a delay setTimeout(() => { setIsScrolling(false); - }, 300); - }; - - const openToggle = () => { - setOn(true); - }; - - const closeToggle = () => { - setOn(false); - }; - - const closePreviouslyOpenToggle = () => { - const allToggles = document.querySelectorAll('.detailsToggle'); - allToggles.forEach((toggle, toggleIndex) => { - if (toggleIndex !== index) { - const toggleIsOpen = toggle.querySelector(`.${styles.body}`).style.display === 'block'; - if (toggleIsOpen) { - toggle.querySelector(`.${styles.body}`).style.display = 'none'; - } - } - }); + }, 800); }; useEffect(() => { @@ -99,4 +70,4 @@ function DetailsToggle({ children, alt_header = null, index }) { ); } -export default DetailsToggle; +export default detailsToggle;