q3k
8c52de0616
Some checks failed
/ deploy (push) Failing after 2s
This fixes: 1. Sections overlapping with navbar when linked to. The fix is dirty, it's just a margin. 2. The inability to scroll down to 'contacts' and other lower sections. We just expand the second-to-last section to allow the browser to scroll. 3. Updating the currently active section - this now uses a global view of all visible sections that is updated by the observer diff, thereby fixing the logic.
84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
import { Sections } from "@/i18n/translations";
|
|
import { useLayoutEffect, useRef } from "react";
|
|
|
|
export const linksOrder: Array<Sections> = [
|
|
"about",
|
|
"tickets",
|
|
"cfp",
|
|
"details",
|
|
"contact",
|
|
]
|
|
|
|
export function useColorSections(parent: React.RefObject<HTMLDivElement | null>) {
|
|
const previous = useRef<Sections>(linksOrder[0])
|
|
|
|
useLayoutEffect(() => {
|
|
if (parent.current === null) return;
|
|
|
|
const options = {
|
|
root: null,
|
|
rootMargin: "-10px",
|
|
threshold: 0.5, // Adjust the visibility threshold as needed
|
|
};
|
|
|
|
|
|
const sections = linksOrder.map(value => document.getElementById(value));
|
|
const subs = linksOrder.reduce((acc, value) => {
|
|
acc[value] = parent.current!.querySelector('[data-sub="' + value + '"]')!;
|
|
return acc;
|
|
}, {} as Record<Sections, HTMLAnchorElement>);
|
|
console.log(subs);
|
|
const links = linksOrder.reduce((acc, value) => {
|
|
acc[value] = parent.current!.querySelector('[href="#' + value + '"]')!;
|
|
return acc;
|
|
}, {} as Record<Sections, HTMLAnchorElement>);
|
|
|
|
console.log(links)
|
|
|
|
// Set of currently intersecting sections by ID.
|
|
let intersecting: Set<string> = new Set;
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
// Update intersection set based on diff.
|
|
let startedIntersecting: Set<string> = new Set;
|
|
let stoppedIntersecting: Set<string> = new Set;
|
|
for (const entry of entries) {
|
|
if (entry.isIntersecting) {
|
|
startedIntersecting.add(entry.target.id);
|
|
} else {
|
|
stoppedIntersecting.add(entry.target.id);
|
|
}
|
|
}
|
|
intersecting = intersecting.difference(stoppedIntersecting);
|
|
intersecting = intersecting.union(startedIntersecting);
|
|
console.log(intersecting);
|
|
|
|
// Act upon intersection set to find the highest intersecting section -
|
|
// that's our 'active' section.
|
|
for (const id of linksOrder) {
|
|
if (intersecting.has(id)) {
|
|
console.log("best: " + id);
|
|
subs[previous.current]?.classList.remove('scale-x-100');
|
|
links[previous.current]?.classList.remove('text-primary');
|
|
previous.current = id;
|
|
|
|
subs[previous.current]?.classList.add('scale-x-100');
|
|
links[previous.current]?.classList.add('text-primary');
|
|
break;
|
|
}
|
|
}
|
|
}, options);
|
|
|
|
sections.forEach(section => {
|
|
if (section) {
|
|
observer.observe(section);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
observer.disconnect()
|
|
};
|
|
}, [parent]);
|
|
|
|
}
|