onscreen - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/on-screen.es6.js

@@ -31,3 +31,3 @@ /**
 function inViewport(el) {
-    var options = arguments.length <= 1 || arguments[1] === undefined ? { tolerance: 0 } : arguments[1];
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { tolerance: 0 };
 
@@ -67,3 +67,3 @@ if (!el) {
 function inContainer(el) {
-    var options = arguments.length <= 1 || arguments[1] === undefined ? { tolerance: 0, container: '' } : arguments[1];
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { tolerance: 0, container: '' };
 
@@ -113,5 +113,7 @@ if (!el) {
 
+// TODO: Refactor this so it can be easily tested
+/* istanbul ignore next */
 function eventHandler() {
-    var trackedElements = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
-    var options = arguments.length <= 1 || arguments[1] === undefined ? { tolerance: 0 } : arguments[1];
+    var trackedElements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { tolerance: 0 };
 
@@ -139,10 +141,18 @@ var selectors = Object.keys(trackedElements);
             if (item.isVisible === true && item.wasVisible === false) {
-                if (typeof trackedElements[selector].enter === 'function') {
-                    trackedElements[selector].enter(item.node);
-                }
+                if (!trackedElements[selector].enter) return;
+
+                Object.keys(trackedElements[selector].enter).forEach(function (callback) {
+                    if (typeof trackedElements[selector].enter[callback] === 'function') {
+                        trackedElements[selector].enter[callback](item.node, 'enter');
+                    }
+                });
             }
             if (item.isVisible === false && item.wasVisible === true) {
-                if (typeof trackedElements[selector].leave === 'function') {
-                    trackedElements[selector].leave(item.node);
-                }
+                if (!trackedElements[selector].leave) return;
+
+                Object.keys(trackedElements[selector].leave).forEach(function (callback) {
+                    if (typeof trackedElements[selector].leave[callback] === 'function') {
+                        trackedElements[selector].leave[callback](item.node, 'leave');
+                    }
+                });
             }
@@ -191,9 +201,18 @@ });
  */
