scrollama - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

build/scrollama.js

@@ -760,3 +760,7 @@ (function (global, factory) {
 function scrollama() {
-  var ready = false;
+  var id = Math.floor(Math.random() * 100000);
+  var ZERO_MOE = 1; // zero with some rounding margin of error
+  var callback = {};
+  var io = {};
+
   var containerEl = null;
@@ -769,8 +773,8 @@ var graphicEl = null;
   var vh = 0;
-  var thresholdProgress = 0;
-
   var stepHeights = null;
-  var direction = null;
   var bboxGraphic = null;
 
+  var thresholdProgress = 0;
+
+  var isReady = false;
   var isEnabled = false;
@@ -780,7 +784,4 @@ var debugMode = false;
 
-  var callback = {};
-  var io = {};
-
   // NOTIFY CALLBACKS
-  function notifyStepEnter(element) {
+  function notifyStepEnter(element, direction) {
     var index = +element.getAttribute("data-scrollama-index");
@@ -792,3 +793,3 @@ var resp = { element: element, index: index, direction: direction };
 
-  function notifyStepExit(element) {
+  function notifyStepExit(element, direction) {
     var index = +element.getAttribute("data-scrollama-index");
@@ -807,3 +808,3 @@ var resp = { element: element, index: index, direction: direction };
 
-  function notifyContainerEnter() {
+  function notifyContainerEnter(direction) {
     var resp = { direction: direction };
@@ -817,3 +818,3 @@ if (
 
-  function notifyContainerExit() {
+  function notifyContainerExit(direction) {
     var resp = { direction: direction };
@@ -835,7 +836,6 @@ if (callback.containerExit && typeof callback.containerExit === "function")
       var bottomAdjusted = bottom - offsetMargin;
-
-      if (bottomAdjusted >= 0) {
-        direction = isIntersecting ? "down" : "up";
-        if (isIntersecting) { notifyStepEnter(target); }
-        else { notifyStepExit(target); }
+      if (bottomAdjusted >= -ZERO_MOE) {
+        var direction = isIntersecting ? "down" : "up";
+        if (isIntersecting) { notifyStepEnter(target, direction); }
+        else { notifyStepExit(target, direction); }
       }
@@ -853,9 +853,12 @@ });
       var bottomAdjusted = bottom - offsetMargin;
-
-      if (bottomAdjusted >= 0 && bottomAdjusted < height && isIntersecting) {
-        direction = "up";
-        notifyStepEnter(target);
-      } else if (bottomAdjusted <= 0 && !isIntersecting) {
-        direction = "down";
-        notifyStepExit(target);
+      if (
+        bottomAdjusted >= -ZERO_MOE &&
+        bottomAdjusted < height &&
+        isIntersecting
+      ) {
+        var direction = "up";
+        notifyStepEnter(target, direction);
+      } else if (bottomAdjusted <= ZERO_MOE && !isIntersecting) {
+        var direction$1 = "down";
+        notifyStepExit(target, direction$1);
       }
@@ -874,3 +877,3 @@ });
 
-      if (isIntersecting && bottomAdjusted >= 0) {
+      if (isIntersecting && bottomAdjusted >= -ZERO_MOE) {
         notifyStepProgress(target, +intersectionRatio.toFixed(3));
@@ -886,6 +889,6 @@ }
     var bottom = boundingClientRect.bottom;
-    if (bottom > 0) {
-      direction = isIntersecting ? "down" : "up";
-      if (isIntersecting) { notifyContainerEnter(); }
-      else { notifyContainerExit(); }
+    if (bottom > -ZERO_MOE) {
+      var direction = isIntersecting ? "down" : "up";
+      if (isIntersecting) { notifyContainerEnter(direction); }
+      else { notifyContainerExit(direction); }
     }
@@ -899,6 +902,6 @@ }
     var top = boundingClientRect.top;
-    if (top < 0) {
-      direction = isIntersecting ? "up" : "down";
-      if (isIntersecting) { notifyContainerEnter(); }
-      else { notifyContainerExit(); }
+    if (top < ZERO_MOE) {
+      var direction = isIntersecting ? "up" : "down";
+      if (isIntersecting) { notifyContainerEnter(direction); }
+      else { notifyContainerExit(direction); }
     }
@@ -1019,6 +1022,6 @@ }
 
-    if (isEnabled && ready) { updateIO(); }
+    if (isEnabled && isReady) { updateIO(); }
 
     if (debugMode) {
-      var debugEl = document.querySelector(".scrollama__offset");
+      var debugEl = document.querySelector(("#scrollama__debug--offset-" + id));
       debugEl.style.top = offsetMargin + "px";
@@ -1030,3 +1033,3 @@ }
     if (enable && !isEnabled) {
-      if (ready) { updateIO(); }
+      if (isReady) { updateIO(); }
       isEnabled = true;
@@ -1050,3 +1053,4 @@ } else if (!enable) {
       var el = document.createElement("div");
-      el.setAttribute("class", "scrollama__offset");
+      el.setAttribute("id", ("scrollama__debug--offset-" + id));
+      el.setAttribute("class", "scrollama__debug--offset");
       el.style.position = "fixed";
@@ -1057,5 +1061,6 @@ el.style.top = "0";
       el.style.height = "1px";
-      el.style.backgroundColor = "red";
+      el.style.borderBottom = "1px dashed red";
       var text = document.createElement("p");
-      text.innerText = "scrollama trigger: " + offsetVal;
+      var textClass = stepEl[0].getAttribute("class");
+      text.innerText = "\"." + textClass + "\" trigger: " + offsetVal;
       text.style.fontSize = "12px";
@@ -1099,3 +1104,3 @@ text.style.fontFamily = "monospace";
       progressMode = progress;
-      ready = true;
+      isReady = true;
 
@@ -1126,2 +1131,6 @@ addDebug();
 
+  S.getOffset = function () {
+    return offsetVal;
+  };
+
   S.onStepEnter = function (cb) {
@@ -1128,0 +1137,0 @@ callback.stepEnter = cb;

build/scrollama.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollama=e()}(this,function(){"use strict";function t(t){for(var e=t.length,n=[],o=0;o<e;o+=1)n.push(t[o]);return n}function e(t){return document.querySelector(t)}function n(e,n){return void 0===n&&(n=document),t(n.querySelectorAll(e))}return function(t,e){function n(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||{top:0,bottom:0,left:0,right:0,width:0,height:0},this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=e.width*e.height,o=this.intersectionRect,r=o.width*o.height;this.intersectionRatio=n?r/n:this.isIntersecting?1:0}function o(t,e){var n=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(n.root&&1!=n.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=i(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(n.rootMargin),this.thresholds=this._initThresholds(n.threshold),this.root=n.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}function r(){return t.performance&&performance.now&&performance.now()}function i(t,e){var n=null;return function(){n||(n=setTimeout(function(){t(),n=null},e))}}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function c(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,n)}function u(t,e){var n=Math.max(t.top,e.top),o=Math.min(t.bottom,e.bottom),r=Math.max(t.left,e.left),i=Math.min(t.right,e.right),s=i-r,c=o-n;return s>=0&&c>=0&&{top:n,bottom:o,left:r,right:i,width:s,height:c}}function a(t){var e;try{e=t.getBoundingClientRect()}catch(t){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):{top:0,bottom:0,left:0,right:0,width:0,height:0}}function h(t,e){for(var n=e;n;){if(n==t)return!0;n=p(n)}return!1}function p(t){var e=t.parentNode;return e&&11==e.nodeType&&e.host?e.host:e}if("IntersectionObserver"in t&&"IntersectionObserverEntry"in t&&"intersectionRatio"in t.IntersectionObserverEntry.prototype)"isIntersecting"in t.IntersectionObserverEntry.prototype||Object.defineProperty(t.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});else{var l=[];o.prototype.THROTTLE_TIMEOUT=100,o.prototype.POLL_INTERVAL=null,o.prototype.observe=function(t){if(!this._observationTargets.some(function(e){return e.element==t})){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},o.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},o.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},o.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},o.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},o.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},o.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(s(t,"resize",this._checkForIntersections,!0),s(e,"scroll",this._checkForIntersections,!0),"MutationObserver"in t&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},o.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,c(t,"resize",this._checkForIntersections,!0),c(e,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},o.prototype._checkForIntersections=function(){var t=this._rootIsInDom(),e=t?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0};this._observationTargets.forEach(function(o){var i=o.element,s=a(i),c=this._rootContainsTarget(i),u=o.entry,h=t&&c&&this._computeTargetAndRootIntersection(i,e),p=o.entry=new n({time:r(),target:i,boundingClientRect:s,rootBounds:e,intersectionRect:h});u?t&&c?this._hasCrossedThreshold(u,p)&&this._queuedEntries.push(p):u&&u.isIntersecting&&this._queuedEntries.push(p):this._queuedEntries.push(p)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},o.prototype._computeTargetAndRootIntersection=function(n,o){var r=this;if("none"!=t.getComputedStyle(n).display){for(var i=a(n),s=p(n),c=!1;!c;){var h=null,l=1==s.nodeType?t.getComputedStyle(s):{};if("none"==l.display)return;if(s==r.root||s==e?(c=!0,h=o):s!=e.body&&s!=e.documentElement&&"visible"!=l.overflow&&(h=a(s)),h&&!(i=u(h,i)))break;s=p(s)}return i}},o.prototype._getRootRect=function(){var t;if(this.root)t=a(this.root);else{var n=e.documentElement,o=e.body;t={top:0,left:0,right:n.clientWidth||o.clientWidth,width:n.clientWidth||o.clientWidth,bottom:n.clientHeight||o.clientHeight,height:n.clientHeight||o.clientHeight}}return this._expandRectByRootMargin(t)},o.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100}),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},o.prototype._hasCrossedThreshold=function(t,e){var n=this,o=t&&t.isIntersecting?t.intersectionRatio||0:-1,r=e.isIntersecting?e.intersectionRatio||0:-1;if(o!==r)for(var i=0;i<this.thresholds.length;i++){var s=n.thresholds[i];if(s==o||s==r||s<o!=s<r)return!0}},o.prototype._rootIsInDom=function(){return!this.root||h(e,this.root)},o.prototype._rootContainsTarget=function(t){return h(this.root||e,t)},o.prototype._registerInstance=function(){l.indexOf(this)<0&&l.push(this)},o.prototype._unregisterInstance=function(){var t=l.indexOf(this);-1!=t&&l.splice(t,1)},t.IntersectionObserver=o,t.IntersectionObserverEntry=n}}(window,document),function(){function t(t){var e={element:t,index:+t.getAttribute("data-scrollama-index"),direction:P};S.stepEnter&&"function"==typeof S.stepEnter&&S.stepEnter(e)}function o(t){var e={element:t,index:+t.getAttribute("data-scrollama-index"),direction:P};S.stepExit&&"function"==typeof S.stepExit&&S.stepExit(e)}function r(t,e){var n={element:t,index:+t.getAttribute("data-scrollama-index"),progress:e};S.stepProgress&&"function"==typeof S.stepProgress&&S.stepProgress(n)}function i(){var t={direction:P};S.containerEnter&&"function"==typeof S.containerEnter&&S.containerEnter(t)}function s(){var t={direction:P};S.containerExit&&"function"==typeof S.containerExit&&S.containerExit(t)}function c(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target;r.bottom-C>=0&&(P=n?"down":"up",n?t(i):o(i))})}function u(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target,s=r.bottom,c=r.height,u=s-C;u>=0&&u<c&&n?(P="up",t(i)):u<=0&&!n&&(P="down",o(i))})}function a(t){t.forEach(function(t){var e=t.isIntersecting,n=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom-C;e&&s>=0&&r(i,+n.toFixed(3))})}function h(t){var e=t[0],n=e.isIntersecting;e.boundingClientRect.bottom>0&&(P=n?"down":"up",n?i():s())}function p(t){var e=t[0],n=e.isIntersecting;e.boundingClientRect.top<0&&(P=n?"up":"down",n?i():s())}function l(){H.top&&H.top.unobserve(R);var t={root:null,rootMargin:M+"px 0px -"+M+"px 0px",threshold:0};H.top=new IntersectionObserver(h,t),H.top.observe(R)}function f(){H.bottom&&H.bottom.unobserve(R);var t={root:null,rootMargin:"-"+A.height+"px 0px "+A.height+"px 0px",threshold:0};H.bottom=new IntersectionObserver(p,t),H.bottom.observe(R)}function d(){H.stepTop&&H.stepTop.forEach(function(t){return t.disconnect()}),H.stepTop=T.map(function(t,e){var n={root:null,rootMargin:L[e]-C+"px 0px "+(-M+C)+"px 0px",threshold:0},o=new IntersectionObserver(c,n);return o.observe(t),o})}function g(){H.stepBottom&&H.stepBottom.forEach(function(t){return t.disconnect()}),H.stepBottom=T.map(function(t,e){var n={root:null,rootMargin:-C+"px 0px "+(-M+L[e]+C)+"px 0px",threshold:0},o=new IntersectionObserver(u,n);return o.observe(t),o})}function m(){H.stepProgress&&H.stepProgress.forEach(function(t){return t.disconnect()}),H.stepProgress=T.map(function(t,e){var n={root:null,rootMargin:L[e]-C+"px 0px "+(-M+C)+"px 0px",threshold:k},o=new IntersectionObserver(a,n);return o.observe(t),o})}function v(){d(),g(),q&&m(),R&&w&&(l(),f())}function b(){M=window.innerHeight,A=w?w.getBoundingClientRect():null,C=O*M,L=T?T.map(function(t){return t.getBoundingClientRect().height}):[],B&&x&&v(),F&&(document.querySelector(".scrollama__offset").style.top=C+"px")}function y(t){t&&!B?(x&&v(),B=!0):t||(H.top&&H.top.disconnect(),H.bottom&&H.bottom.disconnect(),H.stepTop&&H.stepTop.forEach(function(t){return t.disconnect()}),H.stepBottom&&H.stepBottom.forEach(function(t){return t.disconnect()}),H.stepProgress&&H.stepProgress.forEach(function(t){return t.disconnect()}),B=!1)}function _(){T.forEach(function(t,e){return t.setAttribute("data-scrollama-index",e)})}function E(){if(F){var t=document.createElement("div");t.setAttribute("class","scrollama__offset"),t.style.position="fixed",t.style.top="0",t.style.left="0",t.style.width="100%",t.style.height="1px",t.style.backgroundColor="red";var e=document.createElement("p");e.innerText="scrollama trigger: "+O,e.style.fontSize="12px",e.style.fontFamily="monospace",e.style.color="red",e.style.margin="0",e.style.padding="6px",t.appendChild(e),document.body.appendChild(t)}}function I(){if(q){k=[];for(var t=0;t<100;t++)k.push(.01*t)}}var x=!1,R=null,w=null,T=null,O=0,C=0,M=0,k=0,L=null,P=null,A=null,B=!1,F=!1,q=!1,S={},H={},N={};return N.setup=function(t){var o=t.container,r=t.graphic,i=t.step,s=t.offset;void 0===s&&(s=.5);var c=t.progress;void 0===c&&(c=!1);var u=t.debug;return void 0===u&&(u=!1),i?(T=n(i),R=o?e(o):null,w=r?e(r):null,O=s,F=u,q=c,x=!0,E(),_(),I(),b(),y(!0)):console.error("scrollama error: missing step element"),N},N.resize=function(){return b(),N},N.enable=function(){return y(!0),N},N.disable=function(){return y(!1),N},N.onStepEnter=function(t){return S.stepEnter=t,N},N.onStepExit=function(t){return S.stepExit=t,N},N.onStepProgress=function(t){return S.stepProgress=t,N},N.onContainerEnter=function(t){return S.containerEnter=t,N},N.onContainerExit=function(t){return S.containerExit=t,N},N}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.scrollama=e()}(this,function(){"use strict";function t(t){for(var e=t.length,n=[],o=0;o<e;o+=1)n.push(t[o]);return n}function e(t){return document.querySelector(t)}function n(e,n){return void 0===n&&(n=document),t(n.querySelectorAll(e))}return function(t,e){function n(t){this.time=t.time,this.target=t.target,this.rootBounds=t.rootBounds,this.boundingClientRect=t.boundingClientRect,this.intersectionRect=t.intersectionRect||{top:0,bottom:0,left:0,right:0,width:0,height:0},this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,n=e.width*e.height,o=this.intersectionRect,r=o.width*o.height;this.intersectionRatio=n?r/n:this.isIntersecting?1:0}function o(t,e){var n=e||{};if("function"!=typeof t)throw new Error("callback must be a function");if(n.root&&1!=n.root.nodeType)throw new Error("root must be an Element");this._checkForIntersections=i(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(n.rootMargin),this.thresholds=this._initThresholds(n.threshold),this.root=n.root||null,this.rootMargin=this._rootMarginValues.map(function(t){return t.value+t.unit}).join(" ")}function r(){return t.performance&&performance.now&&performance.now()}function i(t,e){var n=null;return function(){n||(n=setTimeout(function(){t(),n=null},e))}}function s(t,e,n,o){"function"==typeof t.addEventListener?t.addEventListener(e,n,o||!1):"function"==typeof t.attachEvent&&t.attachEvent("on"+e,n)}function c(t,e,n,o){"function"==typeof t.removeEventListener?t.removeEventListener(e,n,o||!1):"function"==typeof t.detatchEvent&&t.detatchEvent("on"+e,n)}function u(t,e){var n=Math.max(t.top,e.top),o=Math.min(t.bottom,e.bottom),r=Math.max(t.left,e.left),i=Math.min(t.right,e.right),s=i-r,c=o-n;return s>=0&&c>=0&&{top:n,bottom:o,left:r,right:i,width:s,height:c}}function a(t){var e;try{e=t.getBoundingClientRect()}catch(t){}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):{top:0,bottom:0,left:0,right:0,width:0,height:0}}function h(t,e){for(var n=e;n;){if(n==t)return!0;n=p(n)}return!1}function p(t){var e=t.parentNode;return e&&11==e.nodeType&&e.host?e.host:e}if("IntersectionObserver"in t&&"IntersectionObserverEntry"in t&&"intersectionRatio"in t.IntersectionObserverEntry.prototype)"isIntersecting"in t.IntersectionObserverEntry.prototype||Object.defineProperty(t.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});else{var l=[];o.prototype.THROTTLE_TIMEOUT=100,o.prototype.POLL_INTERVAL=null,o.prototype.observe=function(t){if(!this._observationTargets.some(function(e){return e.element==t})){if(!t||1!=t.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(),this._checkForIntersections()}},o.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._observationTargets.length||(this._unmonitorIntersections(),this._unregisterInstance())},o.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorIntersections(),this._unregisterInstance()},o.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},o.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(t,e,n){if("number"!=typeof t||isNaN(t)||t<0||t>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return t!==n[e-1]})},o.prototype._parseRootMargin=function(t){var e=(t||"0px").split(/\s+/).map(function(t){var e=/^(-?\d*\.?\d+)(px|%)$/.exec(t);if(!e)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(e[1]),unit:e[2]}});return e[1]=e[1]||e[0],e[2]=e[2]||e[0],e[3]=e[3]||e[1],e},o.prototype._monitorIntersections=function(){this._monitoringIntersections||(this._monitoringIntersections=!0,this.POLL_INTERVAL?this._monitoringInterval=setInterval(this._checkForIntersections,this.POLL_INTERVAL):(s(t,"resize",this._checkForIntersections,!0),s(e,"scroll",this._checkForIntersections,!0),"MutationObserver"in t&&(this._domObserver=new MutationObserver(this._checkForIntersections),this._domObserver.observe(e,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))))},o.prototype._unmonitorIntersections=function(){this._monitoringIntersections&&(this._monitoringIntersections=!1,clearInterval(this._monitoringInterval),this._monitoringInterval=null,c(t,"resize",this._checkForIntersections,!0),c(e,"scroll",this._checkForIntersections,!0),this._domObserver&&(this._domObserver.disconnect(),this._domObserver=null))},o.prototype._checkForIntersections=function(){var t=this._rootIsInDom(),e=t?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0};this._observationTargets.forEach(function(o){var i=o.element,s=a(i),c=this._rootContainsTarget(i),u=o.entry,h=t&&c&&this._computeTargetAndRootIntersection(i,e),p=o.entry=new n({time:r(),target:i,boundingClientRect:s,rootBounds:e,intersectionRect:h});u?t&&c?this._hasCrossedThreshold(u,p)&&this._queuedEntries.push(p):u&&u.isIntersecting&&this._queuedEntries.push(p):this._queuedEntries.push(p)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)},o.prototype._computeTargetAndRootIntersection=function(n,o){var r=this;if("none"!=t.getComputedStyle(n).display){for(var i=a(n),s=p(n),c=!1;!c;){var h=null,l=1==s.nodeType?t.getComputedStyle(s):{};if("none"==l.display)return;if(s==r.root||s==e?(c=!0,h=o):s!=e.body&&s!=e.documentElement&&"visible"!=l.overflow&&(h=a(s)),h&&!(i=u(h,i)))break;s=p(s)}return i}},o.prototype._getRootRect=function(){var t;if(this.root)t=a(this.root);else{var n=e.documentElement,o=e.body;t={top:0,left:0,right:n.clientWidth||o.clientWidth,width:n.clientWidth||o.clientWidth,bottom:n.clientHeight||o.clientHeight,height:n.clientHeight||o.clientHeight}}return this._expandRectByRootMargin(t)},o.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(e,n){return"px"==e.unit?e.value:e.value*(n%2?t.width:t.height)/100}),n={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return n.width=n.right-n.left,n.height=n.bottom-n.top,n},o.prototype._hasCrossedThreshold=function(t,e){var n=this,o=t&&t.isIntersecting?t.intersectionRatio||0:-1,r=e.isIntersecting?e.intersectionRatio||0:-1;if(o!==r)for(var i=0;i<this.thresholds.length;i++){var s=n.thresholds[i];if(s==o||s==r||s<o!=s<r)return!0}},o.prototype._rootIsInDom=function(){return!this.root||h(e,this.root)},o.prototype._rootContainsTarget=function(t){return h(this.root||e,t)},o.prototype._registerInstance=function(){l.indexOf(this)<0&&l.push(this)},o.prototype._unregisterInstance=function(){var t=l.indexOf(this);-1!=t&&l.splice(t,1)},t.IntersectionObserver=o,t.IntersectionObserverEntry=n}}(window,document),function(){function t(t,e){var n={element:t,index:+t.getAttribute("data-scrollama-index"),direction:e};w.stepEnter&&"function"==typeof w.stepEnter&&w.stepEnter(n)}function o(t,e){var n={element:t,index:+t.getAttribute("data-scrollama-index"),direction:e};w.stepExit&&"function"==typeof w.stepExit&&w.stepExit(n)}function r(t,e){var n={element:t,index:+t.getAttribute("data-scrollama-index"),progress:e};w.stepProgress&&"function"==typeof w.stepProgress&&w.stepProgress(n)}function i(t){var e={direction:t};w.containerEnter&&"function"==typeof w.containerEnter&&w.containerEnter(e)}function s(t){var e={direction:t};w.containerExit&&"function"==typeof w.containerExit&&w.containerExit(e)}function c(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target;if(r.bottom-L>=-R){var s=n?"down":"up";n?t(i,s):o(i,s)}})}function u(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target,s=r.bottom,c=r.height,u=s-L;u>=-R&&u<c&&n?t(i,"up"):u<=R&&!n&&o(i,"down")})}function a(t){t.forEach(function(t){var e=t.isIntersecting,n=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom-L;e&&s>=-R&&r(i,+n.toFixed(3))})}function h(t){var e=t[0],n=e.isIntersecting;if(e.boundingClientRect.bottom>-R){var o=n?"down":"up";n?i(o):s(o)}}function p(t){var e=t[0],n=e.isIntersecting;if(e.boundingClientRect.top<R){var o=n?"up":"down";n?i(o):s(o)}}function l(){T.top&&T.top.unobserve(O);var t={root:null,rootMargin:A+"px 0px -"+A+"px 0px",threshold:0};T.top=new IntersectionObserver(h,t),T.top.observe(O)}function f(){T.bottom&&T.bottom.unobserve(O);var t={root:null,rootMargin:"-"+P.height+"px 0px "+P.height+"px 0px",threshold:0};T.bottom=new IntersectionObserver(p,t),T.bottom.observe(O)}function d(){T.stepTop&&T.stepTop.forEach(function(t){return t.disconnect()}),T.stepTop=C.map(function(t,e){var n={root:null,rootMargin:B[e]-L+"px 0px "+(-A+L)+"px 0px",threshold:0},o=new IntersectionObserver(c,n);return o.observe(t),o})}function g(){T.stepBottom&&T.stepBottom.forEach(function(t){return t.disconnect()}),T.stepBottom=C.map(function(t,e){var n={root:null,rootMargin:-L+"px 0px "+(-A+B[e]+L)+"px 0px",threshold:0},o=new IntersectionObserver(u,n);return o.observe(t),o})}function m(){T.stepProgress&&T.stepProgress.forEach(function(t){return t.disconnect()}),T.stepProgress=C.map(function(t,e){var n={root:null,rootMargin:B[e]-L+"px 0px "+(-A+L)+"px 0px",threshold:F},o=new IntersectionObserver(a,n);return o.observe(t),o})}function v(){d(),g(),N&&m(),O&&M&&(l(),f())}function b(){A=window.innerHeight,P=M?M.getBoundingClientRect():null,L=k*A,B=C?C.map(function(t){return t.getBoundingClientRect().height}):[],S&&q&&v(),H&&(document.querySelector("#scrollama__debug--offset-"+x).style.top=L+"px")}function _(t){t&&!S?(q&&v(),S=!0):t||(T.top&&T.top.disconnect(),T.bottom&&T.bottom.disconnect(),T.stepTop&&T.stepTop.forEach(function(t){return t.disconnect()}),T.stepBottom&&T.stepBottom.forEach(function(t){return t.disconnect()}),T.stepProgress&&T.stepProgress.forEach(function(t){return t.disconnect()}),S=!1)}function y(){C.forEach(function(t,e){return t.setAttribute("data-scrollama-index",e)})}function E(){if(H){var t=document.createElement("div");t.setAttribute("id","scrollama__debug--offset-"+x),t.setAttribute("class","scrollama__debug--offset"),t.style.position="fixed",t.style.top="0",t.style.left="0",t.style.width="100%",t.style.height="1px",t.style.borderBottom="1px dashed red";var e=document.createElement("p"),n=C[0].getAttribute("class");e.innerText='".'+n+'" trigger: '+k,e.style.fontSize="12px",e.style.fontFamily="monospace",e.style.color="red",e.style.margin="0",e.style.padding="6px",t.appendChild(e),document.body.appendChild(t)}}function I(){if(N){F=[];for(var t=0;t<100;t++)F.push(.01*t)}}var x=Math.floor(1e5*Math.random()),R=1,w={},T={},O=null,M=null,C=null,k=0,L=0,A=0,B=null,P=null,F=0,q=!1,S=!1,H=!1,N=!1,V={};return V.setup=function(t){var o=t.container,r=t.graphic,i=t.step,s=t.offset;void 0===s&&(s=.5);var c=t.progress;void 0===c&&(c=!1);var u=t.debug;return void 0===u&&(u=!1),i?(C=n(i),O=o?e(o):null,M=r?e(r):null,k=s,H=u,N=c,q=!0,E(),y(),I(),b(),_(!0)):console.error("scrollama error: missing step element"),V},V.resize=function(){return b(),V},V.enable=function(){return _(!0),V},V.disable=function(){return _(!1),V},V.getOffset=function(){return k},V.onStepEnter=function(t){return w.stepEnter=t,V},V.onStepExit=function(t){return w.stepExit=t,V},V.onStepProgress=function(t){return w.stepProgress=t,V},V.onContainerEnter=function(t){return w.containerEnter=t,V},V.onContainerExit=function(t){return w.containerExit=t,V},V}});

