Make mobile progress bar position changeable

This commit is contained in:
schroda
2025-01-02 21:25:35 +01:00
parent 92892e6604
commit f90e4597f8
10 changed files with 371 additions and 170 deletions

View File

@@ -45,17 +45,25 @@ export const getNextPageIndex = (
export const getPageForMousePos = (
coordinates: { clientX: number; clientY: number },
elementRect: DOMRect,
element: HTMLElement,
pages: ReaderProgressBarProps['pages'],
isHorizontalPosition: boolean,
fullSegmentClicks: boolean,
getOptionForDirection: typeof getOptionForDirectionImpl,
): ReaderProgressBarProps['pages'][number] => {
const pos = isHorizontalPosition ? coordinates.clientX : coordinates.clientY;
const rectPos = isHorizontalPosition ? elementRect.left : elementRect.top;
const rectSize = isHorizontalPosition ? elementRect.width : elementRect.height;
const mousePosRelativeToProgressBar = pos - rectPos;
const { paddingTop, paddingBottom, paddingLeft, paddingRight } = getComputedStyle(element);
const elementRect = element.getBoundingClientRect();
const padding = isHorizontalPosition
? parseFloat(paddingLeft) + parseFloat(paddingRight)
: parseFloat(paddingTop) + parseFloat(paddingBottom);
const rectPos = isHorizontalPosition ? elementRect.left : elementRect.top;
const rectSizeWithPadding = isHorizontalPosition ? elementRect.width : elementRect.height;
const rectSize = rectSizeWithPadding - padding;
const mousePosRelativeToProgressBar = pos - rectPos - padding / 2;
const totalPages = pages.length - Number(!fullSegmentClicks);