Properly detect if image fills whole viewport

The thresholds are only for detecting if a specific side of the image is in the viewport.

For the check if the image fills the whole viewport, the thresholds incorrectly detect this depending on the readers reading direction.

E.g. in the continuous horizontal pager with theme direction LTR and reader reading direction RTL, the left threshold will be the total width of the viewport plus one which will lead to out of view images to be detected as completely filling the viewport
This commit is contained in:
schroda
2024-12-31 16:50:19 +01:00
parent d6a3d02189
commit 8c147b797a

View File

@@ -299,6 +299,10 @@ type InViewportThresholds = {
};
const getIsPageInViewportInfo = (
element: HTMLElement,
/**
* Thresholds are not considered for the detection of an image filling the whole viewport.
* They are only used for detecting if a specific side of an image is inside the viewport
*/
argThresholds?: InViewportThresholds,
): {
isLeftInViewport: boolean;
@@ -320,11 +324,11 @@ const getIsPageInViewportInfo = (
const isLeftInViewport = left >= thresholds.left && left <= window.innerWidth;
const isRightInViewport = right >= thresholds.right && right <= window.innerWidth;
const isFillingWidthViewportCompletely = left <= thresholds.left && right >= window.innerWidth;
const isFillingWidthViewportCompletely = left <= 0 && right >= window.innerWidth;
const isTopInViewport = top >= thresholds.top && top <= window.innerHeight;
const isBottomInViewport = bottom >= thresholds.bottom && bottom <= window.innerHeight;
const isFillingHeightViewportCompletely = top <= thresholds.top && bottom >= window.innerHeight;
const isFillingHeightViewportCompletely = top <= 0 && bottom >= window.innerHeight;
return {
isLeftInViewport,