forked from Gitlink/forgeplus-react
92 lines
2.7 KiB
Plaintext
92 lines
2.7 KiB
Plaintext
// @flow
|
||
|
||
/**
|
||
* Gets the dimensions of the element, accounting for API differences between
|
||
* `window` and other DOM elements.
|
||
*/
|
||
|
||
type Dimensions = {
|
||
height: number,
|
||
width: number,
|
||
};
|
||
|
||
// TODO Move this into WindowScroller and import from there
|
||
type WindowScrollerProps = {
|
||
serverHeight: number,
|
||
serverWidth: number,
|
||
};
|
||
|
||
const isWindow = element => element === window;
|
||
|
||
const getBoundingBox = element => element.getBoundingClientRect();
|
||
|
||
export function getDimensions(
|
||
scrollElement: ?Element,
|
||
props: WindowScrollerProps,
|
||
): Dimensions {
|
||
if (!scrollElement) {
|
||
return {
|
||
height: props.serverHeight,
|
||
width: props.serverWidth,
|
||
};
|
||
} else if (isWindow(scrollElement)) {
|
||
const {innerHeight, innerWidth} = window;
|
||
return {
|
||
height: typeof innerHeight === 'number' ? innerHeight : 0,
|
||
width: typeof innerWidth === 'number' ? innerWidth : 0,
|
||
};
|
||
} else {
|
||
return getBoundingBox(scrollElement);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Gets the vertical and horizontal position of an element within its scroll container.
|
||
* Elements that have been “scrolled past” return negative values.
|
||
* Handles edge-case where a user is navigating back (history) from an already-scrolled page.
|
||
* In this case the body’s top or left position will be a negative number and this element’s top or left will be increased (by that amount).
|
||
*/
|
||
export function getPositionOffset(element: Element, container: Element) {
|
||
if (isWindow(container) && document.documentElement) {
|
||
const containerElement = document.documentElement;
|
||
const elementRect = getBoundingBox(element);
|
||
const containerRect = getBoundingBox(containerElement);
|
||
return {
|
||
top: elementRect.top - containerRect.top,
|
||
left: elementRect.left - containerRect.left,
|
||
};
|
||
} else {
|
||
const scrollOffset = getScrollOffset(container);
|
||
const elementRect = getBoundingBox(element);
|
||
const containerRect = getBoundingBox(container);
|
||
return {
|
||
top: elementRect.top + scrollOffset.top - containerRect.top,
|
||
left: elementRect.left + scrollOffset.left - containerRect.left,
|
||
};
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Gets the vertical and horizontal scroll amount of the element, accounting for IE compatibility
|
||
* and API differences between `window` and other DOM elements.
|
||
*/
|
||
export function getScrollOffset(element: Element) {
|
||
if (isWindow(element) && document.documentElement) {
|
||
return {
|
||
top:
|
||
'scrollY' in window
|
||
? window.scrollY
|
||
: document.documentElement.scrollTop,
|
||
left:
|
||
'scrollX' in window
|
||
? window.scrollX
|
||
: document.documentElement.scrollLeft,
|
||
};
|
||
} else {
|
||
return {
|
||
top: element.scrollTop,
|
||
left: element.scrollLeft,
|
||
};
|
||
}
|
||
}
|