scroll-into-view - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

package.json

 {
   "name": "scroll-into-view",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "",
@@ -14,3 +14,4 @@ "main": "scrollIntoView.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "watch": "watchify test/test.js -d -o test/test.browser.js"
   },
@@ -17,0 +18,0 @@ "author": "",

scrollIntoView.js

@@ -46,30 +46,50 @@ function setElementScroll(element, x, y){
 
-function transitionScrollTo(target, parent, startTime){
-    if(!startTime){
-        startTime = +new Date();
-    }
-
+function animate(parent){
     requestAnimationFrame(function(){
-        var location = getTargetScrollLocation(target, parent);
+        var scrollSettings = parent._scrollSettings,
+            location = getTargetScrollLocation(scrollSettings.target, parent),
+            time = Date.now() - scrollSettings.startTime,
+            timeValue = 1 / scrollSettings.time * time;
 
-        if(new Date() - startTime > 350){
-            // Give up and set the scroll position
-            setElementScroll(parent,
-                location.x,
-                location.y
-            );
-            return;
+        if(
+            time > scrollSettings.time || 
+            (Math.abs(location.differenceY) <= 1 && Math.abs(location.differenceX) <= 1)
+        ){
+            parent._scrollSettings = null;
+            return scrollSettings.callback();
         }
+
+        // Attempt to flatten out the value a little..
+        // ToDo: Flatten properly.
+        var valueX = scrollSettings.ease(Math.abs(Math.pow(timeValue,2) - timeValue)),
+            valueY = scrollSettings.ease(Math.abs(Math.pow(timeValue,2) - timeValue));
+
         setElementScroll(parent,
-            location.x - location.differenceX * 0.3,
-            location.y - location.differenceY * 0.3
+            location.x - (location.differenceX - location.differenceX * valueX),
+            location.y - (location.differenceY - location.differenceY * valueY)
         );
 
-        if(Math.abs(location.differenceY) > 1 || Math.abs(location.differenceX) > 1){
-            transitionScrollTo(target, parent, startTime);
-        }
+        animate(parent);
     });
 }
 
-module.exports = function(target){
+function transitionScrollTo(target, parent, settings, callback){
+    var scrollSettings = {
+            startTime: Date.now(),
+            target: target,
+            time: settings.time,
+            ease: settings.ease,
+            callback: callback
+        };
+
+    if(!parent._scrollSettings){
+        parent._scrollSettings = scrollSettings;
+        animate(parent);
+    }else{
+        parent._scrollSettings.callback();
+        parent._scrollSettings = scrollSettings;
+    }
+}
+
+module.exports = function(target, settings, callback){
     if(!target){
@@ -79,6 +99,24 @@ return;
 
-    var parent = target.parentElement,
-        targetPosition = target.getBoundingClientRect(),
-        parentOverflow;
+    if(typeof settings === 'function'){
+        callback = settings;
+        settings = null;
+    }
 
+    if(!settings){
+        settings = {};
+    }
+
+    settings.time = settings.time || 1000;
+    settings.ease = settings.ease || function(v){return v;};
+
+    var parent = target.parentElement;
+
+    var parents = 0;
+    function done(){
+        parents--;
+        if(!parents){
+            callback && callback();
+        }
+    }
+
     while(parent && parent.tagName !== 'BODY'){
@@ -89,3 +127,4 @@ if(
         ){
-            transitionScrollTo(target, parent);
+            parents++;
+            transitionScrollTo(target, parent, settings, done);
         }
@@ -96,3 +135,4 @@
 
-    transitionScrollTo(target, window);
+    parents++;
+    transitionScrollTo(target, window, settings, done);
 };

test/test.js

@@ -18,61 +18,118 @@ var test = require('tape'),
 
+var fns = [];
+function queue(fn){
+    fns.push(fn);
+    function start(){
+        reset();
+        var next = fns.shift();
+        if(next){
+            next(start);
+        }
+    }
+    if(document.body){
+        start();
+    }else{
+        window.addEventListener('load', start);
+    }
+}
 
-var oldTest = test;
+test('scrolls into view, 1 deep', function(t) {
+    var target;
 
-test = function(name, callback){
-    window.addEventListener('load', function(){
-        oldTest(name, function(t){
-            var oldEnd = t.end;
-            t.end = function(){
-                reset();
-                oldEnd.apply(t);
-            }
-            callback(t);
+    t.plan(1);
+
+    queue(function(next){
+
+        crel(document.body,
+            crel('div', {'style':'height:5000px;'},
+                target = crel('span', {'style':'position:absolute; top:2500px;'})
+            )
+        );
+
+        scrollIntoView(target, function(){
+            t.ok(
+                target.getBoundingClientRect().top < window.innerHeight,
+                'target was in view'
+            );
+            next();
         });
     });
-}
+});
 
-test('scrolls into view, 1 deep', function(t) {
+test('scrolls into view, 2 deep', function(t) {
     var target;
 
-    crel(document.body,
-        crel('div', {'style':'height:5000px;'},
-            target = crel('span', {'style':'position:absolute; top:2500px;'})
-        )
-    );
-
     t.plan(1);
 
-    scrollIntoView(target);
+    queue(function(next){
 
-    t.ok(
-        target.getBoundingClientRect().top < window.innerHeight,
-        'target was in view'
-    );
-    t.end();
+        crel(document.body,
+            crel('div', {'style':'position:relative; height:5000px; overflow: scroll;'},
+                crel('div', {'style':'position:relative; font-size:20em; overflow: scroll;display:inline-block'},
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    target = crel('span', {'style':'position:absolute; top:50%; left: 50%;'})
+                )
+            )
+        );
+
+        scrollIntoView(target, function(){
+            t.ok(
+                target.getBoundingClientRect().top < window.innerHeight &&
+                target.getBoundingClientRect().left < window.innerWidth,
+                'target was in view'
+            );
+            next();
+        });
+    });
 });
 
+test('hijack', function(t) {
+    var target1,
+        target2;
 
-test('scrolls into view, 2 deep', function(t) {
-    var target,
-        wrapper;
+    t.plan(2);
 
-    crel(document.body,
-        wrapper = crel('div', {'style':'height:5000px;'},
-            crel('div', {'style':'width:5000px; height:100%;'},
-                target = crel('span', {'style':'position:absolute; top:2500px; left: 2500px;'})
+    queue(function(next){
+
+        crel(document.body,
+            crel('div', {'style':'position:relative; height:5000px; overflow: scroll;'},
+                crel('div', {'style':'position:relative; font-size:20em; overflow: scroll;display:inline-block'},
+                    target1 = crel('span', {'style':'position:absolute; top:75%; left: 75%; box-shadow: 0 0 10px 10px red;'}),
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    'TEXT-AND-THAT-TO-MAKE-STUFF-HELA-WIDE',
+                    target2 = crel('span', {'style':'position:absolute; top:25%; left: 25%; box-shadow: 0 0 10px 10px green;'})
+                )
             )
-        )
-    );
+        );
 
-    t.plan(1);
+        scrollIntoView(target1, function(){
+            t.pass();
+        });
 
-    scrollIntoView(target);
+        setTimeout(function(){
 
-    t.ok(
-        target.getBoundingClientRect().top < window.innerHeight &&
-        target.getBoundingClientRect().left < window.innerWidth,
-        'target was in view'
-    );
-    t.end();
-});
+            scrollIntoView(target2, function(){
+                t.ok(
+                    target2.getBoundingClientRect().top < window.innerHeight &&
+                    target2.getBoundingClientRect().left < window.innerWidth,
+                    'target2 was in view'
+                );
+                next();
+            });
+
+        }, 500);
+    });
+});

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

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

Improved metrics

Total package byte prevSize

10892

increased by49.62%

Lines of code

224

increased by60%

No dependency changes