intial import

Author: stipsan

.babelrc.js

@@ -0,0 +1,26 @@
+const BABEL_ENV = process.env.BABEL_ENV
+const building = BABEL_ENV != undefined && BABEL_ENV !== 'cjs'
+
+const plugins = []
+
+if (process.env.NODE_ENV === 'production') {
+  plugins.push('dev-expression')
+}
+
+if (BABEL_ENV === 'cjs') {
+  plugins.push('babel-plugin-add-module-exports')
+}
+
+module.exports = {
+  presets: [
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: building ? false : 'commonjs',
+      },
+    ],
+  ],
+  plugins: plugins,
+}

.gitignore

@@ -57,3 +57,10 @@ typings/
 # dotenv environment variables file
 .env
 
+dist
+es
+typings
+umd
+/*.js
+!.babelrc.js
+!rollup.config.js

README.md

@@ -0,0 +1,71 @@
+[![CircleCI Status](https://img.shields.io/circleci/project/github/stipsan/smooth-scroll-into-view-if-needed.svg?style=flat-square)](https://circleci.com/gh/stipsan/smooth-scroll-into-view-if-needed)
+[![npm stat](https://img.shields.io/npm/dm/smooth-scroll-into-view-if-needed.svg?style=flat-square)](https://npm-stat.com/charts.html?package=smooth-scroll-into-view-if-needed)
+[![npm version](https://img.shields.io/npm/v/smooth-scroll-into-view-if-needed.svg?style=flat-square)](https://www.npmjs.com/package/smooth-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)
+![smooth-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`.
+
+## [Demo](https://scroll-into-view-if-needed.netlify.com/)
+
+## Install
+
+```bash
+yarn add smooth-scroll-into-view-if-needed
+```
+
+## Usage
+
+```js
+import scrollIntoView from 'smooth-scroll-into-view-if-needed'
+const node = document.getElementById('hero')
+
+// If all you want is for all your users to have stuff smooth scroll into view
+scrollIntoView(node, { behavior: 'smooth' })
+
+// combine it with any of the other options
+scrollIntoView(node, {
+  behavior: 'smooth',
+  scrollMode: 'if-needed',
+  block: 'nearest',
+  inline: 'nearest',
+})
+
+// It returns a promise that is resolved when the animation is finished
+const sequence = async () => {
+  const slide = document.getElementById('slide-3')
+  // First smooth scroll to hero
+  await scrollIntoView(node, { behavior: 'smooth' })
+  // Then we scroll to a slide in a slideshow
+  return scrollIntoView(slide, { behavior: 'smooth' })
+}
+```
+
+### 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.
+
+```js
+import scrollIntoView from 'smooth-scroll-into-view-if-needed'
+const node = document.getElementById('hero')
+
+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
+
+      // 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)
+})
+```
+
+## More documentation will be added (hang in there)

package.json

@@ -0,0 +1,113 @@
+{
+  "name": "smooth-scroll-into-view-if-needed",
+  "description":
+    "Ponyfill for smooth scrolling elements into view (if needed!)",
+  "license": "MIT",
+  "author": "Stian Didriksen",
+  "homepage": "https://scroll-into-view-if-needed.netlify.com/",
+  "repository": {
+    "type": "git",
+    "url":
+      "git+https://github.com/stipsan/smooth-scroll-into-view-if-needed.git"
+  },
+  "version": "1.0.0",
+  "main": "index.js",
+  "files": ["es", "umd"],
+  "scripts": {
+    "prebuild": "yarn clean",
+    "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/smooth-scroll-into-view-if-needed.js",
+    "build:umd.min":
+      "BABEL_ENV=umd NODE_ENV=production rollup -c -f umd -o umd/smooth-scroll-into-view-if-needed.min.js",
+    "clean": "rimraf 'umd' 'es' 'typings'",
+    "precommit": "lint-staged",
+    "dev": "concurrently 'tsc --watch' 'yarn build:cjs --watch'",
+    "prepublishOnly": "unset npm_config_cafile && yarn build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "scroll-into-view-if-needed": "^2.0.1-alpha.0"
+  },
+  "devDependencies": {
+    "@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",
+    "babel-plugin-styled-components": "1.5.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",
+    "lerna": "2.11.0",
+    "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",
+    "semantic-release-monorepo": "6.0.1",
+    "typescript": "2.8.3"
+  },
+  "keywords": [
+    "behavior-smooth",
+    "if-needed",
+    "polyfill",
+    "ponyfill",
+    "scroll",
+    "scroll-into-view",
+    "scrollIntoView",
+    "scrollIntoViewIfNeeded",
+    "scrollMode",
+    "smooth",
+    "smoothscroll",
+    "typescript"
+  ],
+  "browserify": {
+    "transform": ["loose-envify"]
+  },
+  "lint-staged": {
+    "*.js": ["prettier --write", "git add"],
+    "*.{ts,tsx}": ["prettier --write", "git add"],
+    "*.json": ["prettier --write", "git add"],
+    "*.css": ["prettier --write", "git add"],
+    "*.md": ["prettier --write", "git add"],
+    "**/package.json": ["prettier-package-json --write", "git add"],
+    "**/.babelrc": ["prettier --write", "git add"]
+  },
+  "module": "es/index.js",
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "overrides": [
+      {
+        "files": ".babelrc",
+        "options": {
+          "parser": "json"
+        }
+      }
+    ]
+  },
+  "release": {
+    "prepare": ["@semantic-release/npm"],
+    "verifyConditions": ["@semantic-release/npm", "@semantic-release/github"]
+  },
+  "sideEffects": false,
+  "typings": "typings/index.d.ts"
+}

