scrollama - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

build/scrollama.js

@@ -54,40 +54,3 @@ (function (global, factory) {
 // SETUP
-function setupStep(ref) {
-  var id = ref.id;
-  var i = ref.i;
 
-  var idVal = getStepId({ id: id, i: i });
-
-  var elA = document.createElement('div');
-  elA.setAttribute('id', (idVal + "_above"));
-  elA.setAttribute('class', 'scrollama__debug-step');
-  elA.style.position = 'fixed';
-  elA.style.left = '0';
-  elA.style.width = '100%';
-  // elA.style.backgroundColor = 'green';
-  elA.style.backgroundImage =
-    'repeating-linear-gradient(45deg, green 0, green 2px, white 0, white 40px)';
-  elA.style.border = '2px solid green';
-  elA.style.opacity = '0.33';
-  elA.style.zIndex = '9999';
-  elA.style.display = 'none';
-
-  document.body.appendChild(elA);
-
-  var elB = document.createElement('div');
-  elB.setAttribute('id', (idVal + "_below"));
-  elB.setAttribute('class', 'scrollama__debug-step');
-  elB.style.position = 'fixed';
-  elB.style.left = '0';
-  elB.style.width = '100%';
-  // elB.style.backgroundColor = 'orange';
-  elB.style.backgroundImage =
-    'repeating-linear-gradient(135deg, orange 0, orange 2px, white 0, white 40px)';
-  elB.style.border = '2px solid orange';
-  elB.style.opacity = '0.33';
-  elB.style.zIndex = '9999';
-  elB.style.display = 'none';
-  document.body.appendChild(elB);
-}
-
 function setupOffset(ref) {
@@ -126,3 +89,2 @@ var id = ref.id;
   var stepClass = stepEl[0].getAttribute('class');
-  stepEl.forEach(function (s, i) { return setupStep({ id: id, i: i }); });
   setupOffset({ id: id, offsetVal: offsetVal, stepClass: stepClass });
@@ -142,18 +104,2 @@ }
 
-function updateStep(ref) {
-  var id = ref.id;
-  var h = ref.h;
-  var i = ref.i;
-  var offsetMargin = ref.offsetMargin;
-
-  var idVal = getStepId({ id: id, i: i });
-  var elA = document.querySelector(("#" + idVal + "_above"));
-  elA.style.height = h + "px";
-  elA.style.top = (offsetMargin - h) + "px";
-
-  var elB = document.querySelector(("#" + idVal + "_below"));
-  elB.style.height = h + "px";
-  elB.style.top = offsetMargin + "px";
-}
-
 function update(ref) {
@@ -165,3 +111,2 @@ var id = ref.id;
 
-  stepOffsetHeight.forEach(function (h, i) { return updateStep({ id: id, h: h, i: i, offsetMargin: offsetMargin }); });
   updateOffset({ id: id, offsetMargin: offsetMargin });
@@ -336,3 +281,3 @@ }
 
-  function notifyStepEnter(element, check) {
+  function notifyStepEnter(element, direction, check) {
     if ( check === void 0 ) check = true;
@@ -369,3 +314,3 @@
 
-  function notifyStepExit(element) {
+  function notifyStepExit(element, direction) {
     var index = getIndex(element);
@@ -372,0 +317,0 @@ var resp = { element: element, index: index, direction: direction };

build/scrollama.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){for(var t=e.length,n=[],o=0;o<t;o+=1)n.push(e[o]);return n}function t(e){return e instanceof Element?e:"string"==typeof e?document.querySelector(e):null}function n(e){return"scrollama__debug-step--"+e.id+"-"+e.i}function o(e){return"scrollama__debug-offset--"+e.id}function r(e){var t=e.id,r=e.offsetVal,i=e.stepEl,s=i[0].getAttribute("class");i.forEach(function(e,o){return function(e){var t=n({id:e.id,i:e.i}),o=document.createElement("div");o.setAttribute("id",t+"_above"),o.setAttribute("class","scrollama__debug-step"),o.style.position="fixed",o.style.left="0",o.style.width="100%",o.style.backgroundImage="repeating-linear-gradient(45deg, green 0, green 2px, white 0, white 40px)",o.style.border="2px solid green",o.style.opacity="0.33",o.style.zIndex="9999",o.style.display="none",document.body.appendChild(o);var r=document.createElement("div");r.setAttribute("id",t+"_below"),r.setAttribute("class","scrollama__debug-step"),r.style.position="fixed",r.style.left="0",r.style.width="100%",r.style.backgroundImage="repeating-linear-gradient(135deg, orange 0, orange 2px, white 0, white 40px)",r.style.border="2px solid orange",r.style.opacity="0.33",r.style.zIndex="9999",r.style.display="none",document.body.appendChild(r)}({id:t,i:o})}),function(e){var t=e.id,n=e.offsetVal,r=e.stepClass,i=document.createElement("div");i.setAttribute("id",o({id:t})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+r+'" trigger: '+n,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t,offsetVal:r,stepClass:s})}function i(e){var t=e.id,r=e.stepOffsetHeight,i=e.offsetMargin;e.offsetVal;r.forEach(function(e,o){return function(e){var t=e.id,o=e.h,r=e.i,i=e.offsetMargin,s=n({id:t,i:r}),c=document.querySelector("#"+s+"_above");c.style.height=o+"px",c.style.top=i-o+"px";var a=document.querySelector("#"+s+"_below");a.style.height=o+"px",a.style.top=i+"px"}({id:t,h:e,i:o,offsetMargin:i})}),function(e){var t=e.id,n=e.offsetMargin,r=(e.offsetVal,o({id:t}));document.querySelector("#"+r).style.top=n+"px"}({id:t,offsetMargin:i})}function s(e){var t=e.id,o=e.index,r=e.state,i=n({id:t,i:o}),s=document.querySelector("#"+i+"_above"),c=document.querySelector("#"+i+"_below"),a="enter"===r?"block":"none";s&&(s.style.display=a),c&&(c.style.display=a)}return function(){var n=1,o={},c={},a=null,u=null,l=null,f=null,d=0,p=0,g=0,v=0,h=null,b=null,x=null,m=!1,y=!1,w=!1,E=!1,A=0,M=!1,I=!1,_=null,C=null,O=-1,P=null,B=[];function S(e){var t=0;if(e.offsetParent)do{t+=e.offsetTop,e=e.offsetParent}while(e);return t<0?0:t}function H(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>O?P="down":window.pageYOffset<O&&(P="up"),O=window.pageYOffset}function q(){var e,t;g=window.innerHeight,e=document.body,t=document.documentElement,v=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),x=u?u.getBoundingClientRect():null,p=d*g,h=l?l.map(function(e){return e.offsetHeight}):[],b=l?l.map(S):[],y&&m&&W(),w&&i({id:f,stepOffsetHeight:h,offsetMargin:p,offsetVal:d})}function R(e){e&&!y?(m&&W(),y=!0):e||(c.top&&c.top.disconnect(),c.bottom&&c.bottom.disconnect(),c.stepAbove&&c.stepAbove.forEach(function(e){return e.disconnect()}),c.stepBelow&&c.stepBelow.forEach(function(e){return e.disconnect()}),c.stepProgress&&c.stepProgress.forEach(function(e){return e.disconnect()}),c.viewportAbove&&c.viewportAbove.forEach(function(e){return e.disconnect()}),c.viewportBelow&&c.viewportBelow.forEach(function(e){return e.disconnect()}),y=!1)}function V(e,t){if("above"===t)for(var n=0;n<e;n++){var o=_[n];"enter"===o.state&&j(l[n]),"up"===o.direction&&(T(l[n],"down"),j(l[n]))}else if("below"===t)for(var r=_.length-1;r>e;r--){var i=_[r];"enter"===i.state&&j(l[r]),"down"===i.direction&&(T(l[r],"up"),j(l[r]))}}function T(e,t){void 0===t&&(t=!0);var n=H(e),r={element:e,index:n,direction:P};_[n].direction=P,_[n].state="enter",M&&t&&"down"===P&&V(n,"above"),M&&t&&"up"===P&&V(n,"below"),o.stepEnter&&"function"==typeof o.stepEnter&&!B[n]&&(o.stepEnter(r,_),w&&s({id:f,index:n,state:"enter"}),I&&(B[n]=!0)),E&&z(e,"down"===P?0:1)}function j(e){var t=H(e),n={element:e,index:t,direction:P};_[t].direction=P,_[t].state="exit",E&&z(e,"down"===P?1:0),o.stepExit&&"function"==typeof o.stepExit&&(o.stepExit(n,_),w&&s({id:f,index:t,state:"exit"}))}function z(e,t){var n={element:e,index:H(e),progress:t};o.stepProgress&&"function"==typeof o.stepProgress&&o.stepProgress(n)}function N(){var e={direction:P};C.direction=P,C.state="enter",o.containerEnter&&"function"==typeof o.containerEnter&&o.containerEnter(e)}function Y(){var e={direction:P};C.direction=P,C.state="exit",o.containerExit&&"function"==typeof o.containerExit&&o.containerExit(e)}function F(e){k(),e.forEach(function(e){var t=e.isIntersecting,o=e.boundingClientRect,r=e.target,i=o.bottom,s=o.height,c=i-p,a=H(r),u=_[a];c>=-n&&(t&&"down"===P&&"enter"!==u.state?T(r,P):t||"up"!==P||"enter"!==u.state?!t&&c>=s&&"down"===P&&"enter"===u.state&&j(r):j(r))})}function D(e){k(),e.forEach(function(e){var t=e.isIntersecting,o=e.boundingClientRect,r=e.target,i=o.bottom,s=o.height,c=i-p,a=H(r),u=_[a];c>=-n&&c<s&&t&&"up"===P&&"enter"!==u.state?T(r,P):c<=n&&!t&&"down"===P&&"enter"===u.state&&j(r)})}function L(e){k(),e.forEach(function(e){var t=e.isIntersecting,n=e.target,o=H(n),r=_[o];t&&"down"===P&&"enter"!==r.state&&"down"!==r.direction&&(T(n,"down"),j(n))})}function G(e){k(),e.forEach(function(e){var t=e.isIntersecting,n=e.target,o=H(n),r=_[o];t&&"up"===P&&"enter"!==r.state&&"up"!==r.direction&&(T(n,"up"),j(n))})}function J(e){k(),e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,r=e.boundingClientRect,i=e.target,s=r.bottom;t&&s-p>=-n&&z(i,+o.toFixed(3))})}function K(e){k();var t=e[0],o=t.isIntersecting,r=t.boundingClientRect;r.top,r.bottom>-n&&(o?N():"enter"===C.state&&Y())}function Q(e){k();var t=e[0],o=t.isIntersecting;t.boundingClientRect.top<n&&(o?N():"enter"===C.state&&Y())}function U(){c.stepProgress&&c.stepProgress.forEach(function(e){return e.disconnect()}),c.stepProgress=l.map(function(e,t){var n=h[t]-p+"px 0px "+(-g+p)+"px 0px",o=function(e){for(var t=Math.ceil(e/A),n=[],o=1/t,r=0;r<t;r++)n.push(r*o);return n}(h[t]),r=new IntersectionObserver(J,{root:null,rootMargin:n,threshold:o});return r.observe(e),r})}function W(){c.viewportAbove&&c.viewportAbove.forEach(function(e){return e.disconnect()}),c.viewportAbove=l.map(function(e,t){var n=b[t],o=-(g-p+h[t]),r=new IntersectionObserver(L,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(e),r}),c.viewportBelow&&c.viewportBelow.forEach(function(e){return e.disconnect()}),c.viewportBelow=l.map(function(e,t){var n=-(p+h[t]),o=v-b[t]-h[t]-p,r=new IntersectionObserver(G,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(e),r}),c.stepAbove&&c.stepAbove.forEach(function(e){return e.disconnect()}),c.stepAbove=l.map(function(e,t){var n=h[t],o=new IntersectionObserver(F,{root:null,rootMargin:n+"px 0px "+(-g+p)+"px 0px",threshold:0});return o.observe(e),o}),c.stepBelow&&c.stepBelow.forEach(function(e){return e.disconnect()}),c.stepBelow=l.map(function(e,t){var n=-p,o=v-g+h[t]+p,r=new IntersectionObserver(D,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(e),r}),E&&U(),a&&u&&(function(){c.top&&c.top.unobserve(a);var e={root:null,rootMargin:g+"px 0px -"+g+"px 0px",threshold:0};c.top=new IntersectionObserver(K,e),c.top.observe(a)}(),function(){c.bottom&&c.bottom.unobserve(a);var e={root:null,rootMargin:"-"+x.height+"px 0px "+x.height+"px 0px",threshold:0};c.bottom=new IntersectionObserver(Q,e),c.bottom.observe(a)}())}var X={};return X.setup=function(n){var o=n.container,i=n.graphic,s=n.step,c=n.offset;void 0===c&&(c=.5);var p=n.progress;void 0===p&&(p=!1);var g=n.threshold;void 0===g&&(g=4);var v=n.debug;void 0===v&&(v=!1);var h=n.order;void 0===h&&(h=!0);var b,x,y,O,P,B=n.once;return void 0===B&&(B=!1),x=(b="abcdefghijklmnopqrstuv").length,y=(new Date).getTime(),f=""+[0,0,0].map(function(e){return b[Math.floor(Math.random()*x)]}).join("")+y,O=s,void 0===P&&(P=document),l="string"==typeof O?e(P.querySelectorAll(O)):O instanceof NodeList?e(O):O instanceof Array?O:[],a=o?t(o):null,u=i?t(i):null,l.length?(w=v,E=p,M=h,I=B,X.offsetTrigger(c),A=Math.max(1,+g),m=!0,w&&r({id:f,stepEl:l,offsetVal:d}),l.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),_=l.map(function(){return{direction:null,state:null}}),C={direction:null,state:null},q(),R(!0),X):(console.error("scrollama error: no step elements"),X)},X.resize=function(){return q(),X},X.enable=function(){return R(!0),X},X.disable=function(){return R(!1),X},X.destroy=function(){R(!1),Object.keys(o).forEach(function(e){return o[e]=null}),Object.keys(c).forEach(function(e){return c[e]=null})},X.offsetTrigger=function(e){return e&&(isNaN(e),1)?(d=Math.min(Math.max(0,e),1),X):d},X.onStepEnter=function(e){return o.stepEnter=e,X},X.onStepExit=function(e){return o.stepExit=e,X},X.onStepProgress=function(e){return o.stepProgress=e,X},X.onContainerEnter=function(e){return o.containerEnter=e,X},X.onContainerExit=function(e){return o.containerExit=e,X},X}});
+!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 t instanceof Element?t:"string"==typeof t?document.querySelector(t):null}function n(t){return"scrollama__debug-offset--"+t.id}function o(t){!function(t){var e=t.id,o=t.offsetVal,r=t.stepClass,i=document.createElement("div");i.setAttribute("id",n({id:e})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+r+'" trigger: '+o,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].getAttribute("class")})}function r(t){var e=t.id,o=(t.stepOffsetHeight,t.offsetMargin);t.offsetVal;!function(t){var e=t.id,o=t.offsetMargin,r=(t.offsetVal,n({id:e}));document.querySelector("#"+r).style.top=o+"px"}({id:e,offsetMargin:o})}function i(t){var e=t.id,n=t.index,o=t.state,r=function(t){return"scrollama__debug-step--"+t.id+"-"+t.i}({id:e,i:n}),i=document.querySelector("#"+r+"_above"),s=document.querySelector("#"+r+"_below"),c="enter"===o?"block":"none";i&&(i.style.display=c),s&&(s.style.display=c)}return function(){var n=1,s={},c={},u=null,a=null,f=null,l=null,p=0,d=0,v=0,g=0,h=null,b=null,x=null,m=!1,w=!1,E=!1,y=!1,M=0,A=!1,I=!1,O=null,C=null,P=-1,B=null,H=[];function S(t){var e=0;if(t.offsetParent)do{e+=t.offsetTop,t=t.offsetParent}while(t);return e<0?0:e}function _(t){return+t.getAttribute("data-scrollama-index")}function R(){window.pageYOffset>P?B="down":window.pageYOffset<P&&(B="up"),P=window.pageYOffset}function V(){var t,e;v=window.innerHeight,t=document.body,e=document.documentElement,g=Math.max(t.scrollHeight,t.offsetHeight,e.clientHeight,e.scrollHeight,e.offsetHeight),x=a?a.getBoundingClientRect():null,d=p*v,h=f?f.map(function(t){return t.offsetHeight}):[],b=f?f.map(S):[],w&&m&&W(),E&&r({id:l,stepOffsetHeight:h,offsetMargin:d,offsetVal:p})}function k(t){t&&!w?(m&&W(),w=!0):t||(c.top&&c.top.disconnect(),c.bottom&&c.bottom.disconnect(),c.stepAbove&&c.stepAbove.forEach(function(t){return t.disconnect()}),c.stepBelow&&c.stepBelow.forEach(function(t){return t.disconnect()}),c.stepProgress&&c.stepProgress.forEach(function(t){return t.disconnect()}),c.viewportAbove&&c.viewportAbove.forEach(function(t){return t.disconnect()}),c.viewportBelow&&c.viewportBelow.forEach(function(t){return t.disconnect()}),w=!1)}function q(t,e){if("above"===e)for(var n=0;n<t;n++){var o=O[n];"enter"===o.state&&j(f[n],"down"),"up"===o.direction&&(T(f[n],"down",!1),j(f[n],"down"))}else if("below"===e)for(var r=O.length-1;r>t;r--){var i=O[r];"enter"===i.state&&j(f[r],"up"),"down"===i.direction&&(T(f[r],"up",!1),j(f[r],"up"))}}function T(t,e,n){void 0===n&&(n=!0);var o=_(t),r={element:t,index:o,direction:e};O[o].direction=e,O[o].state="enter",A&&n&&"down"===e&&q(o,"above"),A&&n&&"up"===e&&q(o,"below"),s.stepEnter&&"function"==typeof s.stepEnter&&!H[o]&&(s.stepEnter(r,O),E&&i({id:l,index:o,state:"enter"}),I&&(H[o]=!0)),y&&z(t,"down"===e?0:1)}function j(t,e){var n=_(t),o={element:t,index:n,direction:e};O[n].direction=e,O[n].state="exit",y&&z(t,"down"===e?1:0),s.stepExit&&"function"==typeof s.stepExit&&(s.stepExit(o,O),E&&i({id:l,index:n,state:"exit"}))}function z(t,e){var n={element:t,index:_(t),progress:e};s.stepProgress&&"function"==typeof s.stepProgress&&s.stepProgress(n)}function N(){var t={direction:B};C.direction=B,C.state="enter",s.containerEnter&&"function"==typeof s.containerEnter&&s.containerEnter(t)}function Y(){var t={direction:B};C.direction=B,C.state="exit",s.containerExit&&"function"==typeof s.containerExit&&s.containerExit(t)}function F(t){R(),t.forEach(function(t){var e=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.bottom,s=o.height,c=i-d,u=_(r),a=O[u];c>=-n&&(e&&"down"===B&&"enter"!==a.state?T(r,B):e||"up"!==B||"enter"!==a.state?!e&&c>=s&&"down"===B&&"enter"===a.state&&j(r,B):j(r,B))})}function D(t){R(),t.forEach(function(t){var e=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.bottom,s=o.height,c=i-d,u=_(r),a=O[u];c>=-n&&c<s&&e&&"up"===B&&"enter"!==a.state?T(r,B):c<=n&&!e&&"down"===B&&"enter"===a.state&&j(r,B)})}function L(t){R(),t.forEach(function(t){var e=t.isIntersecting,n=t.target,o=_(n),r=O[o];e&&"down"===B&&"enter"!==r.state&&"down"!==r.direction&&(T(n,"down"),j(n,"down"))})}function G(t){R(),t.forEach(function(t){var e=t.isIntersecting,n=t.target,o=_(n),r=O[o];e&&"up"===B&&"enter"!==r.state&&"up"!==r.direction&&(T(n,"up"),j(n,"up"))})}function J(t){R(),t.forEach(function(t){var e=t.isIntersecting,o=t.intersectionRatio,r=t.boundingClientRect,i=t.target,s=r.bottom;e&&s-d>=-n&&z(i,+o.toFixed(3))})}function K(t){R();var e=t[0],o=e.isIntersecting,r=e.boundingClientRect;r.top,r.bottom>-n&&(o?N():"enter"===C.state&&Y())}function Q(t){R();var e=t[0],o=e.isIntersecting;e.boundingClientRect.top<n&&(o?N():"enter"===C.state&&Y())}function U(){c.stepProgress&&c.stepProgress.forEach(function(t){return t.disconnect()}),c.stepProgress=f.map(function(t,e){var n=h[e]-d+"px 0px "+(-v+d)+"px 0px",o=function(t){for(var e=Math.ceil(t/M),n=[],o=1/e,r=0;r<e;r++)n.push(r*o);return n}(h[e]),r=new IntersectionObserver(J,{root:null,rootMargin:n,threshold:o});return r.observe(t),r})}function W(){c.viewportAbove&&c.viewportAbove.forEach(function(t){return t.disconnect()}),c.viewportAbove=f.map(function(t,e){var n=b[e],o=-(v-d+h[e]),r=new IntersectionObserver(L,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(t),r}),c.viewportBelow&&c.viewportBelow.forEach(function(t){return t.disconnect()}),c.viewportBelow=f.map(function(t,e){var n=-(d+h[e]),o=g-b[e]-h[e]-d,r=new IntersectionObserver(G,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(t),r}),c.stepAbove&&c.stepAbove.forEach(function(t){return t.disconnect()}),c.stepAbove=f.map(function(t,e){var n=h[e],o=new IntersectionObserver(F,{root:null,rootMargin:n+"px 0px "+(-v+d)+"px 0px",threshold:0});return o.observe(t),o}),c.stepBelow&&c.stepBelow.forEach(function(t){return t.disconnect()}),c.stepBelow=f.map(function(t,e){var n=-d,o=g-v+h[e]+d,r=new IntersectionObserver(D,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(t),r}),y&&U(),u&&a&&(function(){c.top&&c.top.unobserve(u);var t={root:null,rootMargin:v+"px 0px -"+v+"px 0px",threshold:0};c.top=new IntersectionObserver(K,t),c.top.observe(u)}(),function(){c.bottom&&c.bottom.unobserve(u);var t={root:null,rootMargin:"-"+x.height+"px 0px "+x.height+"px 0px",threshold:0};c.bottom=new IntersectionObserver(Q,t),c.bottom.observe(u)}())}var X={};return X.setup=function(n){var r=n.container,i=n.graphic,s=n.step,c=n.offset;void 0===c&&(c=.5);var d=n.progress;void 0===d&&(d=!1);var v=n.threshold;void 0===v&&(v=4);var g=n.debug;void 0===g&&(g=!1);var h=n.order;void 0===h&&(h=!0);var b,x,w,P,B,H=n.once;return void 0===H&&(H=!1),x=(b="abcdefghijklmnopqrstuv").length,w=(new Date).getTime(),l=""+[0,0,0].map(function(t){return b[Math.floor(Math.random()*x)]}).join("")+w,P=s,void 0===B&&(B=document),f="string"==typeof P?t(B.querySelectorAll(P)):P instanceof NodeList?t(P):P instanceof Array?P:[],u=r?e(r):null,a=i?e(i):null,f.length?(E=g,y=d,A=h,I=H,X.offsetTrigger(c),M=Math.max(1,+v),m=!0,E&&o({id:l,stepEl:f,offsetVal:p}),f.forEach(function(t,e){return t.setAttribute("data-scrollama-index",e)}),O=f.map(function(){return{direction:null,state:null}}),C={direction:null,state:null},V(),k(!0),X):(console.error("scrollama error: no step elements"),X)},X.resize=function(){return V(),X},X.enable=function(){return k(!0),X},X.disable=function(){return k(!1),X},X.destroy=function(){k(!1),Object.keys(s).forEach(function(t){return s[t]=null}),Object.keys(c).forEach(function(t){return c[t]=null})},X.offsetTrigger=function(t){return t&&(isNaN(t),1)?(p=Math.min(Math.max(0,t),1),X):p},X.onStepEnter=function(t){return s.stepEnter=t,X},X.onStepExit=function(t){return s.stepExit=t,X},X.onStepProgress=function(t){return s.stepProgress=t,X},X.onContainerEnter=function(t){return s.containerEnter=t,X},X.onContainerExit=function(t){return s.containerExit=t,X},X}});

docs/scrollama.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.scrollama=t()}(this,function(){"use strict";function e(e){for(var t=e.length,n=[],o=0;o<t;o+=1)n.push(e[o]);return n}function t(e){return e instanceof Element?e:"string"==typeof e?document.querySelector(e):null}function n(e){return"scrollama__debug-step--"+e.id+"-"+e.i}function o(e){return"scrollama__debug-offset--"+e.id}function r(e){var t=e.id,r=e.offsetVal,i=e.stepEl,s=i[0].getAttribute("class");i.forEach(function(e,o){return function(e){var t=n({id:e.id,i:e.i}),o=document.createElement("div");o.setAttribute("id",t+"_above"),o.setAttribute("class","scrollama__debug-step"),o.style.position="fixed",o.style.left="0",o.style.width="100%",o.style.backgroundImage="repeating-linear-gradient(45deg, green 0, green 2px, white 0, white 40px)",o.style.border="2px solid green",o.style.opacity="0.33",o.style.zIndex="9999",o.style.display="none",document.body.appendChild(o);var r=document.createElement("div");r.setAttribute("id",t+"_below"),r.setAttribute("class","scrollama__debug-step"),r.style.position="fixed",r.style.left="0",r.style.width="100%",r.style.backgroundImage="repeating-linear-gradient(135deg, orange 0, orange 2px, white 0, white 40px)",r.style.border="2px solid orange",r.style.opacity="0.33",r.style.zIndex="9999",r.style.display="none",document.body.appendChild(r)}({id:t,i:o})}),function(e){var t=e.id,n=e.offsetVal,r=e.stepClass,i=document.createElement("div");i.setAttribute("id",o({id:t})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+r+'" trigger: '+n,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t,offsetVal:r,stepClass:s})}function i(e){var t=e.id,r=e.stepOffsetHeight,i=e.offsetMargin;e.offsetVal;r.forEach(function(e,o){return function(e){var t=e.id,o=e.h,r=e.i,i=e.offsetMargin,s=n({id:t,i:r}),c=document.querySelector("#"+s+"_above");c.style.height=o+"px",c.style.top=i-o+"px";var a=document.querySelector("#"+s+"_below");a.style.height=o+"px",a.style.top=i+"px"}({id:t,h:e,i:o,offsetMargin:i})}),function(e){var t=e.id,n=e.offsetMargin,r=(e.offsetVal,o({id:t}));document.querySelector("#"+r).style.top=n+"px"}({id:t,offsetMargin:i})}function s(e){var t=e.id,o=e.index,r=e.state,i=n({id:t,i:o}),s=document.querySelector("#"+i+"_above"),c=document.querySelector("#"+i+"_below"),a="enter"===r?"block":"none";s&&(s.style.display=a),c&&(c.style.display=a)}return function(){var n=1,o={},c={},a=null,u=null,l=null,f=null,d=0,p=0,g=0,v=0,h=null,b=null,x=null,m=!1,y=!1,w=!1,E=!1,A=0,M=!1,I=!1,_=null,C=null,O=-1,P=null,B=[];function S(e){var t=0;if(e.offsetParent)do{t+=e.offsetTop,e=e.offsetParent}while(e);return t<0?0:t}function H(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>O?P="down":window.pageYOffset<O&&(P="up"),O=window.pageYOffset}function q(){var e,t;g=window.innerHeight,e=document.body,t=document.documentElement,v=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),x=u?u.getBoundingClientRect():null,p=d*g,h=l?l.map(function(e){return e.offsetHeight}):[],b=l?l.map(S):[],y&&m&&W(),w&&i({id:f,stepOffsetHeight:h,offsetMargin:p,offsetVal:d})}function R(e){e&&!y?(m&&W(),y=!0):e||(c.top&&c.top.disconnect(),c.bottom&&c.bottom.disconnect(),c.stepAbove&&c.stepAbove.forEach(function(e){return e.disconnect()}),c.stepBelow&&c.stepBelow.forEach(function(e){return e.disconnect()}),c.stepProgress&&c.stepProgress.forEach(function(e){return e.disconnect()}),c.viewportAbove&&c.viewportAbove.forEach(function(e){return e.disconnect()}),c.viewportBelow&&c.viewportBelow.forEach(function(e){return e.disconnect()}),y=!1)}function V(e,t){if("above"===t)for(var n=0;n<e;n++){var o=_[n];"enter"===o.state&&j(l[n]),"up"===o.direction&&(T(l[n],"down"),j(l[n]))}else if("below"===t)for(var r=_.length-1;r>e;r--){var i=_[r];"enter"===i.state&&j(l[r]),"down"===i.direction&&(T(l[r],"up"),j(l[r]))}}function T(e,t){void 0===t&&(t=!0);var n=H(e),r={element:e,index:n,direction:P};_[n].direction=P,_[n].state="enter",M&&t&&"down"===P&&V(n,"above"),M&&t&&"up"===P&&V(n,"below"),o.stepEnter&&"function"==typeof o.stepEnter&&!B[n]&&(o.stepEnter(r,_),w&&s({id:f,index:n,state:"enter"}),I&&(B[n]=!0)),E&&z(e,"down"===P?0:1)}function j(e){var t=H(e),n={element:e,index:t,direction:P};_[t].direction=P,_[t].state="exit",E&&z(e,"down"===P?1:0),o.stepExit&&"function"==typeof o.stepExit&&(o.stepExit(n,_),w&&s({id:f,index:t,state:"exit"}))}function z(e,t){var n={element:e,index:H(e),progress:t};o.stepProgress&&"function"==typeof o.stepProgress&&o.stepProgress(n)}function N(){var e={direction:P};C.direction=P,C.state="enter",o.containerEnter&&"function"==typeof o.containerEnter&&o.containerEnter(e)}function Y(){var e={direction:P};C.direction=P,C.state="exit",o.containerExit&&"function"==typeof o.containerExit&&o.containerExit(e)}function F(e){k(),e.forEach(function(e){var t=e.isIntersecting,o=e.boundingClientRect,r=e.target,i=o.bottom,s=o.height,c=i-p,a=H(r),u=_[a];c>=-n&&(t&&"down"===P&&"enter"!==u.state?T(r,P):t||"up"!==P||"enter"!==u.state?!t&&c>=s&&"down"===P&&"enter"===u.state&&j(r):j(r))})}function D(e){k(),e.forEach(function(e){var t=e.isIntersecting,o=e.boundingClientRect,r=e.target,i=o.bottom,s=o.height,c=i-p,a=H(r),u=_[a];c>=-n&&c<s&&t&&"up"===P&&"enter"!==u.state?T(r,P):c<=n&&!t&&"down"===P&&"enter"===u.state&&j(r)})}function L(e){k(),e.forEach(function(e){var t=e.isIntersecting,n=e.target,o=H(n),r=_[o];t&&"down"===P&&"enter"!==r.state&&"down"!==r.direction&&(T(n,"down"),j(n))})}function G(e){k(),e.forEach(function(e){var t=e.isIntersecting,n=e.target,o=H(n),r=_[o];t&&"up"===P&&"enter"!==r.state&&"up"!==r.direction&&(T(n,"up"),j(n))})}function J(e){k(),e.forEach(function(e){var t=e.isIntersecting,o=e.intersectionRatio,r=e.boundingClientRect,i=e.target,s=r.bottom;t&&s-p>=-n&&z(i,+o.toFixed(3))})}function K(e){k();var t=e[0],o=t.isIntersecting,r=t.boundingClientRect;r.top,r.bottom>-n&&(o?N():"enter"===C.state&&Y())}function Q(e){k();var t=e[0],o=t.isIntersecting;t.boundingClientRect.top<n&&(o?N():"enter"===C.state&&Y())}function U(){c.stepProgress&&c.stepProgress.forEach(function(e){return e.disconnect()}),c.stepProgress=l.map(function(e,t){var n=h[t]-p+"px 0px "+(-g+p)+"px 0px",o=function(e){for(var t=Math.ceil(e/A),n=[],o=1/t,r=0;r<t;r++)n.push(r*o);return n}(h[t]),r=new IntersectionObserver(J,{root:null,rootMargin:n,threshold:o});return r.observe(e),r})}function W(){c.viewportAbove&&c.viewportAbove.forEach(function(e){return e.disconnect()}),c.viewportAbove=l.map(function(e,t){var n=b[t],o=-(g-p+h[t]),r=new IntersectionObserver(L,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(e),r}),c.viewportBelow&&c.viewportBelow.forEach(function(e){return e.disconnect()}),c.viewportBelow=l.map(function(e,t){var n=-(p+h[t]),o=v-b[t]-h[t]-p,r=new IntersectionObserver(G,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(e),r}),c.stepAbove&&c.stepAbove.forEach(function(e){return e.disconnect()}),c.stepAbove=l.map(function(e,t){var n=h[t],o=new IntersectionObserver(F,{root:null,rootMargin:n+"px 0px "+(-g+p)+"px 0px",threshold:0});return o.observe(e),o}),c.stepBelow&&c.stepBelow.forEach(function(e){return e.disconnect()}),c.stepBelow=l.map(function(e,t){var n=-p,o=v-g+h[t]+p,r=new IntersectionObserver(D,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(e),r}),E&&U(),a&&u&&(function(){c.top&&c.top.unobserve(a);var e={root:null,rootMargin:g+"px 0px -"+g+"px 0px",threshold:0};c.top=new IntersectionObserver(K,e),c.top.observe(a)}(),function(){c.bottom&&c.bottom.unobserve(a);var e={root:null,rootMargin:"-"+x.height+"px 0px "+x.height+"px 0px",threshold:0};c.bottom=new IntersectionObserver(Q,e),c.bottom.observe(a)}())}var X={};return X.setup=function(n){var o=n.container,i=n.graphic,s=n.step,c=n.offset;void 0===c&&(c=.5);var p=n.progress;void 0===p&&(p=!1);var g=n.threshold;void 0===g&&(g=4);var v=n.debug;void 0===v&&(v=!1);var h=n.order;void 0===h&&(h=!0);var b,x,y,O,P,B=n.once;return void 0===B&&(B=!1),x=(b="abcdefghijklmnopqrstuv").length,y=(new Date).getTime(),f=""+[0,0,0].map(function(e){return b[Math.floor(Math.random()*x)]}).join("")+y,O=s,void 0===P&&(P=document),l="string"==typeof O?e(P.querySelectorAll(O)):O instanceof NodeList?e(O):O instanceof Array?O:[],a=o?t(o):null,u=i?t(i):null,l.length?(w=v,E=p,M=h,I=B,X.offsetTrigger(c),A=Math.max(1,+g),m=!0,w&&r({id:f,stepEl:l,offsetVal:d}),l.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),_=l.map(function(){return{direction:null,state:null}}),C={direction:null,state:null},q(),R(!0),X):(console.error("scrollama error: no step elements"),X)},X.resize=function(){return q(),X},X.enable=function(){return R(!0),X},X.disable=function(){return R(!1),X},X.destroy=function(){R(!1),Object.keys(o).forEach(function(e){return o[e]=null}),Object.keys(c).forEach(function(e){return c[e]=null})},X.offsetTrigger=function(e){return e&&(isNaN(e),1)?(d=Math.min(Math.max(0,e),1),X):d},X.onStepEnter=function(e){return o.stepEnter=e,X},X.onStepExit=function(e){return o.stepExit=e,X},X.onStepProgress=function(e){return o.stepProgress=e,X},X.onContainerEnter=function(e){return o.containerEnter=e,X},X.onContainerExit=function(e){return o.containerExit=e,X},X}});
+!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 t instanceof Element?t:"string"==typeof t?document.querySelector(t):null}function n(t){return"scrollama__debug-offset--"+t.id}function o(t){!function(t){var e=t.id,o=t.offsetVal,r=t.stepClass,i=document.createElement("div");i.setAttribute("id",n({id:e})),i.setAttribute("class","scrollama__debug-offset"),i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0px",i.style.borderTop="2px dashed black",i.style.zIndex="9999";var s=document.createElement("p");s.innerText='".'+r+'" trigger: '+o,s.style.fontSize="12px",s.style.fontFamily="monospace",s.style.color="black",s.style.margin="0",s.style.padding="6px",i.appendChild(s),document.body.appendChild(i)}({id:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].getAttribute("class")})}function r(t){var e=t.id,o=(t.stepOffsetHeight,t.offsetMargin);t.offsetVal;!function(t){var e=t.id,o=t.offsetMargin,r=(t.offsetVal,n({id:e}));document.querySelector("#"+r).style.top=o+"px"}({id:e,offsetMargin:o})}function i(t){var e=t.id,n=t.index,o=t.state,r=function(t){return"scrollama__debug-step--"+t.id+"-"+t.i}({id:e,i:n}),i=document.querySelector("#"+r+"_above"),s=document.querySelector("#"+r+"_below"),c="enter"===o?"block":"none";i&&(i.style.display=c),s&&(s.style.display=c)}return function(){var n=1,s={},c={},u=null,a=null,f=null,l=null,p=0,d=0,v=0,g=0,h=null,b=null,x=null,m=!1,w=!1,E=!1,y=!1,M=0,A=!1,I=!1,O=null,C=null,P=-1,B=null,H=[];function S(t){var e=0;if(t.offsetParent)do{e+=t.offsetTop,t=t.offsetParent}while(t);return e<0?0:e}function _(t){return+t.getAttribute("data-scrollama-index")}function R(){window.pageYOffset>P?B="down":window.pageYOffset<P&&(B="up"),P=window.pageYOffset}function V(){var t,e;v=window.innerHeight,t=document.body,e=document.documentElement,g=Math.max(t.scrollHeight,t.offsetHeight,e.clientHeight,e.scrollHeight,e.offsetHeight),x=a?a.getBoundingClientRect():null,d=p*v,h=f?f.map(function(t){return t.offsetHeight}):[],b=f?f.map(S):[],w&&m&&W(),E&&r({id:l,stepOffsetHeight:h,offsetMargin:d,offsetVal:p})}function k(t){t&&!w?(m&&W(),w=!0):t||(c.top&&c.top.disconnect(),c.bottom&&c.bottom.disconnect(),c.stepAbove&&c.stepAbove.forEach(function(t){return t.disconnect()}),c.stepBelow&&c.stepBelow.forEach(function(t){return t.disconnect()}),c.stepProgress&&c.stepProgress.forEach(function(t){return t.disconnect()}),c.viewportAbove&&c.viewportAbove.forEach(function(t){return t.disconnect()}),c.viewportBelow&&c.viewportBelow.forEach(function(t){return t.disconnect()}),w=!1)}function q(t,e){if("above"===e)for(var n=0;n<t;n++){var o=O[n];"enter"===o.state&&j(f[n],"down"),"up"===o.direction&&(T(f[n],"down",!1),j(f[n],"down"))}else if("below"===e)for(var r=O.length-1;r>t;r--){var i=O[r];"enter"===i.state&&j(f[r],"up"),"down"===i.direction&&(T(f[r],"up",!1),j(f[r],"up"))}}function T(t,e,n){void 0===n&&(n=!0);var o=_(t),r={element:t,index:o,direction:e};O[o].direction=e,O[o].state="enter",A&&n&&"down"===e&&q(o,"above"),A&&n&&"up"===e&&q(o,"below"),s.stepEnter&&"function"==typeof s.stepEnter&&!H[o]&&(s.stepEnter(r,O),E&&i({id:l,index:o,state:"enter"}),I&&(H[o]=!0)),y&&z(t,"down"===e?0:1)}function j(t,e){var n=_(t),o={element:t,index:n,direction:e};O[n].direction=e,O[n].state="exit",y&&z(t,"down"===e?1:0),s.stepExit&&"function"==typeof s.stepExit&&(s.stepExit(o,O),E&&i({id:l,index:n,state:"exit"}))}function z(t,e){var n={element:t,index:_(t),progress:e};s.stepProgress&&"function"==typeof s.stepProgress&&s.stepProgress(n)}function N(){var t={direction:B};C.direction=B,C.state="enter",s.containerEnter&&"function"==typeof s.containerEnter&&s.containerEnter(t)}function Y(){var t={direction:B};C.direction=B,C.state="exit",s.containerExit&&"function"==typeof s.containerExit&&s.containerExit(t)}function F(t){R(),t.forEach(function(t){var e=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.bottom,s=o.height,c=i-d,u=_(r),a=O[u];c>=-n&&(e&&"down"===B&&"enter"!==a.state?T(r,B):e||"up"!==B||"enter"!==a.state?!e&&c>=s&&"down"===B&&"enter"===a.state&&j(r,B):j(r,B))})}function D(t){R(),t.forEach(function(t){var e=t.isIntersecting,o=t.boundingClientRect,r=t.target,i=o.bottom,s=o.height,c=i-d,u=_(r),a=O[u];c>=-n&&c<s&&e&&"up"===B&&"enter"!==a.state?T(r,B):c<=n&&!e&&"down"===B&&"enter"===a.state&&j(r,B)})}function L(t){R(),t.forEach(function(t){var e=t.isIntersecting,n=t.target,o=_(n),r=O[o];e&&"down"===B&&"enter"!==r.state&&"down"!==r.direction&&(T(n,"down"),j(n,"down"))})}function G(t){R(),t.forEach(function(t){var e=t.isIntersecting,n=t.target,o=_(n),r=O[o];e&&"up"===B&&"enter"!==r.state&&"up"!==r.direction&&(T(n,"up"),j(n,"up"))})}function J(t){R(),t.forEach(function(t){var e=t.isIntersecting,o=t.intersectionRatio,r=t.boundingClientRect,i=t.target,s=r.bottom;e&&s-d>=-n&&z(i,+o.toFixed(3))})}function K(t){R();var e=t[0],o=e.isIntersecting,r=e.boundingClientRect;r.top,r.bottom>-n&&(o?N():"enter"===C.state&&Y())}function Q(t){R();var e=t[0],o=e.isIntersecting;e.boundingClientRect.top<n&&(o?N():"enter"===C.state&&Y())}function U(){c.stepProgress&&c.stepProgress.forEach(function(t){return t.disconnect()}),c.stepProgress=f.map(function(t,e){var n=h[e]-d+"px 0px "+(-v+d)+"px 0px",o=function(t){for(var e=Math.ceil(t/M),n=[],o=1/e,r=0;r<e;r++)n.push(r*o);return n}(h[e]),r=new IntersectionObserver(J,{root:null,rootMargin:n,threshold:o});return r.observe(t),r})}function W(){c.viewportAbove&&c.viewportAbove.forEach(function(t){return t.disconnect()}),c.viewportAbove=f.map(function(t,e){var n=b[e],o=-(v-d+h[e]),r=new IntersectionObserver(L,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(t),r}),c.viewportBelow&&c.viewportBelow.forEach(function(t){return t.disconnect()}),c.viewportBelow=f.map(function(t,e){var n=-(d+h[e]),o=g-b[e]-h[e]-d,r=new IntersectionObserver(G,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(t),r}),c.stepAbove&&c.stepAbove.forEach(function(t){return t.disconnect()}),c.stepAbove=f.map(function(t,e){var n=h[e],o=new IntersectionObserver(F,{root:null,rootMargin:n+"px 0px "+(-v+d)+"px 0px",threshold:0});return o.observe(t),o}),c.stepBelow&&c.stepBelow.forEach(function(t){return t.disconnect()}),c.stepBelow=f.map(function(t,e){var n=-d,o=g-v+h[e]+d,r=new IntersectionObserver(D,{root:null,rootMargin:n+"px 0px "+o+"px 0px",threshold:0});return r.observe(t),r}),y&&U(),u&&a&&(function(){c.top&&c.top.unobserve(u);var t={root:null,rootMargin:v+"px 0px -"+v+"px 0px",threshold:0};c.top=new IntersectionObserver(K,t),c.top.observe(u)}(),function(){c.bottom&&c.bottom.unobserve(u);var t={root:null,rootMargin:"-"+x.height+"px 0px "+x.height+"px 0px",threshold:0};c.bottom=new IntersectionObserver(Q,t),c.bottom.observe(u)}())}var X={};return X.setup=function(n){var r=n.container,i=n.graphic,s=n.step,c=n.offset;void 0===c&&(c=.5);var d=n.progress;void 0===d&&(d=!1);var v=n.threshold;void 0===v&&(v=4);var g=n.debug;void 0===g&&(g=!1);var h=n.order;void 0===h&&(h=!0);var b,x,w,P,B,H=n.once;return void 0===H&&(H=!1),x=(b="abcdefghijklmnopqrstuv").length,w=(new Date).getTime(),l=""+[0,0,0].map(function(t){return b[Math.floor(Math.random()*x)]}).join("")+w,P=s,void 0===B&&(B=document),f="string"==typeof P?t(B.querySelectorAll(P)):P instanceof NodeList?t(P):P instanceof Array?P:[],u=r?e(r):null,a=i?e(i):null,f.length?(E=g,y=d,A=h,I=H,X.offsetTrigger(c),M=Math.max(1,+v),m=!0,E&&o({id:l,stepEl:f,offsetVal:p}),f.forEach(function(t,e){return t.setAttribute("data-scrollama-index",e)}),O=f.map(function(){return{direction:null,state:null}}),C={direction:null,state:null},V(),k(!0),X):(console.error("scrollama error: no step elements"),X)},X.resize=function(){return V(),X},X.enable=function(){return k(!0),X},X.disable=function(){return k(!1),X},X.destroy=function(){k(!1),Object.keys(s).forEach(function(t){return s[t]=null}),Object.keys(c).forEach(function(t){return c[t]=null})},X.offsetTrigger=function(t){return t&&(isNaN(t),1)?(p=Math.min(Math.max(0,t),1),X):p},X.onStepEnter=function(t){return s.stepEnter=t,X},X.onStepExit=function(t){return s.stepExit=t,X},X.onStepProgress=function(t){return s.stepProgress=t,X},X.onContainerEnter=function(t){return s.containerEnter=t,X},X.onContainerExit=function(t){return s.containerExit=t,X},X}});

package.json

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

README.md

@@ -113,2 +113,4 @@ ###### scrollama.js
 
+**Update:** I recommend using the CSS property `position:sticky;`. You can simply use the triggers like above, and let the CSS handle everything else. [Full blog post here](https://pudding.cool/process/scrollytelling-sticky/).
+
 To implement the sticky graphic scrollytelling pattern, you need the following
@@ -115,0 +117,0 @@ three elements (container, graphic, steps). The structure should look like:

src/debug.js

@@ -10,37 +10,3 @@ function getStepId({ id, i }) {
 // SETUP
-function setupStep({ id, i }) {
-  const idVal = getStepId({ id, i });
 
-  const elA = document.createElement('div');
-  elA.setAttribute('id', `${idVal}_above`);
-  elA.setAttribute('class', 'scrollama__debug-step');
-  elA.style.position = 'fixed';
-  elA.style.left = '0';
-  elA.style.width = '100%';
-  // elA.style.backgroundColor = 'green';
-  elA.style.backgroundImage =
-    'repeating-linear-gradient(45deg, green 0, green 2px, white 0, white 40px)';
-  elA.style.border = '2px solid green';
-  elA.style.opacity = '0.33';
-  elA.style.zIndex = '9999';
-  elA.style.display = 'none';
-
-  document.body.appendChild(elA);
-
-  const elB = document.createElement('div');
-  elB.setAttribute('id', `${idVal}_below`);
-  elB.setAttribute('class', 'scrollama__debug-step');
-  elB.style.position = 'fixed';
-  elB.style.left = '0';
-  elB.style.width = '100%';
-  // elB.style.backgroundColor = 'orange';
-  elB.style.backgroundImage =
-    'repeating-linear-gradient(135deg, orange 0, orange 2px, white 0, white 40px)';
-  elB.style.border = '2px solid orange';
-  elB.style.opacity = '0.33';
-  elB.style.zIndex = '9999';
-  elB.style.display = 'none';
-  document.body.appendChild(elB);
-}
-
 function setupOffset({ id, offsetVal, stepClass }) {
@@ -71,3 +37,2 @@ const el = document.createElement('div');
   const stepClass = stepEl[0].getAttribute('class');
-  stepEl.forEach((s, i) => setupStep({ id, i }));
   setupOffset({ id, offsetVal, stepClass });
@@ -83,15 +48,3 @@ }
 
-function updateStep({ id, h, i, offsetMargin }) {
-  const idVal = getStepId({ id, i });
-  const elA = document.querySelector(`#${idVal}_above`);
-  elA.style.height = `${h}px`;
-  elA.style.top = `${offsetMargin - h}px`;
-
-  const elB = document.querySelector(`#${idVal}_below`);
-  elB.style.height = `${h}px`;
-  elB.style.top = `${offsetMargin}px`;
-}
-
 function update({ id, stepOffsetHeight, offsetMargin, offsetVal }) {
-  stepOffsetHeight.forEach((h, i) => updateStep({ id, h, i, offsetMargin }));
   updateOffset({ id, offsetMargin });
@@ -98,0 +51,0 @@ }

src/init.js

@@ -157,3 +157,3 @@ import { select, selectAll } from './dom';
 
-  function notifyStepEnter(element, check = true) {
+  function notifyStepEnter(element, direction, check = true) {
     const index = getIndex(element);
@@ -188,3 +188,3 @@ const resp = { element, index, direction };
 
-  function notifyStepExit(element) {
+  function notifyStepExit(element, direction) {
     const index = getIndex(element);
@@ -191,0 +191,0 @@ const resp = { element, index, direction };

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

Number of lines in readme file

297

increased by0.68%

Worsened metrics

Total package byte prevSize

594689

decreased by-1.06%

Lines of code

1373

decreased by-6.66%

No dependency changes