experimenting with ways to reduce the size

Author: stipsan

src/index.ts

@@ -31,8 +31,7 @@ export interface CustomScrollAction {
 export type ScrollMode = 'always' | 'if-needed'
 
 // Refactor to just the callback variant
-export type CustomScrollBoundaryCallback = (parent: Element) => boolean
-export type CustomScrollBoundary = Element | CustomScrollBoundaryCallback
+export type CustomScrollBoundary = (parent: Element) => boolean
 
 export interface Options {
   block?: ScrollLogicalPosition
@@ -46,7 +45,7 @@ export interface Options {
 let viewport: HTMLElement
 
 // return the current viewport depending on wether quirks mode is active or not
-function getViewport () {
+function getViewport() {
   const doc = document
 
   if (!viewport) {
@@ -242,15 +241,6 @@ export default (target: Element, options: Options): CustomScrollAction[] => {
     boundary,
     skipOverflowHiddenElements,
   } = options
-  // Allow using a callback to check the boundary
-  // The default behavior is to check if the current target matches the boundary element or not
-  // If undefined it'll check that target is never undefined (can happen as we recurse up the tree)
-  const checkBoundary =
-    typeof boundary === 'function' ? boundary : (node: any) => node !== boundary
-
-  if (!isElement(target)) {
-    throw new Error('Element is required in scrollIntoView')
-  }
 
   const targetRect = target.getBoundingClientRect()
 
@@ -260,7 +250,10 @@ export default (target: Element, options: Options): CustomScrollAction[] => {
   // @TODO have a better shadowdom test here
   while (
     isElement((parent = target.parentNode || target.host)) &&
-    checkBoundary(target)
+    // Allow using a callback to check the boundary
+    boundary
+      ? boundary(target)
+      : true
   ) {
     if (isScrollable(parent, skipOverflowHiddenElements)) {
       frames.push(parent)
@@ -282,34 +275,6 @@ export default (target: Element, options: Options): CustomScrollAction[] => {
   const viewportX = window.scrollX || window.pageXOffset
   const viewportY = window.scrollY || window.pageYOffset
 
-  // If the element is already visible we can end it here
-  if (scrollMode === 'if-needed') {
-    // @TODO optimize, as getBoundingClientRect is also called from computations loop
-    const isVisible = frames.every(frame => {
-      const frameRect = frame.getBoundingClientRect()
-
-      if (targetRect.top < frameRect.top) {
-        return false
-      }
-      if (targetRect.bottom > frameRect.bottom) {
-        return false
-      }
-
-      if (frame === viewport) {
-        if (targetRect.bottom > viewportHeight || targetRect.top < 0) {
-          return false
-        }
-        if (targetRect.left > viewportWidth || targetRect.right < 0) {
-          return false
-        }
-      }
-      return true
-    })
-    if (isVisible) {
-      return []
-    }
-  }
-
   // @TODO remove duplicate results
   // These values mutate as we loop through and generate scroll coordinates
   let targetBlock: number =
@@ -327,139 +292,149 @@ export default (target: Element, options: Options): CustomScrollAction[] => {
         ? targetRect.left + targetRect.width / 2
         : inline === 'end'
           ? targetRect.right
-          : targetRect.left // inline === 'nearest
+          : targetRect.left // inline === 'nearest && inline === 'start
 
   // Collect new scroll positions
-  const computations = frames.map(
-    (frame): CustomScrollAction => {
-      const frameRect = frame.getBoundingClientRect()
-
-      const frameStyle = getComputedStyle(frame)
-      const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)
-      const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)
-      const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)
-      const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)
-      // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here
-      // @TODO find out if the "as HTMLElement" overrides can be dropped
-      const scrollbarWidth =
-        'offsetWidth' in frame
-          ? (frame as HTMLElement).offsetWidth -
-            (frame as HTMLElement).clientWidth -
-            borderLeft -
-            borderRight
-          : 0
-      const scrollbarHeight =
-        'offsetHeight' in frame
-          ? (frame as HTMLElement).offsetHeight -
-            (frame as HTMLElement).clientHeight -
-            borderTop -
-            borderBottom
-          : 0
-
-      let blockScroll: number = 0
-      let inlineScroll: number = 0
-
-      if (block === 'start') {
-        blockScroll =
-          viewport === frame
-            ? viewportY + targetBlock
-            : targetBlock - frameRect.top - borderTop
-      } else if (block === 'end') {
-        blockScroll =
-          viewport === frame
-            ? viewportY + (targetBlock - viewportHeight)
-            : frame.scrollTop -
-              (frameRect.bottom - targetBlock) +
-              borderBottom +
-              scrollbarHeight
-      } else if (block === 'nearest') {
-        blockScroll =
-          viewport === frame
-            ? viewportY +
-              alignNearest(
-                viewportY,
-                viewportY + viewportHeight,
-                viewportHeight,
-                borderTop,
-                borderBottom,
-                viewportY + targetBlock,
-                viewportY + targetBlock + targetRect.height,
-                targetRect.height
-              )
-            : frame.scrollTop +
-              alignNearest(
-                frameRect.top,
-                frameRect.bottom,
-                frameRect.height,
-                borderTop,
-                borderBottom + scrollbarHeight,
-                targetBlock,
-                targetBlock + targetRect.height,
-                targetRect.height
-              )
-      } else {
-        // block === 'center' is the default
-        blockScroll =
-          viewport === frame
-            ? viewportY + targetBlock - viewportHeight / 2
-            : frame.scrollTop -
-              (frameRect.top + frameRect.height / 2 - targetBlock)
-      }
-
-      if (inline === 'start') {
-        inlineScroll =
-          viewport === frame
-            ? viewportX + targetInline
-            : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft
-      } else if (inline === 'center') {
-        inlineScroll =
-          viewport === frame
-            ? viewportX + targetInline - viewportWidth / 2
-            : frame.scrollLeft -
-              (frameRect.left + frameRect.width / 2 - targetInline)
-      } else if (inline === 'end') {
-        inlineScroll =
-          viewport === frame
-            ? viewportX + (targetInline - viewportWidth)
-            : frame.scrollLeft -
-              (frameRect.right - targetInline) +
-              borderRight +
-              scrollbarWidth
-      } else {
-        // inline === 'nearest' is the default
-        inlineScroll =
-          viewport === frame
-            ? viewportX +
-              alignNearest(
-                viewportX,
-                viewportX + viewportWidth,
-                viewportWidth,
-                borderLeft,
-                borderRight,
-                viewportX + targetInline,
-                viewportX + targetInline + targetRect.width,
-                targetRect.width
-              )
-            : frame.scrollLeft +
-              alignNearest(
-                frameRect.left,
-                frameRect.right,
-                frameRect.width,
-                borderLeft,
-                borderRight + scrollbarWidth,
-                targetInline,
-                targetInline + targetRect.width,
-                targetRect.width
-              )
-      }
-
-      // Cache the offset so that parent frames can scroll this into view correctly
-      targetBlock += frame.scrollTop - blockScroll
-      targetInline += frame.scrollLeft - inlineScroll
-
-      return { el: frame, top: blockScroll, left: inlineScroll }
+  const computations = frames.reduce<CustomScrollAction[]>((results, frame) => {
+    const frameRect = frame.getBoundingClientRect()
+
+    // Handle scrollMode: 'if-needed'
+    // If the element is already visible we can end it here
+    if (
+      scrollMode === 'if-needed' && frame === viewport
+        ? targetRect.bottom > viewportHeight ||
+          targetRect.top < 0 ||
+          (targetRect.left > viewportWidth || targetRect.right < 0)
+        : targetRect.top < frameRect.top || targetRect.bottom > frameRect.bottom
+    ) {
+      return []
     }
-  )
+
+    const frameStyle = getComputedStyle(frame)
+    const borderLeft = parseInt(frameStyle.borderLeftWidth as string, 10)
+    const borderTop = parseInt(frameStyle.borderTopWidth as string, 10)
+    const borderRight = parseInt(frameStyle.borderRightWidth as string, 10)
+    const borderBottom = parseInt(frameStyle.borderBottomWidth as string, 10)
+    // The property existance checks for offfset[Width|Height] is because only HTMLElement objects have them, but any Element might pass by here
+    // @TODO find out if the "as HTMLElement" overrides can be dropped
+    const scrollbarWidth =
+      'offsetWidth' in frame
+        ? (frame as HTMLElement).offsetWidth -
+          (frame as HTMLElement).clientWidth -
+          borderLeft -
+          borderRight
+        : 0
+    const scrollbarHeight =
+      'offsetHeight' in frame
+        ? (frame as HTMLElement).offsetHeight -
+          (frame as HTMLElement).clientHeight -
+          borderTop -
+          borderBottom
+        : 0
+
+    let blockScroll: number = 0
+    let inlineScroll: number = 0
+
+    if (block === 'start') {
+      blockScroll =
+        viewport === frame
+          ? viewportY + targetBlock
+          : targetBlock - frameRect.top - borderTop
+    } else if (block === 'end') {
+      blockScroll =
+        viewport === frame
+          ? viewportY + (targetBlock - viewportHeight)
+          : frame.scrollTop -
+            (frameRect.bottom - targetBlock) +
+            borderBottom +
+            scrollbarHeight
+    } else if (block === 'nearest') {
+      blockScroll =
+        viewport === frame
+          ? viewportY +
+            alignNearest(
+              viewportY,
+              viewportY + viewportHeight,
+              viewportHeight,
+              borderTop,
+              borderBottom,
+              viewportY + targetBlock,
+              viewportY + targetBlock + targetRect.height,
+              targetRect.height
+            )
+          : frame.scrollTop +
+            alignNearest(
+              frameRect.top,
+              frameRect.bottom,
+              frameRect.height,
+              borderTop,
+              borderBottom + scrollbarHeight,
+              targetBlock,
+              targetBlock + targetRect.height,
+              targetRect.height
+            )
+    } else {
+      // block === 'center' is the default
+      blockScroll =
+        viewport === frame
+          ? viewportY + targetBlock - viewportHeight / 2
+          : frame.scrollTop -
+            (frameRect.top + frameRect.height / 2 - targetBlock)
+    }
+
+    if (inline === 'start') {
+      inlineScroll =
+        viewport === frame
+          ? viewportX + targetInline
+          : frame.scrollLeft + (targetInline - frameRect.left) - borderLeft
+    } else if (inline === 'center') {
+      inlineScroll =
+        viewport === frame
+          ? viewportX + targetInline - viewportWidth / 2
+          : frame.scrollLeft -
+            (frameRect.left + frameRect.width / 2 - targetInline)
+    } else if (inline === 'end') {
+      inlineScroll =
+        viewport === frame
+          ? viewportX + (targetInline - viewportWidth)
+          : frame.scrollLeft -
+            (frameRect.right - targetInline) +
+            borderRight +
+            scrollbarWidth
+    } else {
+      // inline === 'nearest' is the default
+      inlineScroll =
+        viewport === frame
+          ? viewportX +
+            alignNearest(
+              viewportX,
+              viewportX + viewportWidth,
+              viewportWidth,
+              borderLeft,
+              borderRight,
+              viewportX + targetInline,
+              viewportX + targetInline + targetRect.width,
+              targetRect.width
+            )
+          : frame.scrollLeft +
+            alignNearest(
+              frameRect.left,
+              frameRect.right,
+              frameRect.width,
+              borderLeft,
+              borderRight + scrollbarWidth,
+              targetInline,
+              targetInline + targetRect.width,
+              targetRect.width
+            )
+    }
+
+    // Cache the offset so that parent frames can scroll this into view correctly
+    targetBlock += frame.scrollTop - blockScroll
+    targetInline += frame.scrollLeft - inlineScroll
+
+    return [...results, { el: frame, top: blockScroll, left: inlineScroll }]
+  }, [])
 
   return computations
 }