Improve "MobileReaderProgressBar" progress bar click/drag handling
Convert clicks on the progress bar in such a way, that there is a "padding" around the page "dots". Thus, e.g. even if the click was actually for page 1, if it is inside page 2 padding, it will behave like it was a click for page 2
This commit is contained in:
@@ -47,6 +47,7 @@ const BaseReaderProgressBar = ({
|
||||
setIsDragging,
|
||||
openPage,
|
||||
direction,
|
||||
fullSegmentClicks,
|
||||
}: ReaderProgressBarProps &
|
||||
Pick<TReaderProgressBarContext, 'isDragging' | 'setIsDragging'> &
|
||||
Pick<ComponentProps<typeof ReaderProgressBarSlotWrapper>, 'createProgressBarSlot'> & {
|
||||
@@ -69,6 +70,7 @@ const BaseReaderProgressBar = ({
|
||||
};
|
||||
openPage: ReturnType<typeof ReaderControls.useOpenPage>;
|
||||
direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
|
||||
fullSegmentClicks: boolean;
|
||||
}) => {
|
||||
const progressBarRef = useRef<HTMLDivElement | null>(null);
|
||||
const draggingDetectionTimeout = useRef<NodeJS.Timeout>();
|
||||
@@ -107,6 +109,7 @@ const BaseReaderProgressBar = ({
|
||||
pages,
|
||||
progressBarPosition,
|
||||
getOptionForDirection,
|
||||
fullSegmentClicks,
|
||||
);
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent | React.TouchEvent) => {
|
||||
@@ -123,6 +126,7 @@ const BaseReaderProgressBar = ({
|
||||
progressBarRef.current.getBoundingClientRect(),
|
||||
pages,
|
||||
isHorizontalPosition,
|
||||
fullSegmentClicks,
|
||||
getOptionForDirection,
|
||||
),
|
||||
),
|
||||
|
||||
@@ -145,6 +145,7 @@ const BaseMobileReaderProgressBar = ({
|
||||
{getOptionForDirection(<SkipPreviousIcon />, <SkipNextIcon />, direction)}
|
||||
</IconButton>
|
||||
<ReaderProgressBar
|
||||
fullSegmentClicks={false}
|
||||
createProgressBarSlot={useCallback(
|
||||
(page, pagesIndex, _2, _3, _4, _5, isTrailingPage, totalPages) => (
|
||||
<ReaderProgressBarSlotMobile
|
||||
|
||||
@@ -55,6 +55,7 @@ const BaseStandardReaderProgressBar = ({
|
||||
return (
|
||||
<ReaderProgressBarDirectionWrapper>
|
||||
<ReaderProgressBar
|
||||
fullSegmentClicks
|
||||
createProgressBarSlot={useCallback(
|
||||
(
|
||||
page,
|
||||
|
||||
Reference in New Issue
Block a user