tny-uturn - npm Package Compare versions

Comparing version 1.0.0 to 1.1.1

bower.json

 {
   "name": "tny-uturn",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "homepage": "https://github.com/NewYorker/tny-uturn",
@@ -5,0 +5,0 @@ "authors": [

package.json

 {
   "name": "tny-uturn",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "a small library for detecting changes in scroll direction",
@@ -13,3 +13,3 @@ "main": "uturn.js",
     "type": "git",
-    "url": "git://github.com/NewYorker/tny-speeding-ticket.git"
+    "url": "git://github.com/NewYorker/tny-uturn.git"
   },
@@ -19,5 +19,5 @@ "author": "Leonard Bogdonoff <[e-mail]>",
   "bugs": {
-    "url": "https://github.com/NewYorker/tny-speeding-ticket/issues"
+    "url": "https://github.com/NewYorker/tny-uturn/issues"
   },
-  "homepage": "https://github.com/NewYorker/tny-speeding-ticket"
+  "homepage": "https://github.com/NewYorker/tny-uturn"
 }

README.md

@@ -1,2 +0,2 @@
-![](https://evaloy.files.wordpress.com/2011/06/u-turncrop.jpg)
+![](https://media.giphy.com/media/26BkNNHWxTrvoVlDy/giphy.gif)
 
@@ -11,9 +11,8 @@ # uturn - detect scrolling behavior with a requestAnimationFrame debounce
 
-## Events 
+## Events
 
 **Create event listeners on one of the three events:**
 
-- ```scrollupWhileReading``` This is triggered when a user is scrolling up, after having scrolled down. The desired behavior is to detect a user who scrolls up, after reading. The amount needed to be scrolled down can be modified.
-- ```scrolldownNormalReading``` This is triggered when a user is scrolling down. This is meant to be used to interupt the ```scrollupWhileReading``` event, by reengaging the reading experience.
-- ```scrolldownWhileReading``` This is triggered when the user is scrolling down. This is meant to be a general event that is triggered while a user is reading. 
+- ```scrollChangeToUp``` The desired behavior is to detect a user who scrolls up, after reading. 
+- ```scrollChangeToDown``` This is triggered when a user is scrolling down. This is meant to reengage the reading experience.
 
@@ -26,10 +25,30 @@ ## Callbacks
 
-    document.addEventListener('scrolldownWhileReading', function(){
-      // Put a function here that is disengages the scrolling up behavior, and returns a user to normal reading behavior
+    document.addEventListener('scrollChangeToUp', function(){
+      // Put function here that triggers when scrolling up
     });
-    document.addEventListener('scrollupWhileReading', function(){
-      // Put a function here that is engaged when users scroll up, after reading.
+
+    document.addEventListener('scrollChangeToDown', function(){
+      // Put function here that triggers when scrolling down
     });
-    document.addEventListener('scrolldownNormalReading', function(){
-       // Put a function here that confirms the user is scrolling down
-    });
+
+## Recommendation
+
+When implementing the events on your own site, I recommend setting up a variable on your site that saves the visible/hidden state.
+
+Example:
+
+	document.addEventListener('scrollChangeToDown', function(){
+	  console.log(_visible);
+	  if(_visible == true){
+	    hideWhileScrolling();
+	    _visible = false;
+	  }
+	});
+	
+	document.addEventListener('scrollChangeToUp', function(){
+	  console.log(_visible);
+	  if(_visible == false){
+	    displayWhileScrolling();
+	    _visible = true;
+	  }
+	});

uturn.js

@@ -6,9 +6,8 @@ function uturn () {
         _countingDown           = 0,
-        _verifySpeed            = 0,
         _onionSkin              = [],
         _lastScrollY            = 0,
+        _container              = document.querySelector('body'), // Change this to the element you want to watch
         _ticking                = false,
-        scrollupWhileReading    = new CustomEvent("scrollupWhileReading", {}),
-        scrolldownNormalReading = new CustomEvent("scrolldownNormalReading", {}),
-        scrolldownWhileReading  = new CustomEvent("scrolldownWhileReading", {});
+        scrollChangeToUp        = new CustomEvent("scrollChangeToUp", {}),
+        scrollChangeToDown      = new CustomEvent("scrollChangeToDown", {});
 
@@ -69,53 +68,14 @@ events();
     /**
-     * Keeping track of scroll history in an array
-     * Using this, you can estimate the actual direction/speed of scrolls
-     */
-    function addToScrollHistory(y){
-      _onionSkin.push(y);
-      if(_onionSkin.length > 9){
-        _onionSkin = _onionSkin.slice(1, 10);
-        // console.log(_onionSkin);
-      }
-    }
-
-    /**
-     * Check if scrolling down
-     */
-    function checkIsReadingNormally(y){
-      if(_scrollY > y){
-        document.dispatchEvent(scrolldownNormalReading);
-      }
-    }
-
-    /**
      * Do a check if scrolling up
      * Expand check by confirmed the scrolling up is actually happening
      */
-    function checkIsScrollingUp(){
-      var article = document.querySelector('#articleBody');
-      var bounds = document.querySelector('#articleBody').getBoundingClientRect();
+    function checkIsScrollingUp(y){
+      var bounds = _container.getBoundingClientRect(),
+          isGoingUp;
       if(bounds.top < 0 && (bounds.top+bounds.height-window.innerHeight) > 0){
-        var isGoingUp = false;
-        for(var i = 1; i < _onionSkin.length; i++){
-          if(_onionSkin[i-1] >= _onionSkin[i]){
-            isGoingUp = true;
-          }
-        }
-        if(isGoingUp){
-          _verifySpeed = 0;
-          _countingDown = 0;
-          _countingUp = _countingUp + 1;
-          if(_countingUp > 3){
-            document.dispatchEvent(scrollupWhileReading);
-          }
+        if(_scrollY > y){
+            document.dispatchEvent(scrollChangeToUp);
         } else {
-          _countingDown = _countingDown + 1;
-          _countingUp = 0;
-          if(_countingDown > 3){
-            document.dispatchEvent(scrolldownWhileReading);
-          }
+            document.dispatchEvent(scrollChangeToDown);
         }
-        // console.log('Going down');
-      } else {
-        document.dispatchEvent(scrolldownWhileReading);
       }
@@ -130,7 +90,9 @@ }
       var y = window.scrollY;
-      addToScrollHistory(y);
-      checkIsScrollingUp();
-      checkIsReadingNormally(y);
+      checkIsScrollingUp(y);
       _scrollY = y;
     };
   }
+
+  TNY.uturn = uturn;
+
+})(TNY, document);

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

52

increased by52.94%

Worsened metrics

Total package byte prevSize

7307

decreased by-11.63%

Lines of code

95

decreased by-28.57%

No dependency changes