Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-09-21 18:58:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix active link detection not working

Browse Source
This commit is contained in:
mrjvs 2023-11-24 19:04:56 +01:00
parent e62238459c
commit 0094261aec
1 changed files with 8 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/parts/settings/SidebarPart.tsx
View File

@ -7,8 +7,6 @@ import { Divider } from "@/components/utils/Divider";
import { useIsMobile } from "@/hooks/useIsMobile"; import { useIsMobile } from "@/hooks/useIsMobile";
import { conf } from "@/setup/config"; import { conf } from "@/setup/config";
const percentageVisible = 10;
export function SidebarPart() { export function SidebarPart() {
const { isMobile } = useIsMobile(); const { isMobile } = useIsMobile();
// eslint-disable-next-line no-restricted-globals // eslint-disable-next-line no-restricted-globals
@ -28,27 +26,23 @@ export function SidebarPart() {
function recheck() { function recheck() {
const windowHeight = const windowHeight =
window.innerHeight || document.documentElement.clientHeight; window.innerHeight || document.documentElement.clientHeight;
const middle = windowHeight / 2;
// TODO this detection does not work
const viewList = settingLinks const viewList = settingLinks
.map((link) => { .map((link) => {
const el = document.getElementById(link.id); const el = document.getElementById(link.id);
if (!el) return { visible: false, link: link.id }; if (!el) return { distance: Infinity, link: link.id };
const rect = el.getBoundingClientRect(); const rect = el.getBoundingClientRect();
const visible = !( const distanceTop = Math.abs(middle - rect.top);
Math.floor( const distanceBottom = Math.abs(middle - rect.bottom);
50 - ((rect.top >= 0 ? 0 : rect.top) / +-rect.height) * 100
) < percentageVisible ||
Math.floor(
50 - ((rect.bottom - windowHeight) / rect.height) * 100
) < percentageVisible
);
return { visible, link: link.id }; const distance = Math.min(distanceBottom, distanceTop);
return { distance, link: link.id };
}) })
.filter((v) => v.visible); .sort((a, b) => a.distance - b.distance);
// shortest distance to middle of screen is the active link
setActiveLink(viewList[0]?.link ?? ""); setActiveLink(viewList[0]?.link ?? "");
} }
document.addEventListener("scroll", recheck); document.addEventListener("scroll", recheck);