scrolldir - npm Package Compare versions

Comparing version 1.2.3 to 1.2.5

dist/scrolldir.auto.min.js

 /**
  * scrolldir - Vertical scroll direction in CSS
- * @version v1.1.7
+ * @version v1.2.5
  * @link https://github.com/dollarshaveclub/scrolldir.git
@@ -8,2 +8,2 @@ * @author Patrick Fisher <[e-mail]>
 **/
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e():"function"==typeof define&&define.amd?define(e):e()}(this,function(){"use strict";function t(){var t=document.documentElement,e=window,n="data-scrolldir",o=document.body,i=32,r=512,d=64,a=Array(i),f="down",u=void 0,c=void 0,s=0,m=function(){var m=e.scrollY,l=u.timeStamp,h="down"===f?Math.max:Math.min,p=o.offsetHeight-e.innerHeight;if(m=Math.max(0,m),m=Math.min(p,m),a.unshift({y:m,t:l}),a.pop(),m===h(c,m))return s=l,void(c=m);var v=l-r;if(v>s){c=m;for(var y=0;y<i&&(a[y]&&!(a[y].t<v));y+=1)c=h(c,a[y].y)}Math.abs(m-c)>d&&(c=m,s=l,f="down"===f?"up":"down",t.setAttribute(n,f))},l=function(t){u=t,e.requestAnimationFrame(m)};return c=e.scrollY,t.setAttribute(n,f),e.addEventListener("scroll",l)}t()});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e():"function"==typeof define&&define.amd?define(e):e()}(0,function(){"use strict";!function(){var t=document.documentElement,e=window,n=document.body,o=Array(32),i="down",d=void 0,r=void 0,a=0,f=function(){var f=e.scrollY,u=d.timeStamp,c="down"===i?Math.max:Math.min,s=n.offsetHeight-e.innerHeight;if(f=Math.max(0,f),f=Math.min(s,f),o.unshift({y:f,t:u}),o.pop(),f===c(r,f))return a=u,void(r=f);var m=u-512;if(m>a){r=f;for(var l=0;l<32&&o[l]&&!(o[l].t<m);l+=1)r=c(r,o[l].y)}Math.abs(f-r)>64&&(r=f,a=u,i="down"===i?"up":"down",t.setAttribute("data-scrolldir",i))},u=function(t){d=t,e.requestAnimationFrame(f)};r=e.scrollY,t.setAttribute("data-scrolldir",i),e.addEventListener("scroll",u)}()});

