in-view-js/dist/in-view-js.min.js

Module for capturing element in viewport on native Javascript.

'use strict';var _createClass=function(){function a(b,c){for(var e,d=0;d<c.length;d++)e=c[d],e.enumerable=e.enumerable||!1,e.configurable=!0,'value'in e&&(e.writable=!0),Object.defineProperty(b,e.key,e)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}();Object.defineProperty(exports,'__esModule',{value:!0});function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')}var InViewPort=exports.InViewPort=function(){function a(){var b=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{};_classCallCheck(this,a),this.el=b.element,this.callback=b.callback,this.overlapEl=b.overlapEl,this.old_visible=null,this.handler=this.onVisibilityChange.bind(this),this.topDistance=this.getTopDistance()}return _createClass(a,[{key:'addListeners',value:function addListeners(){addEventListener('DOMContentLoaded',this.handler,!1),addEventListener('load',this.handler,!1),addEventListener('scroll',this.handler,!1),addEventListener('resize',this.handler,!1)}},{key:'removeListeners',value:function removeListeners(){removeEventListener('DOMContentLoaded',this.handler,!1),removeEventListener('load',this.handler,!1),removeEventListener('scroll',this.handler,!1),removeEventListener('resize',this.handler,!1)}},{key:'onVisibilityChange',value:function onVisibilityChange(){var b=this.isElementInViewport();b!=this.old_visible&&(this.old_visible=b,'function'==typeof this.callback&&this.callback(this.old_visible))}},{key:'getTopDistance',value:function getTopDistance(){var b=this.overlapEl?this.overlapEl.getBoundingClientRect().height:0,c=this.el.getBoundingClientRect().height||this.el.firstChild.getBoundingClientRect().height;return b?b-c:0}},{key:'isElementInViewport',value:function isElementInViewport(){var b=this.el.getBoundingClientRect();return b.top>=this.topDistance&&0<=b.left&&b.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&b.right<=(window.innerWidth||document.documentElement.clientWidth)}}]),a}();