scroll-into-view-if-needed - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

package.json

 {
   "name": "scroll-into-view-if-needed",
-  "description": "Element.scrollIntoViewIfNeeded ponyfill that can animate the scrolling",
+  "description": "Ponyfill for upcoming Element.scrollIntoView() APIs like scrollMode: if-needed, behavior: smooth and block: center",
+  "license": "MIT",
   "author": "Stian Didriksen",
-  "license": "MIT",
-  "homepage": "https://stipsan.github.io/scroll-into-view-if-needed",
+  "homepage": "https://scroll-into-view-if-needed.netlify.com",
   "repository": {
@@ -11,59 +11,57 @@ "type": "git",
   },
-  "version": "1.5.0",
-  "main": "dist/bundle.js",
+  "version": "1.5.1",
+  "main": "index.js",
+  "files": [
+    "compute.js",
+    "es",
+    "typings",
+    "umd"
+  ],
   "scripts": {
     "prebuild": "yarn clean",
-    "build": "yarn build:tsc && yarn build:rollup",
-    "build:rollup": "rollup -c",
-    "build:tsc": "yarn tsc:main && yarn tsc:example",
-    "changelog:commit": "sr-changelog commit",
-    "changelog:preview": "sr-changelog",
-    "clean": "rimraf dist",
+    "build": "yarn build:d.ts && yarn build:cjs && yarn build:es && yarn build:umd && yarn build:umd.min",
+    "build:cjs": "BABEL_ENV=cjs babel src -d . --extensions '.ts'",
+    "build:d.ts": "tsc --emitDeclarationOnly",
+    "build:es": "BABEL_ENV=es babel src -d es --extensions '.ts'",
+    "build:umd": "BABEL_ENV=umd NODE_ENV=development rollup -c -f umd -o umd/scroll-into-view-if-needed.js",
+    "build:umd.min": "BABEL_ENV=umd NODE_ENV=production rollup -c -f umd -o umd/scroll-into-view-if-needed.min.js",
+    "clean": "rimraf 'umd' 'es' 'typings'",
     "precommit": "lint-staged",
-    "predev": "yarn build",
-    "dev": "concurrently \"yarn tsc:main --watch\" \"yarn tsc:example --watch\" \"yarn build:rollup -w\" \"next dev example\"",
-    "docs": "next build example && DOCS=true next export -o ./docs example && npx -p https://gist.github.com/stipsan/bbf4adcdafd9eabfa6a9a42397a1c1b9 -c 'git-update-ghpages'",
+    "dev": "concurrently 'tsc --watch' 'yarn build:cjs --watch'",
+    "lint": "eslint ./integration-examples",
     "prepublishOnly": "unset npm_config_cafile && yarn build",
-    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
-    "prestart": "yarn build",
-    "start": "next build example && next start example",
-    "test": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=junit/test-results.xml'",
-    "tsc:example": "tsc -p example",
-    "tsc:main": "tsc -p ."
+    "typecheck": "tsc --noEmit"
   },
-  "sideEffects": false,
-  "dependencies": {
-    "amator": "1.0.1"
-  },
   "devDependencies": {
-    "@types/next": "^2.4.5",
-    "@types/prettier": "^1.8.0",
-    "@types/react": "^16.0.20",
-    "@types/react-dom": "^16.0.2",
-    "babel-cli": "^6.23.0",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-preset-env": "^1.2.1",
-    "babel-preset-es2015-rollup": "^3.0.0",
-    "concurrently": "^3.5.0",
-    "cypress": "^1.0.3",
-    "husky": "^0.14.3",
-    "lint-staged": "^4.3.0",
-    "next": "^4.1.4",
-    "prettier": "^1.8.2",
-    "prettier-browser": "git://github.com/prettier/prettier.git#1.8.2",
-    "prettier-package-json": "^1.4.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "release-relief": "^1.0.1",
-    "rimraf": "^2.6.1",
-    "rollup": "^0.50.0",
-    "rollup-plugin-babel": "^2.7.1",
-    "rollup-plugin-commonjs": "^8.0.2",
-    "rollup-plugin-node-resolve": "^2.0.0",
-    "scroll-into-view-if-needed": "link:.",
-    "system-font-stack": "^1.0.4",
-    "typescript": "^2.6.1",
-    "uglifyjs-webpack-plugin": "^1.0.1"
+    "@babel/cli": "7.0.0-beta.46",
+    "@babel/core": "7.0.0-beta.46",
+    "@babel/plugin-external-helpers": "7.0.0-beta.46",
+    "@babel/preset-env": "7.0.0-beta.46",
+    "@babel/preset-typescript": "7.0.0-beta.46",
+    "babel-eslint": "8.2.3",
+    "babel-plugin-add-module-exports": "0.2.1",
+    "babel-plugin-dev-expression": "0.2.1",
+    "concurrently": "3.5.1",
+    "eslint": "4.19.1",
+    "eslint-config-prettier": "2.9.0",
+    "eslint-plugin-import": "2.11.0",
+    "eslint-plugin-react": "7.7.0",
+    "husky": "0.14.3",
+    "lint-staged": "7.0.5",
+    "prettier": "1.12.1",
+    "prettier-package-json": "1.5.1",
+    "rimraf": "2.6.2",
+    "rollup": "0.58.2",
+    "rollup-plugin-babel": "4.0.0-beta.4",
+    "rollup-plugin-commonjs": "9.1.0",
+    "rollup-plugin-node-resolve": "3.3.0",
+    "rollup-plugin-replace": "2.0.0",
+    "rollup-plugin-uglify": "3.0.0",
+    "semantic-release": "15.1.7",
+    "typescript": "2.8.3"
   },
   "keywords": [
+    "behavior-smooth",
+    "if-needed",
+    "polyfill",
     "ponyfill",
@@ -74,2 +72,3 @@ "scroll",
     "scrollIntoViewIfNeeded",
+    "scrollMode",
     "smooth",
@@ -79,2 +78,10 @@ "smoothscroll",
   ],
+  "publishConfig": {
+    "tag": "next"
+  },
+  "browserify": {
+    "transform": [
+      "loose-envify"
+    ]
+  },
   "lint-staged": {
@@ -93,2 +100,6 @@ "*.js": [
     ],
+    "*.css": [
+      "prettier --write",
+      "git add"
+    ],
     "*.md": [
@@ -98,15 +109,32 @@ "prettier --write",
     ],
-    "package.json": [
+    "**/package.json": [
       "prettier-package-json --write",
       "git add"
+    ],
+    "**/.babelrc": [
+      "prettier --write",
+      "git add"
     ]
   },
-  "module": "dist/index.js",
+  "module": "es/index.js",
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "overrides": [
+      {
+        "files": ".babelrc",
+        "options": {
+          "parser": "json"
+        }
+      }
+    ]
+  },
   "release": {
-    "analyzeCommits": "semantic-release-tamia/analyzeCommits",
-    "verifyConditions": "condition-circle",
-    "generateNotes": "semantic-release-tamia/generateNotes",
-    "verifyRelease": "semantic-release-tamia/verifyRelease"
+    "prepare": [
+      "@semantic-release/npm"
+    ]
   },
-  "typings": "dist/index.d.ts"
-}
+  "sideEffects": false,
+  "typings": "typings/index.d.ts"
+}

