in-view - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

dist/in-view.min.js

 /*!
- * in-view 0.4.3 - Get notified when a DOM element enters or exits the viewport.
+ * in-view 0.5.0 - Get notified when a DOM element enters or exits the viewport.
  * Copyright (c) 2016 Cam Wiegert <[e-mail]> - https://camwiegert.github.io/in-view
  * License: MIT
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.inView=e():t.inView=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var i=n(3),o=r(i);t.exports=o["default"]},function(t,e){"use strict";function n(t,e){var n=t.getBoundingClientRect(),r=n.top,i=n.right,o=n.bottom,u=n.left,f={t:o,r:window.innerWidth-u,b:window.innerHeight-r,l:i};return f.t>e.top&&f.r>e.right&&f.b>e.bottom&&f.l>e.left}Object.defineProperty(e,"__esModule",{value:!0}),e.inViewport=n},function(t,e){function n(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}t.exports=n},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var i=n(9),o=r(i),u=n(4),f=r(u),c=n(1),s=function(){var t=100,e=["scroll","resize","load"],n={history:[]},r={},i=(0,o["default"])(function(){n.history.forEach(function(t){n[t].check()})},t);e.forEach(function(t){return addEventListener(t,i)}),window.MutationObserver&&new MutationObserver(i).observe(document.body,{attributes:!0,childList:!0,subtree:!0});var u=function(t){if("string"==typeof t){var e=[].slice.call(document.querySelectorAll(t));return n.history.indexOf(t)>-1?n[t].elements=e:(n[t]=(0,f["default"])(e,r),n.history.push(t)),n[t]}};return u.offset=function(t){if(void 0===t)return r;var e=function(t){return"number"==typeof t};return["top","right","bottom","left"].forEach(e(t)?function(e){return r[e]=t}:function(n){return e(t[n])?r[n]=t[n]:null}),r},u.is=function(t){return(0,c.inViewport)(t,r)},u.offset(0),u};e["default"]=s()},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),o=n(1),u=function(){function t(e,n){r(this,t),this.offset=n,this.current=[],this.elements=e,this.handlers={enter:[],exit:[]},this.singles={enter:[],exit:[]}}return i(t,[{key:"check",value:function(){var t=this;return this.elements.forEach(function(e){var n=(0,o.inViewport)(e,t.offset),r=t.current.indexOf(e),i=r>-1,u=n&&!i,f=!n&&i;u&&(t.current.push(e),t.emit("enter",e)),f&&(t.current.splice(r,1),t.emit("exit",e))}),this}},{key:"on",value:function(t,e){return this.handlers[t].push(e),this}},{key:"once",value:function(t,e){return this.singles[t].unshift(e),this}},{key:"emit",value:function(t,e){for(;this.singles[t].length;)this.singles[t].pop()(e);for(var n=this.handlers[t].length;--n>-1;)this.handlers[t][n](e);return this}}]),t}();e["default"]=function(t,e){return new u(t,e)}},function(t,e){(function(e){var n="object"==typeof e&&e&&e.Object===Object&&e;t.exports=n}).call(e,function(){return this}())},function(t,e,n){var r=n(5),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();t.exports=o},function(t,e,n){function r(t,e,n){function r(e){var n=m,r=x;return m=x=void 0,E=e,w=t.apply(r,n)}function a(t){return E=t,j=setTimeout(h,e),_?r(t):w}function l(t){var n=t-O,r=t-E,i=e-n;return M?s(i,g-r):i}function d(t){var n=t-O,r=t-E;return void 0===O||n>=e||n<0||M&&r>=g}function h(){var t=o();return d(t)?p(t):void(j=setTimeout(h,l(t)))}function p(t){return j=void 0,T&&m?r(t):(m=x=void 0,w)}function v(){void 0!==j&&clearTimeout(j),E=0,m=O=x=j=void 0}function y(){return void 0===j?w:p(o())}function b(){var t=o(),n=d(t);if(m=arguments,x=this,O=t,n){if(void 0===j)return a(O);if(M)return j=setTimeout(h,e),r(O)}return void 0===j&&(j=setTimeout(h,e)),w}var m,x,g,w,j,O,E=0,_=!1,M=!1,T=!0;if("function"!=typeof t)throw new TypeError(f);return e=u(e)||0,i(n)&&(_=!!n.leading,M="maxWait"in n,g=M?c(u(n.maxWait)||0,e):g,T="trailing"in n?!!n.trailing:T),b.cancel=v,b.flush=y,b}var i=n(2),o=n(8),u=n(10),f="Expected a function",c=Math.max,s=Math.min;t.exports=r},function(t,e,n){var r=n(6),i=function(){return r.Date.now()};t.exports=i},function(t,e,n){function r(t,e,n){var r=!0,f=!0;if("function"!=typeof t)throw new TypeError(u);return o(n)&&(r="leading"in n?!!n.leading:r,f="trailing"in n?!!n.trailing:f),i(t,e,{leading:r,maxWait:e,trailing:f})}var i=n(7),o=n(2),u="Expected a function";t.exports=r},function(t,e){function n(t){return t}t.exports=n}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.inView=e():t.inView=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var i=n(3),o=r(i);t.exports=o["default"]},function(t,e){"use strict";function n(t,e){var n=t.getBoundingClientRect(),r=n.top,i=n.right,o=n.bottom,u=n.left,f=n.width,s=n.height,c={t:o,r:window.innerWidth-u,b:window.innerHeight-r,l:i},a={x:e.threshold*f,y:e.threshold*s};return c.t>e.offset.top+a.y&&c.r>e.offset.right+a.x&&c.b>e.offset.bottom+a.y&&c.l>e.offset.left+a.x}Object.defineProperty(e,"__esModule",{value:!0}),e.inViewport=n},function(t,e){function n(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}t.exports=n},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var i=n(9),o=r(i),u=n(4),f=r(u),s=n(1),c=function(){var t=100,e=["scroll","resize","load"],n={history:[]},r={offset:{},threshold:0},i=(0,o["default"])(function(){n.history.forEach(function(t){n[t].check()})},t);e.forEach(function(t){return addEventListener(t,i)}),window.MutationObserver&&new MutationObserver(i).observe(document.body,{attributes:!0,childList:!0,subtree:!0});var u=function(t){if("string"==typeof t){var e=[].slice.call(document.querySelectorAll(t));return n.history.indexOf(t)>-1?n[t].elements=e:(n[t]=(0,f["default"])(e,r),n.history.push(t)),n[t]}};return u.offset=function(t){if(void 0===t)return r.offset;var e=function(t){return"number"==typeof t};return["top","right","bottom","left"].forEach(e(t)?function(e){return r.offset[e]=t}:function(n){return e(t[n])?r.offset[n]=t[n]:null}),r.offset},u.threshold=function(t){return"number"==typeof t&&t>=0&&t<=1?r.threshold=t:r.threshold},u.is=function(t){return(0,s.inViewport)(t,r)},u.offset(0),u};e["default"]=c()},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),o=n(1),u=function(){function t(e,n){r(this,t),this.options=n,this.elements=e,this.current=[],this.handlers={enter:[],exit:[]},this.singles={enter:[],exit:[]}}return i(t,[{key:"check",value:function(){var t=this;return this.elements.forEach(function(e){var n=(0,o.inViewport)(e,t.options),r=t.current.indexOf(e),i=r>-1,u=n&&!i,f=!n&&i;u&&(t.current.push(e),t.emit("enter",e)),f&&(t.current.splice(r,1),t.emit("exit",e))}),this}},{key:"on",value:function(t,e){return this.handlers[t].push(e),this}},{key:"once",value:function(t,e){return this.singles[t].unshift(e),this}},{key:"emit",value:function(t,e){for(;this.singles[t].length;)this.singles[t].pop()(e);for(var n=this.handlers[t].length;--n>-1;)this.handlers[t][n](e);return this}}]),t}();e["default"]=function(t,e){return new u(t,e)}},function(t,e){(function(e){var n="object"==typeof e&&e&&e.Object===Object&&e;t.exports=n}).call(e,function(){return this}())},function(t,e,n){var r=n(5),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();t.exports=o},function(t,e,n){function r(t,e,n){function r(e){var n=x,r=m;return x=m=void 0,E=e,w=t.apply(r,n)}function a(t){return E=t,j=setTimeout(d,e),_?r(t):w}function l(t){var n=t-O,r=t-E,i=e-n;return M?c(i,g-r):i}function h(t){var n=t-O,r=t-E;return void 0===O||n>=e||n<0||M&&r>=g}function d(){var t=o();return h(t)?p(t):void(j=setTimeout(d,l(t)))}function p(t){return j=void 0,T&&x?r(t):(x=m=void 0,w)}function v(){void 0!==j&&clearTimeout(j),E=0,x=O=m=j=void 0}function y(){return void 0===j?w:p(o())}function b(){var t=o(),n=h(t);if(x=arguments,m=this,O=t,n){if(void 0===j)return a(O);if(M)return j=setTimeout(d,e),r(O)}return void 0===j&&(j=setTimeout(d,e)),w}var x,m,g,w,j,O,E=0,_=!1,M=!1,T=!0;if("function"!=typeof t)throw new TypeError(f);return e=u(e)||0,i(n)&&(_=!!n.leading,M="maxWait"in n,g=M?s(u(n.maxWait)||0,e):g,T="trailing"in n?!!n.trailing:T),b.cancel=v,b.flush=y,b}var i=n(2),o=n(8),u=n(10),f="Expected a function",s=Math.max,c=Math.min;t.exports=r},function(t,e,n){var r=n(6),i=function(){return r.Date.now()};t.exports=i},function(t,e,n){function r(t,e,n){var r=!0,f=!0;if("function"!=typeof t)throw new TypeError(u);return o(n)&&(r="leading"in n?!!n.leading:r,f="trailing"in n?!!n.trailing:f),i(t,e,{leading:r,maxWait:e,trailing:f})}var i=n(7),o=n(2),u="Expected a function";t.exports=r},function(t,e){function n(t){return t}t.exports=n}])});

docs/lib/js/bundle.min.js

@@ -1,1 +0,1 @@
-!function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}for(var i=n(4),o=r(i),u=200,f=document.querySelector(".field"),c=function(){var t=document.createElement("div");return t.className="dot",t.style.top=100*Math.random()+"%",t.style.left=100*Math.random()+"%",t};u--;)f.appendChild(c());o["default"].offset(50),(0,o["default"])(".dot").on("enter",function(t){return t.classList.add("in-view")}).on("exit",function(t){return t.classList.remove("in-view")})},function(t,e){function n(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}t.exports=n},function(t,e){"use strict";function n(t,e){var n=t.getBoundingClientRect(),r=n.top,i=n.right,o=n.bottom,u=n.left,f={t:o,r:window.innerWidth-u,b:window.innerHeight-r,l:i};return f.t>e.top&&f.r>e.right&&f.b>e.bottom&&f.l>e.left}Object.defineProperty(e,"__esModule",{value:!0}),e.inViewport=n},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var i=n(12),o=r(i),u=n(5),f=r(u),c=n(2),s=function(){var t=100,e=["scroll","resize","load"],n={history:[]},r={},i=(0,o["default"])(function(){n.history.forEach(function(t){n[t].check()})},t);e.forEach(function(t){return addEventListener(t,i)}),window.MutationObserver&&new MutationObserver(i).observe(document.body,{attributes:!0,childList:!0,subtree:!0});var u=function(t){if("string"==typeof t){var e=[].slice.call(document.querySelectorAll(t));return n.history.indexOf(t)>-1?n[t].elements=e:(n[t]=(0,f["default"])(e,r),n.history.push(t)),n[t]}};return u.offset=function(t){if(void 0===t)return r;var e=function(t){return"number"==typeof t};return["top","right","bottom","left"].forEach(e(t)?function(e){return r[e]=t}:function(n){return e(t[n])?r[n]=t[n]:null}),r},u.is=function(t){return(0,c.inViewport)(t,r)},u.offset(0),u};e["default"]=s()},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var i=n(3),o=r(i);t.exports=o["default"]},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),o=n(2),u=function(){function t(e,n){r(this,t),this.offset=n,this.current=[],this.elements=e,this.handlers={enter:[],exit:[]},this.singles={enter:[],exit:[]}}return i(t,[{key:"check",value:function(){var t=this;return this.elements.forEach(function(e){var n=(0,o.inViewport)(e,t.offset),r=t.current.indexOf(e),i=r>-1,u=n&&!i,f=!n&&i;u&&(t.current.push(e),t.emit("enter",e)),f&&(t.current.splice(r,1),t.emit("exit",e))}),this}},{key:"on",value:function(t,e){return this.handlers[t].push(e),this}},{key:"once",value:function(t,e){return this.singles[t].unshift(e),this}},{key:"emit",value:function(t,e){for(;this.singles[t].length;)this.singles[t].pop()(e);for(var n=this.handlers[t].length;--n>-1;)this.handlers[t][n](e);return this}}]),t}();e["default"]=function(t,e){return new u(t,e)}},function(t,e){(function(e){var n="object"==typeof e&&e&&e.Object===Object&&e;t.exports=n}).call(e,function(){return this}())},function(t,e,n){var r=n(6),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();t.exports=o},function(t,e,n){function r(t,e,n){function r(e){var n=b,r=x;return b=x=void 0,M=e,w=t.apply(r,n)}function a(t){return M=t,O=setTimeout(v,e),_?r(t):w}function l(t){var n=t-j,r=t-M,i=e-n;return E?s(i,g-r):i}function d(t){var n=t-j,r=t-M;return void 0===j||n>=e||n<0||E&&r>=g}function v(){var t=o();return d(t)?p(t):void(O=setTimeout(v,l(t)))}function p(t){return O=void 0,T&&b?r(t):(b=x=void 0,w)}function h(){void 0!==O&&clearTimeout(O),M=0,b=j=x=O=void 0}function y(){return void 0===O?w:p(o())}function m(){var t=o(),n=d(t);if(b=arguments,x=this,j=t,n){if(void 0===O)return a(j);if(E)return O=setTimeout(v,e),r(j)}return void 0===O&&(O=setTimeout(v,e)),w}var b,x,g,w,O,j,M=0,_=!1,E=!1,T=!0;if("function"!=typeof t)throw new TypeError(f);return e=u(e)||0,i(n)&&(_=!!n.leading,E="maxWait"in n,g=E?c(u(n.maxWait)||0,e):g,T="trailing"in n?!!n.trailing:T),m.cancel=h,m.flush=y,m}var i=n(1),o=n(11),u=n(13),f="Expected a function",c=Math.max,s=Math.min;t.exports=r},function(t,e){function n(t){return!!t&&"object"==typeof t}t.exports=n},function(t,e,n){function r(t){return"symbol"==typeof t||i(t)&&f.call(t)==o}var i=n(9),o="[object Symbol]",u=Object.prototype,f=u.toString;t.exports=r},function(t,e,n){var r=n(7),i=function(){return r.Date.now()};t.exports=i},function(t,e,n){function r(t,e,n){var r=!0,f=!0;if("function"!=typeof t)throw new TypeError(u);return o(n)&&(r="leading"in n?!!n.leading:r,f="trailing"in n?!!n.trailing:f),i(t,e,{leading:r,maxWait:e,trailing:f})}var i=n(8),o=n(1),u="Expected a function";t.exports=r},function(t,e,n){function r(t){if("number"==typeof t)return t;if(o(t))return u;if(i(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=i(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(f,"");var n=s.test(t);return n||a.test(t)?l(t.slice(2),n?2:8):c.test(t)?u:+t}var i=n(1),o=n(10),u=NaN,f=/^\s+|\s+$/g,c=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,a=/^0o[0-7]+$/i,l=parseInt;t.exports=r}]);
+!function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}for(var i=n(4),o=r(i),u=200,f=document.querySelector(".field"),s=function(){var t=document.createElement("div");return t.className="dot",t.style.top=100*Math.random()+"%",t.style.left=100*Math.random()+"%",t};u--;)f.appendChild(s());o["default"].offset(50),(0,o["default"])(".dot").on("enter",function(t){return t.classList.add("in-view")}).on("exit",function(t){return t.classList.remove("in-view")})},function(t,e){function n(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}t.exports=n},function(t,e){"use strict";function n(t,e){var n=t.getBoundingClientRect(),r=n.top,i=n.right,o=n.bottom,u=n.left,f=n.width,s=n.height,c={t:o,r:window.innerWidth-u,b:window.innerHeight-r,l:i},a={x:e.threshold*f,y:e.threshold*s};return c.t>e.offset.top+a.y&&c.r>e.offset.right+a.x&&c.b>e.offset.bottom+a.y&&c.l>e.offset.left+a.x}Object.defineProperty(e,"__esModule",{value:!0}),e.inViewport=n},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var i=n(12),o=r(i),u=n(5),f=r(u),s=n(2),c=function(){var t=100,e=["scroll","resize","load"],n={history:[]},r={offset:{},threshold:0},i=(0,o["default"])(function(){n.history.forEach(function(t){n[t].check()})},t);e.forEach(function(t){return addEventListener(t,i)}),window.MutationObserver&&new MutationObserver(i).observe(document.body,{attributes:!0,childList:!0,subtree:!0});var u=function(t){if("string"==typeof t){var e=[].slice.call(document.querySelectorAll(t));return n.history.indexOf(t)>-1?n[t].elements=e:(n[t]=(0,f["default"])(e,r),n.history.push(t)),n[t]}};return u.offset=function(t){if(void 0===t)return r.offset;var e=function(t){return"number"==typeof t};return["top","right","bottom","left"].forEach(e(t)?function(e){return r.offset[e]=t}:function(n){return e(t[n])?r.offset[n]=t[n]:null}),r.offset},u.threshold=function(t){return"number"==typeof t&&t>=0&&t<=1?r.threshold=t:r.threshold},u.is=function(t){return(0,s.inViewport)(t,r)},u.offset(0),u};e["default"]=c()},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}var i=n(3),o=r(i);t.exports=o["default"]},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),o=n(2),u=function(){function t(e,n){r(this,t),this.options=n,this.elements=e,this.current=[],this.handlers={enter:[],exit:[]},this.singles={enter:[],exit:[]}}return i(t,[{key:"check",value:function(){var t=this;return this.elements.forEach(function(e){var n=(0,o.inViewport)(e,t.options),r=t.current.indexOf(e),i=r>-1,u=n&&!i,f=!n&&i;u&&(t.current.push(e),t.emit("enter",e)),f&&(t.current.splice(r,1),t.emit("exit",e))}),this}},{key:"on",value:function(t,e){return this.handlers[t].push(e),this}},{key:"once",value:function(t,e){return this.singles[t].unshift(e),this}},{key:"emit",value:function(t,e){for(;this.singles[t].length;)this.singles[t].pop()(e);for(var n=this.handlers[t].length;--n>-1;)this.handlers[t][n](e);return this}}]),t}();e["default"]=function(t,e){return new u(t,e)}},function(t,e){(function(e){var n="object"==typeof e&&e&&e.Object===Object&&e;t.exports=n}).call(e,function(){return this}())},function(t,e,n){var r=n(6),i="object"==typeof self&&self&&self.Object===Object&&self,o=r||i||Function("return this")();t.exports=o},function(t,e,n){function r(t,e,n){function r(e){var n=b,r=x;return b=x=void 0,M=e,w=t.apply(r,n)}function a(t){return M=t,O=setTimeout(h,e),_?r(t):w}function l(t){var n=t-j,r=t-M,i=e-n;return E?c(i,g-r):i}function d(t){var n=t-j,r=t-M;return void 0===j||n>=e||n<0||E&&r>=g}function h(){var t=o();return d(t)?p(t):void(O=setTimeout(h,l(t)))}function p(t){return O=void 0,T&&b?r(t):(b=x=void 0,w)}function v(){void 0!==O&&clearTimeout(O),M=0,b=j=x=O=void 0}function y(){return void 0===O?w:p(o())}function m(){var t=o(),n=d(t);if(b=arguments,x=this,j=t,n){if(void 0===O)return a(j);if(E)return O=setTimeout(h,e),r(j)}return void 0===O&&(O=setTimeout(h,e)),w}var b,x,g,w,O,j,M=0,_=!1,E=!1,T=!0;if("function"!=typeof t)throw new TypeError(f);return e=u(e)||0,i(n)&&(_=!!n.leading,E="maxWait"in n,g=E?s(u(n.maxWait)||0,e):g,T="trailing"in n?!!n.trailing:T),m.cancel=v,m.flush=y,m}var i=n(1),o=n(11),u=n(13),f="Expected a function",s=Math.max,c=Math.min;t.exports=r},function(t,e){function n(t){return null!=t&&"object"==typeof t}t.exports=n},function(t,e,n){function r(t){return"symbol"==typeof t||i(t)&&f.call(t)==o}var i=n(9),o="[object Symbol]",u=Object.prototype,f=u.toString;t.exports=r},function(t,e,n){var r=n(7),i=function(){return r.Date.now()};t.exports=i},function(t,e,n){function r(t,e,n){var r=!0,f=!0;if("function"!=typeof t)throw new TypeError(u);return o(n)&&(r="leading"in n?!!n.leading:r,f="trailing"in n?!!n.trailing:f),i(t,e,{leading:r,maxWait:e,trailing:f})}var i=n(8),o=n(1),u="Expected a function";t.exports=r},function(t,e,n){function r(t){if("number"==typeof t)return t;if(o(t))return u;if(i(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=i(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(f,"");var n=c.test(t);return n||a.test(t)?l(t.slice(2),n?2:8):s.test(t)?u:+t}var i=n(1),o=n(10),u=NaN,f=/^\s+|\s+$/g,s=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,a=/^0o[0-7]+$/i,l=parseInt;t.exports=r}]);

package.json

 {
   "name": "in-view",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Get notified when a DOM element enters or exits the viewport.",
@@ -5,0 +5,0 @@ "repository": "https://github.com/camwiegert/in-view",

README.md

@@ -39,3 +39,3 @@ # in-view.js :eyes:
 
-in-view maintains a separate handler registry for each set of elements captured with `inView(<selector>)`. Each registry exposes the same four methods. in-view also exposes two top-level methods. (`is`, `offset`).
+in-view maintains a separate handler registry for each set of elements captured with `inView(<selector>)`. Each registry exposes the same four methods. in-view also exposes three top-level methods. (`is`, `offset`, `threshold`).
 
@@ -83,2 +83,10 @@ ### inView(\<selector>).on(\<event>, \<handler>)
 
+### inView.threshold(\<threshold>)
+> Set the ratio of an element's width and height that needs to be visible for it to be considered in viewport. This defaults to `0`, meaning any amount. A threshold of `0.5` or `1` will require that half or all of an element's width and height need to be visible, respectively. `threshold` must be a number between `0` and `1`.
+> ```js
+> inView.threshold(0);
+> inView.threshold(0.5);
+> inView.threshold(1);
+> ``` 
+
 ### inView(\<selector>).check()
@@ -85,0 +93,0 @@ > Manually check the status of the elements selected by `selector`. By default, all registries are checked on `window`'s `scroll`, `resize`, and `load` events.

src/in-view.js

@@ -19,6 +19,6 @@ import Registry from './registry';
     * Maintain a hashmap of all registries, a history
-    * of selectors to enumerate, and an offset object.
+    * of selectors to enumerate, and an options object.
     */
     let selectors = { history: [] };
