@@ -43,10 +128,10 @@ function TransportConnection({
to {connection.headsign}
@@ -122,6 +207,12 @@ function TransportConnection({
function WalkConnection({ connection }: { connection: Walk }): JSX.Element {
return (
<>
+
+ {/* Setting pl-20 to align with grid. TODO find better solution */}
+
+ {connection.destination}
+
+
-
- {/* Setting pl-20 to align with grid. TODO find better solution */}
-
- {connection.destination}
-
-
);
}
@@ -286,20 +371,11 @@ function Connection2(properties: Connection2Properties): JSX.Element {
);
}
-function useObserver() {
+function useObserver(callback: IntersectionObserverCallback) {
let observer: IntersectionObserver | undefined;
- function observeCallback(entries: IntersectionObserverEntry[]) {
- console.debug("Intersection", entries.length);
- for (const entry of entries) {
- if (entry.isIntersecting) {
- console.debug("Intersecting", entry.target);
- }
- }
- }
-
function setScroller(element: Element) {
- observer = new IntersectionObserver(observeCallback, {
+ observer = new IntersectionObserver(callback, {
root: element,
// This ensures that the element is only triggered once it is past the snap point
threshold: 0.5,
@@ -329,7 +405,9 @@ type RowProperties = {
function Row({ scrollLeft, setScrollLeft }: VoidProps
) {
const debugIndex = debugOnlyRowIndex;
debugOnlyRowIndex++;
- const { setScroller, observe } = useObserver();
+ const { setScroller, observe } = useObserver(() => {
+ throw new Error("todo");
+ });
const [row, setRow] = createSignal();
@@ -390,37 +468,37 @@ function Row({ scrollLeft, setScrollLeft }: VoidProps) {
}
export default function Journeys() {
- let timeoutId: ReturnType | undefined;
- // function handleScroll(event: Event) {
- // if (!(event.target instanceof HTMLDivElement))
- // throw new Error("Expected div");
-
- // // References for later when we don't have the type
- // const scrollLeft = event.target.scrollLeft;
- // const offsetWidth = event.target.offsetWidth;
- // const children = event.target.children;
-
- // const isAtSnappingPoint = scrollLeft % offsetWidth === 0;
- // const debounce = isAtSnappingPoint ? 0 : 100;
-
- // if (timeoutId !== undefined) clearTimeout(timeoutId);
+ const [isWalkSnapped, setIsWalkSnapped] = createSignal(false);
+
+ // To not trigger animation on initial render
+ let dirtyFlag = false;
+ const wasWalkSnapped = () => {
+ if (dirtyFlag) {
+ dirtyFlag = false;
+ return true;
+ }
- // timeoutId = setTimeout(() => {
- // if (!debounce) {
- // console.debug("Snap");
- // // const index = Math.floor(scrollLeft / offsetWidth);
- // // const child = children[index];
- // // console.debug("Snap at", index, child.id);
+ return false;
+ };
+ createEffect(() => {
+ if (isWalkSnapped()) {
+ dirtyFlag = true;
+ }
+ });
- // return;
- // }
+ function observeCallback([first]: IntersectionObserverEntry[]) {
+ //TODO avoid initial call with all elements
+ const target = first.target;
- // console.debug("User stopped scrolling");
- // }, debounce);
+ const isWalkFocused =
+ target instanceof HTMLElement &&
+ first.isIntersecting &&
+ target.dataset.type === "walk";
- // console.debug("Scroll");
- // // console.debug("Scroll", event.target.scrollLeft, event.target.offsetWidth);
- // }
+ console.debug("Intersection", isWalkFocused);
+ setIsWalkSnapped(isWalkFocused);
+ }
+ const { setScroller, observe } = useObserver(observeCallback);
const [row1, setRow1] = createSignal();
@@ -436,14 +514,16 @@ export default function Journeys() {
}
return (
-
- Starting station
{" "}
+
+
+ Beuel Konrad-Adenauer-Platz, Bonn
+