scrollama - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

build/scrollama.js

@@ -767,4 +767,4 @@ (function (global, factory) {
   var vh = 0;
-  // let threshold = [0];
 
+  var stepHeights = null;
   var direction = null;
@@ -775,3 +775,2 @@ var bboxGraphic = null;
 
-  var margin = {};
   var callback = {};
@@ -813,8 +812,6 @@ var io = {};
       var target = entry.target;
-      if (isIntersecting && boundingClientRect.bottom >= 0) {
-        direction = "down";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "up";
-        notifyStepExit(target);
+      if (boundingClientRect.bottom >= 0) {
+        direction = isIntersecting ? "down" : "up";
+        if (isIntersecting) { notifyStepEnter(target); }
+        else { notifyStepExit(target); }
       }
@@ -829,8 +826,6 @@ });
       var target = entry.target;
-      if (isIntersecting && boundingClientRect.top < 0) {
-        direction = "up";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "down";
-        notifyStepExit(target);
+      if (boundingClientRect.top < 0) {
+        direction = isIntersecting ? "up" : "down";
+        if (isIntersecting) { notifyStepEnter(target); }
+        else { notifyStepExit(target); }
       }
@@ -857,4 +852,4 @@ });
     var top = boundingClientRect.top;
-    direction = isIntersecting ? "up" : "down";
     if (top < 0) {
+      direction = isIntersecting ? "up" : "down";
       if (isIntersecting) { notifyEnter(); }
@@ -893,12 +888,18 @@ else { notifyExit(); }
   function updateStepTopIO() {
-    if (io.stepTop) { io.StepTop.disconnect(); }
+    if (io.stepTop) { io.stepTop.forEach(function (d) { return d.disconnect(); }); }
 
-    var options = {
-      root: null,
-      rootMargin: ((margin.top) + "px 0px " + (margin.bottom) + "px 0px"),
-      threshold: 0
-    };
+    io.stepTop = stepEl.map(function (el, i) {
+      var marginTop = stepHeights[i] - offsetMargin;
+      var marginBottom = -vh + offsetMargin;
 
-    io.StepTop = new IntersectionObserver(intersectStepTop, options);
-    stepEl.forEach(function (el) { return io.StepTop.observe(el); });
+      var options = {
+        root: null,
+        rootMargin: (marginTop + "px 0px " + marginBottom + "px 0px"),
+        threshold: 0
+      };
+
+      var obs = new IntersectionObserver(intersectStepTop, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -908,12 +909,15 @@
   function updateStepBottomIO() {
-    if (io.stepBottom) { io.StepBottom.disconnect(); }
+    if (io.stepBottom) { io.stepBottom.forEach(function (d) { return d.disconnect(); }); }
 
-    var options = {
-      root: null,
-      rootMargin: ("-" + offsetMargin + "px 0px " + offsetMargin + "px 0px"),
-      threshold: 0
-    };
+    io.stepBottom = stepEl.map(function (el, i) {
+      var options = {
+        root: null,
+        rootMargin: ("-" + offsetMargin + "px 0px " + offsetMargin + "px 0px"),
+        threshold: 0
+      };
 
-    io.StepBottom = new IntersectionObserver(intersectStepBottom, options);
-    stepEl.forEach(function (el) { return io.StepBottom.observe(el); });
+      var obs = new IntersectionObserver(intersectStepBottom, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -933,7 +937,6 @@
 
+    offsetMargin = offsetVal * vh;
+
     if (stepEl) {
-      var stepHeight = stepEl[0].getBoundingClientRect().height;
-      offsetMargin = offsetVal * vh;
-      margin.top = stepHeight - offsetMargin;
-      margin.bottom = -vh + offsetMargin;
+      stepHeights = stepEl.map(function (el) { return el.getBoundingClientRect().height; });
     }
@@ -940,0 +943,0 @@

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 h(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 a(t,e){for(var n=e;n;){if(n==t)return!0;n=l(n)}return!1}function l(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 p=[];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=h(i),c=this._rootContainsTarget(i),u=o.entry,a=t&&c&&this._computeTargetAndRootIntersection(i,e),l=o.entry=new n({time:r(),target:i,boundingClientRect:s,rootBounds:e,intersectionRect:a});u?t&&c?this._hasCrossedThreshold(u,l)&&this._queuedEntries.push(l):u&&u.isIntersecting&&this._queuedEntries.push(l):this._queuedEntries.push(l)},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=h(n),s=l(n),c=!1;!c;){var a=null,p=1==s.nodeType?t.getComputedStyle(s):{};if("none"==p.display)return;if(s==r.root||s==e?(c=!0,a=o):s!=e.body&&s!=e.documentElement&&"visible"!=p.overflow&&(a=h(s)),a&&!(i=u(a,i)))break;s=l(s)}return i}},o.prototype._getRootRect=function(){var t;if(this.root)t=h(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||a(e,this.root)},o.prototype._rootContainsTarget=function(t){return a(this.root||e,t)},o.prototype._registerInstance=function(){p.indexOf(this)<0&&p.push(this)},o.prototype._unregisterInstance=function(){var t=p.indexOf(this);-1!=t&&p.splice(t,1)},t.IntersectionObserver=o,t.IntersectionObserverEntry=n}}(window,document),function(){function t(t){var e=+t.getAttribute("data-scrollama-index"),n={direction:R,element:t,index:e};k.stepEnter&&"function"==typeof k.stepEnter&&k.stepEnter(n)}function o(t){var e=+t.getAttribute("data-scrollama-index"),n={direction:R,element:t,index:e};k.stepExit&&"function"==typeof k.stepExit&&k.stepExit(n)}function r(){var t={direction:R};k.enter&&"function"==typeof k.enter&&k.enter(t)}function i(){var t={direction:R};k.exit&&"function"==typeof k.exit&&k.exit(t)}function s(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target;n&&r.bottom>=0?(R="down",t(i)):n||(R="up",o(i))})}function c(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target;n&&r.top<0?(R="up",t(i)):n||(R="down",o(i))})}function u(t){var e=t[0],n=e.isIntersecting;e.boundingClientRect.bottom>0&&(R=n?"down":"up",n?r():i())}function h(t){var e=t[0],n=e.isIntersecting,o=e.boundingClientRect.top;R=n?"up":"down",o<0&&(n?r():i())}function a(){L.top&&L.top.unobserve(y);var t={root:null,rootMargin:w+"px 0px -"+w+"px 0px",threshold:0};L.top=new IntersectionObserver(u,t),L.top.observe(y)}function l(){L.bottom&&L.bottom.unobserve(y);var t={root:null,rootMargin:"-"+T.height+"px 0px "+T.height+"px 0px",threshold:0};L.bottom=new IntersectionObserver(h,t),L.bottom.observe(y)}function p(){L.stepTop&&L.StepTop.disconnect();var t={root:null,rootMargin:M.top+"px 0px "+M.bottom+"px 0px",threshold:0};L.StepTop=new IntersectionObserver(s,t),I.forEach(function(t){return L.StepTop.observe(t)})}function f(){L.stepBottom&&L.StepBottom.disconnect();var t={root:null,rootMargin:"-"+x+"px 0px "+x+"px 0px",threshold:0};L.StepBottom=new IntersectionObserver(c,t),I.forEach(function(t){return L.StepBottom.observe(t)})}function d(){a(),l(),p(),f()}function g(){if(w=window.innerHeight,T=_?_.getBoundingClientRect():null,I){var t=I[0].getBoundingClientRect().height;x=E*w,M.top=t-x,M.bottom=-w+x}O&&d(),C&&(document.querySelector(".scrollama__offset").style.top=x+"px")}function m(t){t&&!O?(d(),O=!0):t||(Object.keys(observer).map(function(t){return observer[t].disconnect()}),O=!1)}function v(){I.forEach(function(t,e){return t.setAttribute("data-scrollama-index",e)})}function b(){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: "+E,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)}var y=null,_=null,I=null,E=0,x=0,w=0,R=null,T=null,O=!1,C=!1,M={},k={},L={},S={};return S.setup=function(t){var o=t.container,r=t.graphic,i=t.step,s=t.offset;void 0===s&&(s=.5);var c=t.debug;return void 0===c&&(c=!1),o&&r&&i?(y=e(o),_=e(r),I=n(i),E=s,(C=c)&&b(),v(),g(),m(!0)):console.log("improper scrollama setup config"),S},S.resize=function(){return g(),S},S.enable=function(){return m(!0),S},S.disable=function(){return m(!1),S},S.onStepEnter=function(t){return k.stepEnter=t,S},S.onStepExit=function(t){return k.stepExit=t,S},S.onIncrement=function(t){return k.increment=t,S},S.onContainerEnter=function(t){return k.enter=t,S},S.onContainerExit=function(t){return k.exit=t,S},S}});
+!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 h(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 a(t,e){for(var n=e;n;){if(n==t)return!0;n=l(n)}return!1}function l(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 p=[];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=h(i),c=this._rootContainsTarget(i),u=o.entry,a=t&&c&&this._computeTargetAndRootIntersection(i,e),l=o.entry=new n({time:r(),target:i,boundingClientRect:s,rootBounds:e,intersectionRect:a});u?t&&c?this._hasCrossedThreshold(u,l)&&this._queuedEntries.push(l):u&&u.isIntersecting&&this._queuedEntries.push(l):this._queuedEntries.push(l)},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=h(n),s=l(n),c=!1;!c;){var a=null,p=1==s.nodeType?t.getComputedStyle(s):{};if("none"==p.display)return;if(s==r.root||s==e?(c=!0,a=o):s!=e.body&&s!=e.documentElement&&"visible"!=p.overflow&&(a=h(s)),a&&!(i=u(a,i)))break;s=l(s)}return i}},o.prototype._getRootRect=function(){var t;if(this.root)t=h(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||a(e,this.root)},o.prototype._rootContainsTarget=function(t){return a(this.root||e,t)},o.prototype._registerInstance=function(){p.indexOf(this)<0&&p.push(this)},o.prototype._unregisterInstance=function(){var t=p.indexOf(this);-1!=t&&p.splice(t,1)},t.IntersectionObserver=o,t.IntersectionObserverEntry=n}}(window,document),function(){function t(t){var e=+t.getAttribute("data-scrollama-index"),n={direction:T,element:t,index:e};k.stepEnter&&"function"==typeof k.stepEnter&&k.stepEnter(n)}function o(t){var e=+t.getAttribute("data-scrollama-index"),n={direction:T,element:t,index:e};k.stepExit&&"function"==typeof k.stepExit&&k.stepExit(n)}function r(){var t={direction:T};k.enter&&"function"==typeof k.enter&&k.enter(t)}function i(){var t={direction:T};k.exit&&"function"==typeof k.exit&&k.exit(t)}function s(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target;r.bottom>=0&&(T=n?"down":"up",n?t(i):o(i))})}function c(e){e.forEach(function(e){var n=e.isIntersecting,r=e.boundingClientRect,i=e.target;r.top<0&&(T=n?"up":"down",n?t(i):o(i))})}function u(t){var e=t[0],n=e.isIntersecting;e.boundingClientRect.bottom>0&&(T=n?"down":"up",n?r():i())}function h(t){var e=t[0],n=e.isIntersecting;e.boundingClientRect.top<0&&(T=n?"up":"down",n?r():i())}function a(){L.top&&L.top.unobserve(y);var t={root:null,rootMargin:w+"px 0px -"+w+"px 0px",threshold:0};L.top=new IntersectionObserver(u,t),L.top.observe(y)}function l(){L.bottom&&L.bottom.unobserve(y);var t={root:null,rootMargin:"-"+O.height+"px 0px "+O.height+"px 0px",threshold:0};L.bottom=new IntersectionObserver(h,t),L.bottom.observe(y)}function p(){L.stepTop&&L.stepTop.forEach(function(t){return t.disconnect()}),L.stepTop=I.map(function(t,e){var n={root:null,rootMargin:R[e]-x+"px 0px "+(-w+x)+"px 0px",threshold:0},o=new IntersectionObserver(s,n);return o.observe(t),o})}function f(){L.stepBottom&&L.stepBottom.forEach(function(t){return t.disconnect()}),L.stepBottom=I.map(function(t,e){var n={root:null,rootMargin:"-"+x+"px 0px "+x+"px 0px",threshold:0},o=new IntersectionObserver(c,n);return o.observe(t),o})}function d(){a(),l(),p(),f()}function g(){w=window.innerHeight,O=_?_.getBoundingClientRect():null,x=E*w,I&&(R=I.map(function(t){return t.getBoundingClientRect().height})),C&&d(),M&&(document.querySelector(".scrollama__offset").style.top=x+"px")}function m(t){t&&!C?(d(),C=!0):t||(Object.keys(observer).map(function(t){return observer[t].disconnect()}),C=!1)}function v(){I.forEach(function(t,e){return t.setAttribute("data-scrollama-index",e)})}function b(){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: "+E,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)}var y=null,_=null,I=null,E=0,x=0,w=0,R=null,T=null,O=null,C=!1,M=!1,k={},L={},A={};return A.setup=function(t){var o=t.container,r=t.graphic,i=t.step,s=t.offset;void 0===s&&(s=.5);var c=t.debug;return void 0===c&&(c=!1),o&&r&&i?(y=e(o),_=e(r),I=n(i),E=s,(M=c)&&b(),v(),g(),m(!0)):console.log("improper scrollama setup config"),A},A.resize=function(){return g(),A},A.enable=function(){return m(!0),A},A.disable=function(){return m(!1),A},A.onStepEnter=function(t){return k.stepEnter=t,A},A.onStepExit=function(t){return k.stepExit=t,A},A.onIncrement=function(t){return k.increment=t,A},A.onContainerEnter=function(t){return k.enter=t,A},A.onContainerExit=function(t){return k.exit=t,A},A}});

dev/scrollama.js

@@ -767,4 +767,4 @@ (function (global, factory) {
   var vh = 0;
-  // let threshold = [0];
 
+  var stepHeights = null;
   var direction = null;
@@ -775,3 +775,2 @@ var bboxGraphic = null;
 
-  var margin = {};
   var callback = {};
@@ -813,8 +812,6 @@ var io = {};
       var target = entry.target;
-      if (isIntersecting && boundingClientRect.bottom >= 0) {
-        direction = "down";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "up";
-        notifyStepExit(target);
+      if (boundingClientRect.bottom >= 0) {
+        direction = isIntersecting ? "down" : "up";
+        if (isIntersecting) { notifyStepEnter(target); }
+        else { notifyStepExit(target); }
       }
@@ -829,8 +826,6 @@ });
       var target = entry.target;
-      if (isIntersecting && boundingClientRect.top < 0) {
-        direction = "up";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "down";
-        notifyStepExit(target);
+      if (boundingClientRect.top < 0) {
+        direction = isIntersecting ? "up" : "down";
+        if (isIntersecting) { notifyStepEnter(target); }
+        else { notifyStepExit(target); }
       }
@@ -857,4 +852,4 @@ });
     var top = boundingClientRect.top;
-    direction = isIntersecting ? "up" : "down";
     if (top < 0) {
+      direction = isIntersecting ? "up" : "down";
       if (isIntersecting) { notifyEnter(); }
@@ -893,12 +888,18 @@ else { notifyExit(); }
   function updateStepTopIO() {
-    if (io.stepTop) { io.StepTop.disconnect(); }
+    if (io.stepTop) { io.stepTop.forEach(function (d) { return d.disconnect(); }); }
 
-    var options = {
-      root: null,
-      rootMargin: ((margin.top) + "px 0px " + (margin.bottom) + "px 0px"),
-      threshold: 0
-    };
+    io.stepTop = stepEl.map(function (el, i) {
+      var marginTop = stepHeights[i] - offsetMargin;
+      var marginBottom = -vh + offsetMargin;
 
-    io.StepTop = new IntersectionObserver(intersectStepTop, options);
-    stepEl.forEach(function (el) { return io.StepTop.observe(el); });
+      var options = {
+        root: null,
+        rootMargin: (marginTop + "px 0px " + marginBottom + "px 0px"),
+        threshold: 0
+      };
+
+      var obs = new IntersectionObserver(intersectStepTop, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -908,12 +909,15 @@
   function updateStepBottomIO() {
-    if (io.stepBottom) { io.StepBottom.disconnect(); }
+    if (io.stepBottom) { io.stepBottom.forEach(function (d) { return d.disconnect(); }); }
 
-    var options = {
-      root: null,
-      rootMargin: ("-" + offsetMargin + "px 0px " + offsetMargin + "px 0px"),
-      threshold: 0
-    };
+    io.stepBottom = stepEl.map(function (el, i) {
+      var options = {
+        root: null,
+        rootMargin: ("-" + offsetMargin + "px 0px " + offsetMargin + "px 0px"),
+        threshold: 0
+      };
 
-    io.StepBottom = new IntersectionObserver(intersectStepBottom, options);
-    stepEl.forEach(function (el) { return io.StepBottom.observe(el); });
+      var obs = new IntersectionObserver(intersectStepBottom, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -933,7 +937,6 @@
 
+    offsetMargin = offsetVal * vh;
+
     if (stepEl) {
-      var stepHeight = stepEl[0].getBoundingClientRect().height;
-      offsetMargin = offsetVal * vh;
-      margin.top = stepHeight - offsetMargin;
-      margin.bottom = -vh + offsetMargin;
+      stepHeights = stepEl.map(function (el) { return el.getBoundingClientRect().height; });
     }
@@ -940,0 +943,0 @@

docs/scrollama.js

@@ -767,4 +767,4 @@ (function (global, factory) {
   var vh = 0;
-  // let threshold = [0];
 
+  var stepHeights = null;
   var direction = null;
@@ -775,3 +775,2 @@ var bboxGraphic = null;
 
-  var margin = {};
   var callback = {};
@@ -813,8 +812,6 @@ var io = {};
       var target = entry.target;
-      if (isIntersecting && boundingClientRect.bottom >= 0) {
-        direction = "down";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "up";
-        notifyStepExit(target);
+      if (boundingClientRect.bottom >= 0) {
+        direction = isIntersecting ? "down" : "up";
+        if (isIntersecting) { notifyStepEnter(target); }
+        else { notifyStepExit(target); }
       }
@@ -829,8 +826,6 @@ });
       var target = entry.target;
-      if (isIntersecting && boundingClientRect.top < 0) {
-        direction = "up";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "down";
-        notifyStepExit(target);
+      if (boundingClientRect.top < 0) {
+        direction = isIntersecting ? "up" : "down";
+        if (isIntersecting) { notifyStepEnter(target); }
+        else { notifyStepExit(target); }
       }
@@ -857,4 +852,4 @@ });
     var top = boundingClientRect.top;
-    direction = isIntersecting ? "up" : "down";
     if (top < 0) {
+      direction = isIntersecting ? "up" : "down";
       if (isIntersecting) { notifyEnter(); }
@@ -893,12 +888,18 @@ else { notifyExit(); }
   function updateStepTopIO() {
-    if (io.stepTop) { io.StepTop.disconnect(); }
+    if (io.stepTop) { io.stepTop.forEach(function (d) { return d.disconnect(); }); }
 
-    var options = {
-      root: null,
-      rootMargin: ((margin.top) + "px 0px " + (margin.bottom) + "px 0px"),
-      threshold: 0
-    };
+    io.stepTop = stepEl.map(function (el, i) {
+      var marginTop = stepHeights[i] - offsetMargin;
+      var marginBottom = -vh + offsetMargin;
 
-    io.StepTop = new IntersectionObserver(intersectStepTop, options);
-    stepEl.forEach(function (el) { return io.StepTop.observe(el); });
+      var options = {
+        root: null,
+        rootMargin: (marginTop + "px 0px " + marginBottom + "px 0px"),
+        threshold: 0
+      };
+
+      var obs = new IntersectionObserver(intersectStepTop, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -908,12 +909,15 @@
   function updateStepBottomIO() {
-    if (io.stepBottom) { io.StepBottom.disconnect(); }
+    if (io.stepBottom) { io.stepBottom.forEach(function (d) { return d.disconnect(); }); }
 
-    var options = {
-      root: null,
-      rootMargin: ("-" + offsetMargin + "px 0px " + offsetMargin + "px 0px"),
-      threshold: 0
-    };
+    io.stepBottom = stepEl.map(function (el, i) {
+      var options = {
+        root: null,
+        rootMargin: ("-" + offsetMargin + "px 0px " + offsetMargin + "px 0px"),
+        threshold: 0
+      };
 
-    io.StepBottom = new IntersectionObserver(intersectStepBottom, options);
-    stepEl.forEach(function (el) { return io.StepBottom.observe(el); });
+      var obs = new IntersectionObserver(intersectStepBottom, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -933,7 +937,6 @@
 
+    offsetMargin = offsetVal * vh;
+
     if (stepEl) {
-      var stepHeight = stepEl[0].getBoundingClientRect().height;
-      offsetMargin = offsetVal * vh;
-      margin.top = stepHeight - offsetMargin;
-      margin.bottom = -vh + offsetMargin;
+      stepHeights = stepEl.map(function (el) { return el.getBoundingClientRect().height; });
     }
@@ -940,0 +943,0 @@

package.json

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

README.md

@@ -28,4 +28,4 @@ # scrollama.js
 ```js
-const scrollama = require('scrollama'); // Node classic
-import scrollama from 'scrollama' // ES6
+import scrollama from 'scrollama' // ES6 or...
+const scrollama = require('scrollama');
 ```
@@ -137,3 +137,3 @@
 
-* `Step` elements should be set to the same height
+...
 
@@ -140,0 +140,0 @@ ### Examples

src/init.js

@@ -12,4 +12,4 @@ import { select, selectAll } from "./dom";
   let vh = 0;
-  // let threshold = [0];
 
+  let stepHeights = null;
   let direction = null;
@@ -64,8 +64,6 @@ let bboxGraphic = null;
       } = entry;
-      if (isIntersecting && boundingClientRect.bottom >= 0) {
-        direction = "down";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "up";
-        notifyStepExit(target);
+      if (boundingClientRect.bottom >= 0) {
+        direction = isIntersecting ? "down" : "up";
+        if (isIntersecting) notifyStepEnter(target);
+        else notifyStepExit(target);
       }
@@ -83,8 +81,6 @@ });
       } = entry;
-      if (isIntersecting && boundingClientRect.top < 0) {
-        direction = "up";
-        notifyStepEnter(target);
-      } else if (!isIntersecting) {
-        direction = "down";
-        notifyStepExit(target);
+      if (boundingClientRect.top < 0) {
+        direction = isIntersecting ? "up" : "down";
+        if (isIntersecting) notifyStepEnter(target);
+        else notifyStepExit(target);
       }
@@ -107,4 +103,4 @@ });
     const { top } = boundingClientRect;
-    direction = isIntersecting ? "up" : "down";
     if (top < 0) {
+      direction = isIntersecting ? "up" : "down";
       if (isIntersecting) notifyEnter();
@@ -143,12 +139,18 @@ else notifyExit();
   function updateStepTopIO() {
-    if (io.stepTop) io.StepTop.disconnect();
+    if (io.stepTop) io.stepTop.forEach(d => d.disconnect());
 
-    const options = {
-      root: null,
-      rootMargin: `${margin.top}px 0px ${margin.bottom}px 0px`,
-      threshold: 0
-    };
+    io.stepTop = stepEl.map((el, i) => {
+      const marginTop = stepHeights[i] - offsetMargin;
+      const marginBottom = -vh + offsetMargin;
 
-    io.StepTop = new IntersectionObserver(intersectStepTop, options);
-    stepEl.forEach(el => io.StepTop.observe(el));
+      const options = {
+        root: null,
+        rootMargin: `${marginTop}px 0px ${marginBottom}px 0px`,
+        threshold: 0
+      };
+
+      const obs = new IntersectionObserver(intersectStepTop, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -158,12 +160,15 @@
   function updateStepBottomIO() {
-    if (io.stepBottom) io.StepBottom.disconnect();
+    if (io.stepBottom) io.stepBottom.forEach(d => d.disconnect());
 
-    const options = {
-      root: null,
-      rootMargin: `-${offsetMargin}px 0px ${offsetMargin}px 0px`,
-      threshold: 0
-    };
+    io.stepBottom = stepEl.map((el, i) => {
+      const options = {
+        root: null,
+        rootMargin: `-${offsetMargin}px 0px ${offsetMargin}px 0px`,
+        threshold: 0
+      };
 
-    io.StepBottom = new IntersectionObserver(intersectStepBottom, options);
-    stepEl.forEach(el => io.StepBottom.observe(el));
+      const obs = new IntersectionObserver(intersectStepBottom, options);
+      obs.observe(el);
+      return obs;
+    });
   }
@@ -183,7 +188,6 @@
 
+    offsetMargin = offsetVal * vh;
+
     if (stepEl) {
-      const stepHeight = stepEl[0].getBoundingClientRect().height;
-      offsetMargin = offsetVal * vh;
-      margin.top = stepHeight - offsetMargin;
-      margin.bottom = -vh + offsetMargin;
+      stepHeights = stepEl.map(el => el.getBoundingClientRect().height);
     }
@@ -190,0 +194,0 @@

No alert changes

Improved metrics

Total package byte prevSize

579092

increased by0.32%

Number of package files

20

increased by5.26%

Lines of code

3247

increased by0.15%

No dependency changes