-    let offset = {};
+    let options   = { offset: {}, threshold: 0 };
 
@@ -69,3 +69,3 @@ /**
         else {
-            selectors[selector] = Registry(elements, offset);
+            selectors[selector] = Registry(elements, options);
             selectors.history.push(selector);
@@ -82,17 +82,26 @@ }
     control.offset = o => {
-        if (o === undefined) return offset;
+        if (o === undefined) return options.offset;
         const isNum = n => typeof n === 'number';
         ['top', 'right', 'bottom', 'left']
             .forEach(isNum(o) ?
-                dim => offset[dim] = o :
-                dim => isNum(o[dim]) ? offset[dim] = o[dim] : null
+                dim => options.offset[dim] = o :
+                dim => isNum(o[dim]) ? options.offset[dim] = o[dim] : null
             );
-        return offset;
+        return options.offset;
     };
 
     /**
+    * Set the threshold with a number.
+    */
+    control.threshold = n => {
+        return typeof n === 'number' && n >= 0 && n <= 1
+            ? options.threshold = n
+            : options.threshold;
+    };
+
+    /**
     * Add proxy for inViewport, set defaults, and
     * return the interface.
     */
-    control.is = el => inViewport(el, offset);
+    control.is = el => inViewport(el, options);
     control.offset(0);
