sponlax - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/index.min.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.sponlax=n()}(this,function(){"use strict";var t=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t},n=function(){var t=this;this.defaults={rootMargin:"0px",threshold:0,shouldUnObserve:function(){return!1},inview:function(t){var n=t.$node,e=n.getBoundingClientRect().top,r=n.dataset.speed;n.style.transform="translate3d(0, "+e*parseFloat(r)+"px, 0)"}},this.prevFrame=-1,this.within=function(t){return"true"===t.getAttribute("data-inview")},this.markAsWithin=function(t){return t.setAttribute("data-inview","true")},this.markAsNotWithin=function(t){return t.setAttribute("data-inview","false")},this.loop=function(){var n=t.options.inview;window.pageYOffset!==t.prevFrame?(t.prevFrame=window.pageYOffset,t.blobs.forEach(n),t.handle=requestAnimationFrame(t.loop)):t.handle=requestAnimationFrame(t.loop)},this.onIntersection=function(){return function(n,e){var r=t.options.shouldUnObserve;n.forEach(function(n){var i=n.target;n.isIntersecting?(r(i)&&e.unobserve(i),t.within(i)||t.markAsWithin(i)):t.within(i)&&t.markAsNotWithin(i),t.blobs=t.nodes.filter(t.within).map(function(t){return{$node:t,entry:n}})}),t.blobs.length>0&&null===t.handle&&t.loop(),0===t.blobs.length&&(cancelAnimationFrame(t.handle),t.handle=null)}}};return function e(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"[data-inview]",i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,e),n.call(this),this.nodes=[].concat(function(t){if(Array.isArray(t)){for(var n=0,e=Array(t.length);n<t.length;n++)e[n]=t[n];return e}return Array.from(t)}(document.querySelectorAll(r))).map(function(t,n){return t.setAttribute("data-key",n),t}),this.options=t({},this.defaults,i);var o=this.options,a=o.rootMargin,s=o.threshold,u=new IntersectionObserver(this.onIntersection(),{rootMargin:a,threshold:s});this.nodes.forEach(function(t){return u.observe(t)}),this.blobs=[],this.handle=null}});
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):t.sponlax=n()}(this,function(){"use strict";function t(t){if(Array.isArray(t)){for(var n=0,e=Array(t.length);n<t.length;n++)e[n]=t[n];return e}return Array.from(t)}function n(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}var e=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t},i=function(){var n=this;this.defaults={rootMargin:"0px",threshold:0,shouldUnObserve:function(){return!1},onEnter:function(){},onLeave:function(){},inview:function(){}},this.prevFrame=-1,this.within=function(t){return"true"===t.getAttribute("data-inview")},this.markAsWithin=function(t){return t.setAttribute("data-inview","true")},this.markAsNotWithin=function(t){return t.setAttribute("data-inview","false")},this.loop=function(){if(n.y!==n.prevFrame){n.prevFrame=n.y;var e=n.options.inview;[].concat(t(n.blobs)).forEach(e),n.handle=requestAnimationFrame(n.loop)}else n.handle=requestAnimationFrame(n.loop)},this.update=function(t){n.y=t||window.pageYOffset},this.onIntersection=function(){return function(t,e){var i=n.options,o=i.shouldUnObserve,r=i.onEnter,a=i.onLeave;t.forEach(function(t){var i=t.target;t.isIntersecting?(o(i)&&e.unobserve(i),n.blobs.add(i),r(i),!n.within(i)&&n.markAsWithin(i)):(n.within(i)&&n.markAsNotWithin(i),a(i),n.blobs.delete(i))}),n.blobs.size>0&&null===n.handle&&n.loop(),0===n.blobs.length&&(cancelAnimationFrame(n.handle),n.handle=null)}}};return function o(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"[data-inview]",a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,o),i.call(this),this.nodes=[].concat(t(document.querySelectorAll(r))).map(function(t,n){return t.setAttribute("data-key",n),t}),this.options=e({},this.defaults,a);var s=this.options,u=s.rootMargin,h=s.threshold,l=new IntersectionObserver(this.onIntersection(),{rootMargin:u,threshold:h});this.nodes.forEach(function(t){return l.observe(t)}),this.blobs=new Set,this.handle=null,this.prevFrame=void 0}});

package.json

 {
 	"name": "sponlax",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"main": "dist/index.min.js",
@@ -14,2 +14,3 @@ "devDependencies": {
 		"rollup-plugin-node-resolve": "^3.0.0",
+		"rollup-plugin-filesize": "^1.5.0",
 		"rollup-plugin-uglify": "^2.0.1"
@@ -16,0 +17,0 @@ },

README.md

@@ -9,16 +9,17 @@ # do stuff when shit's in the view
 
-## Usage example
-
-Demo: http://sponlax.surge.sh/
-
 ```
-import 'SponLax' from 'sponlax'
+import SponLax from 'sponlax'
 
 new SponLax('[data-item]', {
-    inview({ $node }) {
+    rootMargin: '0px',
+    threshold: 0,
+    shouldUnObserve: () => false,
+    onEnter: ($node) => {},
+    onLeave: ($node) => {},
+    inview($node) {
         const { top } = $node.getBoundingClientRect()
         const { speed } = $node.dataset
         $node.style.transform = `translate3d(0, ${top * parseFloat(speed)}px, 0)`
-    }
+    },
 })
 ```

No alert changes

Improved metrics

Total package byte prevSize

4822

increased by2.16%

Number of lines in readme file

25

increased by4.17%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes