onscreen - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

dist/on-screen.es6.js

@@ -43,3 +43,3 @@ /**
 
-    return(
+    return (
         // Check bottom boundary
@@ -60,7 +60,7 @@ elRect.bottom - options.tolerance > 0 &&
 /**
- * Checks an element's position in respect to the viewport
- * and determines wether it's inside the viewport.
+ * Checks an element's position in respect to a HTMLElement
+ * and determines wether it's within its boundaries.
  *
  * @param {node} element The DOM node you want to check
- * @return {boolean} A boolean value that indicates wether is on or off the viewport.
+ * @return {boolean} A boolean value that indicates wether is on or off the container.
  */
@@ -71,3 +71,3 @@ function inContainer(el) {
     if (!el) {
-        throw new Error('You should specity the element you want to test');
+        throw new Error('You should specify the element you want to test');
     }
@@ -99,3 +99,3 @@
 
-    return(
+    return (
         // // Check bottom boundary
@@ -192,3 +192,3 @@ el.offsetTop + el.clientHeight - options.tolerance > options.container.scrollTop &&
 function off(event, selector) {
-    if (this.trackedElements.hasOwnProperty(selector)) {
+    if ({}.hasOwnProperty.call(this.trackedElements, selector)) {
         if (this.trackedElements[selector][event]) {
@@ -218,3 +218,3 @@ delete this.trackedElements[selector][event];
 
-    if (!this.trackedElements.hasOwnProperty(selector)) {
+    if (!{}.hasOwnProperty.call(this.trackedElements, selector)) {
         this.trackedElements[selector] = {};
@@ -371,2 +371,2 @@ }
 export default OnScreen;
-//# sourceMappingURL=on-screen.es6.js.map
+//# sourceMappingURL=on-screen.es6.js.map

dist/on-screen.umd.js

@@ -49,3 +49,3 @@ (function (global, factory) {
 
-      return(
+      return (
           // Check bottom boundary
@@ -66,7 +66,7 @@ elRect.bottom - options.tolerance > 0 &&
   /**
-   * Checks an element's position in respect to the viewport
-   * and determines wether it's inside the viewport.
+   * Checks an element's position in respect to a HTMLElement
+   * and determines wether it's within its boundaries.
    *
    * @param {node} element The DOM node you want to check
-   * @return {boolean} A boolean value that indicates wether is on or off the viewport.
+   * @return {boolean} A boolean value that indicates wether is on or off the container.
    */
@@ -77,3 +77,3 @@ function inContainer(el) {
       if (!el) {
-          throw new Error('You should specity the element you want to test');
+          throw new Error('You should specify the element you want to test');
       }
@@ -105,3 +105,3 @@
 
-      return(
+      return (
           // // Check bottom boundary
@@ -198,3 +198,3 @@ el.offsetTop + el.clientHeight - options.tolerance > options.container.scrollTop &&
   function off(event, selector) {
-      if (this.trackedElements.hasOwnProperty(selector)) {
+      if ({}.hasOwnProperty.call(this.trackedElements, selector)) {
           if (this.trackedElements[selector][event]) {
@@ -224,3 +224,3 @@ delete this.trackedElements[selector][event];
 
-      if (!this.trackedElements.hasOwnProperty(selector)) {
+      if (!{}.hasOwnProperty.call(this.trackedElements, selector)) {
           this.trackedElements[selector] = {};
@@ -379,2 +379,2 @@ }
 }));
-//# sourceMappingURL=on-screen.umd.js.map
+//# sourceMappingURL=on-screen.umd.js.map

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 specity 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){this.trackedElements.hasOwnProperty(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");this.trackedElements.hasOwnProperty(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]?{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});
 //# sourceMappingURL=dist/on-screen.umd.min.map

lib/helpers/in-container.js

 /**
- * Checks an element's position in respect to the viewport
- * and determines wether it's inside the viewport.
+ * Checks an element's position in respect to a HTMLElement
+ * and determines wether it's within its boundaries.
  *
  * @param {node} element The DOM node you want to check
- * @return {boolean} A boolean value that indicates wether is on or off the viewport.
+ * @return {boolean} A boolean value that indicates wether is on or off the container.
  */
 function inContainer(el, options = { tolerance: 0, container: '' }) {
     if (!el) {
-        throw new Error('You should specity the element you want to test');
+        throw new Error('You should specify the element you want to test');
     }
@@ -12,0 +12,0 @@

lib/methods/off.js

@@ -10,3 +10,3 @@ /**
 function off(event, selector) {
-    if (this.trackedElements.hasOwnProperty(selector)) {
+    if ({}.hasOwnProperty.call(this.trackedElements, selector)) {
         if (this.trackedElements[selector][event]) {
@@ -13,0 +13,0 @@ delete this.trackedElements[selector][event];

lib/methods/on.js

@@ -16,3 +16,3 @@ /**
 
-    if (!this.trackedElements.hasOwnProperty(selector)) {
+    if (!{}.hasOwnProperty.call(this.trackedElements, selector)) {
         this.trackedElements[selector] = {};
@@ -19,0 +19,0 @@ }

package.json

 {
   "name": "onscreen",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "A light library that does stuff when the matched elements enter or leave the viewport",
@@ -12,4 +12,3 @@ "main": "dist/on-screen.umd.js",
     "prepublish": "npm run build",
-    "pretest": "rollup -c rollup.config.test.js",
-    "test": "mocha-phantomjs -v 800x600 http://localhost:8080/test/test-runner.html",
+    "test": "karma start",
     "dev": "watch 'npm run build' lib/"
@@ -38,24 +37,30 @@ },
   "devDependencies": {
-    "babel-eslint": "6.0.4",
+    "babel-eslint": "6.1.2",
     "babel-preset-es2015-rollup": "1.1.1",
-    "chai": "3.5.0",
-    "eslint": "2.10.2",
-    "eslint-config-airbnb-base": "3.0.1",
-    "eslint-plugin-import": "1.8.0",
-    "fs": "0.0.2",
-    "http-server": "0.9.0",
-    "mocha": "2.5.1",
-    "mocha-phantomjs": "4.0.2",
+    "chai": "^3.5.0",
+    "eslint": "3.2.2",
+    "eslint-config-airbnb-base": "5.0.1",
+    "eslint-plugin-import": "1.12.0",
+    "karma": "^1.1.2",
+    "karma-chai": "^0.1.0",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.1.1",
+    "karma-mocha-reporter": "^2.1.0",
+    "karma-phantomjs-launcher": "^1.0.1",
+    "karma-rollup-plugin": "^0.2.1",
+    "karma-sinon": "^1.0.5",
+    "mocha": "3.0.1",
     "mocha-phantomjs-core": "1.3.1",
     "path": "0.12.7",
-    "phantomjs-prebuilt": "2.1.7",
-    "require-stub": "2.2.4",
-    "rollup": "0.26.3",
-    "rollup-plugin-babel": "2.4.0",
-    "rollup-plugin-multi-entry": "1.2.0",
-    "source-map-support": "0.4.0",
+    "phantomjs-prebuilt": "2.1.10",
+    "rollup": "0.34.3",
+    "rollup-plugin-babel": "2.6.1",
+    "rollup-plugin-istanbul": "^1.0.0",
+    "rollup-plugin-multi-entry": "2.0.1",
+    "sinon": "1.17.5",
+    "source-map-support": "0.4.2",
     "uglifyjs": "2.4.10",
-    "watch": "0.18.0"
+    "watch": "0.19.1"
   },
   "dependencies": {}
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89125

0.59%

Lines of code

987

0.2%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

26

30%

No dependency changes