scroll-into-view - npm Package Compare versions

Comparing version 1.9.1 to 1.9.2

example/index.browser.js

@@ -1,2 +0,2 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){
 var crel = require('crel'),
@@ -285,29 +285,27 @@ scrollIntoView = require('../');
 function animate(parent){
-    raf(function(){
-        var scrollSettings = parent._scrollSettings;
-        if(!scrollSettings){
-            return;
-        }
+    var scrollSettings = parent._scrollSettings;
+    if(!scrollSettings){
+        return;
+    }
 
-        var location = getTargetScrollLocation(scrollSettings.target, parent, scrollSettings.align),
-            time = Date.now() - scrollSettings.startTime,
-            timeValue = Math.min(1 / scrollSettings.time * time, 1);
+    var location = getTargetScrollLocation(scrollSettings.target, parent, scrollSettings.align),
+        time = Date.now() - scrollSettings.startTime,
+        timeValue = Math.min(1 / scrollSettings.time * time, 1);
 
-        if(
-            time > scrollSettings.time + 20
-        ){
-            setElementScroll(parent, location.x, location.y);
-            parent._scrollSettings = null;
-            return scrollSettings.end(COMPLETE);
-        }
+    if(
+        time > scrollSettings.time * 1.01
+    ){
+        setElementScroll(parent, location.x, location.y);
+        parent._scrollSettings = null;
+        return scrollSettings.end(COMPLETE);
+    }
 
-        var easeValue = 1 - scrollSettings.ease(timeValue);
+    var easeValue = 1 - scrollSettings.ease(timeValue);
 
-        setElementScroll(parent,
-            location.x - location.differenceX * easeValue,
-            location.y - location.differenceY * easeValue
-        );
+    setElementScroll(parent,
+        location.x - location.differenceX * easeValue,
+        location.y - location.differenceY * easeValue
+    );
 
-        animate(parent);
-    });
+    raf(animate.bind(null, parent));
 }
@@ -330,3 +328,3 @@ function transitionScrollTo(target, parent, settings, callback){
         callback(endType);
-        parent.removeEventListener('touchstart', endHandler);
+        parent.removeEventListener('touchstart', endHandler, { passive: true });
     }
@@ -344,3 +342,3 @@
     endHandler = end.bind(null, CANCELED);
-    parent.addEventListener('touchstart', endHandler);
+    parent.addEventListener('touchstart', endHandler, { passive: true });
 
@@ -347,0 +345,0 @@ if(idle){

package.json

 {
   "name": "scroll-into-view",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "",
@@ -21,3 +21,3 @@ "main": "scrollIntoView.js",
   "author": "",
-  "license": "BSD",
+  "license": "MIT",
   "devDependencies": {
@@ -24,0 +24,0 @@ "browserify": "^14.4.0",

README.md

@@ -9,2 +9,6 @@ ![scroll-into-view](/scrollintoview.png)
 
+## Donating
+
+If you want to show your support financially, [I'm on Patreon](https://patreon.com/user/korynunn)
+
 ## Example
@@ -43,3 +47,4 @@
         // Only scroll the first two elements that don't have the class "dontScroll"
-        
+        // Element.matches is not supported in IE11, consider using Element.prototype.msMatchesSelector if you need to support that browser
+
         return parentsScrolled < 2 && target !== window && !target.matches('.dontScroll');
@@ -46,0 +51,0 @@ },

scrollIntoView.js

@@ -71,29 +71,27 @@ var COMPLETE = 'complete',
 function animate(parent){
-    raf(function(){
-        var scrollSettings = parent._scrollSettings;
-        if(!scrollSettings){
-            return;
-        }
+    var scrollSettings = parent._scrollSettings;
+    if(!scrollSettings){
+        return;
+    }
 
-        var location = getTargetScrollLocation(scrollSettings.target, parent, scrollSettings.align),
-            time = Date.now() - scrollSettings.startTime,
-            timeValue = Math.min(1 / scrollSettings.time * time, 1);
+    var location = getTargetScrollLocation(scrollSettings.target, parent, scrollSettings.align),
+        time = Date.now() - scrollSettings.startTime,
+        timeValue = Math.min(1 / scrollSettings.time * time, 1);
 
-        if(
-            time > scrollSettings.time + 20
-        ){
-            setElementScroll(parent, location.x, location.y);
-            parent._scrollSettings = null;
-            return scrollSettings.end(COMPLETE);
-        }
+    if(
+        time > scrollSettings.time * 1.01
+    ){
+        setElementScroll(parent, location.x, location.y);
+        parent._scrollSettings = null;
+        return scrollSettings.end(COMPLETE);
+    }
 
-        var easeValue = 1 - scrollSettings.ease(timeValue);
+    var easeValue = 1 - scrollSettings.ease(timeValue);
 
-        setElementScroll(parent,
-            location.x - location.differenceX * easeValue,
-            location.y - location.differenceY * easeValue
-        );
+    setElementScroll(parent,
+        location.x - location.differenceX * easeValue,
+        location.y - location.differenceY * easeValue
+    );
 
-        animate(parent);
-    });
+    raf(animate.bind(null, parent));
 }
@@ -116,3 +114,3 @@ function transitionScrollTo(target, parent, settings, callback){
         callback(endType);
-        parent.removeEventListener('touchstart', endHandler);
+        parent.removeEventListener('touchstart', endHandler, { passive: true });
     }
@@ -130,3 +128,3 @@
     endHandler = end.bind(null, CANCELED);
-    parent.addEventListener('touchstart', endHandler);
+    parent.addEventListener('touchstart', endHandler, { passive: true });
 
@@ -133,0 +131,0 @@ if(idle){

scrollIntoView.min.js

@@ -1,3 +0,3 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-function raf(e){if("requestAnimationFrame"in window)return window.requestAnimationFrame(e);setTimeout(e,16)}function setElementScroll(e,t,n){e.self===e?e.scrollTo(t,n):(e.scrollLeft=t,e.scrollTop=n)}function getTargetScrollLocation(e,t,n){var l,i,r,o,a,f,s,c=e.getBoundingClientRect(),u=n&&null!=n.left?n.left:.5,g=n&&null!=n.top?n.top:.5,m=n&&null!=n.leftOffset?n.leftOffset:0,d=n&&null!=n.topOffset?n.topOffset:0,h=u,p=g;if(t.self===t)f=Math.min(c.width,t.innerWidth),s=Math.min(c.height,t.innerHeight),i=c.left+t.pageXOffset-t.innerWidth*h+f*h,r=c.top+t.pageYOffset-t.innerHeight*p+s*p,r-=d,o=(i-=m)-t.pageXOffset,a=r-t.pageYOffset;else{f=c.width,s=c.height,l=t.getBoundingClientRect();var E=c.left-(l.left-t.scrollLeft),S=c.top-(l.top-t.scrollTop);i=E+f*h-t.clientWidth*h,r=S+s*p-t.clientHeight*p,i=Math.max(Math.min(i,t.scrollWidth-t.clientWidth),0),r=Math.max(Math.min(r,t.scrollHeight-t.clientHeight),0),r-=d,o=(i-=m)-t.scrollLeft,a=r-t.scrollTop}return{x:i,y:r,differenceX:o,differenceY:a}}function animate(e){raf(function(){var t=e._scrollSettings;if(t){var n=getTargetScrollLocation(t.target,e,t.align),l=Date.now()-t.startTime,i=Math.min(1/t.time*l,1);if(l>t.time+20)return setElementScroll(e,n.x,n.y),e._scrollSettings=null,t.end(COMPLETE);var r=1-t.ease(i);setElementScroll(e,n.x-n.differenceX*r,n.y-n.differenceY*r),animate(e)}})}function transitionScrollTo(e,t,n,l){function i(e){t._scrollSettings=null,t.parentElement&&t.parentElement._scrollSettings&&t.parentElement._scrollSettings.end(e),l(e),t.removeEventListener("touchstart",r)}var r,o=!t._scrollSettings,a=t._scrollSettings,f=Date.now();a&&a.end(CANCELED),t._scrollSettings={startTime:a?a.startTime:Date.now(),target:e,time:n.time+(a?f-a.startTime:0),ease:n.ease,align:n.align,end:i},r=i.bind(null,CANCELED),t.addEventListener("touchstart",r),o&&animate(t)}function defaultIsScrollable(e){return"pageXOffset"in e||(e.scrollHeight!==e.clientHeight||e.scrollWidth!==e.clientWidth)&&"hidden"!==getComputedStyle(e).overflow}function defaultValidTarget(){return!0}var COMPLETE="complete",CANCELED="canceled";module.exports=function(e,t,n){if(e){"function"==typeof t&&(n=t,t=null),t||(t={}),t.time=isNaN(t.time)?1e3:t.time,t.ease=t.ease||function(e){return 1-Math.pow(1-e,e/2)};for(var l=e.parentElement,i=0,r=t.validTarget||defaultValidTarget,o=t.isScrollable;l;){if(r(l,i)&&(o?o(l,defaultIsScrollable):defaultIsScrollable(l))&&(i++,transitionScrollTo(e,l,t,function(e){--i||n&&n(e)})),!(l=l.parentElement))return;"BODY"===l.tagName&&(l=(l=l.ownerDocument).defaultView||l.ownerWindow)}}};
+(function(){function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}return e})()({1:[function(require,module,exports){
+var COMPLETE="complete",CANCELED="canceled";function raf(e){if("requestAnimationFrame"in window)return window.requestAnimationFrame(e);setTimeout(e,16)}function setElementScroll(e,t,n){e.self===e?e.scrollTo(t,n):(e.scrollLeft=t,e.scrollTop=n)}function getTargetScrollLocation(e,t,n){var l,i,r,a,o,s,f,c=e.getBoundingClientRect(),u=n&&null!=n.left?n.left:.5,d=n&&null!=n.top?n.top:.5,g=n&&null!=n.leftOffset?n.leftOffset:0,m=n&&null!=n.topOffset?n.topOffset:0,h=u,p=d;if(t.self===t)s=Math.min(c.width,t.innerWidth),f=Math.min(c.height,t.innerHeight),i=c.left+t.pageXOffset-t.innerWidth*h+s*h,r=c.top+t.pageYOffset-t.innerHeight*p+f*p,r-=m,a=(i-=g)-t.pageXOffset,o=r-t.pageYOffset;else{s=c.width,f=c.height,l=t.getBoundingClientRect();var E=c.left-(l.left-t.scrollLeft),S=c.top-(l.top-t.scrollTop);i=E+s*h-t.clientWidth*h,r=S+f*p-t.clientHeight*p,i=Math.max(Math.min(i,t.scrollWidth-t.clientWidth),0),r=Math.max(Math.min(r,t.scrollHeight-t.clientHeight),0),r-=m,a=(i-=g)-t.scrollLeft,o=r-t.scrollTop}return{x:i,y:r,differenceX:a,differenceY:o}}function animate(e){var t=e._scrollSettings;if(t){var n=getTargetScrollLocation(t.target,e,t.align),l=Date.now()-t.startTime,i=Math.min(1/t.time*l,1);if(l>1.01*t.time)return setElementScroll(e,n.x,n.y),e._scrollSettings=null,t.end(COMPLETE);var r=1-t.ease(i);setElementScroll(e,n.x-n.differenceX*r,n.y-n.differenceY*r),raf(animate.bind(null,e))}}function transitionScrollTo(e,t,n,l){var i,r=!t._scrollSettings,a=t._scrollSettings,o=Date.now();function s(e){t._scrollSettings=null,t.parentElement&&t.parentElement._scrollSettings&&t.parentElement._scrollSettings.end(e),l(e),t.removeEventListener("touchstart",i,{passive:!0})}a&&a.end(CANCELED),t._scrollSettings={startTime:a?a.startTime:Date.now(),target:e,time:n.time+(a?o-a.startTime:0),ease:n.ease,align:n.align,end:s},i=s.bind(null,CANCELED),t.addEventListener("touchstart",i,{passive:!0}),r&&animate(t)}function defaultIsScrollable(e){return"pageXOffset"in e||(e.scrollHeight!==e.clientHeight||e.scrollWidth!==e.clientWidth)&&"hidden"!==getComputedStyle(e).overflow}function defaultValidTarget(){return!0}module.exports=function(e,t,n){if(e){"function"==typeof t&&(n=t,t=null),t||(t={}),t.time=isNaN(t.time)?1e3:t.time,t.ease=t.ease||function(e){return 1-Math.pow(1-e,e/2)};for(var l=e.parentElement,i=0,r=t.validTarget||defaultValidTarget,a=t.isScrollable;l;){if(r(l,i)&&(a?a(l,defaultIsScrollable):defaultIsScrollable(l))&&(i++,transitionScrollTo(e,l,t,o)),!(l=l.parentElement))return;"BODY"===l.tagName&&(l=(l=l.ownerDocument).defaultView||l.ownerWindow)}}function o(e){--i||n&&n(e)}};
 
@@ -4,0 +4,0 @@ },{}],2:[function(require,module,exports){

test/test.js

@@ -210,2 +210,3 @@ var test = require('tape'),
         console.warn('not firefox, skipped');
+        t.end();
         return;
@@ -250,2 +251,60 @@ }
     });
-});
+});
+
+test('instant scroll', function(t) {
+    var target;
+
+    t.plan(1);
+
+    queue(function(next){
+
+        crel(document.body,
+            crel('div', {'style':'height:5000px;'},
+                target = crel('span', {'style':'position:absolute; top:2500px;'})
+            )
+        );
+
+        scrollIntoView(target, { time: 0 });
+
+        t.ok(
+            target.getBoundingClientRect().top < window.innerHeight,
+            'target was in view'
+        );
+        next();
+    });
+});
+
+// Currently expected to fail. Willfix.
+test('instant scroll large depth', function(t) {
+    var target;
+
+    t.plan(1);
+
+    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'},
+                    '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, { time: 0 });
+
+        t.ok(
+            target.getBoundingClientRect().top < window.innerHeight &&
+            target.getBoundingClientRect().left < window.innerWidth,
+            'target was in view'
+        );
+        next();
+    });
+});

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

Misc. License Issues

License

(Experimental) A package's licensing information has fine-grained problems.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

711565

increased by1.75%

Number of medium license alerts

0

decreased by-100%

Lines of code

9451

increased by1.75%

Number of lines in readme file

103

increased by5.1%

Worsened metrics

Number of package files

13

decreased by-7.14%

No dependency changes