@@ -99,0 +108,0 @@ return control;

src/registry.js

@@ -12,6 +12,6 @@ import { inViewport } from './viewport';
 
-    constructor(elements, offset) {
-        this.offset   = offset;
+    constructor(elements, options) {
+        this.options  = options;
+        this.elements = elements;
         this.current  = [];
-        this.elements = elements;
         this.handlers = { enter: [], exit: [] };
@@ -27,3 +27,3 @@ this.singles  = { enter: [], exit: [] };
         this.elements.forEach(el => {
-            let passes  = inViewport(el, this.offset);
+            let passes  = inViewport(el, this.options);
             let index   = this.current.indexOf(el);
@@ -83,2 +83,2 @@ let current = index > -1;
 
-export default (elements, offset) => new inViewRegistry(elements, offset);
+export default (elements, options) => new inViewRegistry(elements, options);

src/viewport.js

@@ -5,5 +5,5 @@ /**
 */
-export function inViewport (element, offset) {
+export function inViewport (element, options) {
 
-    const { top, right, bottom, left } = element.getBoundingClientRect();
+    const { top, right, bottom, left, width, height } = element.getBoundingClientRect();
 
@@ -17,7 +17,12 @@ const intersection = {
 
-    return intersection.t > offset.top
-        && intersection.r > offset.right
-        && intersection.b > offset.bottom
-        && intersection.l > offset.left;
+    const threshold = {
+        x: options.threshold * width,
+        y: options.threshold * height
+    };
 
+    return intersection.t > (options.offset.top    + threshold.y)
+        && intersection.r > (options.offset.right  + threshold.x)
+        && intersection.b > (options.offset.bottom + threshold.y)
+        && intersection.l > (options.offset.left   + threshold.x);
+
 }

test/in-view.is.spec.js

@@ -11,3 +11,5 @@ import test from 'ava';
             bottom: 50,
-            left: 50
+            left: 50,
+            width: 100,
+            height: 100
         };
@@ -14,0 +16,0 @@ }

test/registry.check.spec.js

@@ -7,7 +7,10 @@ import test from 'ava';
 
-const offset = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
+const opts = {
+    offset: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    },
+    threshold: 0
 };
@@ -23,3 +26,5 @@
                 right: 1,
-                top: 1
+                top: 1,
+                width: 100,
+                height: 100
             };
@@ -33,6 +38,8 @@ }
                 right: -1,
-                top: -1
+                top: -1,
+                width: 100,
+                height: 100
             };
         }
