@svelte-plugins/viewable - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

lib/index.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="undefined"!=typeof globalThis?globalThis:t||self)["@svelte-plugins/viewable"]=e()}(this,(function(){"use strict";function t(){}function e(t){return t()}function n(){return Object.create(null)}function o(t){t.forEach(e)}function r(t){return"function"==typeof t}function i(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function c(t,e,n,o){return t[1]&&o?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](o(e))):n.ctx}function s(t,e,n,o,r,i,s){const l=function(t,e,n,o){if(t[2]&&o){const r=t[2](o(n));if(void 0===e.dirty)return r;if("object"==typeof r){const t=[],n=Math.max(e.dirty.length,r.length);for(let o=0;o<n;o+=1)t[o]=e.dirty[o]|r[o];return t}return e.dirty|r}return e.dirty}(e,o,r,i);if(l){const r=c(e,n,o,s);t.p(r,l)}}function l(t){t.parentNode.removeChild(t)}let u;function a(t){u=t}function f(){if(!u)throw new Error("Function called outside component initialization");return u}const d=[],h=[],p=[],g=[],$=Promise.resolve();let m=!1;function b(){m||(m=!0,$.then(w))}function y(t){p.push(t)}let v=!1;const x=new Set;function w(){if(!v){v=!0;do{for(let t=0;t<d.length;t+=1){const e=d[t];a(e),_(e.$$)}for(a(null),d.length=0;h.length;)h.pop()();for(let t=0;t<p.length;t+=1){const e=p[t];x.has(e)||(x.add(e),e())}p.length=0}while(d.length);for(;g.length;)g.pop()();m=!1,v=!1,x.clear()}}function _(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(y)}}const M=new Set;function k(t,e){t&&t.i&&(M.delete(t),t.i(e))}function O(i,c,s,f,h,p,g=[-1]){const $=u;a(i);const m=i.$$={fragment:null,ctx:null,props:p,update:t,not_equal:h,bound:n(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map($?$.$$.context:[]),callbacks:n(),dirty:g,skip_bound:!1};let v=!1;if(m.ctx=s?s(i,c.props||{},((t,e,...n)=>{const o=n.length?n[0]:e;return m.ctx&&h(m.ctx[t],m.ctx[t]=o)&&(!m.skip_bound&&m.bound[t]&&m.bound[t](o),v&&function(t,e){-1===t.$$.dirty[0]&&(d.push(t),b(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}(i,t)),e})):[],m.update(),v=!0,o(m.before_update),m.fragment=!!f&&f(m.ctx),c.target){if(c.hydrate){const t=(x=c.target,Array.from(x.childNodes));m.fragment&&m.fragment.l(t),t.forEach(l)}else m.fragment&&m.fragment.c();c.intro&&k(i.$$.fragment),function(t,n,i,c){const{fragment:s,on_mount:l,on_destroy:u,after_update:a}=t.$$;s&&s.m(n,i),c||y((()=>{const n=l.map(e).filter(r);u?u.push(...n):o(n),t.$$.on_mount=[]})),a.forEach(y)}(i,c.target,c.anchor,c.customElement),w()}var x;a($)}function E(t){let e;const n=t[11].default,o=function(t,e,n,o){if(t){const r=c(t,e,n,o);return t[0](r)}}(n,t,t[10],null);return{c(){o&&o.c()},m(t,n){o&&o.m(t,n),e=!0},p(t,[e]){o&&o.p&&1024&e&&s(o,n,t,t[10],e,null,null)},i(t){e||(k(o,t),e=!0)},o(t){!function(t,e,n,o){if(t&&t.o){if(M.has(t))return;M.add(t),(void 0).c.push((()=>{M.delete(t),o&&(n&&t.d(1),o())})),t.o(e)}}(o,t),e=!1},d(t){o&&o.d(t)}}}function D(t,e,n){let{$$slots:o={},$$scope:r}=e,{element:i}=e,{rules:c}=e,{debug:s=!1}=e,{duration:l=0}=e,{percent:u=0}=e,{percentX:a=0}=e,{percentY:d=0}=e,{intervalRate:h=200}=e,{gridSize:p=20}=e,{disableObstructionDetection:g=!1}=e,m=null,y=null;const v=[],x=(...t)=>s&&console.log(...t),w=(t,e)=>{const o=(t=>{const e=p+1,n=Math.floor(t.width/e),o=Math.floor(t.height/e),r=Math.max(0,t.left),i=t.top,c=[];for(let t=1;t<e;t++){const s=r+n*t;for(let t=1;t<e;t++){const e=i+o*t;c[c.length]=[s,e]}}return c})(t);let r=0;for(let t=0,e=o.length;t<e;t++){const e=o[t][0],n=o[t][1],c=document.elementFromPoint(e,n);c===i||i.contains(c)||r++}const c=100*e,s=100-r/o.length*100;return n(1,u=Math.round(Math.ceil(s))),!(s>=c)},_=t=>{const e=(()=>{const t=document.body,e=document.documentElement;return{height:window.innerHeight||e.clientHeight||t&&t.clientHeight,width:window.innerWidth||e.clientWidth||t&&t.clientWidth}})(),o=i.getBoundingClientRect(),r=Math.max(0,Math.min(o.bottom,e.height)-Math.max(o.top,0)),c=Math.max(0,Math.min(o.right,e.width)-Math.max(o.left,0)),s=r/(o.height||i.offsetHeight)||0,l=c/(o.width||i.offsetWidth)||0,f=Math.max(0,s+l-1);return n(2,a=Math.round(Math.ceil(100*l))),n(3,d=Math.round(Math.ceil(100*s))),n(1,u=Math.round(Math.ceil(100*f))),!g&&w(o,t)?0:f},M=()=>{const t=v.length;for(let e=0;e<t;e++){const t=v[e];if(t)if(_(t.threshold)<t.threshold)t.history=null;else if(t.history||(n(0,l=0),t.history=Date.now()),n(0,l=(Date.now()-t.history)/1e3),x(`[ Tracking - ${l} - ${t.rule}]`),l>=t.duration&&(t.observer&&t.observer.unobserve(i),t.callback(t),t.history=Date.now(),v.splice(e,1),e-=1,x(v),!v.length)){x(`[ Finished - ${t.history} ]`),y&&(clearInterval(y),y=null);break}}},k=t=>{const e=e=>{const n=e[0];n.isIntersecting?n.isIntersecting&&!y&&(y=setInterval(M,h),M()):t.history=null};if(!t.observer){const n=new IntersectionObserver(e,{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]});n.observe(i),t.observer=n}};var O;return O=async()=>{await(b(),$),null===i||m||((()=>{for(let t in c){const e=c[t],{duration:n=0,percentage:o=0,fn:r,...i}=e,s={...i,threshold:o/100,duration:n,callback:function(t){r(t),x("[ Viewable Rule ]\n"+JSON.stringify({...t},null,2))},rule:t,history:null};v.push(s),k(s)}})(),m=!0)},f().$$.after_update.push(O),function(t){f().$$.on_destroy.push(t)}((()=>{v.forEach((t=>{t.observer&&t.observer.disconnect()}))})),t.$$set=t=>{"element"in t&&n(4,i=t.element),"rules"in t&&n(5,c=t.rules),"debug"in t&&n(6,s=t.debug),"duration"in t&&n(0,l=t.duration),"percent"in t&&n(1,u=t.percent),"percentX"in t&&n(2,a=t.percentX),"percentY"in t&&n(3,d=t.percentY),"intervalRate"in t&&n(7,h=t.intervalRate),"gridSize"in t&&n(8,p=t.gridSize),"disableObstructionDetection"in t&&n(9,g=t.disableObstructionDetection),"$$scope"in t&&n(10,r=t.$$scope)},[l,u,a,d,i,c,s,h,p,g,r,o]}return class extends class{$destroy(){!function(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=t}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}{constructor(t){super(),O(this,t,D,E,i,{element:4,rules:5,debug:6,duration:0,percent:1,percentX:2,percentY:3,intervalRate:7,gridSize:8,disableObstructionDetection:9})}}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self)["@svelte-plugins/viewable"]=e()}(this,(function(){"use strict";function t(){}function e(t){return t()}function n(){return Object.create(null)}function o(t){t.forEach(e)}function r(t){return"function"==typeof t}function i(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function c(t,e,n,o){return t[1]&&o?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](o(e))):n.ctx}function s(t,e,n,o,r,i,s){const l=function(t,e,n,o){if(t[2]&&o){const r=t[2](o(n));if(void 0===e.dirty)return r;if("object"==typeof r){const t=[],n=Math.max(e.dirty.length,r.length);for(let o=0;o<n;o+=1)t[o]=e.dirty[o]|r[o];return t}return e.dirty|r}return e.dirty}(e,o,r,i);if(l){const r=c(e,n,o,s);t.p(r,l)}}function l(t){t.parentNode.removeChild(t)}let u;function a(t){u=t}function f(){if(!u)throw new Error("Function called outside component initialization");return u}const d=[],h=[],p=[],g=[],$=Promise.resolve();let m=!1;function b(){m||(m=!0,$.then(w))}function y(t){p.push(t)}let v=!1;const x=new Set;function w(){if(!v){v=!0;do{for(let t=0;t<d.length;t+=1){const e=d[t];a(e),_(e.$$)}for(a(null),d.length=0;h.length;)h.pop()();for(let t=0;t<p.length;t+=1){const e=p[t];x.has(e)||(x.add(e),e())}p.length=0}while(d.length);for(;g.length;)g.pop()();m=!1,v=!1,x.clear()}}function _(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(y)}}const M=new Set;function k(t,e){t&&t.i&&(M.delete(t),t.i(e))}function O(i,c,s,f,h,p,g=[-1]){const $=u;a(i);const m=i.$$={fragment:null,ctx:null,props:p,update:t,not_equal:h,bound:n(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map($?$.$$.context:[]),callbacks:n(),dirty:g,skip_bound:!1};let v=!1;if(m.ctx=s?s(i,c.props||{},((t,e,...n)=>{const o=n.length?n[0]:e;return m.ctx&&h(m.ctx[t],m.ctx[t]=o)&&(!m.skip_bound&&m.bound[t]&&m.bound[t](o),v&&function(t,e){-1===t.$$.dirty[0]&&(d.push(t),b(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}(i,t)),e})):[],m.update(),v=!0,o(m.before_update),m.fragment=!!f&&f(m.ctx),c.target){if(c.hydrate){const t=(x=c.target,Array.from(x.childNodes));m.fragment&&m.fragment.l(t),t.forEach(l)}else m.fragment&&m.fragment.c();c.intro&&k(i.$$.fragment),function(t,n,i,c){const{fragment:s,on_mount:l,on_destroy:u,after_update:a}=t.$$;s&&s.m(n,i),c||y((()=>{const n=l.map(e).filter(r);u?u.push(...n):o(n),t.$$.on_mount=[]})),a.forEach(y)}(i,c.target,c.anchor,c.customElement),w()}var x;a($)}function E(t){let e;const n=t[11].default,o=function(t,e,n,o){if(t){const r=c(t,e,n,o);return t[0](r)}}(n,t,t[10],null);return{c(){o&&o.c()},m(t,n){o&&o.m(t,n),e=!0},p(t,[e]){o&&o.p&&1024&e&&s(o,n,t,t[10],e,null,null)},i(t){e||(k(o,t),e=!0)},o(t){!function(t,e,n,o){if(t&&t.o){if(M.has(t))return;M.add(t),(void 0).c.push((()=>{M.delete(t),o&&(n&&t.d(1),o())})),t.o(e)}}(o,t),e=!1},d(t){o&&o.d(t)}}}function D(t,e,n){let{$$slots:o={},$$scope:r}=e,{element:i}=e,{rules:c}=e,{debug:s=!1}=e,{duration:l=0}=e,{percent:u=0}=e,{percentX:a=0}=e,{percentY:d=0}=e,{intervalRate:h=200}=e,{gridSize:p=20}=e,{disableObstructionDetection:g=!1}=e,m=null,y=null;const v=[],x=(...t)=>s&&console.log(...t),w=(t,e)=>{const o=(t=>{const e=p+1,n=Math.floor(t.width/e),o=Math.floor(t.height/e),r=Math.max(0,t.left),i=t.top,c=[];for(let t=1;t<e;t++){const s=r+n*t;for(let t=1;t<e;t++){const e=i+o*t;c[c.length]=[s,e]}}return c})(t);let r=0;for(let t=0,e=o.length;t<e;t++){const e=o[t][0],n=o[t][1],c=document.elementFromPoint(e,n);c===i||i.contains(c)||r++}const c=100*e,s=100-r/o.length*100;return n(1,u=Math.round(Math.ceil(s))),!(s>=c)},_=t=>{const e=(()=>{const t=document.body,e=document.documentElement;return{height:window.innerHeight||e.clientHeight||t&&t.clientHeight,width:window.innerWidth||e.clientWidth||t&&t.clientWidth}})(),o=i.getBoundingClientRect(),r=Math.max(0,Math.min(o.bottom,e.height)-Math.max(o.top,0)),c=Math.max(0,Math.min(o.right,e.width)-Math.max(o.left,0)),s=r/(o.height||i.offsetHeight)||0,l=c/(o.width||i.offsetWidth)||0,f=Math.max(0,s+l-1);return n(2,a=Math.round(Math.ceil(100*l))),n(3,d=Math.round(Math.ceil(100*s))),n(1,u=Math.round(Math.ceil(100*f))),!g&&w(o,t)?0:f},M=()=>{const t=v.length;for(let e=0;e<t;e++){const t=v[e];if(t)if(_(t.threshold)<t.threshold)t.history=null;else if(t.history||(n(0,l=0),t.history=Date.now()),n(0,l=(Date.now()-t.history)/1e3),x(`[ Tracking - ${l} - ${t.rule}]`),l>=t.duration&&(t.observer&&t.observer.unobserve(i),t.callback(t),t.history=Date.now(),v.splice(e,1),e-=1,x(v),!v.length)){x(`[ Finished - ${t.history} ]`),y&&(clearInterval(y),y=null);break}}},k=t=>{const e=e=>{const n=e[0];n.isIntersecting?n.isIntersecting&&!y&&(y=setInterval(M,h),M()):t.history=null};if(!t.observer){const n=new IntersectionObserver(e,{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]});n.observe(i),t.observer=n}};var O;return O=async()=>{await(b(),$),null===i||m||((()=>{for(let t in c){const e=c[t],{duration:n=0,percentage:o=0,fn:r,...i}=e,s={...i,percentage:o,threshold:o/100,duration:n,callback:function(t){r(t),x("[ Viewable Rule ]\n"+JSON.stringify({...t},null,2))},rule:t,history:null};v.push(s),k(s)}})(),m=!0)},f().$$.after_update.push(O),function(t){f().$$.on_destroy.push(t)}((()=>{v.forEach((t=>{t.observer&&t.observer.disconnect()}))})),t.$$set=t=>{"element"in t&&n(4,i=t.element),"rules"in t&&n(5,c=t.rules),"debug"in t&&n(6,s=t.debug),"duration"in t&&n(0,l=t.duration),"percent"in t&&n(1,u=t.percent),"percentX"in t&&n(2,a=t.percentX),"percentY"in t&&n(3,d=t.percentY),"intervalRate"in t&&n(7,h=t.intervalRate),"gridSize"in t&&n(8,p=t.gridSize),"disableObstructionDetection"in t&&n(9,g=t.disableObstructionDetection),"$$scope"in t&&n(10,r=t.$$scope)},[l,u,a,d,i,c,s,h,p,g,r,o]}return class extends class{$destroy(){!function(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=t}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}{constructor(t){super(),O(this,t,D,E,i,{element:4,rules:5,debug:6,duration:0,percent:1,percentX:2,percentY:3,intervalRate:7,gridSize:8,disableObstructionDetection:9})}}}));

package.json

 {
   "name": "@svelte-plugins/viewable",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "A simple rule-based approach to tracking element viewability.",

README.md

@@ -1,3 +0,48 @@
-# svelte-viewable
+[![Run unit tests](https://github.com/svelte-plugins/viewable/actions/workflows/run-unit.yml/badge.svg)](https://github.com/svelte-plugins/viewable/actions/workflows/run-unit.yml)
+[![Run integration tests](https://github.com/svelte-plugins/viewable/actions/workflows/run-integration.yml/badge.svg)](https://github.com/svelte-plugins/viewable/actions/workflows/run-integration.yml)
 
+# @svelte-plugins/viewable
+
+A simple rule-based approach to tracking element viewability.
+
+Try it in the [Svelte REPL](https://svelte.dev/repl/47fe04909fd14ee5ad5d02390cc147b1).
+
+## Install
+
+```bash
+yarn add -D @svelte-plugins/viewable
+
+# or with NPM
+
+npm i -D @svelte-plugins/viewable
+```
+
+## Usage
+```svelte
+<script>
+  import Viewable from "@svelte-plugins/viewable";
+
+  const immediately = (definition) => {
+    console.log('element has crossed the viewport');
+  };
+
+  const dwell = ({ percentage, duration }) => {
+    console.log(`${percentage}% of the element was visible for at least ${duration} consecutive seconds.`);
+  };
+
+  const rules = {
+    // do something when the element enters the viewport
+    immediately: { duration: 0, percentage: 0, fn: immediately },
+    // do something when 50% of the element is visible for 4 seconds (consecutively)
+    dwell: { duration: 4.5, percentage: 50, fn: dwell },
+  };
+
+  let element;
+</script>
+
+<Viewable {rules} {element}>
+  <div bind:this={element}>Hello World</div>
+</Viewable>
+```
+
 ## Changelog
@@ -4,0 +49,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29873

increased by5.09%

Lines of code

141

increased by0.71%

Number of lines in readme file

55

increased by450%

No dependency changes