renovate.json

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "config:js-lib",
+    ":automergeDigest",
+    ":automergeMinor",
+    ":automergeRequireAllStatusChecks",
+    ":prHourlyLimit4",
+    ":semanticCommits",
+    ":pinDigestsDisabled"
+  ],
+  "devDependencies": {
+    "extends": ":automergeMajor"
+  }
+}

rollup.config.js

@@ -0,0 +1,30 @@
+import babel from 'rollup-plugin-babel'
+import uglify from 'rollup-plugin-uglify'
+import replace from 'rollup-plugin-replace'
+import commonjs from 'rollup-plugin-commonjs'
+import resolve from 'rollup-plugin-node-resolve'
+
+const config = {
+  input: 'src/index.ts',
+  name: 'scrollIntoView',
+  plugins: [
+    babel({
+      exclude: 'node_modules/**',
+    }),
+    resolve({
+      extensions: ['.ts', '.js', '.json'],
+    }),
+    commonjs({
+      include: /node_modules/,
+    }),
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+    }),
+  ],
+}
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(uglify())
+}
+
+export default config

src/index.ts

@@ -0,0 +1,101 @@
+import scrollIntoView from 'scroll-into-view-if-needed'
+import { Options } from 'scroll-into-view-if-needed/compute'
+
+// Memoize so we're much more friendly to non-dom envs
+let memoizedNow
+var now = () => {
+  if (!memoizedNow) {
+    memoizedNow =
+      'performance' in window ? performance.now.bind(performance) : Date.now
+  }
+  return memoizedNow()
+}
+
+const SCROLL_TIME = 300
+
+function ease(k) {
+  return 0.5 * (1 - Math.cos(Math.PI * k))
+}
+
+function step(context) {
+  var time = now()
+  var value
+  var currentX
+  var currentY
+  var elapsed = (time - context.startTime) / SCROLL_TIME
+
+  // avoid elapsed times higher than one
+  elapsed = elapsed > 1 ? 1 : elapsed
+
+  // apply easing to elapsed time
+  value = ease(elapsed)
+
+  currentX = context.startX + (context.x - context.startX) * value
+  currentY = context.startY + (context.y - context.startY) * value
+
+  context.method.call(context.scrollable, currentX, currentY)
+
+  // scroll more if we have not reached our destination
+  if (currentX !== context.x || currentY !== context.y) {
+    requestAnimationFrame(step.bind(global, context))
+  }
+}
+
+function smoothScroll(el, x, y, cb) {
+  var scrollable
+  var startX
+  var startY
+  var method
+  var startTime = now()
+
+  // define scroll context
+  if (el === document.body || (el === document.documentElement && true)) {
+    scrollable = window
+    startX = window.scrollX || window.pageXOffset
+    startY = window.scrollY || window.pageYOffset
+    method = window.scroll
+  } else {
+    scrollable = el
+    startX = el.scrollLeft
+    startY = el.scrollTop
+    method = (x, y) => {
+      el.scrollLeft = x
+      el.scrollTop = y
+    }
+  }
+
+  // scroll looping over a frame
+  step({
+    scrollable: scrollable,
+    method: method,
+    startTime: startTime,
+    startX: startX,
+    startY: startY,
+    x: x,
+    y: y,
+    cb,
+  })
+}
+
+export default (target, options: Options = {}) => {
+  const { behavior = 'smooth' } = options
+  //return target.scrollIntoView(options)
+
+  // @TODO detect if someone is using this library without smooth behavior and maybe warn
+  if (behavior !== 'smooth') {
+    return scrollIntoView(target, options)
+  }
+
+  return scrollIntoView(target, {
+    ...options,
+    behavior: instructions => {
+      return Promise.all(
+        instructions.map(({ el, left, top }) => {
+          return new Promise(resolve => {
+            smoothScroll(el, left, top, () => resolve())
+          })
+        })
+      )
+    },
+  })
+}

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "rootDir": "src",
+    "declarationDir": "typings",
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "strictNullChecks": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+
+    "alwaysStrict": true,
+    "lib": ["es5", "es2015.promise", "dom"]
+  },
+  "exclude": ["dist", "example", "**/*-test.ts", "cypress"]
+}