Skip to content

Commit

Permalink
remove hover
Browse files Browse the repository at this point in the history
  • Loading branch information
mirnawong1 committed Jan 30, 2024
1 parent 1dfe0f8 commit fe519e8
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 54 deletions.
41 changes: 1 addition & 40 deletions website/src/components/detailsToggle/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,12 @@ import styles from './styles.module.css';

function detailsToggle({ children, alt_header = null }) {
const [isOn, setOn] = useState(false);
const [isScrolling, setIsScrolling] = useState(false); // New state to track scrolling
const [hoverTimeout, setHoverTimeout] = useState(null);

Check warning on line 6 in website/src/components/detailsToggle/index.js

View workflow job for this annotation

GitHub Actions / eslint-check

'setHoverTimeout' is assigned a value but never used

const handleToggleClick = () => {
setOn(current => !current); // Toggle the current state
setOn(current => !current);
};

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 = () => {
setIsScrolling(true);
clearTimeout(hoverTimeout);
//setOn(false);


// 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]);
Expand All @@ -53,13 +18,9 @@ function detailsToggle({ children, alt_header = null }) {
<span
className={styles.link}
onClick={handleToggleClick}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<span className={`${styles.toggle} ${isOn ? null : styles.toggleUpsideDown}`}></span>&nbsp;
<span className={styles.headerText}>{alt_header}</span>
{/* Visual disclaimer */}
<small className={styles.disclaimer}>Hover to view</small>
</span>
<div
style={{ display: isOn ? 'block' : 'none' }}
Expand Down
15 changes: 1 addition & 14 deletions website/src/components/faqs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,18 +37,6 @@ function FAQ({ path, alt_header = null }) {
}
}, [filePath])

const handleMouseEnter = () => {
setHoverTimeout(setTimeout(() => {
setOn(true);
}, 500));
};

const handleMouseLeave = () => {
if (!isOn) {
clearTimeout(hoverTimeout);
setOn(false);
}
};

useEffect(() => {
return () => {
Expand All @@ -66,11 +54,10 @@ function FAQ({ path, alt_header = null }) {
};

return (
<div className={styles.faqs} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
<div className={styles.faqs}>
<span className={styles.link} onClick={toggleOn}>
<span className={styles.toggle} style={{ transform: isOn ? 'rotateX(0deg)' : 'rotateX(180deg)' }}></span>
<span className={styles.headerText}>{alt_header || (fileContent?.meta && fileContent.meta.title)}</span>
<small className={styles.disclaimer}>Hover to view</small>
</span>
<div style={{ display: isOn ? 'block' : 'none' }} className={styles.body}>
{fileContent?.contents}
Expand Down

0 comments on commit fe519e8

Please sign in to comment.