Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
scrollama - npm Package Compare versions
Comparing version 2.1.3 to 2.1.4
@@ -9,12 +9,3 @@ (function (global, factory) { | ||
| // private | ||
| function selectionToArray(selection) { | ||
| var len = selection.length; | ||
| var result = []; | ||
| for (var i = 0; i < len; i += 1) { | ||
| result.push(selection[i]); | ||
| } | ||
| return result; | ||
| } | ||
| // public | ||
| function selectAll(selector, parent) { | ||
@@ -24,7 +15,7 @@ if ( parent === void 0 ) parent = document; | ||
| if (typeof selector === 'string') { | ||
| return selectionToArray(parent.querySelectorAll(selector)); | ||
| return Array.from(parent.querySelectorAll(selector)); | ||
| } else if (selector instanceof Element) { | ||
| return selectionToArray([selector]); | ||
| return [selector]; | ||
| } else if (selector instanceof NodeList) { | ||
| return selectionToArray(selector); | ||
| return Array.from(selector); | ||
| } else if (selector instanceof Array) { | ||
@@ -36,12 +27,3 @@ return selector; | ||
| function getStepId(ref) { | ||
| var id = ref.id; | ||
| var i = ref.i; | ||
| return ("scrollama__debug-step--" + id + "-" + i); | ||
| } | ||
| function getOffsetId(ref) { | ||
| var id = ref.id; | ||
| function getOffsetId(id) { | ||
| return ("scrollama__debug-offset--" + id); | ||
@@ -51,3 +33,2 @@ } | ||
| // SETUP | ||
| function setupOffset(ref) { | ||
@@ -59,9 +40,8 @@ var id = ref.id; | ||
| var el = document.createElement('div'); | ||
| el.setAttribute('id', getOffsetId({ id: id })); | ||
| el.setAttribute('class', 'scrollama__debug-offset'); | ||
| el.id = getOffsetId(id); | ||
| el.className = 'scrollama__debug-offset'; | ||
| el.style.position = 'fixed'; | ||
| el.style.left = '0'; | ||
| el.style.width = '100%'; | ||
| el.style.height = '0px'; | ||
| el.style.height = '0'; | ||
| el.style.borderTop = '2px dashed black'; | ||
@@ -86,3 +66,3 @@ el.style.zIndex = '9999'; | ||
| var stepClass = stepEl[0].getAttribute('class'); | ||
| var stepClass = stepEl[0].className; | ||
| setupOffset({ id: id, offsetVal: offsetVal, stepClass: stepClass }); | ||
@@ -92,21 +72,11 @@ } | ||
| // UPDATE | ||
| function updateOffset(ref) { | ||
| function update(ref) { | ||
| var id = ref.id; | ||
| var offsetMargin = ref.offsetMargin; | ||
| var offsetVal = ref.offsetVal; | ||
| var idVal = getOffsetId({ id: id }); | ||
| var el = document.querySelector(("#" + idVal)); | ||
| var idVal = getOffsetId(id); | ||
| var el = document.getElementById(idVal); | ||
| el.style.top = offsetMargin + "px"; | ||
| } | ||
| function update(ref) { | ||
| var id = ref.id; | ||
| var stepOffsetHeight = ref.stepOffsetHeight; | ||
| var offsetMargin = ref.offsetMargin; | ||
| var offsetVal = ref.offsetVal; | ||
| updateOffset({ id: id, offsetMargin: offsetMargin }); | ||
| } | ||
| function notifyStep(ref) { | ||
@@ -117,5 +87,5 @@ var id = ref.id; | ||
| var idVal = getStepId({ id: id, i: index }); | ||
| var elA = document.querySelector(("#" + idVal + "_above")); | ||
| var elB = document.querySelector(("#" + idVal + "_below")); | ||
| var prefix = "scrollama__debug-step--" + id + "-" + index; | ||
| var elA = document.getElementById((prefix + "_above")); | ||
| var elB = document.getElementById((prefix + "_below")); | ||
| var display = state === 'enter' ? 'block' : 'none'; | ||
@@ -122,0 +92,0 @@ |
@@ -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=[],l=[],f=[],u=[],d=0,p=0,v=0,g=0,m=0,b=0,w=!1,h=!1,x=!1,y=!1,E=!1,M=!1,O="down",S=[];function A(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function I(e){return+e.getAttribute("data-scrollama-index")}function C(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function H(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}function k(){var e,t;v=window.innerHeight,e=document.body,t=document.documentElement,g=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),p=d*v,w&&(l=c.map(function(e){return e.getBoundingClientRect().height}),f=c.map(A),h&&z()),x&&r({id:a,stepOffsetHeight:l,offsetMargin:p,offsetVal:d})}function q(e){if(e&&!h){if(!w)return console.error("scrollama error: enable() called before scroller was ready"),void(h=!1);z()}!e&&h&&t.forEach(H),h=e}function _(e,t){var n=I(e);void 0!==t&&(u[n].progress=t);var r={element:e,index:n,progress:u[n].progress};"enter"===u[n].state&&i.stepProgress(r)}function N(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=u[n];"enter"!==r.state&&"down"!==r.direction?(P(c[n],"down",!1),R(c[n],"down")):"enter"===r.state&&R(c[n],"down")}else if("below"===t)for(var o=u.length-1;o>e;o-=1){var i=u[o];"enter"===i.state&&R(c[o],"up"),"down"===i.direction&&(P(c[o],"up",!1),R(c[o],"up"))}}function P(e,t,n){void 0===n&&(n=!0);var r=I(e),s={element:e,index:r,direction:t};u[r].direction=t,u[r].state="enter",E&&n&&"down"===t&&N(r,"above"),E&&n&&"up"===t&&N(r,"below"),i.stepEnter&&!S[r]&&(i.stepEnter(s,u),x&&o({id:a,index:r,state:"enter"}),M&&(S[r]=!0)),y&&_(e)}function R(e,t){var n=I(e),r={element:e,index:n,direction:t};y&&("down"===t&&u[n].progress<1?_(e,1):"up"===t&&u[n].progress>0&&_(e,0)),u[n].direction=t,u[n].state="exit",i.stepExit(r,u),x&&o({id:a,index:n,state:"exit"})}function V(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"down"===O&&"enter"!==f.state&&P(o,O),!n&&a>0&&"up"===O&&"enter"===f.state&&R(o,O)}function B(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"up"===O&&"enter"!==f.state&&P(o,O),!n&&c<0&&"down"===O&&"enter"===f.state&&R(o,O)}function T(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(P(r,"down"),R(r,"down"))}function Y(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(P(r,"up"),R(r,"up"))}function j(e){var t=e[0];C();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 F(){s.stepProgress=c.map(function(e,t){var n=l[t]-p+"px 0px "+(-v+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(l[t]),o=new IntersectionObserver(j,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(H),s.viewportAbove=c.map(function(e,t){var n=g-f[t],r=p-v-l[t],o=new IntersectionObserver(T,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-l[t],r=p-v+l[t]+g,o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+l[t],r=new IntersectionObserver(V,{rootMargin:n+"px 0px "+(p-v)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-v+l[t],o=new IntersectionObserver(B,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&F()}function D(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:D(e.parentNode))}var L={};return L.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 l=t.debug;void 0===l&&(l=!1);var f=t.order;void 0===f&&(f=!0);var p,v,g,m,h,O=t.once;if(void 0===O&&(O=!1),v=(p="abcdefghijklmnopqrstuv").length,g=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*v)]}).join("")+g,m=r,void 0===h&&(h=document),!(c="string"==typeof m?e(h.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length)return console.error("scrollama error: no step elements"),L;var S=c.reduce(function(e,t){return e||D(t.parentNode)},!1);return S&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",S),x=l,y=i,E=f,M=O,L.offsetTrigger(o),b=Math.max(1,+s),w=!0,x&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),u=c.map(function(){return{direction:null,state:null,progress:0}}),k(),L.enable(),L},L.resize=function(){return k(),L},L.enable=function(){return q(!0),L},L.disable=function(){return q(!1),L},L.destroy=function(){q(!1),Object.keys(i).forEach(function(e){i[e]=null}),Object.keys(s).forEach(function(e){s[e]=null})},L.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),L):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},L.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),L},L.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),L},L.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),L},L}}); | ||
| !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){return"scrollama__debug-offset--"+e}function t(t){!function(t){var n=t.id,r=t.offsetVal,o=t.stepClass,i=document.createElement("div");i.id=e(n),i.className="scrollama__debug-offset",i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0",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:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].className})}function n(e){var t=e.id,n=e.index,r=e.state,o="scrollama__debug-step--"+t+"-"+n,i=document.getElementById(o+"_above"),s=document.getElementById(o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var r=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],o={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},i={},s=null,a=[],c=[],l=[],f=[],u=0,d=0,p=0,v=0,g=0,m=0,b=!1,w=!1,x=!1,h=!1,y=!1,E=!1,I="down",M=[];function O(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function A(e){return+e.getAttribute("data-scrollama-index")}function C(){window.pageYOffset>g?I="down":window.pageYOffset<g&&(I="up"),g=window.pageYOffset}function k(e){i[e]&&i[e].forEach(function(e){return e.disconnect()})}function B(){var t,n;p=window.innerHeight,t=document.body,n=document.documentElement,v=Math.max(t.scrollHeight,t.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight),d=u*p,b&&(c=a.map(function(e){return e.getBoundingClientRect().height}),l=a.map(O),w&&V()),x&&function(t){var n=t.id,r=t.offsetMargin,o=e(n);document.getElementById(o).style.top=r+"px"}({id:s,stepOffsetHeight:c,offsetMargin:d,offsetVal:u})}function H(e){if(e&&!w){if(!b)return console.error("scrollama error: enable() called before scroller was ready"),void(w=!1);V()}!e&&w&&r.forEach(k),w=e}function N(e,t){var n=A(e);void 0!==t&&(f[n].progress=t);var r={element:e,index:n,progress:f[n].progress};"enter"===f[n].state&&o.stepProgress(r)}function S(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=f[n];"enter"!==r.state&&"down"!==r.direction?(_(a[n],"down",!1),P(a[n],"down")):"enter"===r.state&&P(a[n],"down")}else if("below"===t)for(var o=f.length-1;o>e;o-=1){var i=f[o];"enter"===i.state&&P(a[o],"up"),"down"===i.direction&&(_(a[o],"up",!1),P(a[o],"up"))}}function _(e,t,r){void 0===r&&(r=!0);var i=A(e),a={element:e,index:i,direction:t};f[i].direction=t,f[i].state="enter",y&&r&&"down"===t&&S(i,"above"),y&&r&&"up"===t&&S(i,"below"),o.stepEnter&&!M[i]&&(o.stepEnter(a,f),x&&n({id:s,index:i,state:"enter"}),E&&(M[i]=!0)),h&&N(e)}function P(e,t){var r=A(e),i={element:e,index:r,direction:t};h&&("down"===t&&f[r].progress<1?N(e,1):"up"===t&&f[r].progress>0&&N(e,0)),f[r].direction=t,f[r].state="exit",o.stepExit(i,f),x&&n({id:s,index:r,state:"exit"})}function R(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=A(o),u=f[l];n&&a<=0&&c>=0&&"down"===I&&"enter"!==u.state&&_(o,I),!n&&a>0&&"up"===I&&"enter"===u.state&&P(o,I)}function T(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=A(o),u=f[l];n&&a<=0&&c>=0&&"up"===I&&"enter"!==u.state&&_(o,I),!n&&c<0&&"down"===I&&"enter"===u.state&&P(o,I)}function Y(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=A(r),i=f[o];n&&"down"===I&&"down"!==i.direction&&"enter"!==i.state&&(_(r,"down"),P(r,"down"))}function j(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=A(r),i=f[o];n&&"up"===I&&"down"===i.direction&&"enter"!==i.state&&(_(r,"up"),P(r,"up"))}function q(e){var t=e[0];C();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-d>=0&&N(i,+r.toFixed(3))}function F(){i.stepProgress=a.map(function(e,t){var n=c[t]-d+"px 0px "+(-p+d)+"px 0px",r=function(e){for(var t=Math.ceil(e/m),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(c[t]),o=new IntersectionObserver(q,{rootMargin:n,threshold:r});return o.observe(e),o})}function V(){r.forEach(k),i.viewportAbove=a.map(function(e,t){var n=v-l[t],r=d-p-c[t],o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.viewportBelow=a.map(function(e,t){var n=-d-c[t],r=d-p+c[t]+v,o=new IntersectionObserver(j,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.stepAbove=a.map(function(e,t){var n=-d+c[t],r=new IntersectionObserver(R,{rootMargin:n+"px 0px "+(d-p)+"px 0px"});return r.observe(e),r}),i.stepBelow=a.map(function(e,t){var n=-d,r=d-p+c[t],o=new IntersectionObserver(T,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),h&&F()}function z(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:z(e.parentNode))}var D={};return D.setup=function(e){var n=e.step,r=e.offset;void 0===r&&(r=.5);var o=e.progress;void 0===o&&(o=!1);var i=e.threshold;void 0===i&&(i=4);var c=e.debug;void 0===c&&(c=!1);var l=e.order;void 0===l&&(l=!0);var d,p,v,g,w,I=e.once;if(void 0===I&&(I=!1),p=(d="abcdefghijklmnopqrstuv").length,v=Date.now(),s=""+[0,0,0].map(function(e){return d[Math.floor(Math.random()*p)]}).join("")+v,g=n,void 0===w&&(w=document),!(a="string"==typeof g?Array.from(w.querySelectorAll(g)):g instanceof Element?[g]:g instanceof NodeList?Array.from(g):g instanceof Array?g:[]).length)return console.error("scrollama error: no step elements"),D;var M=a.reduce(function(e,t){return e||z(t.parentNode)},!1);return M&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",M),x=c,h=o,y=l,E=I,D.offsetTrigger(r),m=Math.max(1,+i),b=!0,x&&t({id:s,stepEl:a,offsetVal:u}),a.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),f=a.map(function(){return{direction:null,state:null,progress:0}}),B(),D.enable(),D},D.resize=function(){return B(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(o).forEach(function(e){o[e]=null}),Object.keys(i).forEach(function(e){i[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."),u=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),u)},D.onStepEnter=function(e){return"function"==typeof e?o.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?o.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?o.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=[],l=[],f=[],u=[],d=0,p=0,v=0,g=0,m=0,b=0,w=!1,h=!1,x=!1,y=!1,E=!1,M=!1,O="down",S=[];function A(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function I(e){return+e.getAttribute("data-scrollama-index")}function C(){window.pageYOffset>m?O="down":window.pageYOffset<m&&(O="up"),m=window.pageYOffset}function H(e){s[e]&&s[e].forEach(function(e){return e.disconnect()})}function k(){var e,t;v=window.innerHeight,e=document.body,t=document.documentElement,g=Math.max(e.scrollHeight,e.offsetHeight,t.clientHeight,t.scrollHeight,t.offsetHeight),p=d*v,w&&(l=c.map(function(e){return e.getBoundingClientRect().height}),f=c.map(A),h&&z()),x&&r({id:a,stepOffsetHeight:l,offsetMargin:p,offsetVal:d})}function q(e){if(e&&!h){if(!w)return console.error("scrollama error: enable() called before scroller was ready"),void(h=!1);z()}!e&&h&&t.forEach(H),h=e}function _(e,t){var n=I(e);void 0!==t&&(u[n].progress=t);var r={element:e,index:n,progress:u[n].progress};"enter"===u[n].state&&i.stepProgress(r)}function N(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=u[n];"enter"!==r.state&&"down"!==r.direction?(P(c[n],"down",!1),R(c[n],"down")):"enter"===r.state&&R(c[n],"down")}else if("below"===t)for(var o=u.length-1;o>e;o-=1){var i=u[o];"enter"===i.state&&R(c[o],"up"),"down"===i.direction&&(P(c[o],"up",!1),R(c[o],"up"))}}function P(e,t,n){void 0===n&&(n=!0);var r=I(e),s={element:e,index:r,direction:t};u[r].direction=t,u[r].state="enter",E&&n&&"down"===t&&N(r,"above"),E&&n&&"up"===t&&N(r,"below"),i.stepEnter&&!S[r]&&(i.stepEnter(s,u),x&&o({id:a,index:r,state:"enter"}),M&&(S[r]=!0)),y&&_(e)}function R(e,t){var n=I(e),r={element:e,index:n,direction:t};y&&("down"===t&&u[n].progress<1?_(e,1):"up"===t&&u[n].progress>0&&_(e,0)),u[n].direction=t,u[n].state="exit",i.stepExit(r,u),x&&o({id:a,index:n,state:"exit"})}function V(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"down"===O&&"enter"!==f.state&&P(o,O),!n&&a>0&&"up"===O&&"enter"===f.state&&R(o,O)}function B(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-p,c=s-p,l=I(o),f=u[l];n&&a<=0&&c>=0&&"up"===O&&"enter"!==f.state&&P(o,O),!n&&c<0&&"down"===O&&"enter"===f.state&&R(o,O)}function T(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"down"===O&&"down"!==i.direction&&"enter"!==i.state&&(P(r,"down"),R(r,"down"))}function Y(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=I(r),i=u[o];n&&"up"===O&&"down"===i.direction&&"enter"!==i.state&&(P(r,"up"),R(r,"up"))}function j(e){var t=e[0];C();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 F(){s.stepProgress=c.map(function(e,t){var n=l[t]-p+"px 0px "+(-v+p)+"px 0px",r=function(e){for(var t=Math.ceil(e/b),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(l[t]),o=new IntersectionObserver(j,{rootMargin:n,threshold:r});return o.observe(e),o})}function z(){t.forEach(H),s.viewportAbove=c.map(function(e,t){var n=g-f[t],r=p-v-l[t],o=new IntersectionObserver(T,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.viewportBelow=c.map(function(e,t){var n=-p-l[t],r=p-v+l[t]+g,o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),s.stepAbove=c.map(function(e,t){var n=-p+l[t],r=new IntersectionObserver(V,{rootMargin:n+"px 0px "+(p-v)+"px 0px"});return r.observe(e),r}),s.stepBelow=c.map(function(e,t){var n=-p,r=p-v+l[t],o=new IntersectionObserver(B,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),y&&F()}function D(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:D(e.parentNode))}var L={};return L.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 l=t.debug;void 0===l&&(l=!1);var f=t.order;void 0===f&&(f=!0);var p,v,g,m,h,O=t.once;if(void 0===O&&(O=!1),v=(p="abcdefghijklmnopqrstuv").length,g=Date.now(),a=""+[0,0,0].map(function(e){return p[Math.floor(Math.random()*v)]}).join("")+g,m=r,void 0===h&&(h=document),!(c="string"==typeof m?e(h.querySelectorAll(m)):m instanceof Element?e([m]):m instanceof NodeList?e(m):m instanceof Array?m:[]).length)return console.error("scrollama error: no step elements"),L;var S=c.reduce(function(e,t){return e||D(t.parentNode)},!1);return S&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",S),x=l,y=i,E=f,M=O,L.offsetTrigger(o),b=Math.max(1,+s),w=!0,x&&n({id:a,stepEl:c,offsetVal:d}),c.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),u=c.map(function(){return{direction:null,state:null,progress:0}}),k(),L.enable(),L},L.resize=function(){return k(),L},L.enable=function(){return q(!0),L},L.disable=function(){return q(!1),L},L.destroy=function(){q(!1),Object.keys(i).forEach(function(e){i[e]=null}),Object.keys(s).forEach(function(e){s[e]=null})},L.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),L):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),d)},L.onStepEnter=function(e){return"function"==typeof e?i.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),L},L.onStepExit=function(e){return"function"==typeof e?i.stepExit=e:console.error("scrollama error: onStepExit requires a function"),L},L.onStepProgress=function(e){return"function"==typeof e?i.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),L},L}}); | ||
| !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){return"scrollama__debug-offset--"+e}function t(t){!function(t){var n=t.id,r=t.offsetVal,o=t.stepClass,i=document.createElement("div");i.id=e(n),i.className="scrollama__debug-offset",i.style.position="fixed",i.style.left="0",i.style.width="100%",i.style.height="0",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:t.id,offsetVal:t.offsetVal,stepClass:t.stepEl[0].className})}function n(e){var t=e.id,n=e.index,r=e.state,o="scrollama__debug-step--"+t+"-"+n,i=document.getElementById(o+"_above"),s=document.getElementById(o+"_below"),a="enter"===r?"block":"none";i&&(i.style.display=a),s&&(s.style.display=a)}return function(){var r=["stepAbove","stepBelow","stepProgress","viewportAbove","viewportBelow"],o={stepEnter:function(){},stepExit:function(){},stepProgress:function(){}},i={},s=null,a=[],c=[],l=[],f=[],u=0,d=0,p=0,v=0,g=0,m=0,b=!1,w=!1,x=!1,h=!1,y=!1,E=!1,I="down",M=[];function O(e){return e.getBoundingClientRect().top+window.pageYOffset-(document.body.clientTop||0)}function A(e){return+e.getAttribute("data-scrollama-index")}function C(){window.pageYOffset>g?I="down":window.pageYOffset<g&&(I="up"),g=window.pageYOffset}function k(e){i[e]&&i[e].forEach(function(e){return e.disconnect()})}function B(){var t,n;p=window.innerHeight,t=document.body,n=document.documentElement,v=Math.max(t.scrollHeight,t.offsetHeight,n.clientHeight,n.scrollHeight,n.offsetHeight),d=u*p,b&&(c=a.map(function(e){return e.getBoundingClientRect().height}),l=a.map(O),w&&V()),x&&function(t){var n=t.id,r=t.offsetMargin,o=e(n);document.getElementById(o).style.top=r+"px"}({id:s,stepOffsetHeight:c,offsetMargin:d,offsetVal:u})}function H(e){if(e&&!w){if(!b)return console.error("scrollama error: enable() called before scroller was ready"),void(w=!1);V()}!e&&w&&r.forEach(k),w=e}function N(e,t){var n=A(e);void 0!==t&&(f[n].progress=t);var r={element:e,index:n,progress:f[n].progress};"enter"===f[n].state&&o.stepProgress(r)}function S(e,t){if("above"===t)for(var n=0;n<e;n+=1){var r=f[n];"enter"!==r.state&&"down"!==r.direction?(_(a[n],"down",!1),P(a[n],"down")):"enter"===r.state&&P(a[n],"down")}else if("below"===t)for(var o=f.length-1;o>e;o-=1){var i=f[o];"enter"===i.state&&P(a[o],"up"),"down"===i.direction&&(_(a[o],"up",!1),P(a[o],"up"))}}function _(e,t,r){void 0===r&&(r=!0);var i=A(e),a={element:e,index:i,direction:t};f[i].direction=t,f[i].state="enter",y&&r&&"down"===t&&S(i,"above"),y&&r&&"up"===t&&S(i,"below"),o.stepEnter&&!M[i]&&(o.stepEnter(a,f),x&&n({id:s,index:i,state:"enter"}),E&&(M[i]=!0)),h&&N(e)}function P(e,t){var r=A(e),i={element:e,index:r,direction:t};h&&("down"===t&&f[r].progress<1?N(e,1):"up"===t&&f[r].progress>0&&N(e,0)),f[r].direction=t,f[r].state="exit",o.stepExit(i,f),x&&n({id:s,index:r,state:"exit"})}function R(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=A(o),u=f[l];n&&a<=0&&c>=0&&"down"===I&&"enter"!==u.state&&_(o,I),!n&&a>0&&"up"===I&&"enter"===u.state&&P(o,I)}function T(e){var t=e[0];C();var n=t.isIntersecting,r=t.boundingClientRect,o=t.target,i=r.top,s=r.bottom,a=i-d,c=s-d,l=A(o),u=f[l];n&&a<=0&&c>=0&&"up"===I&&"enter"!==u.state&&_(o,I),!n&&c<0&&"down"===I&&"enter"===u.state&&P(o,I)}function Y(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=A(r),i=f[o];n&&"down"===I&&"down"!==i.direction&&"enter"!==i.state&&(_(r,"down"),P(r,"down"))}function j(e){var t=e[0];C();var n=t.isIntersecting,r=t.target,o=A(r),i=f[o];n&&"up"===I&&"down"===i.direction&&"enter"!==i.state&&(_(r,"up"),P(r,"up"))}function q(e){var t=e[0];C();var n=t.isIntersecting,r=t.intersectionRatio,o=t.boundingClientRect,i=t.target,s=o.bottom;n&&s-d>=0&&N(i,+r.toFixed(3))}function F(){i.stepProgress=a.map(function(e,t){var n=c[t]-d+"px 0px "+(-p+d)+"px 0px",r=function(e){for(var t=Math.ceil(e/m),n=[],r=1/t,o=0;o<t;o+=1)n.push(o*r);return n}(c[t]),o=new IntersectionObserver(q,{rootMargin:n,threshold:r});return o.observe(e),o})}function V(){r.forEach(k),i.viewportAbove=a.map(function(e,t){var n=v-l[t],r=d-p-c[t],o=new IntersectionObserver(Y,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.viewportBelow=a.map(function(e,t){var n=-d-c[t],r=d-p+c[t]+v,o=new IntersectionObserver(j,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),i.stepAbove=a.map(function(e,t){var n=-d+c[t],r=new IntersectionObserver(R,{rootMargin:n+"px 0px "+(d-p)+"px 0px"});return r.observe(e),r}),i.stepBelow=a.map(function(e,t){var n=-d,r=d-p+c[t],o=new IntersectionObserver(T,{rootMargin:n+"px 0px "+r+"px 0px"});return o.observe(e),o}),h&&F()}function z(e){return!(!e||1!==e.nodeType)&&(function(e){var t=window.getComputedStyle(e);return("scroll"===t.overflowY||"auto"===t.overflowY)&&e.scrollHeight>e.clientHeight}(e)?e:z(e.parentNode))}var D={};return D.setup=function(e){var n=e.step,r=e.offset;void 0===r&&(r=.5);var o=e.progress;void 0===o&&(o=!1);var i=e.threshold;void 0===i&&(i=4);var c=e.debug;void 0===c&&(c=!1);var l=e.order;void 0===l&&(l=!0);var d,p,v,g,w,I=e.once;if(void 0===I&&(I=!1),p=(d="abcdefghijklmnopqrstuv").length,v=Date.now(),s=""+[0,0,0].map(function(e){return d[Math.floor(Math.random()*p)]}).join("")+v,g=n,void 0===w&&(w=document),!(a="string"==typeof g?Array.from(w.querySelectorAll(g)):g instanceof Element?[g]:g instanceof NodeList?Array.from(g):g instanceof Array?g:[]).length)return console.error("scrollama error: no step elements"),D;var M=a.reduce(function(e,t){return e||z(t.parentNode)},!1);return M&&console.error("scrollama error: step elements cannot be children of a scrollable element. Remove any css on the parent element with overflow: scroll; or overflow: auto; on elements with fixed height.",M),x=c,h=o,y=l,E=I,D.offsetTrigger(r),m=Math.max(1,+i),b=!0,x&&t({id:s,stepEl:a,offsetVal:u}),a.forEach(function(e,t){return e.setAttribute("data-scrollama-index",t)}),f=a.map(function(){return{direction:null,state:null,progress:0}}),B(),D.enable(),D},D.resize=function(){return B(),D},D.enable=function(){return H(!0),D},D.disable=function(){return H(!1),D},D.destroy=function(){H(!1),Object.keys(o).forEach(function(e){o[e]=null}),Object.keys(i).forEach(function(e){i[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."),u=Math.min(Math.max(0,e),1),D):(isNaN(e)&&console.error("scrollama error: offset value is not a number. Fallbacks to 0."),u)},D.onStepEnter=function(e){return"function"==typeof e?o.stepEnter=e:console.error("scrollama error: onStepEnter requires a function"),D},D.onStepExit=function(e){return"function"==typeof e?o.stepExit=e:console.error("scrollama error: onStepExit requires a function"),D},D.onStepProgress=function(e){return"function"==typeof e?o.stepProgress=e:console.error("scrollama error: onStepProgress requires a function"),D},D}}); |
| { | ||
| "name": "scrollama", | ||
| "version": "2.1.3", | ||
| "version": "2.1.4", | ||
| "description": "Lightweight scrollytelling library using IntersectionObserver", | ||
| "main": "build/scrollama.js", | ||
| "browser": "build/scrollama.js", | ||
| "types": "index.d.ts", | ||
| "scripts": { | ||
@@ -8,0 +9,0 @@ "dev": "cross-env NODE_ENV=development rollup -w -c", |
@@ -221,2 +221,4 @@ ###### scrollama.js | ||
| * [Ryshackleton](https://github.com/Ryshackleton) | ||
| * [steven0811](https://github.com/steven0811) | ||
| * [smnarnold](https://github.com/smnarnold) | ||
@@ -223,0 +225,0 @@ ### License |
@@ -1,6 +0,2 @@ | ||
| function getStepId({ id, i }) { | ||
| return `scrollama__debug-step--${id}-${i}`; | ||
| } | ||
| function getOffsetId({ id }) { | ||
| function getOffsetId(id) { | ||
| return `scrollama__debug-offset--${id}`; | ||
@@ -10,12 +6,10 @@ } | ||
| // SETUP | ||
| function setupOffset({ id, offsetVal, stepClass }) { | ||
| const el = document.createElement('div'); | ||
| el.setAttribute('id', getOffsetId({ id })); | ||
| el.setAttribute('class', 'scrollama__debug-offset'); | ||
| el.id = getOffsetId(id); | ||
| el.className = 'scrollama__debug-offset'; | ||
| el.style.position = 'fixed'; | ||
| el.style.left = '0'; | ||
| el.style.width = '100%'; | ||
| el.style.height = '0px'; | ||
| el.style.height = '0'; | ||
| el.style.borderTop = '2px dashed black'; | ||
@@ -36,3 +30,3 @@ el.style.zIndex = '9999'; | ||
| function setup({ id, offsetVal, stepEl }) { | ||
| const stepClass = stepEl[0].getAttribute('class'); | ||
| const stepClass = stepEl[0].className; | ||
| setupOffset({ id, offsetVal, stepClass }); | ||
@@ -42,16 +36,12 @@ } | ||
| // UPDATE | ||
| function updateOffset({ id, offsetMargin, offsetVal }) { | ||
| const idVal = getOffsetId({ id }); | ||
| const el = document.querySelector(`#${idVal}`); | ||
| function update({ id, offsetMargin }) { | ||
| const idVal = getOffsetId(id); | ||
| const el = document.getElementById(idVal); | ||
| el.style.top = `${offsetMargin}px`; | ||
| } | ||
| function update({ id, stepOffsetHeight, offsetMargin, offsetVal }) { | ||
| updateOffset({ id, offsetMargin }); | ||
| } | ||
| function notifyStep({ id, index, state }) { | ||
| const idVal = getStepId({ id, i: index }); | ||
| const elA = document.querySelector(`#${idVal}_above`); | ||
| const elB = document.querySelector(`#${idVal}_below`); | ||
| const prefix = `scrollama__debug-step--${id}-${index}`; | ||
| const elA = document.getElementById(`${prefix}_above`); | ||
| const elB = document.getElementById(`${prefix}_below`); | ||
| const display = state === 'enter' ? 'block' : 'none'; | ||
@@ -58,0 +48,0 @@ |
| // DOM helper functions | ||
| // private | ||
| function selectionToArray(selection) { | ||
| const len = selection.length; | ||
| const result = []; | ||
| for (let i = 0; i < len; i += 1) { | ||
| result.push(selection[i]); | ||
| } | ||
| return result; | ||
| } | ||
| // public | ||
| function select(selector) { | ||
| if (selector instanceof Element) return selector; | ||
| else if (typeof selector === 'string') | ||
| return document.querySelector(selector); | ||
| return null; | ||
| } | ||
| function selectAll(selector, parent = document) { | ||
| if (typeof selector === 'string') { | ||
| return selectionToArray(parent.querySelectorAll(selector)); | ||
| return Array.from(parent.querySelectorAll(selector)); | ||
| } else if (selector instanceof Element) { | ||
| return selectionToArray([selector]); | ||
| return [selector]; | ||
| } else if (selector instanceof NodeList) { | ||
| return selectionToArray(selector); | ||
| return Array.from(selector); | ||
| } else if (selector instanceof Array) { | ||
@@ -34,18 +17,2 @@ return selector; | ||
| function find(el, selector) { | ||
| return selectionToArray(el.querySelectorAll(selector)); | ||
| } | ||
| function removeClass(el, className) { | ||
| el.classList.remove(className); | ||
| } | ||
| function addClass(el, className) { | ||
| el.classList.add(className); | ||
| } | ||
| function hasClass(el, className) { | ||
| return el.classList.contains(className); | ||
| } | ||
| export { select, selectAll, find, removeClass, addClass, hasClass }; | ||
| export { selectAll }; |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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 package files
- increased by3.57%
29
- Number of lines in readme file
- increased by0.82%
246
Worsened metrics
- Total package byte prevSize
- decreased by-0.22%
373824
- Lines of code
- decreased by-1.36%
1380
No dependency changes