dist/scrolldir.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-  typeof define === 'function' && define.amd ? define(factory) :
-  (global.scrollDir = factory());
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global.scrollDir = factory());
 }(this, (function () { 'use strict';
 
-function scrollDir(opts) {
-  var defaults = {
-    el: document.documentElement,
-    win: window,
-    attribute: 'data-scrolldir'
-  };
-  var el = opts && opts.el || defaults.el;
-  var win = opts && opts.win || defaults.win;
-  var attribute = opts && opts.attribute || defaults.attribute;
-  if (opts && opts.off === true) {
-    return el.setAttribute(attribute, 'off');
-  }
-  var body = document.body;
-  var historyLength = 32; // Ticks to keep in history.
-  var historyMaxAge = 512; // History data time-to-live (ms).
-  var thresholdPixels = 64; // Ignore moves smaller than this.
-  var history = Array(historyLength);
-  var dir = 'down'; // 'up' or 'down'
-  var e = void 0; // last scroll event
-  var pivot = void 0; // "high-water mark"
-  var pivotTime = 0;
+var defaults = {
+  el: document.documentElement,
+  win: window,
+  attribute: 'data-scrolldir'
+};
+var el = void 0;
+var win = void 0;
+var attribute = void 0;
+var body = document.body;
+var historyLength = 32; // Ticks to keep in history.
+var historyMaxAge = 512; // History data time-to-live (ms).
+var thresholdPixels = 64; // Ignore moves smaller than this.
+var history = Array(historyLength);
+var dir = 'down'; // 'up' or 'down'
+var e = void 0; // last scroll event
+var pivot = void 0; // "high-water mark"
+var pivotTime = 0;
 
-  var tick = function tickFunc() {
-    var y = win.scrollY;
-    var t = e.timeStamp;
-    var furthest = dir === 'down' ? Math.max : Math.min;
+function tick() {
+  var y = win.scrollY;
+  var t = e.timeStamp;
+  var furthest = dir === 'down' ? Math.max : Math.min;
 
-    // Apply bounds to handle rubber banding
-    var yMax = body.offsetHeight - win.innerHeight;
-    y = Math.max(0, y);
-    y = Math.min(yMax, y);
+  // Apply bounds to handle rubber banding
+  var yMax = body.offsetHeight - win.innerHeight;
+  y = Math.max(0, y);
+  y = Math.min(yMax, y);
 
-    // Update history
-    history.unshift({ y: y, t: t });
-    history.pop();
+  // Update history
+  history.unshift({ y: y, t: t });
+  history.pop();
 
-    // Are we continuing in the same direction?
-    if (y === furthest(pivot, y)) {
-      // Update "high-water mark" for current direction
-      pivotTime = t;
-      pivot = y;
-      return;
-    }
-    // else we have backed off high-water mark
+  // Are we continuing in the same direction?
+  if (y === furthest(pivot, y)) {
+    // Update "high-water mark" for current direction
+    pivotTime = t;
+    pivot = y;
+    return;
+  }
+  // else we have backed off high-water mark
 
-    // Apply max age to find current reference point
-    var cutoffTime = t - historyMaxAge;
-    if (cutoffTime > pivotTime) {
-      pivot = y;
-      for (var i = 0; i < historyLength; i += 1) {
-        if (!history[i] || history[i].t < cutoffTime) break;
-        pivot = furthest(pivot, history[i].y);
-      }
+  // Apply max age to find current reference point
+  var cutoffTime = t - historyMaxAge;
+  if (cutoffTime > pivotTime) {
+    pivot = y;
+    for (var i = 0; i < historyLength; i += 1) {
+      if (!history[i] || history[i].t < cutoffTime) break;
+      pivot = furthest(pivot, history[i].y);
     }
+  }
 
-    // Have we exceeded threshold?
-    if (Math.abs(y - pivot) > thresholdPixels) {
-      pivot = y;
-      pivotTime = t;
-      dir = dir === 'down' ? 'up' : 'down';
-      el.setAttribute(attribute, dir);
-    }
-  };
+  // Have we exceeded threshold?
+  if (Math.abs(y - pivot) > thresholdPixels) {
+    pivot = y;
+    pivotTime = t;
+    dir = dir === 'down' ? 'up' : 'down';
+    el.setAttribute(attribute, dir);
+  }
+}
 
-  var handler = function handlerFunc(event) {
-    e = event;
-    win.requestAnimationFrame(tick);
-  };
+function handler(event) {
+  e = event;
+  return win.requestAnimationFrame(tick);
+}
 
+function scrollDir(opts) {
+  el = opts && opts.el || defaults.el;
+  win = opts && opts.win || defaults.win;
+  attribute = opts && opts.attribute || defaults.attribute;
+
+  // If opts.off, turn it off
+  // - set html[data-scrolldir="off"]
+  // - remove the event listener
+  if (opts && opts.off === true) {
+    el.setAttribute(attribute, 'off');
+    return win.removeEventListener('scroll', handler);
+  }
+
+  // else, turn it on
+  // - set html[data-scrolldir="down"]
+  // - add the event listener
   pivot = win.scrollY;
@@ -77,0 +89,0 @@ el.setAttribute(attribute, dir);

dist/scrolldir.min.js

 /**
  * scrolldir - Vertical scroll direction in CSS
- * @version v1.1.7
+ * @version v1.2.5
  * @link https://github.com/dollarshaveclub/scrolldir.git
@@ -8,2 +8,2 @@ * @author Patrick Fisher <[e-mail]>
 **/
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollDir=e()}(this,function(){"use strict";function t(t){var e={el:document.documentElement,win:window,attribute:"data-scrolldir"},n=t&&t.el||e.el,i=t&&t.win||e.win,o=t&&t.attribute||e.attribute;if(t&&t.off===!0)return n.setAttribute(o,"off");var r=document.body,u=32,a=512,d=64,f=Array(u),s="down",c=void 0,l=void 0,m=0,b=function(){var t=i.scrollY,e=c.timeStamp,b="down"===s?Math.max:Math.min,h=r.offsetHeight-i.innerHeight;if(t=Math.max(0,t),t=Math.min(h,t),f.unshift({y:t,t:e}),f.pop(),t===b(l,t))return m=e,void(l=t);var p=e-a;if(p>m){l=t;for(var v=0;v<u&&(f[v]&&!(f[v].t<p));v+=1)l=b(l,f[v].y)}Math.abs(t-l)>d&&(l=t,m=e,s="down"===s?"up":"down",n.setAttribute(o,s))},h=function(t){c=t,i.requestAnimationFrame(b)};return l=i.scrollY,n.setAttribute(o,s),i.addEventListener("scroll",h)}return t});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollDir=e()}(this,function(){"use strict";function t(){var t=r.scrollY,e=m.timeStamp,n="down"===c?Math.max:Math.min,i=u.offsetHeight-r.innerHeight;if(t=Math.max(0,t),t=Math.min(i,t),l.unshift({y:t,t:e}),l.pop(),t===n(v,t))return b=e,void(v=t);var h=e-f;if(h>b){v=t;for(var p=0;p<a&&(l[p]&&!(l[p].t<h));p+=1)v=n(v,l[p].y)}Math.abs(t-v)>s&&(v=t,b=e,c="down"===c?"up":"down",o.setAttribute(d,c))}function e(e){return m=e,r.requestAnimationFrame(t)}function n(t){return o=t&&t.el||i.el,r=t&&t.win||i.win,d=t&&t.attribute||i.attribute,t&&t.off===!0?(o.setAttribute(d,"off"),r.removeEventListener("scroll",e)):(v=r.scrollY,o.setAttribute(d,c),r.addEventListener("scroll",e))}var i={el:document.documentElement,win:window,attribute:"data-scrolldir"},o=void 0,r=void 0,d=void 0,u=document.body,a=32,f=512,s=64,l=Array(a),c="down",m=void 0,v=void 0,b=0;return n});

gulpfile.js

@@ -23,2 +23,3 @@ const gulp = require('gulp');
   qunit('tests/standard/index.html');
+  qunit('tests/off/index.html');
 });
@@ -25,0 +26,0 @@

package.json

 {
   "name": "scrolldir",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Vertical scroll direction in CSS",
@@ -5,0 +5,0 @@ "main": "dist/scrolldir.min.js",

README.md

@@ -40,2 +40,20 @@ <figure align="center">
 
+## Usage
+
+ScrollDir will set the `data-scrolldir` attribute on the `<html>` element to `up` or `down`:
+
+```html
+<html data-scrolldir="up">
+```
+or
+```html
+<html data-scrolldir="down">
+```
+
+Now it’s easy to change styles based on the direction the user is scrolling!
+
+```css
+[data-scrolldir="down"] .my-fixed-header { display: none; }
+```
+
 ## In Action🎥
@@ -55,7 +73,7 @@
 ```sh
-npm install scrollDir --save
+npm install scrolldir --save
 ```
 bower
 ```sh
-bower install scrollDir --save
+bower install scrolldir --save
 ```
@@ -69,9 +87,9 @@ yarn
 
-### Auto
-Add **dist/scrolldir.auto.min.js** and your done. There is no more configuration to do! Scrolldir will **just** conveniently work. 
+### Easy Mode
+Add **dist/scrolldir.auto.min.js** and you’re done. There is nothing more to do! Scrolldir will **just work**.
 
-### Default
-Add **dist/scrolldir.min.js**. You have access to the API options below and must invoke scrollDir. See the [Default Setup Usage](#default) and [Options](#options) below.
+Now go write some styles using `[data-scrolldir="down"]` and `[data-scrolldir="up"]`.
 
-<h2 id="default">Default Setup Usage 🛠</h2>
+### Custom Mode 🛠
+Add **dist/scrolldir.min.js**. You have access to the API options below and must invoke scrollDir.
 
@@ -81,32 +99,11 @@ ```javascript
 ```
-By default, ScrollDir will set the `data-scrolldir` attribute on the `<html>` element to `up` or `down`:
 
-```html
-<html data-scrolldir="up">
-```
-or
-```html
-<html data-scrolldir="down">
-```
-
-Now it's easy to change styling for vertical scroll direction!
-
-```css
-[data-scrolldir="down"] .my-fixed-header { display: none; }
-```
-
-<h2 id="options">Options ⚗</h2>
-
 To use an attribute besides `data-scrolldir`:
 ```javascript
-scrollDir({attribute: 'new-attribute-name'});
+scrollDir({ attribute: 'new-attribute-name' });
 ```
-or
-```javascript
 
-```
-
 To add the Scrolldir attribute to a different element:
 ```javascript
-scrollDir({el: 'your-new-selector'});
+scrollDir({ el: 'your-new-selector' });
 ```
@@ -116,3 +113,3 @@
 ```javascript
-scrollDir({off: true});
+scrollDir({ off: true });
 ```
@@ -119,0 +116,0 @@

rollup.config.js

@@ -10,3 +10,3 @@ // rollup bundle commands
 
-const name = process.env.entry ? process.env.entry : '.auto';
+const name = process.env.entry ? '.auto' : '';
 
@@ -13,0 +13,0 @@ export default {

src/scrolldir.js

@@ -1,70 +0,82 @@
-export default function scrollDir(opts) {
-  const defaults = {
-    el: document.documentElement,
-    win: window,
-    attribute: 'data-scrolldir',
-  };
-  const el = (opts && opts.el) || defaults.el;
-  const win = (opts && opts.win) || defaults.win;
-  const attribute = (opts && opts.attribute) || defaults.attribute;
-  if (opts && opts.off === true) {
-    return el.setAttribute(attribute, 'off');
-  }
-  const body = document.body;
-  const historyLength = 32; // Ticks to keep in history.
-  const historyMaxAge = 512; // History data time-to-live (ms).
-  const thresholdPixels = 64; // Ignore moves smaller than this.
-  const history = Array(historyLength);
-  let dir = 'down'; // 'up' or 'down'
-  let e; // last scroll event
-  let pivot; // "high-water mark"
-  let pivotTime = 0;
+const defaults = {
+  el: document.documentElement,
+  win: window,
+  attribute: 'data-scrolldir',
+};
+let el;
+let win;
+let attribute;
+const body = document.body;
+const historyLength = 32; // Ticks to keep in history.
+const historyMaxAge = 512; // History data time-to-live (ms).
+const thresholdPixels = 64; // Ignore moves smaller than this.
+const history = Array(historyLength);
+let dir = 'down'; // 'up' or 'down'
+let e; // last scroll event
+let pivot; // "high-water mark"
+let pivotTime = 0;
 
-  const tick = function tickFunc() {
-    let y = win.scrollY;
-    const t = e.timeStamp;
-    const furthest = dir === 'down' ? Math.max : Math.min;
+function tick() {
+  let y = win.scrollY;
+  const t = e.timeStamp;
+  const furthest = dir === 'down' ? Math.max : Math.min;
 
-    // Apply bounds to handle rubber banding
-    const yMax = body.offsetHeight - win.innerHeight;
-    y = Math.max(0, y);
-    y = Math.min(yMax, y);
+  // Apply bounds to handle rubber banding
+  const yMax = body.offsetHeight - win.innerHeight;
+  y = Math.max(0, y);
+  y = Math.min(yMax, y);
 
-    // Update history
-    history.unshift({ y, t });
-    history.pop();
+  // Update history
+  history.unshift({ y, t });
+  history.pop();
 
-    // Are we continuing in the same direction?
-    if (y === furthest(pivot, y)) {
-      // Update "high-water mark" for current direction
-      pivotTime = t;
-      pivot = y;
-      return;
-    }
-    // else we have backed off high-water mark
+  // Are we continuing in the same direction?
+  if (y === furthest(pivot, y)) {
+    // Update "high-water mark" for current direction
+    pivotTime = t;
+    pivot = y;
+    return;
+  }
+  // else we have backed off high-water mark
 
-    // Apply max age to find current reference point
-    const cutoffTime = t - historyMaxAge;
-    if (cutoffTime > pivotTime) {
-      pivot = y;
-      for (let i = 0; i < historyLength; i += 1) {
-        if (!history[i] || history[i].t < cutoffTime) break;
-        pivot = furthest(pivot, history[i].y);
-      }
+  // Apply max age to find current reference point
+  const cutoffTime = t - historyMaxAge;
+  if (cutoffTime > pivotTime) {
+    pivot = y;
+    for (let i = 0; i < historyLength; i += 1) {
+      if (!history[i] || history[i].t < cutoffTime) break;
+      pivot = furthest(pivot, history[i].y);
     }
+  }
 
-    // Have we exceeded threshold?
-    if (Math.abs(y - pivot) > thresholdPixels) {
-      pivot = y;
-      pivotTime = t;
-      dir = dir === 'down' ? 'up' : 'down';
-      el.setAttribute(attribute, dir);
-    }
-  };
+  // Have we exceeded threshold?
+  if (Math.abs(y - pivot) > thresholdPixels) {
+    pivot = y;
+    pivotTime = t;
+    dir = dir === 'down' ? 'up' : 'down';
+    el.setAttribute(attribute, dir);
+  }
+}
 
-  const handler = function handlerFunc(event) {
-    e = event;
-    win.requestAnimationFrame(tick);
-  };
+function handler(event) {
+  e = event;
+  return win.requestAnimationFrame(tick);
+}
 
+export default function scrollDir(opts) {
+  el = (opts && opts.el) || defaults.el;
+  win = (opts && opts.win) || defaults.win;
+  attribute = (opts && opts.attribute) || defaults.attribute;
+
+  // If opts.off, turn it off
+  // - set html[data-scrolldir="off"]
+  // - remove the event listener
+  if (opts && opts.off === true) {
+    el.setAttribute(attribute, 'off');
+    return win.removeEventListener('scroll', handler);
+  }
+
+  // else, turn it on
+  // - set html[data-scrolldir="down"]
+  // - add the event listener
   pivot = win.scrollY;
@@ -71,0 +83,0 @@ el.setAttribute(attribute, dir);

No alert changes

Improved metrics

Total package byte prevSize

125611

increased by1.01%

Number of package files

24

increased by9.09%

Lines of code

428

increased by6.47%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

117

decreased by-2.5%

No dependency changes