dev/scrollama.js

@@ -760,3 +760,7 @@ (function (global, factory) {
 function scrollama() {
-  var ready = false;
+  var id = Math.floor(Math.random() * 100000);
+  var ZERO_MOE = 1; // zero with some rounding margin of error
+  var callback = {};
+  var io = {};
+
   var containerEl = null;
@@ -769,8 +773,8 @@ var graphicEl = null;
   var vh = 0;
-  var thresholdProgress = 0;
-
   var stepHeights = null;
-  var direction = null;
   var bboxGraphic = null;
 
+  var thresholdProgress = 0;
+
+  var isReady = false;
   var isEnabled = false;
@@ -780,7 +784,4 @@ var debugMode = false;
 
-  var callback = {};
-  var io = {};
-
   // NOTIFY CALLBACKS
-  function notifyStepEnter(element) {
+  function notifyStepEnter(element, direction) {
     var index = +element.getAttribute("data-scrollama-index");
@@ -792,3 +793,3 @@ var resp = { element: element, index: index, direction: direction };
 
-  function notifyStepExit(element) {
+  function notifyStepExit(element, direction) {
     var index = +element.getAttribute("data-scrollama-index");
@@ -807,3 +808,3 @@ var resp = { element: element, index: index, direction: direction };
 
-  function notifyContainerEnter() {
+  function notifyContainerEnter(direction) {
     var resp = { direction: direction };
@@ -817,3 +818,3 @@ if (
 
-  function notifyContainerExit() {
+  function notifyContainerExit(direction) {
     var resp = { direction: direction };
@@ -835,7 +836,6 @@ if (callback.containerExit && typeof callback.containerExit === "function")
       var bottomAdjusted = bottom - offsetMargin;
-
-      if (bottomAdjusted >= 0) {
-        direction = isIntersecting ? "down" : "up";
-        if (isIntersecting) { notifyStepEnter(target); }
-        else { notifyStepExit(target); }
+      if (bottomAdjusted >= -ZERO_MOE) {
+        var direction = isIntersecting ? "down" : "up";
+        if (isIntersecting) { notifyStepEnter(target, direction); }
+        else { notifyStepExit(target, direction); }
       }
@@ -853,9 +853,12 @@ });
       var bottomAdjusted = bottom - offsetMargin;
-
-      if (bottomAdjusted >= 0 && bottomAdjusted < height && isIntersecting) {
-        direction = "up";
-        notifyStepEnter(target);
-      } else if (bottomAdjusted <= 0 && !isIntersecting) {
-        direction = "down";
-        notifyStepExit(target);
+      if (
+        bottomAdjusted >= -ZERO_MOE &&
+        bottomAdjusted < height &&
+        isIntersecting
+      ) {
+        var direction = "up";
+        notifyStepEnter(target, direction);
+      } else if (bottomAdjusted <= ZERO_MOE && !isIntersecting) {
+        var direction$1 = "down";
+        notifyStepExit(target, direction$1);
       }
@@ -874,3 +877,3 @@ });
 
-      if (isIntersecting && bottomAdjusted >= 0) {
+      if (isIntersecting && bottomAdjusted >= -ZERO_MOE) {
         notifyStepProgress(target, +intersectionRatio.toFixed(3));
@@ -886,6 +889,6 @@ }
     var bottom = boundingClientRect.bottom;
-    if (bottom > 0) {
-      direction = isIntersecting ? "down" : "up";
-      if (isIntersecting) { notifyContainerEnter(); }
-      else { notifyContainerExit(); }
+    if (bottom > -ZERO_MOE) {
+      var direction = isIntersecting ? "down" : "up";
+      if (isIntersecting) { notifyContainerEnter(direction); }
+      else { notifyContainerExit(direction); }
     }
@@ -899,6 +902,6 @@ }
     var top = boundingClientRect.top;
-    if (top < 0) {
-      direction = isIntersecting ? "up" : "down";
-      if (isIntersecting) { notifyContainerEnter(); }
-      else { notifyContainerExit(); }
+    if (top < ZERO_MOE) {
+      var direction = isIntersecting ? "up" : "down";
+      if (isIntersecting) { notifyContainerEnter(direction); }
+      else { notifyContainerExit(direction); }
     }
@@ -1019,6 +1022,6 @@ }
 
-    if (isEnabled && ready) { updateIO(); }
+    if (isEnabled && isReady) { updateIO(); }
 
     if (debugMode) {
-      var debugEl = document.querySelector(".scrollama__offset");
+      var debugEl = document.querySelector(("#scrollama__debug--offset-" + id));
       debugEl.style.top = offsetMargin + "px";
@@ -1030,3 +1033,3 @@ }
     if (enable && !isEnabled) {
-      if (ready) { updateIO(); }
+      if (isReady) { updateIO(); }
       isEnabled = true;
@@ -1050,3 +1053,4 @@ } else if (!enable) {
       var el = document.createElement("div");
-      el.setAttribute("class", "scrollama__offset");
+      el.setAttribute("id", ("scrollama__debug--offset-" + id));
+      el.setAttribute("class", "scrollama__debug--offset");
       el.style.position = "fixed";
@@ -1057,5 +1061,6 @@ el.style.top = "0";
       el.style.height = "1px";
-      el.style.backgroundColor = "red";
+      el.style.borderBottom = "1px dashed red";
       var text = document.createElement("p");
-      text.innerText = "scrollama trigger: " + offsetVal;
+      var textClass = stepEl[0].getAttribute("class");
+      text.innerText = "\"." + textClass + "\" trigger: " + offsetVal;
       text.style.fontSize = "12px";
@@ -1099,3 +1104,3 @@ text.style.fontFamily = "monospace";
       progressMode = progress;
-      ready = true;
+      isReady = true;
 
@@ -1126,2 +1131,6 @@ addDebug();
 
+  S.getOffset = function () {
+    return offsetVal;
+  };
+
   S.onStepEnter = function (cb) {
@@ -1137,3 +1146,3 @@ callback.stepEnter = cb;
 
-  S.onProgress = function (cb) {
+  S.onStepProgress = function (cb) {
     callback.stepProgress = cb;
@@ -1140,0 +1149,0 @@ return S;

package.json

 {
   "name": "scrollama",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Lightweight scrollytelling library using IntersectionObserver",
@@ -5,0 +5,0 @@ "main": "build/scrollama.js",

README.md

 # scrollama.js
 
+<img src="https://russellgoldenberg.github.io/scrollama/alt.png" width="320" />
+
 Moderrn & lightweight JavaScript library for scrollytelling using [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) in favor of scroll events.
@@ -186,3 +188,3 @@
 * [Sticky Graphic](https://russellgoldenberg.github.io/scrollama/sticky-graphic) - basic implentation of sticky graphic
-* [Step Progress](https://russellgoldenberg.github.io/scrollama/basic) - incremental step progress callback
+* [Progress](https://russellgoldenberg.github.io/scrollama/progress) - incremental step progress callback
 
@@ -215,2 +217,2 @@ ### Tips
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src/init.js

 import { select, selectAll } from "./dom";
 
 function scrollama() {
-  let ready = false;
+  const id = Math.floor(Math.random() * 100000);
+  const ZERO_MOE = 1; // zero with some rounding margin of error
+  const margin = {};
+  const callback = {};
+  const io = {};
+
   let containerEl = null;
@@ -9,12 +14,11 @@ let graphicEl = null;
 
-  let currentStepIndex = -1;
   let offsetVal = 0;
   let offsetMargin = 0;
   let vh = 0;
-  let thresholdProgress = 0;
-
   let stepHeights = null;
-  let direction = null;
   let bboxGraphic = null;
 
+  let thresholdProgress = 0;
+
+  let isReady = false;
   let isEnabled = false;
@@ -24,8 +28,4 @@ let debugMode = false;
 
-  const margin = {};
-  const callback = {};
-  const io = {};
-
   // NOTIFY CALLBACKS
-  function notifyStepEnter(element) {
+  function notifyStepEnter(element, direction) {
     const index = +element.getAttribute("data-scrollama-index");
@@ -37,3 +37,3 @@ const resp = { element, index, direction };
 
-  function notifyStepExit(element) {
+  function notifyStepExit(element, direction) {
     const index = +element.getAttribute("data-scrollama-index");
@@ -52,3 +52,3 @@ const resp = { element, index, direction };
 
-  function notifyContainerEnter() {
+  function notifyContainerEnter(direction) {
     const resp = { direction };
@@ -62,3 +62,3 @@ if (
 
-  function notifyContainerExit() {
+  function notifyContainerExit(direction) {
     const resp = { direction };
@@ -83,7 +83,6 @@ if (callback.containerExit && typeof callback.containerExit === "function")
       const bottomAdjusted = bottom - offsetMargin;
-
-      if (bottomAdjusted >= 0) {
-        direction = isIntersecting ? "down" : "up";
-        if (isIntersecting) notifyStepEnter(target);
-        else notifyStepExit(target);
+      if (bottomAdjusted >= -ZERO_MOE) {
+        const direction = isIntersecting ? "down" : "up";
+        if (isIntersecting) notifyStepEnter(target, direction);
+        else notifyStepExit(target, direction);
       }
@@ -103,9 +102,12 @@ });
       const bottomAdjusted = bottom - offsetMargin;
-
-      if (bottomAdjusted >= 0 && bottomAdjusted < height && isIntersecting) {
-        direction = "up";
-        notifyStepEnter(target);
-      } else if (bottomAdjusted <= 0 && !isIntersecting) {
-        direction = "down";
-        notifyStepExit(target);
+      if (
+        bottomAdjusted >= -ZERO_MOE &&
+        bottomAdjusted < height &&
+        isIntersecting
+      ) {
+        const direction = "up";
+        notifyStepEnter(target, direction);
+      } else if (bottomAdjusted <= ZERO_MOE && !isIntersecting) {
+        const direction = "down";
+        notifyStepExit(target, direction);
       }
@@ -126,3 +128,3 @@ });
 
-      if (isIntersecting && bottomAdjusted >= 0) {
+      if (isIntersecting && bottomAdjusted >= -ZERO_MOE) {
         notifyStepProgress(target, +intersectionRatio.toFixed(3));
@@ -136,6 +138,6 @@ }
     const { top, bottom } = boundingClientRect;
-    if (bottom > 0) {
-      direction = isIntersecting ? "down" : "up";
-      if (isIntersecting) notifyContainerEnter();
-      else notifyContainerExit();
+    if (bottom > -ZERO_MOE) {
+      const direction = isIntersecting ? "down" : "up";
+      if (isIntersecting) notifyContainerEnter(direction);
+      else notifyContainerExit(direction);
     }
@@ -147,6 +149,6 @@ }
     const { top } = boundingClientRect;
-    if (top < 0) {
-      direction = isIntersecting ? "up" : "down";
-      if (isIntersecting) notifyContainerEnter();
-      else notifyContainerExit();
+    if (top < ZERO_MOE) {
+      const direction = isIntersecting ? "up" : "down";
+      if (isIntersecting) notifyContainerEnter(direction);
+      else notifyContainerExit(direction);
     }
@@ -267,6 +269,6 @@ }
 
-    if (isEnabled && ready) updateIO();
+    if (isEnabled && isReady) updateIO();
 
     if (debugMode) {
-      const debugEl = document.querySelector(".scrollama__offset");
+      const debugEl = document.querySelector(`#scrollama__debug--offset-${id}`);
       debugEl.style.top = `${offsetMargin}px`;
@@ -278,3 +280,3 @@ }
     if (enable && !isEnabled) {
-      if (ready) updateIO();
+      if (isReady) updateIO();
       isEnabled = true;
@@ -298,3 +300,4 @@ } else if (!enable) {
       const el = document.createElement("div");
-      el.setAttribute("class", "scrollama__offset");
+      el.setAttribute("id", `scrollama__debug--offset-${id}`);
+      el.setAttribute("class", "scrollama__debug--offset");
       el.style.position = "fixed";
@@ -305,5 +308,6 @@ el.style.top = "0";
       el.style.height = "1px";
-      el.style.backgroundColor = "red";
+      el.style.borderBottom = "1px dashed red";
       const text = document.createElement("p");
-      text.innerText = `scrollama trigger: ${offsetVal}`;
+      const textClass = stepEl[0].getAttribute("class");
+      text.innerText = `".${textClass}" trigger: ${offsetVal}`;
       text.style.fontSize = "12px";
@@ -347,3 +351,3 @@ text.style.fontFamily = "monospace";
       progressMode = progress;
-      ready = true;
+      isReady = true;
 
@@ -374,2 +378,6 @@ addDebug();
 
+  S.getOffset = () => {
+    return offsetVal;
+  };
+
   S.onStepEnter = cb => {
@@ -376,0 +384,0 @@ callback.stepEnter = cb;

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

620439

increased by2.46%

Number of package files

24

increased by9.09%

Lines of code

3558

increased by0.85%

Number of lines in readme file

217

increased by1.4%

No dependency changes