610 improve navigation of timeline

projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx

@@ -0,0 +1,162 @@
+import { FastForward, FastRewind } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { MobileContext } from '../provider/MobileProvider';
+
+const ScrollNavigationArrows = ({
+  onClickLeft,
+  onClickRight,
+  onLongPressLeft,
+  onLongPressRight,
+  longPressTimeoutLeft = 1000,
+  longPressTimeoutRight = 1000,
+  isVisibleLeft = true,
+  isVisibleRight = true,
+  allowLongPressLeft = true,
+  allowLongPressRight = true,
+  showOnMobile = true,
+}: {
+  onClickLeft: () => void;
+  onClickRight: () => void;
+  onLongPressLeft?: () => void;
+  onLongPressRight?: () => void;
+  longPressTimeoutLeft?: number;
+  longPressTimeoutRight?: number;
+  isVisibleLeft?: boolean;
+  isVisibleRight?: boolean;
+  allowLongPressLeft?: boolean;
+  allowLongPressRight?: boolean;
+  showOnMobile?: boolean;
+}) => {
+  const { isMobile } = useContext(MobileContext);
+  const [isPressedLeft, setPressedLeft] = useState<boolean>(false);
+  const [isPressedRight, setPressedRight] = useState<boolean>(false);
+  const disallowClickLeft = useRef<boolean>(false);
+  const disallowClickRight = useRef<boolean>(false);
+
+  const leftPressTimeout = useRef<NodeJS.Timeout>();
+  const rightPressTimeout = useRef<NodeJS.Timeout>();
+
+  const onPressLeft = (e: any) => {
+    if (e?.type === 'click') {
+      if (!disallowClickLeft.current) {
+        onClickLeft();
+      } else {
+        disallowClickLeft.current = false;
+      }
+    } else {
+      if (!e) {
+        // e is undefined if this function is called via timeout and therefore is accessed via a long press instead of a click
+        disallowClickLeft.current = true;
+      }
+      if (disallowClickLeft.current) {
+        onLongPressLeft ? onLongPressLeft() : onClickLeft();
+      }
+      if (allowLongPressLeft) {
+        leftPressTimeout.current = setTimeout(onPressLeft, longPressTimeoutLeft);
+      }
+    }
+  };
+
+  const onPressRight = (e: any) => {
+    if (e?.type === 'click') {
+      if (!disallowClickRight.current) {
+        onClickRight();
+      } else {
+        disallowClickRight.current = false;
+      }
+    } else {
+      if (!e) {
+        // e is undefined if this function is called via timeout and therefore is accessed via a long press instead of a click
+        disallowClickRight.current = true;
+      }
+      if (disallowClickRight.current) {
+        onLongPressRight ? onLongPressRight() : onClickRight();
+      }
+      if (allowLongPressRight) {
+        rightPressTimeout.current = setTimeout(onPressRight, longPressTimeoutRight);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!isPressedLeft) {
+      clearTimeout(leftPressTimeout.current);
+    }
+  }, [isPressedLeft]);
+
+  useEffect(() => {
+    if (!isPressedRight) {
+      clearTimeout(rightPressTimeout.current);
+    }
+  }, [isPressedRight]);
+
+  if (!isMobile || showOnMobile) {
+    return (
+      <div>
+        <div
+          className={`absolute top-0 left-0 h-full flex ${isVisibleLeft ? 'visible' : 'hidden'}`}
+        >
+          <IconButton
+            className='!bg-[#7e241d] !text-white !my-auto !shadow-xl !ml-1'
+            onClick={e => {
+              onPressLeft(e);
+            }}
+            onMouseDown={e => {
+              setPressedLeft(true);
+              onPressLeft(e);
+            }}
+            onTouchStart={e => {
+              setPressedLeft(true);
+              onPressLeft(e);
+            }}
+            onMouseUp={() => {
+              setPressedLeft(false);
+            }}
+            onMouseLeave={() => {
+              setPressedLeft(false);
+            }}
+            onTouchEnd={() => {
+              setPressedLeft(false);
+            }}
+          >
+            <FastRewind className='icon' />
+          </IconButton>
+        </div>
+        <div
+          className={`absolute top-0 right-0 h-full flex ${isVisibleRight ? 'visible' : 'hidden'}`}
+        >
+          <IconButton
+            className='!bg-[#7e241d] !text-white !my-auto !shadow-xl !mr-1'
+            onClick={e => {
+              onPressRight(e);
+            }}
+            onMouseDown={e => {
+              setPressedRight(true);
+              onPressRight(e);
+            }}
+            onTouchStart={e => {
+              setPressedRight(true);
+              onPressRight(e);
+            }}
+            onMouseUp={() => {
+              setPressedRight(false);
+            }}
+            onMouseLeave={() => {
+              setPressedRight(false);
+            }}
+            onTouchEnd={() => {
+              setPressedRight(false);
+            }}
+          >
+            <FastForward className='icon' />
+          </IconButton>
+        </div>
+      </div>
+    );
+  } else {
+    return <></>;
+  }
+};
+
+export default ScrollNavigationArrows;

projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx

@@ -7,6 +7,7 @@ import { pushHistoryWithoutRouter } from '../../../helpers/history';
 import useGetPictures, { TextFilter } from '../../../hooks/get-pictures.hook';
 import { FlatPicture, PictureOverviewType } from '../../../types/additionalFlatTypes';
 import PictureView from '../../views/picture/PictureView';
+import ScrollNavigationArrows from '../ScrollNavigationArrows';
 import PicturePreview from './PicturePreview';
 import { zoomIntoPicture, zoomOutOfPicture } from './helpers/picture-animations';
 
@@ -109,6 +110,8 @@ const HorizontalPictureGrid = ({
 
   const [focusedPicture, setFocusedPicture] = useState<string | undefined>(undefined);
   const [transitioning, setTransitioning] = useState<boolean>(false);
+  const [isVisibleLeft, setVisibleLeft] = useState<boolean>(true);
+  const [isVisibleRight, setVisibleRight] = useState<boolean>(true);
 
   const selectedPicture = useRef<FlatPicture | undefined>();
 
@@ -249,7 +252,10 @@ const HorizontalPictureGrid = ({
 
   const updateCurrentValue = useCallback(() => {
     const field = Math.ceil((scrollBarRef.current?.scrollLeft ?? 0) / IMAGE_WIDGET_WIDTH);
-    const index = field * IMAGES_PER_WIDGET + ((leftPictures?.length ?? 0) % IMAGES_PER_WIDGET);
+    const index = Math.max(
+      0,
+      (field - 1) * IMAGES_PER_WIDGET + ((leftPictures?.length ?? 0) % IMAGES_PER_WIDGET)
+    );
     selectedPicture.current =
       pictures.length > index && index >= 0 ? pictures[index] : pictures[pictures.length - 1];
     const year = new Date(selectedPicture.current.time_range_tag?.start as Date).getFullYear();
@@ -270,6 +276,13 @@ const HorizontalPictureGrid = ({
     } else if (!allowDateUpdate.current) {
       allowDateUpdate.current = true;
     }
+
+    if (!scrollBarRef.current) return;
+    setVisibleLeft(scrollBarRef.current.scrollLeft > 0);
+    setVisibleRight(
+      scrollBarRef.current.scrollLeft <
+        scrollBarRef.current.scrollWidth - scrollBarRef.current.clientWidth
+    );
   }, [leftPictures?.length, leftResult.loading, pictures, rightResult.loading, setDate]);
 
   useEffect(() => {
@@ -287,9 +300,17 @@ const HorizontalPictureGrid = ({
     pictureLength.current = leftPictures?.length ?? 0;
     lastScrollPos.current = Math.max(newWidgetCount - oldWidgetCount, 1) * IMAGE_WIDGET_WIDTH;
     scrollBarRef.current.scrollLeft =
-      Math.max(newWidgetCount - oldWidgetCount, 1) * IMAGE_WIDGET_WIDTH;
+      Math.max(newWidgetCount - oldWidgetCount, 0) * IMAGE_WIDGET_WIDTH;
   }, [leftPictures, leftResult.loading]);
 
+  useEffect(() => {
+    if (!scrollBarRef.current) return;
+    setVisibleRight(
+      scrollBarRef.current.scrollLeft <
+        scrollBarRef.current.scrollWidth - scrollBarRef.current.clientWidth - 5 //offset
+    );
+  }, [rightResult.loading]);
+
   useEffect(() => {
     if (leftResult.loading || rightResult.loading) return;
     const lowerBorder = pictures.length
@@ -349,6 +370,33 @@ const HorizontalPictureGrid = ({
         >
           {content}
         </ScrollBar>
+        <ScrollNavigationArrows
+          onClickLeft={() => {
+            if (scrollBarRef.current) {
+              scrollBarRef.current.scrollLeft -= IMAGE_WIDGET_WIDTH;
+            }
+          }}
+          onClickRight={() => {
+            if (scrollBarRef.current) {
+              scrollBarRef.current.scrollLeft += IMAGE_WIDGET_WIDTH;
+            }
+          }}
+          onLongPressLeft={() => {
+            if (scrollBarRef.current) {
+              scrollBarRef.current.scrollLeft -= 100;
+            }
+          }}
+          onLongPressRight={() => {
+            if (scrollBarRef.current) {
+              scrollBarRef.current.scrollLeft += 100;
+            }
+          }}
+          longPressTimeoutLeft={200}
+          longPressTimeoutRight={200}
+          isVisibleLeft={isVisibleLeft}
+          isVisibleRight={isVisibleRight}
+          showOnMobile={false}
+        />
       </div>
       {focusedPicture && !transitioning && (
         <Portal container={root}>

projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx

@@ -1,7 +1,8 @@
 import { ArrowDropDown } from '@mui/icons-material';
 import { debounce } from 'lodash';
-import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef } from 'react';
+import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnimate } from '../../../hooks/animate.hook';
+import ScrollNavigationArrows from '../ScrollNavigationArrows';
 
 // for future work
 export const enum TimeStepType {
@@ -34,6 +35,10 @@ const PictureTimeline = ({
     0.06
   );
 
+  const [drag, setDrag] = useState<boolean>(false);
+  const [dragged, setDragged] = useState<boolean>(false);
+  const lastPos = useRef<number | undefined>();
+
   useEffect(() => {
     if (scrollBarRef.current) {
       scrollBarRef.current.scrollLeft = scrollLeft;
@@ -62,7 +67,11 @@ const PictureTimeline = ({
         key={year}
         className='inline cursor-pointer'
         onClick={() => {
-          setDate(year);
+          if (dragged) {
+            setDragged(false);
+          } else {
+            setDate(year);
+          }
         }}
         style={{
           padding: `40px ${
@@ -89,16 +98,58 @@ const PictureTimeline = ({
   const updateOnScrollX = useMemo(() => debounce(updateDate, 500), [updateDate]);
 
   return (
-    <div>
+    <div
+      onMouseDown={e => {
+        setDrag(true);
+        lastPos.current = e.nativeEvent.offsetX;
+      }}
+      onMouseUp={e => {
+        setDrag(false);
+        lastPos.current = undefined;
+      }}
+      onMouseMove={e => {
+        if (
+          scrollBarRef.current &&
+          drag &&
+          lastPos.current &&
+          e.nativeEvent.offsetY > 0 &&
+          e.nativeEvent.offsetY <= 80
+        ) {
+          setDragged(true);
+          scrollBarRef.current.scrollLeft -= e.nativeEvent.offsetX - lastPos.current;
+          lastPos.current = e.nativeEvent.offsetX;
+        } else {
+          setDrag(false);
+          lastPos.current = undefined;
+        }
+      }}
+    >
       <div className='flex'>
         <ArrowDropDown className='mx-auto scale-[1.75]' />
       </div>
-      <div className='relative'>
-        <div className='overflow-x-scroll' ref={scrollBarRef} onScroll={updateOnScrollX}>
-          <div className='flex'>
-            <ul className='py-[16px] px-[50%] mt-0 whitespace-nowrap'>{listItems}</ul>
+      <div className='relative mb-2'>
+        <div className='overflow-x-scroll z-0' ref={scrollBarRef} onScroll={updateOnScrollX}>
+          <div className='flex pb-2'>
+            <ul className='py-[16px] px-[50%] my-0 whitespace-nowrap'>{listItems}</ul>
           </div>
         </div>
+        <ScrollNavigationArrows
+          onClickLeft={() => {
+            if (scrollBarRef.current) {
+              scrollBarRef.current.scrollLeft -= singleElementWidth;
+            }
+          }}
+          onClickRight={() => {
+            if (scrollBarRef.current) {
+              scrollBarRef.current.scrollLeft += singleElementWidth;
+            }
+          }}
+          longPressTimeoutLeft={250}
+          longPressTimeoutRight={250}
+          isVisibleLeft={date > start}
+          isVisibleRight={date < end}
+          showOnMobile={false}
+        />
       </div>
     </div>
   );