-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add up to date env variables * upgrade axios and typescript * Create tsconfig.json * update display of logs * fix random issue when slider.current is undefined after timeout * fix #671 adjust scroll * add Cell observer around bibliography * add bibliography cell (fake) * eslint * npm audit * fix github workflow
- Loading branch information
1 parent
e43e4b6
commit 250483a
Showing
16 changed files
with
2,334 additions
and
1,996 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,56 @@ | ||
import { useEffect, useRef } from 'react' | ||
import { DisplayLayerCellIdxQueryParam } from '../../constants' | ||
import { | ||
DisplayLayerCellIdxQueryParam, | ||
DisplayLayerSectionBibliography, | ||
DisplayLayerSectionParam, | ||
} from '../../constants' | ||
import { NumberParam, useQueryParams, withDefault } from 'use-query-params' | ||
import { useArticleStore } from '../../store' | ||
|
||
import { asEnumParam } from '../../logic/params' | ||
|
||
const ArticleScrollTo = () => { | ||
const selectedCellIdxFromStore = useArticleStore(state => state.selectedCellIdx) | ||
const selectedCellIdxFromStore = useArticleStore((state) => state.selectedCellIdx) | ||
const timerRef = useRef(null) | ||
const [{ [DisplayLayerCellIdxQueryParam]: selectedCellIdx }, setQuery] = useQueryParams({ | ||
const [ | ||
{ [DisplayLayerCellIdxQueryParam]: selectedCellIdx, [DisplayLayerSectionParam]: sectionName }, | ||
setQuery, | ||
] = useQueryParams({ | ||
[DisplayLayerCellIdxQueryParam]: withDefault(NumberParam, -1), | ||
[DisplayLayerSectionParam]: asEnumParam([DisplayLayerSectionBibliography]), | ||
}) | ||
const moveTo = (idx) => { | ||
// scroll to the correct id | ||
const element = document.querySelector("[data-cell-idx='" + idx + "']") | ||
// scroll to the correct id | ||
const element = document.querySelector("[data-cell-idx='" + idx + "']") | ||
|
||
if (element) { | ||
window.scrollTo(0,element.offsetTop -150) | ||
} | ||
if (element) { | ||
window.scrollTo(0, element.offsetTop - 150) | ||
} | ||
} | ||
useEffect(() => { | ||
if(selectedCellIdxFromStore !== -1 && selectedCellIdxFromStore !== selectedCellIdx) { | ||
if (selectedCellIdxFromStore !== -1 && selectedCellIdxFromStore !== selectedCellIdx) { | ||
moveTo(selectedCellIdxFromStore) | ||
setQuery({ [DisplayLayerCellIdxQueryParam]: selectedCellIdxFromStore }) | ||
} | ||
}, [selectedCellIdxFromStore]) | ||
|
||
useEffect(() => { | ||
console.debug( | ||
'[ArticleScrollTo] selectedCellIdx:', | ||
selectedCellIdx, | ||
'sectionName:', | ||
sectionName, | ||
) | ||
clearTimeout(timerRef.current) | ||
timerRef.current = setTimeout(() => { | ||
moveTo(selectedCellIdx) | ||
if (sectionName) { | ||
moveTo(sectionName) | ||
} else if (selectedCellIdx !== -1) { | ||
moveTo(selectedCellIdx) | ||
} | ||
}, 1000) | ||
|
||
return () => clearTimeout(timerRef.current) | ||
}, [selectedCellIdx]) | ||
}, [selectedCellIdx, sectionName]) | ||
} | ||
|
||
export default ArticleScrollTo | ||
export default ArticleScrollTo |
Oops, something went wrong.