scrollama - npm Package Compare versions

Comparing version 1.4.3 to 1.4.4

build/scrollama.js

		@@ -32,2 +32,4 @@ (function (global, factory) {
		return selectionToArray(parent.querySelectorAll(selector));
		} else if (selector instanceof Element) {
		return selectionToArray([selector]);
		} else if (selector instanceof NodeList) {
		@@ -34,0 +36,0 @@ return selectionToArray(selector);

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 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=pv,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(ro);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)?(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}});
		!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=pv,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(ro);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 Element?t([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)?(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(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=pv,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(ro);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)?(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}});
		!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=pv,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(ro);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 Element?t([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)?(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.3",
		"version": "1.4.4",
		"description": "Lightweight scrollytelling library using IntersectionObserver",
		@@ -5,0 +5,0 @@ "main": "build/scrollama.js",

README.md

		@@ -10,3 +10,3 @@ ###### scrollama.js

		Note: As of version 1.4.0, you must manually add the IntersectionObserver polyfill for cross-browser support. See [installation](https://github.com/russellgoldenberg/scrollama#installation) for details.
		Notes: As of version 1.4.0, you must manually add the IntersectionObserver polyfill for cross-browser support. See [installation](https://github.com/russellgoldenberg/scrollama#installation) for details. Although it remains in the API (for now), it is recommended to use the CSS property `position: sticky;` instead of `.onContainerEnter` and `.onContainerExit`. [Full blog post here](https://pudding.cool/process/scrollytelling-sticky/).

		@@ -260,6 +260,5 @@ As seen on [The Pudding](https://pudding.cool/):

		### To do
		### Known Issues

		- Fix for Safari address bar
		- Improve progress increments
		The `.onStepProgress` function does not perform desirably in Safari, returning infrequent updates.

		@@ -266,0 +265,0 @@ ### Alternatives

src/dom.js

		@@ -24,2 +24,4 @@ // DOM helper functions
		return selectionToArray(parent.querySelectorAll(selector));
		} else if (selector instanceof Element) {
		return selectionToArray([selector]);
		} else if (selector instanceof NodeList) {
		@@ -26,0 +28,0 @@ return selectionToArray(selector);

scrollama - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics