From 8ea0dee36c277e75d92a3a37a85e1f9b44463610 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Wed, 9 Aug 2023 23:59:28 +0200 Subject: [PATCH 01/11] start adding navigation arrows for timeline --- .../picture-gallery/PictureTimeline.tsx | 33 ++++++++++++++++--- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx index d38b93361..796700fd8 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx @@ -1,4 +1,5 @@ -import { ArrowDropDown } from '@mui/icons-material'; +import { ArrowDropDown, FastForward, FastRewind } from '@mui/icons-material'; +import { IconButton } from '@mui/material'; import { debounce } from 'lodash'; import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef } from 'react'; import { useAnimate } from '../../../hooks/animate.hook'; @@ -93,12 +94,34 @@ const PictureTimeline = ({
-
-
-
-
    {listItems}
+
+
+
+
    {listItems}
+
+ { + setDate(prev => Math.max(start, prev - 1)); + }} + > + + +
+
+ { + setDate(prev => Math.min(end, prev + 1)); + }} + > + + +
); From 28f6d6444e234992f7842eaa64793abf52ffd0b3 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Thu, 10 Aug 2023 14:14:11 +0200 Subject: [PATCH 02/11] extract navigation arrows into extra component --- .../common/ScrollNavigationArrows.tsx | 36 +++++++++++++++++++ .../picture-gallery/PictureTimeline.tsx | 36 +++++++------------ 2 files changed, 48 insertions(+), 24 deletions(-) create mode 100644 projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx diff --git a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx new file mode 100644 index 000000000..f945685c9 --- /dev/null +++ b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx @@ -0,0 +1,36 @@ +import { FastForward, FastRewind } from '@mui/icons-material'; +import { IconButton } from '@mui/material'; + +const ScrollNavigationArrows = ({ + onClickLeft, + onClickRight, + isVisibleLeft = true, + isVisibleRight = true, +}: { + onClickLeft: () => void; + onClickRight: () => void; + isVisibleLeft?: boolean; + isVisibleRight?: boolean; +}) => { + return ( +
+
+ + + +
+
+ + + +
+
+ ); +}; + +export default ScrollNavigationArrows; diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx index 796700fd8..8564e081c 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx @@ -1,8 +1,8 @@ -import { ArrowDropDown, FastForward, FastRewind } from '@mui/icons-material'; -import { IconButton } from '@mui/material'; +import { ArrowDropDown } from '@mui/icons-material'; import { debounce } from 'lodash'; import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef } from 'react'; import { useAnimate } from '../../../hooks/animate.hook'; +import ScrollNavigationArrows from '../ScrollNavigationArrows'; // for future work export const enum TimeStepType { @@ -100,28 +100,16 @@ const PictureTimeline = ({
    {listItems}
