Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

scrollama

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

scrollama - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dev/enable-disable.html

20

build/scrollama.js

@@ -220,9 +220,15 @@ (function (global, factory) {

function handleEnable(enable) {
if (enable && !isEnabled) {
if (isReady) { updateIO(); }
isEnabled = true;
return true;
if (enable && !isEnabled) { // enable a disabled scroller
if (isReady) { // enable a ready scroller
updateIO();
} else { // can't enable an unready scroller
console.error('scrollama error: enable() called before scroller was ready');
isEnabled = false;
return; // all is not well, don't set the requested state
}
}
OBSERVER_NAMES.forEach(disconnectObserver);
isEnabled = false;
if (!enable && isEnabled) { // disable an enabled scroller
OBSERVER_NAMES.forEach(disconnectObserver);
}
isEnabled = enable; // all is well, set requested state
}

@@ -503,3 +509,3 @@

function updateStepBelowIO() {
io.stepAbove = stepEl.map(function (el, i) {
io.stepBelow = stepEl.map(function (el, i) {
var marginTop = -offsetMargin;

@@ -506,0 +512,0 @@ var marginBottom = offsetMargin - viewH + stepOffsetHeight[i];

@@ -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=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),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='".'+o+'" trigger: '+r,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:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],u=[],f=[],l=[],d=0,p=0,g=0,v=0,m=0,b=0,x=!1,w=!1,h=!1,y=!1,E=!1,M=!1,O="down",A=[];function I(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function S(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function C(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}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),p=d*g,x&&(u=c.map(function(e){return e.getBoundingClientRect().height}),f=c.map(I),w&&z()),h&&r({id:a,stepOffsetHeight:u,offsetMargin:p,offsetVal:d})}function H(e){if(e&&!w)return x&&z(),w=!0,!0;t.forEach(C),w=!1}function _(e,t){var n=S(e);void 0!==t&&(l[n].progress=t);var r={element:e,index:n,progress:l[n].progress};"enter"===l[n].state&&i.stepProgress(r)}function P(e,t){if("above"===t)for(var n=0;n<e;n++){var r=l[n];"enter"!==r.state&&"down"!==r.direction?(V(c[n],"down",!1),R(c[n],"down")):"enter"===r.state&&R(c[n],"down")}else if("below"===t)for(var o=l.length-1;o>e;o--){var i=l[o];"enter"===i.state&&R(c[o],"up"),"down"===i.direction&&(V(c[o],"up",!1),R(c[o],"up"))}}function V(e,t,n){void 0===n&&(n=!0);var r=S(e),s={element:e,index:r,direction:t};l[r].direction=t,l[r].state="enter",E&&n&&"down"===t&&P(r,"above"),E&&n&&"up"===t&&P(r,"below"),i.stepEnter&&!A[r]&&(i.stepEnter(s,l),h&&o({id:a,index:r,state:"enter"}),M&&(A[r]=!0)),y&&_(e)}function R(e,t){var n=S(e),r={element:e,index:n,direction:t};y&&("down"===t&&l[n].progress<1?_(e,1):"up"===t&&l[n].progress>0&&_(e,0)),l[n].direction=t,l[n].state="exit",i.stepExit(r,l),h&&o({id:a,index:n,state:"exit"})}function j(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,u=S(o),f=l[u];n&&a<=0&&c>=0&&"down"===O&&"enter"!==f.state&&V(o,O),!n&&a>0&&"up"===O&&"enter"===f.state&&R(o,O)}function B(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,u=S(o),f=l[u];n&&a<=0&&c>=0&&"up"===O&&"enter"!==f.state&&V(o,O),!n&&c<0&&"down"===O&&"enter"===f.state&&R(o,O)}function F(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(V(r,"down"),R(r,"down"))}function N(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(V(r,"up"),R(r,"up"))}function T(e){var t=e[0];k();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function Y(){s.stepProgress=c.map(function(e,t){var n=u[t]-p+"px 0px "+(-g+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o++)n.push(o*r);return n}(u[t]),o=new IntersectionObserver(T,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(C),s.viewportAbove=c.map(function(e,t){var n=v-f[t],r=p-g-u[t],o=new IntersectionObserver(F,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-u[t],r=p-g+u[t]+v,o=new IntersectionObserver(N,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+u[t],r=new IntersectionObserver(j,{rootMargin:n+"px 0px "+(p-g)+"px 0px"});return r.observe(e),r}),s.stepAbove=c.map(function(e,t){var n=-p,r=p-g+u[t],o=new IntersectionObserver(B,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&Y()}var D={};return D.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var u=t.debug;void 0===u&&(u=!1);var f=t.order;void 0===f&&(f=!0);var p,g,v,m,w,O=t.once;return void 0===O&&(O=!1),g=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*g)]}).join("")+v,m=r,void 0===w&&(w=document),(c="string"==typeof m?e(w.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length?(h=u,y=i,E=f,M=O,D.offsetTrigger(o),b=Math.max(1,+s),x=!0,h&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),l=c.map(function(){return{direction:null,state:null,progress:0}}),q(),D.enable(),D):(console.error("scrollama error: no step elements"),D)},D.resize=function(){return q(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(i).forEach(function(e){return i[e]=null}),Object.keys(s).forEach(function(e){return s[e]=null})},D.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},D.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),D},D}});
!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=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),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='".'+o+'" trigger: '+r,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:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],f=[],u=[],l=[],d=0,p=0,g=0,v=0,m=0,b=0,x=!1,w=!1,h=!1,y=!1,E=!1,M=!1,O="down",A=[];function I(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function S(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function C(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}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),p=d*g,x&&(f=c.map(function(e){return e.getBoundingClientRect().height}),u=c.map(I),w&&z()),h&&r({id:a,stepOffsetHeight:f,offsetMargin:p,offsetVal:d})}function H(e){if(e&&!w){if(!x)return console.error("scrollama error: enable() called before scroller was ready"),void(w=!1);z()}!e&&w&&t.forEach(C),w=e}function _(e,t){var n=S(e);void 0!==t&&(l[n].progress=t);var r={element:e,index:n,progress:l[n].progress};"enter"===l[n].state&&i.stepProgress(r)}function P(e,t){if("above"===t)for(var n=0;n<e;n++){var r=l[n];"enter"!==r.state&&"down"!==r.direction?(V(c[n],"down",!1),B(c[n],"down")):"enter"===r.state&&B(c[n],"down")}else if("below"===t)for(var o=l.length-1;o>e;o--){var i=l[o];"enter"===i.state&&B(c[o],"up"),"down"===i.direction&&(V(c[o],"up",!1),B(c[o],"up"))}}function V(e,t,n){void 0===n&&(n=!0);var r=S(e),s={element:e,index:r,direction:t};l[r].direction=t,l[r].state="enter",E&&n&&"down"===t&&P(r,"above"),E&&n&&"up"===t&&P(r,"below"),i.stepEnter&&!A[r]&&(i.stepEnter(s,l),h&&o({id:a,index:r,state:"enter"}),M&&(A[r]=!0)),y&&_(e)}function B(e,t){var n=S(e),r={element:e,index:n,direction:t};y&&("down"===t&&l[n].progress<1?_(e,1):"up"===t&&l[n].progress>0&&_(e,0)),l[n].direction=t,l[n].state="exit",i.stepExit(r,l),h&&o({id:a,index:n,state:"exit"})}function R(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"down"===O&&"enter"!==u.state&&V(o,O),!n&&a>0&&"up"===O&&"enter"===u.state&&B(o,O)}function j(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"up"===O&&"enter"!==u.state&&V(o,O),!n&&c<0&&"down"===O&&"enter"===u.state&&B(o,O)}function F(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(V(r,"down"),B(r,"down"))}function N(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(V(r,"up"),B(r,"up"))}function T(e){var t=e[0];k();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function Y(){s.stepProgress=c.map(function(e,t){var n=f[t]-p+"px 0px "+(-g+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o++)n.push(o*r);return n}(f[t]),o=new IntersectionObserver(T,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(C),s.viewportAbove=c.map(function(e,t){var n=v-u[t],r=p-g-f[t],o=new IntersectionObserver(F,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-f[t],r=p-g+f[t]+v,o=new IntersectionObserver(N,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+f[t],r=new IntersectionObserver(R,{rootMargin:n+"px 0px "+(p-g)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-g+f[t],o=new IntersectionObserver(j,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&Y()}var D={};return D.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var f=t.debug;void 0===f&&(f=!1);var u=t.order;void 0===u&&(u=!0);var p,g,v,m,w,O=t.once;return void 0===O&&(O=!1),g=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*g)]}).join("")+v,m=r,void 0===w&&(w=document),(c="string"==typeof m?e(w.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length?(h=f,y=i,E=u,M=O,D.offsetTrigger(o),b=Math.max(1,+s),x=!0,h&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),l=c.map(function(){return{direction:null,state:null,progress:0}}),q(),D.enable(),D):(console.error("scrollama error: no step elements"),D)},D.resize=function(){return q(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(i).forEach(function(e){return i[e]=null}),Object.keys(s).forEach(function(e){return s[e]=null})},D.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},D.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),D},D}});

@@ -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=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),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='".'+o+'" trigger: '+r,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:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],u=[],f=[],l=[],d=0,p=0,g=0,v=0,m=0,b=0,x=!1,w=!1,h=!1,y=!1,E=!1,M=!1,O="down",A=[];function I(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function S(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function C(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}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),p=d*g,x&&(u=c.map(function(e){return e.getBoundingClientRect().height}),f=c.map(I),w&&z()),h&&r({id:a,stepOffsetHeight:u,offsetMargin:p,offsetVal:d})}function H(e){if(e&&!w)return x&&z(),w=!0,!0;t.forEach(C),w=!1}function _(e,t){var n=S(e);void 0!==t&&(l[n].progress=t);var r={element:e,index:n,progress:l[n].progress};"enter"===l[n].state&&i.stepProgress(r)}function P(e,t){if("above"===t)for(var n=0;n<e;n++){var r=l[n];"enter"!==r.state&&"down"!==r.direction?(V(c[n],"down",!1),R(c[n],"down")):"enter"===r.state&&R(c[n],"down")}else if("below"===t)for(var o=l.length-1;o>e;o--){var i=l[o];"enter"===i.state&&R(c[o],"up"),"down"===i.direction&&(V(c[o],"up",!1),R(c[o],"up"))}}function V(e,t,n){void 0===n&&(n=!0);var r=S(e),s={element:e,index:r,direction:t};l[r].direction=t,l[r].state="enter",E&&n&&"down"===t&&P(r,"above"),E&&n&&"up"===t&&P(r,"below"),i.stepEnter&&!A[r]&&(i.stepEnter(s,l),h&&o({id:a,index:r,state:"enter"}),M&&(A[r]=!0)),y&&_(e)}function R(e,t){var n=S(e),r={element:e,index:n,direction:t};y&&("down"===t&&l[n].progress<1?_(e,1):"up"===t&&l[n].progress>0&&_(e,0)),l[n].direction=t,l[n].state="exit",i.stepExit(r,l),h&&o({id:a,index:n,state:"exit"})}function j(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,u=S(o),f=l[u];n&&a<=0&&c>=0&&"down"===O&&"enter"!==f.state&&V(o,O),!n&&a>0&&"up"===O&&"enter"===f.state&&R(o,O)}function B(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,u=S(o),f=l[u];n&&a<=0&&c>=0&&"up"===O&&"enter"!==f.state&&V(o,O),!n&&c<0&&"down"===O&&"enter"===f.state&&R(o,O)}function F(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(V(r,"down"),R(r,"down"))}function N(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(V(r,"up"),R(r,"up"))}function T(e){var t=e[0];k();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function Y(){s.stepProgress=c.map(function(e,t){var n=u[t]-p+"px 0px "+(-g+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o++)n.push(o*r);return n}(u[t]),o=new IntersectionObserver(T,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(C),s.viewportAbove=c.map(function(e,t){var n=v-f[t],r=p-g-u[t],o=new IntersectionObserver(F,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-u[t],r=p-g+u[t]+v,o=new IntersectionObserver(N,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+u[t],r=new IntersectionObserver(j,{rootMargin:n+"px 0px "+(p-g)+"px 0px"});return r.observe(e),r}),s.stepAbove=c.map(function(e,t){var n=-p,r=p-g+u[t],o=new IntersectionObserver(B,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&Y()}var D={};return D.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var u=t.debug;void 0===u&&(u=!1);var f=t.order;void 0===f&&(f=!0);var p,g,v,m,w,O=t.once;return void 0===O&&(O=!1),g=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*g)]}).join("")+v,m=r,void 0===w&&(w=document),(c="string"==typeof m?e(w.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length?(h=u,y=i,E=f,M=O,D.offsetTrigger(o),b=Math.max(1,+s),x=!0,h&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),l=c.map(function(){return{direction:null,state:null,progress:0}}),q(),D.enable(),D):(console.error("scrollama error: no step elements"),D)},D.resize=function(){return q(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(i).forEach(function(e){return i[e]=null}),Object.keys(s).forEach(function(e){return s[e]=null})},D.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},D.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),D},D}});
!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=[],r=0;r<t;r+=1)n.push(e[r]);return n}function t(e){return"scrollama__debug-offset--"+e.id}function n(e){!function(e){var n=e.id,r=e.offsetVal,o=e.stepClass,i=document.createElement("div");i.setAttribute("id",t({id:n})),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='".'+o+'" trigger: '+r,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:e.id,offsetVal:e.offsetVal,stepClass:e.stepEl[0].getAttribute("class")})}function r(e){var n=e.id,r=(e.stepOffsetHeight,e.offsetMargin);e.offsetVal;!function(e){var n=e.id,r=e.offsetMargin,o=(e.offsetVal,t({id:n}));document.querySelector("#"+o).style.top=r+"px"}({id:n,offsetMargin:r})}function o(e){var t=e.id,n=e.index,r=e.state,o=function(e){return"scrollama__debug-step--"+e.id+"-"+e.i}({id:t,i:n}),i=document.querySelector("#"+o+"_above"),s=document.querySelector("#"+o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var t=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],i={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},s={},a=null,c=[],f=[],u=[],l=[],d=0,p=0,g=0,v=0,m=0,b=0,x=!1,w=!1,h=!1,y=!1,E=!1,M=!1,O="down",A=[];function I(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function S(e){return+e.getAttribute("data-scrollama-index")}function k(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function C(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}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),p=d*g,x&&(f=c.map(function(e){return e.getBoundingClientRect().height}),u=c.map(I),w&&z()),h&&r({id:a,stepOffsetHeight:f,offsetMargin:p,offsetVal:d})}function H(e){if(e&&!w){if(!x)return console.error("scrollama error: enable() called before scroller was ready"),void(w=!1);z()}!e&&w&&t.forEach(C),w=e}function _(e,t){var n=S(e);void 0!==t&&(l[n].progress=t);var r={element:e,index:n,progress:l[n].progress};"enter"===l[n].state&&i.stepProgress(r)}function P(e,t){if("above"===t)for(var n=0;n<e;n++){var r=l[n];"enter"!==r.state&&"down"!==r.direction?(V(c[n],"down",!1),B(c[n],"down")):"enter"===r.state&&B(c[n],"down")}else if("below"===t)for(var o=l.length-1;o>e;o--){var i=l[o];"enter"===i.state&&B(c[o],"up"),"down"===i.direction&&(V(c[o],"up",!1),B(c[o],"up"))}}function V(e,t,n){void 0===n&&(n=!0);var r=S(e),s={element:e,index:r,direction:t};l[r].direction=t,l[r].state="enter",E&&n&&"down"===t&&P(r,"above"),E&&n&&"up"===t&&P(r,"below"),i.stepEnter&&!A[r]&&(i.stepEnter(s,l),h&&o({id:a,index:r,state:"enter"}),M&&(A[r]=!0)),y&&_(e)}function B(e,t){var n=S(e),r={element:e,index:n,direction:t};y&&("down"===t&&l[n].progress<1?_(e,1):"up"===t&&l[n].progress>0&&_(e,0)),l[n].direction=t,l[n].state="exit",i.stepExit(r,l),h&&o({id:a,index:n,state:"exit"})}function R(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"down"===O&&"enter"!==u.state&&V(o,O),!n&&a>0&&"up"===O&&"enter"===u.state&&B(o,O)}function j(e){var t=e[0];k();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,f=S(o),u=l[f];n&&a<=0&&c>=0&&"up"===O&&"enter"!==u.state&&V(o,O),!n&&c<0&&"down"===O&&"enter"===u.state&&B(o,O)}function F(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(V(r,"down"),B(r,"down"))}function N(e){var t=e[0];k();var n=t.isIntersecting,r=t.target,o=S(r),i=l[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(V(r,"up"),B(r,"up"))}function T(e){var t=e[0];k();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-p>=0&&_(i,+r.toFixed(3))}function Y(){s.stepProgress=c.map(function(e,t){var n=f[t]-p+"px 0px "+(-g+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o++)n.push(o*r);return n}(f[t]),o=new IntersectionObserver(T,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(C),s.viewportAbove=c.map(function(e,t){var n=v-u[t],r=p-g-f[t],o=new IntersectionObserver(F,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-f[t],r=p-g+f[t]+v,o=new IntersectionObserver(N,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+f[t],r=new IntersectionObserver(R,{rootMargin:n+"px 0px "+(p-g)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-g+f[t],o=new IntersectionObserver(j,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&Y()}var D={};return D.setup=function(t){var r=t.step,o=t.offset;void 0===o&&(o=.5);var i=t.progress;void 0===i&&(i=!1);var s=t.threshold;void 0===s&&(s=4);var f=t.debug;void 0===f&&(f=!1);var u=t.order;void 0===u&&(u=!0);var p,g,v,m,w,O=t.once;return void 0===O&&(O=!1),g=(p="abcdefghijklmnopqrstuv").length,v=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*g)]}).join("")+v,m=r,void 0===w&&(w=document),(c="string"==typeof m?e(w.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length?(h=f,y=i,E=u,M=O,D.offsetTrigger(o),b=Math.max(1,+s),x=!0,h&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),l=c.map(function(){return{direction:null,state:null,progress:0}}),q(),D.enable(),D):(console.error("scrollama error: no step elements"),D)},D.resize=function(){return q(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(i).forEach(function(e){return i[e]=null}),Object.keys(s).forEach(function(e){return s[e]=null})},D.offsetTrigger=function(e){return e&&!isNaN(e)?(e>1&&console.error("scrollama error: offset value is greater than 1. Fallbacks to 1."),e<0&&console.error("scrollama error: offset value is lower than 0. Fallbacks to 0."),d=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},D.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),D},D}});
{
"name": "scrollama",
"version": "2.1.1",
"version": "2.1.2",
"description": "Lightweight scrollytelling library using IntersectionObserver",

@@ -5,0 +5,0 @@ "main": "build/scrollama.js",

@@ -104,9 +104,15 @@ import { selectAll } from './dom';

function handleEnable(enable) {
if (enable && !isEnabled) {
if (isReady) updateIO();
isEnabled = true;
return true;
if (enable && !isEnabled) { // enable a disabled scroller
if (isReady) { // enable a ready scroller
updateIO();
} else { // can't enable an unready scroller
console.error('scrollama error: enable() called before scroller was ready');
isEnabled = false;
return; // all is not well, don't set the requested state
}
}
OBSERVER_NAMES.forEach(disconnectObserver);
isEnabled = false;
if (!enable && isEnabled) { // disable an enabled scroller
OBSERVER_NAMES.forEach(disconnectObserver);
}
isEnabled = enable; // all is well, set requested state
}

@@ -369,3 +375,3 @@

function updateStepBelowIO() {
io.stepAbove = stepEl.map((el, i) => {
io.stepBelow = stepEl.map((el, i) => {
const marginTop = -offsetMargin;

@@ -372,0 +378,0 @@ const marginBottom = offsetMargin - viewH + stepOffsetHeight[i];

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc