refactor: rename scrollElement -> relativeElement

BREAKING CHANGE: changes API

Author: felixfbecker

src/hoverifier.ts

@@ -39,8 +39,15 @@ interface HoverifierOptions {
      * Emit the HoverOverlay element on this after it was rerendered when its content changed and it needs to be repositioned.
      */
     hoverOverlayRerenders: Observable<{
+        /**
+         * The HoverOverlay element
+         */
         hoverOverlayElement: HTMLElement
-        scrollElement: HTMLElement
+
+        /**
+         * The closest parent element that is `position: relative`
+         */
+        relativeElement: HTMLElement
     }>
 
     /**
@@ -334,8 +341,8 @@ export const createHoverifier = ({
             .pipe(
                 // with the latest target that came from either a mouseover, click or location change (whatever was the most recent)
                 withLatestFrom(merge(codeMouseOverTargets, codeClickTargets, jumpTargets)),
-                map(([{ hoverOverlayElement, scrollElement }, { target }]) =>
-                    calculateOverlayPosition(scrollElement, target, hoverOverlayElement)
+                map(([{ hoverOverlayElement, relativeElement }, { target }]) =>
+                    calculateOverlayPosition({ relativeElement, target, hoverOverlayElement })
                 )
             )
             .subscribe(hoverOverlayPosition => {

src/overlay_position.ts

@@ -4,36 +4,41 @@
  */
 const BLOB_PADDING_TOP = 8
 
+interface CalculateOverlayPositionOptions {
+    /** The closest parent element that is `position: relative` */
+    relativeElement: HTMLElement
+    /** The DOM Node that was hovered */
+    target: HTMLElement
+    /** The DOM Node of the tooltip */
+    hoverOverlayElement: HTMLElement
+}
+
 /**
  * Calculates the desired position of the hover overlay depending on the container,
  * the hover target and the size of the hover overlay
- *
- * @param scrollable The closest container that is scrollable
- * @param target The DOM Node that was hovered
- * @param tooltip The DOM Node of the tooltip
  */
-export const calculateOverlayPosition = (
-    scrollable: HTMLElement,
-    target: HTMLElement,
-    tooltip: HTMLElement
-): { left: number; top: number } => {
+export const calculateOverlayPosition = ({
+    relativeElement,
+    target,
+    hoverOverlayElement,
+}: CalculateOverlayPositionOptions): { left: number; top: number } => {
     // The scrollable element is the one with scrollbars. The scrolling element is the one with the content.
-    const scrollableBounds = scrollable.getBoundingClientRect()
+    const relativeElementBounds = relativeElement.getBoundingClientRect()
     const targetBound = target.getBoundingClientRect() // our target elements bounds
 
     // Anchor it horizontally, prior to rendering to account for wrapping
     // changes to vertical height if the tooltip is at the edge of the viewport.
-    const relLeft = targetBound.left - scrollableBounds.left
+    const relLeft = targetBound.left - relativeElementBounds.left
 
     // Anchor the tooltip vertically.
-    const tooltipBound = tooltip.getBoundingClientRect()
-    const relTop = targetBound.top + scrollable.scrollTop - scrollableBounds.top
+    const tooltipBound = hoverOverlayElement.getBoundingClientRect()
+    const relTop = targetBound.top + relativeElement.scrollTop - relativeElementBounds.top
     // This is the padding-top of the blob element
     let tooltipTop = relTop - (tooltipBound.height - BLOB_PADDING_TOP)
-    if (tooltipTop - scrollable.scrollTop < 0) {
+    if (tooltipTop - relativeElement.scrollTop < 0) {
         // Tooltip wouldn't be visible from the top, so display it at the
         // bottom.
-        const relBottom = targetBound.bottom + scrollable.scrollTop - scrollableBounds.top
+        const relBottom = targetBound.bottom + relativeElement.scrollTop - relativeElementBounds.top
         tooltipTop = relBottom
     } else {
         tooltipTop -= BLOB_PADDING_TOP