-
- { - setDate(prev => Math.max(start, prev - 1)); - }} - > - - -
-
- { - setDate(prev => Math.min(end, prev + 1)); - }} - > - - -
+ { + setDate(prev => Math.max(start, prev - 1)); + }} + onClickRight={() => { + setDate(prev => Math.min(end, prev + 1)); + }} + isVisibleLeft={date > start} + isVisibleRight={date < end} + /> ); From 83bd76900d5675d7c80d116b3e9def9c10c64b10 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Thu, 10 Aug 2023 15:25:17 +0200 Subject: [PATCH 03/11] add scroll navigation arrows to HorizontalPictureGrid --- .../picture-gallery/HorizontalPictureGrid.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx index f19ec9583..d90031755 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx +++ b/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(undefined); const [transitioning, setTransitioning] = useState(false); + const [isVisibleLeft, setVisibleLeft] = useState(true); + const [isVisibleRight, setVisibleRight] = useState(true); const selectedPicture = useRef(); @@ -270,6 +273,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(() => { @@ -290,6 +300,14 @@ const HorizontalPictureGrid = ({ Math.max(newWidgetCount - oldWidgetCount, 1) * 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 +367,20 @@ const HorizontalPictureGrid = ({ > {content} + { + if (scrollBarRef.current) { + scrollBarRef.current.scrollLeft -= IMAGE_WIDGET_WIDTH; + } + }} + onClickRight={() => { + if (scrollBarRef.current) { + scrollBarRef.current.scrollLeft += IMAGE_WIDGET_WIDTH; + } + }} + isVisibleLeft={isVisibleLeft} + isVisibleRight={isVisibleRight} + /> {focusedPicture && !transitioning && ( From f766eca822a8ace1153a740db5cea432c7575d76 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Fri, 11 Aug 2023 11:18:22 +0200 Subject: [PATCH 04/11] allow to not show scroll navigation arrows on mobile --- .../common/ScrollNavigationArrows.tsx | 49 ++++++++++++------- .../picture-gallery/HorizontalPictureGrid.tsx | 1 + .../picture-gallery/PictureTimeline.tsx | 1 + 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx index f945685c9..f3c2713fa 100644 --- a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx +++ b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx @@ -1,36 +1,51 @@ import { FastForward, FastRewind } from '@mui/icons-material'; import { IconButton } from '@mui/material'; +import { useContext } from 'react'; +import { MobileContext } from '../provider/MobileProvider'; const ScrollNavigationArrows = ({ onClickLeft, onClickRight, isVisibleLeft = true, isVisibleRight = true, + showOnMobile = true, }: { onClickLeft: () => void; onClickRight: () => void; isVisibleLeft?: boolean; isVisibleRight?: boolean; + showOnMobile?: boolean; }) => { - return ( -
-
- - - -
-
- +
+ + + +
+
- - + + + +
-
- ); + ); + } else { + return <>; + } }; export default ScrollNavigationArrows; diff --git a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx index d90031755..fb4cc2417 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx @@ -380,6 +380,7 @@ const HorizontalPictureGrid = ({ }} isVisibleLeft={isVisibleLeft} isVisibleRight={isVisibleRight} + showOnMobile={false} /> {focusedPicture && !transitioning && ( diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx index 8564e081c..6ca1c9b64 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx @@ -109,6 +109,7 @@ const PictureTimeline = ({ }} isVisibleLeft={date > start} isVisibleRight={date < end} + showOnMobile={false} /> From 08a91a4c3a067299b38a11420b698772e0997da8 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Fri, 11 Aug 2023 14:37:41 +0200 Subject: [PATCH 05/11] add support for auto scroll when arrow is long pressed --- .../common/ScrollNavigationArrows.tsx | 103 +++++++++++++++++- .../picture-gallery/HorizontalPictureGrid.tsx | 12 ++ .../picture-gallery/PictureTimeline.tsx | 2 + 3 files changed, 114 insertions(+), 3 deletions(-) diff --git a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx index f3c2713fa..6ab40dc4a 100644 --- a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx +++ b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx @@ -1,22 +1,95 @@ import { FastForward, FastRewind } from '@mui/icons-material'; import { IconButton } from '@mui/material'; -import { useContext } from 'react'; +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(false); + const [isPressedRight, setPressedRight] = useState(false); + const disallowClickLeft = useRef(false); + const disallowClickRight = useRef(false); + + const leftPressTimeout = useRef(); + const rightPressTimeout = useRef(); + + 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 ( @@ -26,7 +99,19 @@ const ScrollNavigationArrows = ({ > { + onPressLeft(e); + }} + onMouseDown={e => { + setPressedLeft(true); + onPressLeft(e); + }} + onMouseUp={() => { + setPressedLeft(false); + }} + onMouseLeave={() => { + setPressedLeft(false); + }} > @@ -36,7 +121,19 @@ const ScrollNavigationArrows = ({ > { + onPressRight(e); + }} + onMouseDown={e => { + setPressedRight(true); + onPressRight(e); + }} + onMouseUp={() => { + setPressedRight(false); + }} + onMouseLeave={() => { + setPressedRight(false); + }} > diff --git a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx index fb4cc2417..4c6d28918 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx @@ -378,6 +378,18 @@ const HorizontalPictureGrid = ({ scrollBarRef.current.scrollLeft += IMAGE_WIDGET_WIDTH; } }} + onLongPressLeft={() => { + if (scrollBarRef.current) { + scrollBarRef.current.scrollLeft--; + } + }} + onLongPressRight={() => { + if (scrollBarRef.current) { + scrollBarRef.current.scrollLeft++; + } + }} + longPressTimeoutLeft={100} + longPressTimeoutRight={100} isVisibleLeft={isVisibleLeft} isVisibleRight={isVisibleRight} showOnMobile={false} diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx index 6ca1c9b64..ef7a24ef1 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx @@ -107,6 +107,8 @@ const PictureTimeline = ({ onClickRight={() => { setDate(prev => Math.min(end, prev + 1)); }} + longPressTimeoutLeft={500} + longPressTimeoutRight={500} isVisibleLeft={date > start} isVisibleRight={date < end} showOnMobile={false} From 4c7e87b6bb9e738592c7bf59f06031d3b4bac909 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Fri, 11 Aug 2023 16:19:08 +0200 Subject: [PATCH 06/11] allow long press to work on mobile/via touch --- .../components/common/ScrollNavigationArrows.tsx | 14 ++++++++++++++ .../picture-gallery/HorizontalPictureGrid.tsx | 8 ++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx index 6ab40dc4a..90bc89834 100644 --- a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx +++ b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx @@ -106,12 +106,19 @@ const ScrollNavigationArrows = ({ setPressedLeft(true); onPressLeft(e); }} + onTouchStart={e => { + setPressedLeft(true); + onPressLeft(e); + }} onMouseUp={() => { setPressedLeft(false); }} onMouseLeave={() => { setPressedLeft(false); }} + onTouchEnd={() => { + setPressedLeft(false); + }} > @@ -128,12 +135,19 @@ const ScrollNavigationArrows = ({ setPressedRight(true); onPressRight(e); }} + onTouchStart={e => { + setPressedRight(true); + onPressRight(e); + }} onMouseUp={() => { setPressedRight(false); }} onMouseLeave={() => { setPressedRight(false); }} + onTouchEnd={() => { + setPressedRight(false); + }} > diff --git a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx index 4c6d28918..76a24deda 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx @@ -380,16 +380,16 @@ const HorizontalPictureGrid = ({ }} onLongPressLeft={() => { if (scrollBarRef.current) { - scrollBarRef.current.scrollLeft--; + scrollBarRef.current.scrollLeft -= 100; } }} onLongPressRight={() => { if (scrollBarRef.current) { - scrollBarRef.current.scrollLeft++; + scrollBarRef.current.scrollLeft += 100; } }} - longPressTimeoutLeft={100} - longPressTimeoutRight={100} + longPressTimeoutLeft={200} + longPressTimeoutRight={200} isVisibleLeft={isVisibleLeft} isVisibleRight={isVisibleRight} showOnMobile={false} From 2fa677a9c4a5f5bc1c5428fbde79440af489f6cf Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Sat, 12 Aug 2023 01:06:27 +0200 Subject: [PATCH 07/11] avoid instant picture fetching, by normaly scrolling timeline via arrow button --- .../common/picture-gallery/PictureTimeline.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx index ef7a24ef1..33cbafb54 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx @@ -102,13 +102,17 @@ const PictureTimeline = ({ { - setDate(prev => Math.max(start, prev - 1)); + if (scrollBarRef.current) { + scrollBarRef.current.scrollLeft -= singleElementWidth; + } }} onClickRight={() => { - setDate(prev => Math.min(end, prev + 1)); + if (scrollBarRef.current) { + scrollBarRef.current.scrollLeft += singleElementWidth; + } }} - longPressTimeoutLeft={500} - longPressTimeoutRight={500} + longPressTimeoutLeft={250} + longPressTimeoutRight={250} isVisibleLeft={date > start} isVisibleRight={date < end} showOnMobile={false} From c540b91d5e2f9df3eb5ccb36d2c78cbeeb44051c Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Thu, 7 Sep 2023 14:35:08 +0200 Subject: [PATCH 08/11] fix timeline arrow navigation bug --- .../common/picture-gallery/HorizontalPictureGrid.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx index 76a24deda..77ecbe08c 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx @@ -252,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(); From 17927e92d2ac9aa6d37d807288c93d7e9ead84b4 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Thu, 7 Sep 2023 15:31:46 +0200 Subject: [PATCH 09/11] fix bug when scrolling horizontal picture grid to outer left --- .../components/common/picture-gallery/HorizontalPictureGrid.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx index 77ecbe08c..b34be68c0 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/HorizontalPictureGrid.tsx @@ -300,7 +300,7 @@ 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(() => { From deb8a2348ad2547848136c7be22e5c4fb6350980 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Thu, 7 Sep 2023 16:59:51 +0200 Subject: [PATCH 10/11] start implementing support for dragging timeline with mouse --- .../picture-gallery/PictureTimeline.tsx | 39 +++++++++++++++++-- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx index 33cbafb54..f22adf3c6 100644 --- a/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx +++ b/projects/bp-gallery/src/components/common/picture-gallery/PictureTimeline.tsx @@ -1,6 +1,6 @@ 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'; @@ -35,6 +35,10 @@ const PictureTimeline = ({ 0.06 ); + const [drag, setDrag] = useState(false); + const [dragged, setDragged] = useState(false); + const lastPos = useRef(); + useEffect(() => { if (scrollBarRef.current) { scrollBarRef.current.scrollLeft = scrollLeft; @@ -63,7 +67,11 @@ const PictureTimeline = ({ key={year} className='inline cursor-pointer' onClick={() => { - setDate(year); + if (dragged) { + setDragged(false); + } else { + setDate(year); + } }} style={{ padding: `40px ${ @@ -90,7 +98,32 @@ const PictureTimeline = ({ const updateOnScrollX = useMemo(() => debounce(updateDate, 500), [updateDate]); return ( -
+
{ + 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; + } + }} + >
From 9cd39d96b9783a10e0e440bbd34c4b8f2defd073 Mon Sep 17 00:00:00 2001 From: LinoH5 Date: Fri, 15 Sep 2023 11:44:39 +0200 Subject: [PATCH 11/11] add margin to navigation arrows --- .../src/components/common/ScrollNavigationArrows.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx index 90bc89834..f4ae01c74 100644 --- a/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx +++ b/projects/bp-gallery/src/components/common/ScrollNavigationArrows.tsx @@ -98,7 +98,7 @@ const ScrollNavigationArrows = ({ className={`absolute top-0 left-0 h-full flex ${isVisibleLeft ? 'visible' : 'hidden'}`} > { onPressLeft(e); }} @@ -127,7 +127,7 @@ const ScrollNavigationArrows = ({ className={`absolute top-0 right-0 h-full flex ${isVisibleRight ? 'visible' : 'hidden'}`} > { onPressRight(e); }}