README.md

@@ -1,15 +0,16 @@
-[![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)
+# 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/39338772-34165fb2-49c5-11e8-9d29-38acb6842db8.png)
 
-This is a [ponyfill](https://ponyfill.com) with the added ability of animating
-the scroll itself.
+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://stipsan.github.io/scroll-into-view-if-needed/)
+## [Demo](https://scroll-into-view-if-needed.netlify.com)
 
-Kudos to [@hsablonniere](https://github.com/hsablonniere) for sharing the
-[original polyfill](https://gist.github.com/hsablonniere/2581101) and
-[@jocki84](https://github.com/jocki84) for
-[improving](https://gist.github.com/jocki84/6ffafd003387179a988e) it!
-
 ## Install
@@ -24,3 +25,3 @@
 ```js
-const scrollIntoViewIfNeeded = require('scroll-into-view-if-needed')
+import scrollIntoView from 'scroll-into-view-if-needed'
 const node = document.getElementById('hero')
@@ -31,220 +32,49 @@
 // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-scrollIntoViewIfNeeded(node)
+// same behavior as Element.scrollIntoViewIfNeeded()
+// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
+scrollIntoView(node, {
+  scrollMode: 'if-needed',
+  block: 'nearest',
+  inline: 'nearest',
+})
 
-// same behavior as Element.scrollIntoViewIfNeeded(true)
+// same behavior as Element.scrollIntoViewIfNeeded(true) without the "IfNeeded" behavior
 // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded
-scrollIntoViewIfNeeded(node, { centerIfNeeded: true })
+scrollIntoView(node, { block: 'center', inline: 'center' })
+// scrollMode is "always" by default
 
-// animate the transition by setting a duration (in milliseconds)
-scrollIntoViewIfNeeded(node, { duration: 300 })
+// smooth scroll if the browser supports it and if the element isn't visible
+scrollIntoView(node, { behavior: 'smooth', scrollMode: 'if-needed' })
 ```
 
-## API
+### Ponyfill smooth scrolling
 
-### scrollIntoViewIfNeeded(target, [options])
+If you're ok with a larger bundlesize and want the smooth scrolling behavior to be ponyfilled you can use the [`smooth-scroll-into-view-if-needed`](https://github.com/stipsan/smooth-scroll-into-view-if-needed) addon.
 
-> New API introduced in `v1.3.0`
+### Custom scrolling transition
 
-### options
+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.
 
-Type: `Object`
+```js
+import scrollIntoView from 'scroll-into-view-if-needed'
+const node = document.getElementById('hero')
 
-#### boundary
+scrollIntoView(node, {
+  // Your scroll actions will always be an array, even if there is nothing to scroll
+  behavior: scrollActions =>
+    // list is sorted from innermost (closest parent to your target) to outermost (often the document.body or viewport)
+    scrollActions.forEach(([el, scrollTop, scrollLeft]) => {
+      // implement the scroll anyway you want
+      el.scrollTop = scrollTop
+      el.scrollLeft = scrollLeft
 
-Type: `Element`<br> Default: `document.documentElement`
-
-Outermost parent element that might be scrolled to bring `target` into view. Use
-this if you have multiple scrollable views and you need to limit what's
-scrolled. Also use this if you know that you will only need to scroll the parent
-of your `target` to skip performance costly checks.
-
-#### centerIfNeeded
-
-Type: `boolean`<br> Default: `false`
-
-Center the `target` if possible, and if it's not already visible. If it's not
-centered but still visible it will _not_ scroll.
-
-#### duration
-
-Type: `number`
-
-Set a duration in milliseconds to animate the transition between scroll
-positions on the x and/or y axis.
-
-#### easing
-
-Type: `'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'linear'`
-
-Change the easing mechanism. This option takes effect when `duration` is set. In
-`v2.0.0` it'll be possible to set your own
-[bezier easing](https://www.npmjs.com/package/bezier-easing) similar to CSS
-[`cubic-bezier()`](<https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#cubic-bezier()>).
-
-#### handleScroll(parent, {scrollLeft, scrollTop}, options)
-
-> Introduced in `v1.4.0`
-
-Type: `Function`
-
-Take control over how the target is scrolled into view. This function is called
-for each parent node that need scrolling. `scrollLeft` and `scrollTop` are
-destination coordinates. The from coordinates you'll have to get yourself if you
-want to animate the transition using a different library.
-
-When using this option you likely don't need the built in animation feature. To
-cut down on filesize you can do the following adjustment if you are using a
-recent version of webpack or rollbar (and use ES6 imports):
-
-```diff
--import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
-+import maybeScrollIntoView from 'scroll-into-view-if-needed/dist/calculate'
-
--scrollIntoViewIfNeeded(node)
-+maybeScrollIntoView(node, {handleScroll: (parent, {scrollLeft, scrollTop}, config) => {
-+  // The following is actually the default implementation
-+  // if this is all you need you can skip passing this option
-+  parent.scrollLeft = scrollLeft
-+  parent.scrollTop = scrollTop
-+}})
+      // If you need the relative scroll coordinates, for things like window.scrollBy style logic, just do the math
+      const offsetTop = el.scrollTop - scrollTop
+      const offsetLeft = el.scrollLeft - scrollLeft
+    }),
+  // all the other options (scrollMode, block, inline) still work, so you don't need to reimplement them (unless you really really want to)
+})
 ```
 
-#### offset
-
-Type: `Object`
-
-Used for creating whitespace between the `target` and the scroll container.
-Useful in scenarios where a `position: fixed` element might overlay the scroll
-container to "offset" the `target`.
-
-However this option has known bugs and may be dropped or replaced in `v2.0.0`.
-If possible wrap your `target` in an element and create spacing using `CSS
-padding` or similar. This way you won't be affected by breaking changes here or
-the current bugs.
-
-##### top
-
-Type: `number`<br> Default: `0`
-
-Behaves similarily to `margin-top`. A negative value will "pull" the target
-upward, while a positive value will "push" it downwards.
-
-##### right
-
-Type: `number`<br> Default: `0`
-
-##### bottom
-
-Type: `number`<br> Default: `0`
-
-##### left
-
-Type: `number`<br> Default: `0`
-
-### scrollIntoViewIfNeeded(target, [centerIfNeeded], [animateOptions], [finalElement], [offsetOptions])
-
-> Legacy API, will be deprecated in `v2.0.0`
-
-#### centerIfNeeded
-
-Type: `boolean`<br> Default: `false`
-
-Legacy alias for [`options.centerIfNeeded`](#centerifneeded)
-
-#### animateOptions
-
-Type: `Object`
-
-##### duration
-
-Type: `number`
-
-Legacy alias for [`options.duration`](#duration)
-
-##### easing
-
-Type: `string`
-
-Legacy alias for [`options.easing`](#easing)
-
-#### finalElement
-
-Type: `string`
-
-Legacy alias for [`options.boundary`](#boundary)
-
-#### offsetOptions
-
-Type: `Object`
-
-##### offsetTop
-
-Type: `number`
-
-Legacy alias for [`options.offset.top`](#top)
-
-##### offsetRight
-
-Type: `number`
-
-Legacy alias for [`options.offset.right`](#right)
-
-##### offsetBottom
-
-Type: `number`
-
-Legacy alias for [`options.offset.bottom`](#bottom)
-
-##### offsetLeft
-
-Type: `number`
-
-Legacy alias for [`options.offset.left`](#left)
-
-## Examples
-
-### React
-
-```jsx
-import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
-import { Component } from 'react'
-
-export default class Homepage extends Component {
-  render() {
-    return (
-      <div>
-        ...
-        <a
-          onClick={event => {
-            scrollIntoViewIfNeeded(this._signupNode, {
-              duration: 150,
-            })
-          }}
-        >
-          Signup Now!
-        </a>
-        ...
-        <form
-          ref={node => {
-            this._signupNode = node
-          }}
-        >
-          ...
-        </form>
-        ...
-      </div>
-    )
-  }
-}
-```
-
-### 1989 JS
-
-```html
-<script src="https://unpkg.com/scroll-into-view-if-needed@latest"></script>
-<script>
-  var node = document.getElementById('hero')
-  // if you don't have a bundler don't worry, you can access the global like the good old days
-  scrollIntoViewIfNeeded(node)
-</script>
-```
+## More documentation will be added (hang in there)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48362

increased by36.95%

Dependency count

0

decreased by-100%

Dev dependency count

26

decreased by-7.14%

Number of package files

12

increased by33.33%

Lines of code

856

increased by69.17%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

Number of lines in readme file

79

decreased by-68.27%

Dependency changes

• - Removedamator@1.0.1

• - Removedamator@1.0.1(transitive)

• - Removedbezier-easing@2.1.0(transitive)