-function off(event, selector) {
+function off(event, selector, handler) {
+    var enterCallbacks = Object.keys(this.trackedElements[selector].enter);
+    var leaveCallbacks = Object.keys(this.trackedElements[selector].leave);
+
     if ({}.hasOwnProperty.call(this.trackedElements, selector)) {
-        if (this.trackedElements[selector][event]) {
+        if (handler) {
+            if (this.trackedElements[selector][event]) {
+                var callbackName = typeof handler === 'function' ? handler.name : handler;
+                delete this.trackedElements[selector][event][callbackName];
+            }
+        } else {
             delete this.trackedElements[selector][event];
         }
     }
-    if (!this.trackedElements[selector].enter && !this.trackedElements[selector].leave) {
+
+    if (!enterCallbacks.length && !leaveCallbacks.length) {
         delete this.trackedElements[selector];
@@ -235,3 +254,7 @@ }
     if (typeof callback === 'function') {
-        this.trackedElements[selector][event] = callback;
+        if (!this.trackedElements[selector][event]) {
+            this.trackedElements[selector][event] = {};
+        }
+
+        this.trackedElements[selector][event][callback.name || 'anonymous'] = callback;
     }
@@ -250,8 +273,6 @@ }
     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-    var eventListenerSupported = window.addEventListener;
 
+    /* istanbul ignore else */
     if (MutationObserver) {
-        var obs = new MutationObserver(function (mutations) {
-            if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) callback();
-        });
+        var obs = new MutationObserver(callback);
 
@@ -262,3 +283,3 @@ obs.observe(obj, {
         });
-    } else if (eventListenerSupported) {
+    } else {
         obj.addEventListener('DOMNodeInserted', callback, false);
@@ -278,3 +299,3 @@ obj.addEventListener('DOMNodeRemoved', callback, false);
 
-    var options = arguments.length <= 0 || arguments[0] === undefined ? { tolerance: 0, debounce: 100, container: window } : arguments[0];
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { tolerance: 0, debounce: 100, container: window };
 
@@ -281,0 +302,0 @@ this.options = {};

dist/on-screen.umd.js

@@ -37,3 +37,3 @@ (function (global, factory) {
   function inViewport(el) {
-      var options = arguments.length <= 1 || arguments[1] === undefined ? { tolerance: 0 } : arguments[1];
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { tolerance: 0 };
 
@@ -73,3 +73,3 @@ if (!el) {
   function inContainer(el) {
-      var options = arguments.length <= 1 || arguments[1] === undefined ? { tolerance: 0, container: '' } : arguments[1];
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { tolerance: 0, container: '' };
 
@@ -119,5 +119,7 @@ if (!el) {
 
+  // TODO: Refactor this so it can be easily tested
+  /* istanbul ignore next */
   function eventHandler() {
-      var trackedElements = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
-      var options = arguments.length <= 1 || arguments[1] === undefined ? { tolerance: 0 } : arguments[1];
+      var trackedElements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { tolerance: 0 };
 
@@ -145,10 +147,18 @@ var selectors = Object.keys(trackedElements);
               if (item.isVisible === true && item.wasVisible === false) {
-                  if (typeof trackedElements[selector].enter === 'function') {
-                      trackedElements[selector].enter(item.node);
-                  }
+                  if (!trackedElements[selector].enter) return;
+
+                  Object.keys(trackedElements[selector].enter).forEach(function (callback) {
+                      if (typeof trackedElements[selector].enter[callback] === 'function') {
+                          trackedElements[selector].enter[callback](item.node, 'enter');
+                      }
+                  });
               }
               if (item.isVisible === false && item.wasVisible === true) {
-                  if (typeof trackedElements[selector].leave === 'function') {
-                      trackedElements[selector].leave(item.node);
-                  }
+                  if (!trackedElements[selector].leave) return;
+
+                  Object.keys(trackedElements[selector].leave).forEach(function (callback) {
+                      if (typeof trackedElements[selector].leave[callback] === 'function') {
+                          trackedElements[selector].leave[callback](item.node, 'leave');
+                      }
+                  });
               }
@@ -197,9 +207,18 @@ });
    */
-  function off(event, selector) {
+  function off(event, selector, handler) {
+      var enterCallbacks = Object.keys(this.trackedElements[selector].enter);
+      var leaveCallbacks = Object.keys(this.trackedElements[selector].leave);
+
       if ({}.hasOwnProperty.call(this.trackedElements, selector)) {
-          if (this.trackedElements[selector][event]) {
+          if (handler) {
+              if (this.trackedElements[selector][event]) {
+                  var callbackName = typeof handler === 'function' ? handler.name : handler;
+                  delete this.trackedElements[selector][event][callbackName];
+              }
+          } else {
               delete this.trackedElements[selector][event];
           }
       }
-      if (!this.trackedElements[selector].enter && !this.trackedElements[selector].leave) {
+
+      if (!enterCallbacks.length && !leaveCallbacks.length) {
           delete this.trackedElements[selector];
@@ -241,3 +260,7 @@ }
       if (typeof callback === 'function') {
-          this.trackedElements[selector][event] = callback;
+          if (!this.trackedElements[selector][event]) {
+              this.trackedElements[selector][event] = {};
+          }
+
+          this.trackedElements[selector][event][callback.name || 'anonymous'] = callback;
       }
@@ -256,8 +279,6 @@ }
       var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-      var eventListenerSupported = window.addEventListener;
 
+      /* istanbul ignore else */
       if (MutationObserver) {
-          var obs = new MutationObserver(function (mutations) {
-              if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) callback();
-          });
+          var obs = new MutationObserver(callback);
 
@@ -268,3 +289,3 @@ obs.observe(obj, {
           });
-      } else if (eventListenerSupported) {
+      } else {
           obj.addEventListener('DOMNodeInserted', callback, false);
@@ -284,3 +305,3 @@ obj.addEventListener('DOMNodeRemoved', callback, false);
 
-      var options = arguments.length <= 0 || arguments[0] === undefined ? { tolerance: 0, debounce: 100, container: window } : arguments[0];
+      var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { tolerance: 0, debounce: 100, container: window };
 
@@ -287,0 +308,0 @@ this.options = {};

dist/on-screen.umd.min.js

@@ -1,2 +0,2 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):global.OnScreen=factory()}(this,function(){"use strict";function attach(){var container=this.options.container;if(container instanceof HTMLElement){var style=window.getComputedStyle(container);"static"===style.position&&(container.style.position="relative")}container.addEventListener("scroll",this._scroll),window.addEventListener("resize",this._scroll),this._scroll(),this.attached=!0}function inViewport(el){var options=arguments.length<=1||void 0===arguments[1]?{tolerance:0}:arguments[1];if(!el)throw new Error("You should specify the element you want to test");"string"==typeof el&&(el=document.querySelector(el));var elRect=el.getBoundingClientRect();return elRect.bottom-options.tolerance>0&&elRect.right-options.tolerance>0&&elRect.left+options.tolerance<(window.innerWidth||document.documentElement.clientWidth)&&elRect.top+options.tolerance<(window.innerHeight||document.documentElement.clientHeight)}function inContainer(el){var options=arguments.length<=1||void 0===arguments[1]?{tolerance:0,container:""}:arguments[1];if(!el)throw new Error("You should specify the element you want to test");if("string"==typeof el&&(el=document.querySelector(el)),"string"==typeof options&&(options={tolerance:0,container:document.querySelector(options)}),"string"==typeof options.container&&(options.container=document.querySelector(options.container)),options instanceof HTMLElement&&(options={tolerance:0,container:options}),!options.container)throw new Error("You should specify a container element");var containerRect=options.container.getBoundingClientRect();return el.offsetTop+el.clientHeight-options.tolerance>options.container.scrollTop&&el.offsetLeft+el.clientWidth-options.tolerance>options.container.scrollLeft&&el.offsetLeft+options.tolerance<containerRect.width+options.container.scrollLeft&&el.offsetTop+options.tolerance<containerRect.height+options.container.scrollTop}function eventHandler(){var trackedElements=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],options=arguments.length<=1||void 0===arguments[1]?{tolerance:0}:arguments[1],selectors=Object.keys(trackedElements),testVisibility=void 0;selectors.length&&(testVisibility=options.container===window?inViewport:inContainer,selectors.forEach(function(selector){trackedElements[selector].nodes.forEach(function(item){testVisibility(item.node,options)?(item.wasVisible=item.isVisible,item.isVisible=!0):(item.wasVisible=item.isVisible,item.isVisible=!1),item.isVisible===!0&&item.wasVisible===!1&&"function"==typeof trackedElements[selector].enter&&trackedElements[selector].enter(item.node),item.isVisible===!1&&item.wasVisible===!0&&"function"==typeof trackedElements[selector].leave&&trackedElements[selector].leave(item.node)})}))}function debouncedScroll(){var _this=this,timeout=void 0;return function(){clearTimeout(timeout),timeout=setTimeout(function(){eventHandler(_this.trackedElements,_this.options)},_this.options.throttle)}}function destroy(){this.options.container.removeEventListener("scroll",this._scroll),window.removeEventListener("resize",this._scroll),this.attached=!1}function off(event,selector){({}).hasOwnProperty.call(this.trackedElements,selector)&&this.trackedElements[selector][event]&&delete this.trackedElements[selector][event],this.trackedElements[selector].enter||this.trackedElements[selector].leave||delete this.trackedElements[selector]}function on(event,selector,callback){var allowed=["enter","leave"];if(!event)throw new Error("No event given. Choose either enter or leave");if(!selector)throw new Error("No selector to track");if(allowed.indexOf(event)<0)throw new Error(event+" event is not supported");({}).hasOwnProperty.call(this.trackedElements,selector)||(this.trackedElements[selector]={}),this.trackedElements[selector].nodes=[];for(var i=0;i<document.querySelectorAll(selector).length;i++){var item={isVisible:!1,wasVisible:!1,node:document.querySelectorAll(selector)[i]};this.trackedElements[selector].nodes.push(item)}"function"==typeof callback&&(this.trackedElements[selector][event]=callback)}function observeDOM(obj,callback){var MutationObserver=window.MutationObserver||window.WebKitMutationObserver,eventListenerSupported=window.addEventListener;if(MutationObserver){var obs=new MutationObserver(function(mutations){(mutations[0].addedNodes.length||mutations[0].removedNodes.length)&&callback()});obs.observe(obj,{childList:!0,subtree:!0})}else eventListenerSupported&&(obj.addEventListener("DOMNodeInserted",callback,!1),obj.addEventListener("DOMNodeRemoved",callback,!1))}function OnScreen(){var _this=this,options=arguments.length<=0||void 0===arguments[0]?{tolerance:0,debounce:100,container:window}:arguments[0];this.options={},this.trackedElements={},Object.defineProperties(this.options,{container:{configurable:!1,enumerable:!1,get:function(){var container=void 0;return"string"==typeof options.container?container=document.querySelector(options.container):options.container instanceof HTMLElement&&(container=options.container),container||window},set:function(value){options.container=value}},debounce:{get:function(){return parseInt(options.debounce,10)||100},set:function(value){options.debounce=value}},tolerance:{get:function(){return parseInt(options.tolerance,10)||0},set:function(value){options.tolerance=value}}}),Object.defineProperty(this,"_scroll",{enumerable:!1,configurable:!1,writable:!1,value:this._debouncedScroll.call(this)}),observeDOM(document.querySelector("body"),function(){Object.keys(_this.trackedElements).forEach(function(element){_this.on("enter",element),_this.on("leave",element)})}),this.attach()}return Object.defineProperties(OnScreen.prototype,{_debouncedScroll:{configurable:!1,writable:!1,enumerable:!1,value:debouncedScroll},attach:{configurable:!1,writable:!1,enumerable:!1,value:attach},destroy:{configurable:!1,writable:!1,enumerable:!1,value:destroy},off:{configurable:!1,writable:!1,enumerable:!1,value:off},on:{configurable:!1,writable:!1,enumerable:!1,value:on}}),OnScreen.check=inViewport,OnScreen});
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?module.exports=factory():"function"==typeof define&&define.amd?define(factory):global.OnScreen=factory()}(this,function(){"use strict";function attach(){var container=this.options.container;if(container instanceof HTMLElement){var style=window.getComputedStyle(container);"static"===style.position&&(container.style.position="relative")}container.addEventListener("scroll",this._scroll),window.addEventListener("resize",this._scroll),this._scroll(),this.attached=!0}function inViewport(el){var options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{tolerance:0};if(!el)throw new Error("You should specify the element you want to test");"string"==typeof el&&(el=document.querySelector(el));var elRect=el.getBoundingClientRect();return elRect.bottom-options.tolerance>0&&elRect.right-options.tolerance>0&&elRect.left+options.tolerance<(window.innerWidth||document.documentElement.clientWidth)&&elRect.top+options.tolerance<(window.innerHeight||document.documentElement.clientHeight)}function inContainer(el){var options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{tolerance:0,container:""};if(!el)throw new Error("You should specify the element you want to test");if("string"==typeof el&&(el=document.querySelector(el)),"string"==typeof options&&(options={tolerance:0,container:document.querySelector(options)}),"string"==typeof options.container&&(options.container=document.querySelector(options.container)),options instanceof HTMLElement&&(options={tolerance:0,container:options}),!options.container)throw new Error("You should specify a container element");var containerRect=options.container.getBoundingClientRect();return el.offsetTop+el.clientHeight-options.tolerance>options.container.scrollTop&&el.offsetLeft+el.clientWidth-options.tolerance>options.container.scrollLeft&&el.offsetLeft+options.tolerance<containerRect.width+options.container.scrollLeft&&el.offsetTop+options.tolerance<containerRect.height+options.container.scrollTop}function eventHandler(){var trackedElements=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},options=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{tolerance:0},selectors=Object.keys(trackedElements),testVisibility=void 0;selectors.length&&(testVisibility=options.container===window?inViewport:inContainer,selectors.forEach(function(selector){trackedElements[selector].nodes.forEach(function(item){if(testVisibility(item.node,options)?(item.wasVisible=item.isVisible,item.isVisible=!0):(item.wasVisible=item.isVisible,item.isVisible=!1),item.isVisible===!0&&item.wasVisible===!1){if(!trackedElements[selector].enter)return;Object.keys(trackedElements[selector].enter).forEach(function(callback){"function"==typeof trackedElements[selector].enter[callback]&&trackedElements[selector].enter[callback](item.node,"enter")})}if(item.isVisible===!1&&item.wasVisible===!0){if(!trackedElements[selector].leave)return;Object.keys(trackedElements[selector].leave).forEach(function(callback){"function"==typeof trackedElements[selector].leave[callback]&&trackedElements[selector].leave[callback](item.node,"leave")})}})}))}function debouncedScroll(){var _this=this,timeout=void 0;return function(){clearTimeout(timeout),timeout=setTimeout(function(){eventHandler(_this.trackedElements,_this.options)},_this.options.throttle)}}function destroy(){this.options.container.removeEventListener("scroll",this._scroll),window.removeEventListener("resize",this._scroll),this.attached=!1}function off(event,selector,handler){var enterCallbacks=Object.keys(this.trackedElements[selector].enter),leaveCallbacks=Object.keys(this.trackedElements[selector].leave);if({}.hasOwnProperty.call(this.trackedElements,selector))if(handler){if(this.trackedElements[selector][event]){var callbackName="function"==typeof handler?handler.name:handler;delete this.trackedElements[selector][event][callbackName]}}else delete this.trackedElements[selector][event];enterCallbacks.length||leaveCallbacks.length||delete this.trackedElements[selector]}function on(event,selector,callback){var allowed=["enter","leave"];if(!event)throw new Error("No event given. Choose either enter or leave");if(!selector)throw new Error("No selector to track");if(allowed.indexOf(event)<0)throw new Error(event+" event is not supported");({}).hasOwnProperty.call(this.trackedElements,selector)||(this.trackedElements[selector]={}),this.trackedElements[selector].nodes=[];for(var i=0;i<document.querySelectorAll(selector).length;i++){var item={isVisible:!1,wasVisible:!1,node:document.querySelectorAll(selector)[i]};this.trackedElements[selector].nodes.push(item)}"function"==typeof callback&&(this.trackedElements[selector][event]||(this.trackedElements[selector][event]={}),this.trackedElements[selector][event][callback.name||"anonymous"]=callback)}function observeDOM(obj,callback){var MutationObserver=window.MutationObserver||window.WebKitMutationObserver;if(MutationObserver){var obs=new MutationObserver(callback);obs.observe(obj,{childList:!0,subtree:!0})}else obj.addEventListener("DOMNodeInserted",callback,!1),obj.addEventListener("DOMNodeRemoved",callback,!1)}function OnScreen(){var _this=this,options=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{tolerance:0,debounce:100,container:window};this.options={},this.trackedElements={},Object.defineProperties(this.options,{container:{configurable:!1,enumerable:!1,get:function(){var container=void 0;return"string"==typeof options.container?container=document.querySelector(options.container):options.container instanceof HTMLElement&&(container=options.container),container||window},set:function(value){options.container=value}},debounce:{get:function(){return parseInt(options.debounce,10)||100},set:function(value){options.debounce=value}},tolerance:{get:function(){return parseInt(options.tolerance,10)||0},set:function(value){options.tolerance=value}}}),Object.defineProperty(this,"_scroll",{enumerable:!1,configurable:!1,writable:!1,value:this._debouncedScroll.call(this)}),observeDOM(document.querySelector("body"),function(){Object.keys(_this.trackedElements).forEach(function(element){_this.on("enter",element),_this.on("leave",element)})}),this.attach()}return Object.defineProperties(OnScreen.prototype,{_debouncedScroll:{configurable:!1,writable:!1,enumerable:!1,value:debouncedScroll},attach:{configurable:!1,writable:!1,enumerable:!1,value:attach},destroy:{configurable:!1,writable:!1,enumerable:!1,value:destroy},off:{configurable:!1,writable:!1,enumerable:!1,value:off},on:{configurable:!1,writable:!1,enumerable:!1,value:on}}),OnScreen.check=inViewport,OnScreen});
 //# sourceMappingURL=dist/on-screen.umd.min.map

lib/helpers/observe-dom.js

@@ -11,8 +11,6 @@ /**
     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
-    const eventListenerSupported = window.addEventListener;
 
+    /* istanbul ignore else */
     if (MutationObserver) {
-        const obs = new MutationObserver((mutations) => {
-            if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) callback();
-        });
+        const obs = new MutationObserver(callback);
 
@@ -23,3 +21,3 @@ obs.observe(obj, {
         });
-    } else if (eventListenerSupported) {
+    } else {
         obj.addEventListener('DOMNodeInserted', callback, false);
@@ -26,0 +24,0 @@ obj.addEventListener('DOMNodeRemoved', callback, false);

lib/helpers/scroll-handler.js

 import inViewport from './in-viewport';
 import inContainer from './in-container';
 
-export default function eventHandler(trackedElements = {}, options = { tolerance: 0 }) {
+// TODO: Refactor this so it can be easily tested
+/* istanbul ignore next */
+function eventHandler(trackedElements = {}, options = { tolerance: 0 }) {
     const selectors = Object.keys(trackedElements);
@@ -26,10 +28,18 @@ let testVisibility;
             if (item.isVisible === true && item.wasVisible === false) {
-                if (typeof trackedElements[selector].enter === 'function') {
-                    trackedElements[selector].enter(item.node);
-                }
+                if (!trackedElements[selector].enter) return;
+
+                Object.keys(trackedElements[selector].enter).forEach((callback) => {
+                    if (typeof trackedElements[selector].enter[callback] === 'function') {
+                        trackedElements[selector].enter[callback](item.node, 'enter');
+                    }
+                });
             }
             if (item.isVisible === false && item.wasVisible === true) {
-                if (typeof trackedElements[selector].leave === 'function') {
-                    trackedElements[selector].leave(item.node);
-                }
+                if (!trackedElements[selector].leave) return;
+
+                Object.keys(trackedElements[selector].leave).forEach((callback) => {
+                    if (typeof trackedElements[selector].leave[callback] === 'function') {
+                        trackedElements[selector].leave[callback](item.node, 'leave');
+                    }
+                });
             }
@@ -39,1 +49,3 @@ });
 }
+
+export default eventHandler;

lib/methods/off.js

@@ -9,9 +9,18 @@ /**
  */
-function off(event, selector) {
+function off(event, selector, handler) {
+    const enterCallbacks = Object.keys(this.trackedElements[selector].enter);
+    const leaveCallbacks = Object.keys(this.trackedElements[selector].leave);
+
     if ({}.hasOwnProperty.call(this.trackedElements, selector)) {
-        if (this.trackedElements[selector][event]) {
+        if (handler) {
+            if (this.trackedElements[selector][event]) {
+                const callbackName = (typeof handler === 'function') ? handler.name : handler;
+                delete this.trackedElements[selector][event][callbackName];
+            }
+        } else {
             delete this.trackedElements[selector][event];
         }
     }
-    if (!this.trackedElements[selector].enter && !this.trackedElements[selector].leave) {
+
+    if (!enterCallbacks.length && !leaveCallbacks.length) {
         delete this.trackedElements[selector];
@@ -18,0 +27,0 @@ }

lib/methods/on.js

@@ -33,3 +33,7 @@ /**
     if (typeof callback === 'function') {
-        this.trackedElements[selector][event] = callback;
+        if (!this.trackedElements[selector][event]) {
+            this.trackedElements[selector][event] = {};
+        }
+
+        this.trackedElements[selector][event][(callback.name || 'anonymous')] = callback;
     }
@@ -36,0 +40,0 @@ }

package.json

 {
   "name": "onscreen",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A light library that does stuff when the matched elements enter or leave the viewport",
@@ -37,2 +37,4 @@ "main": "dist/on-screen.umd.js",
     "babel-eslint": "6.1.2",
+    "babel-plugin-external-helpers": "^6.18.0",
+    "babel-preset-es2015": "^6.18.0",
     "babel-preset-es2015-rollup": "1.1.1",
@@ -39,0 +41,0 @@ "chai": "^3.5.0",

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106662

increased by19.68%

Number of package files

20

increased by5.26%

Lines of code

1038

increased by5.17%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

195

increased byInfinity%

Worsened metrics

Dev dependency count

28

increased by7.69%

No dependency changes