-    }], offset);
+    }], opts);
 
@@ -54,3 +61,5 @@ t.true(!registry.current.length);
                 right: 1,
-                top: 1
+                top: 1,
+                width: 100,
+                height: 100
             };
@@ -60,3 +69,3 @@ }
 
-    let registry = Registry([stub], offset);
+    let registry = Registry([stub], opts);
 
@@ -76,3 +85,5 @@ registry.on('enter', el => t.deepEqual(el, stub));
                 right: -1,
-                top: -1
+                top: -1,
+                width: 100,
+                height: 100
             };
@@ -82,3 +93,3 @@ }
 
-    let registry = Registry([stub], offset);
+    let registry = Registry([stub], opts);
 
@@ -91,4 +102,4 @@ registry.on('exit', el => t.deepEqual(el, stub));
 test('Registry.check returns the registry', t => {
-    let registry = Registry([], offset);
+    let registry = Registry([], opts);
     t.deepEqual(registry.check(), registry);
 });

test/registry.spec.js

 import test from 'ava';
 import Registry from '../src/registry';
 
-const offset = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
+const opts = {
+    offset: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    },
+    threshold: 0
 };
 
 test('Registry returns a registry', t => {
-    let registry = Registry([document.body], offset);
+    let registry = Registry([document.body], opts);
     t.deepEqual(registry, {
-        offset: offset,
+        options: opts,
         current: [],
@@ -16,0 +19,0 @@ elements: [document.body],

test/viewport.spec.js

@@ -20,15 +20,18 @@ import test from 'ava';
 
-const offset = {
-    top: 250,
-    right: 250,
-    bottom: 250,
-    left: 250
+const opts = {
+    offset: {
+        top: 250,
+        right: 250,
+        bottom: 250,
+        left: 250
+    },
+    threshold: 0
 };
 
 test('inViewport returns a boolean', t => {
-    t.true(typeof inViewport(stub, offset) === 'boolean');
+    t.true(typeof inViewport(stub, opts) === 'boolean');
 });
 
 test('inViewport accepts an offset', t => {
-    t.false(inViewport(stub, offset));
+    t.false(inViewport(stub, opts));
 });

No alert changes

Improved metrics

Total package byte prevSize

82750

increased by4.33%

Number of package files

37

increased by5.71%

Lines of code

675

increased by7.14%

Number of lines in readme file

125

increased by6.84%

No dependency changes