A few quick fixes before repo split (#199)

* A few quick fixes before repo split

* Sync with Prettier

Author: stipsan

README.md

@@ -1,9 +1,14 @@
 # This is the work-in-progress, the current stable version is [here](https://github.com/stipsan/scroll-into-view-if-needed/tree/v1)
 
-[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed) [![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed) [![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
-![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/36357426-2f0f3152-14fe-11e8-892a-915d06488171.png)
+[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed)
+[![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed)
+[![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
+![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/39338772-34165fb2-49c5-11e8-9d29-38acb6842db8.png)
 
-This used to be just a [ponyfill](https://ponyfill.com) for `Element.scrollIntoViewIfNeeded` but is currently being rewritten to cover `Element.scrollIntoView(ScrollIntoViewOptions)` including the new `scrollMode: "if-needed"` option.
-This readme will be updated when it's ready for stable release.
+This used to be just a [ponyfill](https://ponyfill.com) for
+`Element.scrollIntoViewIfNeeded` but is currently being rewritten to cover
+`Element.scrollIntoView(ScrollIntoViewOptions)` including the new `scrollMode: "if-needed"` option. This readme will be updated when it's ready for stable
+release.
 
 ## [Demo](https://scroll-into-view-if-needed.netlify.com)

packages/scroll-into-view-if-needed/README.md

@@ -1,5 +1,8 @@
-[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed) [![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed) [![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
-![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/36357426-2f0f3152-14fe-11e8-892a-915d06488171.png)
+[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed)
+[![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed)
+[![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
+![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/39338772-34165fb2-49c5-11e8-9d29-38acb6842db8.png)
 
 This is a [ponyfill](https://ponyfill.com) with the added ability of animating
 the scroll itself.
@@ -45,7 +48,8 @@ scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })
 
 ### Ponyfill smooth scrolling
 
-If you're ok with a larger bundlesize, you can use the ponyfill version so all your users experience smooth scrolling.
+If you're ok with a larger bundlesize, you can use the ponyfill version so all
+your users experience smooth scrolling.
 
 ```js
 import scrollIntoView from 'scroll-into-view-if-needed/ponyfill'
@@ -74,7 +78,8 @@ const sequence = async () => {
 
 ### Custom scrolling transition
 
-If the default smooth scrolling ponyfill isn't the duration or easing you want, you can provide your own scrolling logic by giving `behavior` a callback.
+If the default smooth scrolling ponyfill isn't the duration or easing you want,
+you can provide your own scrolling logic by giving `behavior` a callback.
 
 ```js
 import scrollIntoView from 'scroll-into-view-if-needed'

packages/scroll-into-view-if-needed/src/compute.ts

@@ -45,15 +45,20 @@ function isScrollable(el) {
 const alignNearestBlock = (
   targetStart: number,
   targetSize: number,
-  frame: Element
+  frame: Element,
+  frameRect: ClientRect | DOMRect
 ) => {
   // targetSize is either targetRect.height or targetRect.width depending on if it's `block` or `inline`
   const targetEnd = targetStart + targetSize
 
   const elementEdgeA = frame.scrollTop + targetStart
   const elementEdgeB = frame.scrollTop + targetEnd
   const scrollingEdgeA = frame.scrollTop
-  const scrollingEdgeB = frame.scrollTop + frame.clientHeight
+  const height =
+    frame === document.documentElement ? frame.clientHeight : frameRect.bottom
+  const scrollingEdgeB = document.documentElement
+    ? frame.scrollTop + height
+    : frameRect.bottom
 
   //console.log('new coordinates', {elementEdgeA, elementEdgeB, scrollingEdgeA, scrollingEdgeB, targetStart, targetSize, 'frame.scrollTop': frame.scrollTop, 'frame.clientHeight': frame.clientHeight, 'frameRect.top': frameRect.top})
 
@@ -86,7 +91,7 @@ const alignNearestBlock = (
    *        ┗━ ━━ ━┛         ┗━ ━━ ━┛
    *
    */
-  if (elementEdgeA < scrollingEdgeA && targetSize < frame.clientHeight) {
+  if (elementEdgeA < scrollingEdgeA && targetSize < height) {
     return targetStart
   }
 
@@ -102,7 +107,7 @@ const alignNearestBlock = (
    *          │  │
    *          └──┘
    */
-  if (elementEdgeB > scrollingEdgeB && targetSize > frame.clientHeight) {
+  if (elementEdgeB > scrollingEdgeB && targetSize > height) {
     return targetStart
   }
 
@@ -117,7 +122,7 @@ const alignNearestBlock = (
    *          └──┘
    */
   ///*
-  if (elementEdgeB > scrollingEdgeB && targetSize < frame.clientHeight) {
+  if (elementEdgeB > scrollingEdgeB && targetSize < height) {
     return elementEdgeB - scrollingEdgeB
   }
   //*/
@@ -134,7 +139,7 @@ const alignNearestBlock = (
    *                           │  │
    *        ┗━ ━━ ━┛         ┗━└━━┘━┛
    */
-  if (elementEdgeA < scrollingEdgeA && targetSize > frame.clientHeight) {
+  if (elementEdgeA < scrollingEdgeA && targetSize > height) {
     return elementEdgeB - scrollingEdgeB
   }
 
@@ -150,6 +155,12 @@ const alignNearestInline = (
   // targetSize is either targetRect.height or targetRect.width depending on if it's `block` or `inline`
   const targetEnd = targetStart + targetSize
 
+  const elementEdgeC = frame.scrollLeft + targetStart
+  const elementEdgeD = frame.scrollLeft + targetEnd
+  const scrollingEdgeC = frame.scrollLeft
+  const scrollingEdgeD = frame.scrollLeft + frame.clientWidth
+  console.log('test')
+
   /**
    *  If element edge C and element edge D are both outside scrolling box edge C and scrolling box edge D
    *
@@ -181,9 +192,10 @@ const alignNearestInline = (
    *    ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
    */
   if (
-    frameRect.left < 0 &&
-    targetEnd > frameRect.left &&
-    targetSize < frame.clientWidth
+    (elementEdgeC < scrollingEdgeC && targetSize < frame.clientWidth) ||
+    (frameRect.left < 0 &&
+      targetEnd > frameRect.left &&
+      targetSize < frame.clientWidth)
   ) {
     return targetStart
   }
@@ -208,9 +220,10 @@ const alignNearestInline = (
    *        ┗ ━ ━ ━ ━ ┛         ┗ ━ ━ ━ ━ ┛
    */
   if (
-    frameRect.right > 0 &&
-    targetEnd > frameRect.right &&
-    targetSize < frame.clientWidth
+    (elementEdgeD < scrollingEdgeD && targetSize < frame.clientWidth) ||
+    (frameRect.right > 0 &&
+      targetEnd > frameRect.right &&
+      targetSize < frame.clientWidth)
   ) {
     return targetEnd - frameRect.left - frame.clientWidth
   }
@@ -235,15 +248,6 @@ export const compute = (
 
   let targetRect = target.getBoundingClientRect()
 
-  // If the element is already visible we can end it here
-  if (
-    scrollMode === 'if-needed' &&
-    targetRect.top >= 0 &&
-    targetRect.bottom <= window.innerHeight
-  ) {
-    return []
-  }
-
   // Collect all the scrolling boxes, as defined in the spec: https://drafts.csswg.org/cssom-view/#scrolling-box
   const frames: Element[] = []
   let parent
@@ -256,6 +260,32 @@ export const compute = (
     target = parent
   }
 
+  // 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 === document.documentElement &&
+        targetRect.bottom > frame.clientHeight
+      ) {
+        return false
+      }
+      return true
+    })
+    if (isVisible) {
+      return []
+    }
+  }
+
   // These values mutate as we loop through and generate scroll coordinates
   let targetBlock
   let targetInline
@@ -336,7 +366,12 @@ export const compute = (
         targetBlock = targetRect.top
       }
 
-      const offset = alignNearestBlock(targetBlock, targetRect.height, frame)
+      const offset = alignNearestBlock(
+        targetBlock,
+        targetRect.height,
+        frame,
+        frameRect
+      )
       blockScroll = frame.scrollTop + offset
 
       if (document.documentElement !== frame) {

packages/smooth-scroll-into-view-if-needed/README.md

@@ -1,7 +1,11 @@
-[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed) [![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed) [![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
-![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/39098948-61a1e60a-4672-11e8-80a3-16f0e57e4b9d.png)
+[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/scroll-into-view-if-needed)
+[![npm stat](https://img.shields.io/npm/dm/scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=scroll-into-view-if-needed)
+[![npm version](https://img.shields.io/npm/v/scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/scroll-into-view-if-needed)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)
+![scroll-into-view-if-needed](https://user-images.githubusercontent.com/81981/39338604-0bff23f2-49c4-11e8-9929-2f2b74a67b3c.png)
 
-This is a [ponyfill](https://ponyfill.com) for smooth scrolling `scroll-into-view-if-needed`.
+This is a [ponyfill](https://ponyfill.com) for smooth scrolling
+`scroll-into-view-if-needed`.
 
 ## [Demo](https://scroll-into-view-if-needed.netlify.com/)
 
@@ -40,7 +44,8 @@ const sequence = async () => {
 
 ### Custom scrolling transition
 
-If the default smooth scrolling ponyfill isn't the duration or easing you want, you can provide your own scrolling logic by giving `behavior` a callback.
+If the default smooth scrolling ponyfill isn't the duration or easing you want,
+you can provide your own scrolling logic by giving `behavior` a callback.
 
 ```js
 import scrollIntoView from 'smooth-scroll-into-view-if-needed'

website/components/Examples/IfNeeded.tsx

@@ -80,11 +80,11 @@ class IfNeeded extends PureComponent {
             <div className="buttons is-centered">
               <span className="label">Scroll to:&nbsp;</span>
               <a
-                key="B"
+                key="C"
                 className="button is-small"
-                onClick={() => this.doScroll(this.items.B)}
+                onClick={() => this.doScroll(this.items.C)}
               >
-                B
+                C
               </a>
               <a
                 key="D"