ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve "MobileReaderProgressBar" progress bar click/drag handling

Browse Source 
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:
schroda
2024-12-28 04:05:29 +01:00
parent bc14b68507
commit 3185449816
5 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/modules/reader/utils/ReaderProgressBar.utils.tsx
View File

@@ -48,17 +48,26 @@ export const getPageForMousePos = (
elementRect: DOMRect,
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 mouseXPosRelativeToProgressBar = pos - rectPos;
const pageForMouseXPos = Math.ceil((mouseXPosRelativeToProgressBar / rectSize) * pages.length);
const minPage = Math.max(1, pageForMouseXPos);
const maxPage = Math.min(minPage, pages.length);
const newPageIndex = getOptionForDirection(maxPage - 1, pages.length - maxPage);
const mousePosRelativeToProgressBar = pos - rectPos;
const totalPages = pages.length - Number(!fullSegmentClicks);
const segmentWidth = rectSize / totalPages;
const clickedSegmentIndex = Math.floor(mousePosRelativeToProgressBar / segmentWidth);
const segmentMiddlePoint = (clickedSegmentIndex + (fullSegmentClicks ? 1 : 0.5)) * segmentWidth;
const actualClickedSegmentIndex =
mousePosRelativeToProgressBar <= segmentMiddlePoint ? clickedSegmentIndex : clickedSegmentIndex + 1;
const minPageIndex = Math.max(0, actualClickedSegmentIndex);
const maxPageIndex = Math.min(minPageIndex, pages.length - 1);
const newPageIndex = getOptionForDirection(maxPageIndex, pages.length - 1 - maxPageIndex);
return pages[newPageIndex];
};