first release

Author: stipsan

.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+
+test/bundle.js

.npmignore

@@ -0,0 +1,2 @@
+src
+test

README.md

@@ -2,7 +2,7 @@
 
 This is a [ponyfill](https://ponyfoo.com/articles/polyfills-or-ponyfills) with the added ability of animating the scroll itself.
 
-Kudos to [@hsablonniere](https://github.com/hsablonniere) for sharing the [original polyfill](https://gist.github.com/hsablonniere/2581101)
+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
 
@@ -12,9 +12,10 @@ npm install scroll-into-view-if-needed
 
 ## API
 
-### scrollIntoViewIfNeeded(node:Element, centerIfNeeded:boolean || options:object)
+### scrollIntoViewIfNeeded(node:Element, centerIfNeeded:boolean, options:object)
 
 Returns a function that can be used to cancel a scroll animation.
+Inspired by [scroll-iv](https://www.npmjs.com/package/scroll-iv).
 
 #### Options
 
@@ -29,7 +30,7 @@ The duration of the animation in milliseconds, defaults to 0 for no animation.
 
 ##### easing
 
-@TODO
+default is ease. Possible values: `ease|easeIn|easeOut|easeInOut|linear`
 
 ## Examples
 
@@ -42,8 +43,7 @@ const activeNode = document.querySelector('li.active')
 scrollIntoViewIfNeeded(activeNode, false)
 
 // Animates it with a tiny animation lib, no need for jQuery or Velocity
-scrollIntoViewIfNeeded(activeNode, {
-  centerIfNeeded: false,
+scrollIntoViewIfNeeded(activeNode, false, {
   duration: 150
 })
 

package.json

@@ -2,9 +2,11 @@
   "name": "scroll-into-view-if-needed",
   "version": "1.0.0",
   "description": "Element.scrollIntoViewIfNeeded ponyfill that can animate the scrolling",
-  "main": "index.js",
+  "main": "dist/bundle.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup src/index.js -c --output dist/bundle.js && rollup test/index.js -c -f umd --output test/bundle.js",
+    "prepublish": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -22,5 +24,16 @@
   "bugs": {
     "url": "https://github.com/stipsan/scroll-into-view-if-needed/issues"
   },
-  "homepage": "https://github.com/stipsan/scroll-into-view-if-needed#readme"
+  "homepage": "https://github.com/stipsan/scroll-into-view-if-needed#readme",
+  "dependencies": {
+    "amator": "^1.0.1"
+  },
+  "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-preset-es2015-rollup": "^1.1.1",
+    "rollup": "^0.25.8",
+    "rollup-plugin-babel": "^2.4.0",
+    "rollup-plugin-commonjs": "^2.2.1",
+    "rollup-plugin-node-resolve": "^1.5.0"
+  }
 }

rollup.config.js

@@ -0,0 +1,20 @@
+import commonjs from 'rollup-plugin-commonjs';
+import nodeResolve from 'rollup-plugin-node-resolve';
+
+export default {
+  plugins: [
+    nodeResolve({
+      jsnext: true,
+      main: true
+    }),
+
+    commonjs({
+      // non-CommonJS modules will be ignored, but you can also
+      // specifically include/exclude files
+      include: 'node_modules/**',  // Default: undefined
+
+      // if false then skip sourceMap generation for CommonJS modules
+      sourceMap: false,  // Default: true
+    })
+  ]
+}

src/index.js

@@ -1,27 +1,78 @@
-if (!Element.prototype.scrollIntoViewIfNeeded) {
-  Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
-    centerIfNeeded = arguments.length === 0 ? true : !!centerIfNeeded;
+import animate from 'amator'
 
-    var parent = this.parentNode,
-        parentComputedStyle = window.getComputedStyle(parent, null),
-        parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')),
-        parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')),
-        overTop = this.offsetTop - parent.offsetTop < parent.scrollTop,
-        overBottom = (this.offsetTop - parent.offsetTop + this.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight),
-        overLeft = this.offsetLeft - parent.offsetLeft < parent.scrollLeft,
-        overRight = (this.offsetLeft - parent.offsetLeft + this.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth),
-        alignWithTop = overTop && !overBottom;
+export default function (elem, centerIfNeeded, options) {
+  
+  if (!elem) throw new Error('Element is required in scrollIntoViewIfNeeded')
+  
+  function withinBounds(value, min, max, extent) {
+      if (false === centerIfNeeded || max <= value + extent && value <= min + extent) {
+          return Math.min(max, Math.max(min, value));
+      } else {
+          return (min + max) / 2;
+      }
+  }
 
-    if ((overTop || overBottom) && centerIfNeeded) {
-      parent.scrollTop = this.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + this.clientHeight / 2;
-    }
+  function makeArea(left, top, width, height) {
+      return  { "left": left, "top": top, "width": width, "height": height
+              , "right": left + width, "bottom": top + height
+              , "translate":
+                  function (x, y) {
+                      return makeArea(x + left, y + top, width, height);
+                  }
+              , "relativeFromTo":
+                  function (lhs, rhs) {
+                      var newLeft = left, newTop = top;
+                      lhs = lhs.offsetParent;
+                      rhs = rhs.offsetParent;
+                      if (lhs === rhs) {
+                          return area;
+                      }
+                      for (; lhs; lhs = lhs.offsetParent) {
+                          newLeft += lhs.offsetLeft + lhs.clientLeft;
+                          newTop += lhs.offsetTop + lhs.clientTop;
+                      }
+                      for (; rhs; rhs = rhs.offsetParent) {
+                          newLeft -= rhs.offsetLeft + rhs.clientLeft;
+                          newTop -= rhs.offsetTop + rhs.clientTop;
+                      }
+                      return makeArea(newLeft, newTop, width, height);
+                  }
+              };
+  }
 
-    if ((overLeft || overRight) && centerIfNeeded) {
-      parent.scrollLeft = this.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + this.clientWidth / 2;
-    }
+  var parent, area = makeArea(
+      elem.offsetLeft, elem.offsetTop,
+      elem.offsetWidth, elem.offsetHeight);
+  while ((parent = elem.parentNode) instanceof HTMLElement) {
+      var clientLeft = parent.offsetLeft + parent.clientLeft;
+      var clientTop = parent.offsetTop + parent.clientTop;
 
-    if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
-      this.scrollIntoView(alignWithTop);
-    }
-  };
+      // Make area relative to parent's client area.
+      area = area.
+          relativeFromTo(elem, parent).
+          translate(-clientLeft, -clientTop);
+
+      var scrollLeft = withinBounds(
+          parent.scrollLeft,
+          area.right - parent.clientWidth, area.left,
+          parent.clientWidth)
+      var scrollTop = withinBounds(
+          parent.scrollTop,
+          area.bottom - parent.clientHeight, area.top,
+          parent.clientHeight)
+      if(options) {
+        animate(parent, {
+           scrollLeft: scrollLeft,
+          scrollTop: scrollTop
+        }, options)
+      } else {
+        parent.scrollLeft = scrollLeft
+        parent.scrollTop = scrollTop
+      }
+
+      // Determine actual scroll amount by reading back scroll properties.
+      area = area.translate(clientLeft - parent.scrollLeft,
+                            clientTop - parent.scrollTop);
+      elem = parent;
+  }
 }

test/index.js

@@ -0,0 +1,3 @@
+import scrollIntoViewIfNeeded from '../src/index'
+
+window.scrollIntoViewIfNeeded = scrollIntoViewIfNeeded

test/test-horizontal.html

@@ -106,22 +106,41 @@ <h1>scrollIntoViewIfNeeded test page</h1>
   <button data-item-idx="99">#99</button>
 </div>
 
-<script src="../src/index.js"></script>
+<div id="buttons-animate">
+  <span><code>animate scrollIntoViewIfNeeded()</code> to item : </span>
+  <button data-item-idx="0">#0</button>
+  <button data-item-idx="11">#11</button>
+  <button data-item-idx="22">#22</button>
+  <button data-item-idx="24">#24</button>
+  <button data-item-idx="26">#26</button>
+  <button data-item-idx="33">#33</button>
+  <button data-item-idx="44">#44</button>
+  <button data-item-idx="55">#55</button>
+  <button data-item-idx="66">#66</button>
+  <button data-item-idx="77">#77</button>
+  <button data-item-idx="82">#82</button>
+  <button data-item-idx="84">#84</button>
+  <button data-item-idx="86">#86</button>
+  <button data-item-idx="99">#99</button>
+</div>
+
+<script src="./bundle.js"></script>
 <script>
   (function () {
     var scrollArea = document.getElementById('scroll-area'),
         buttonsCenterFalse = document.getElementById('buttons-centerFalse'),
         buttonsCenterTrue = document.getElementById('buttons-centerTrue'),
         buttonsCenterUndefined = document.getElementById('buttons-centerUndefined'),
         buttonsCenterNoArgs = document.getElementById('buttons-centerNoArgs'),
+        buttonsAnimate = document.getElementById('buttons-animate'),
         scrollIntoViewIfNeededToItemAndSelect;
-    scrollIntoViewIfNeededToItemAndSelect = function (itemIdx, centerIfNeeded) {
+    scrollIntoViewIfNeededToItemAndSelect = function (itemIdx, centerIfNeeded, options) {
       scrollArea.querySelector('.selected').className = '';
       // Allow us to really have difference bewteen scrollIntoViewIfNeeded() and scrollIntoViewIfNeeded(undefined)
       if (arguments.length === 1) {
-        scrollArea.children[itemIdx].scrollIntoViewIfNeeded();
+        scrollIntoViewIfNeeded(scrollArea.children[itemIdx]);
       } else {
-        scrollArea.children[itemIdx].scrollIntoViewIfNeeded(centerIfNeeded);
+        scrollIntoViewIfNeeded(scrollArea.children[itemIdx], centerIfNeeded, options);
       }
       scrollArea.children[itemIdx].className = 'selected';
     };
@@ -145,5 +164,13 @@ <h1>scrollIntoViewIfNeeded test page</h1>
         scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx);
       }
     }, false);
+    buttonsAnimate.addEventListener('click', function (e) {
+      if (e.target.nodeName === 'BUTTON') {
+        scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx, false, {
+          centerIfNeeded: false,
+          duration: 150
+        });
+      }
+    }, false);
   })();
 </script>

test/test-vertical.html

@@ -102,7 +102,7 @@ <h1>scrollIntoViewIfNeeded test page</h1>
   <button data-item-idx="99">#99</button>
 </div>
 
-<script src="index.js"></script>
+<script src="./bundle.js"></script>
 <script>
   (function () {
     var scrollArea = document.getElementById('scroll-area'),
@@ -115,9 +115,9 @@ <h1>scrollIntoViewIfNeeded test page</h1>
       scrollArea.querySelector('.selected').className = '';
       // Allow us to really have difference bewteen scrollIntoViewIfNeeded() and scrollIntoViewIfNeeded(undefined)
       if (arguments.length === 1) {
-        scrollArea.children[itemIdx].scrollIntoViewIfNeeded();
+        scrollIntoViewIfNeeded(scrollArea.children[itemIdx]);
       } else {
-        scrollArea.children[itemIdx].scrollIntoViewIfNeeded(centerIfNeeded);
+        scrollIntoViewIfNeeded(scrollArea.children[itemIdx], centerIfNeeded);
       }
       scrollArea.children[itemIdx].className = 'selected';
     };