add treshold option, fixed cs

Author: digitalkaoz

.eslintrc.json

@@ -230,7 +230,7 @@
         ],
         "linebreak-style": [
             2,
-            "windows"
+            "unix"
         ],
         "max-nested-callbacks": [
             2,
@@ -367,4 +367,4 @@
         "prefer-template": 2,
         "require-yield": 2
     }
-}
+}

README.md

@@ -18,7 +18,7 @@ Using a CDN via jsDelivr:
 
 ********************************************
 
-##Method - trigger(options, callback)
+## Method - trigger(options, callback)
 
 **Description:**
  A method for adding triggers when element is visible in the viewport. 
@@ -36,6 +36,8 @@ as long as the scroll event is happening.
 
 **alwaysRunOnTrigger (boolean)**: by default the triggered element callback will only be executed one time. Setting to true will re-trigger the callback everytime the element has been in and out of the viewport. 
 
+**treshold (number)**: add this much pixels to calculation to the visibility check (useful if you want to execute code just before the element becomes visible) 
+
 **callback (object)**:
 This is the function which will be exectued when the element is detected in the viewport. To reference the node, pass it
 into the callback as an argument.
@@ -46,14 +48,15 @@ into the callback as an argument.
 		target: '.collection-list .items',
 		surfaceVisible: 0.5,
 		runOnScroll: true,
-		alwaysRunOnTrigger: true
+		alwaysRunOnTrigger: true,
+		treshold: 200
 	}, (element) => {
 		$(element).addClass("visible");
 	});
 
 ********************************************
 
-##Method - sequence(options, callback)
+## Method - sequence(options, callback)
 
 **Description:**
  A method for staggering an array of triggers. 
@@ -98,7 +101,7 @@ can get the item and index of the array as arguments
 
 ********************************************
 
-##Method - out(function)
+## Method - out(function)
 
 When the trigger is has been executed and the element is no longer in the viewport, the out method
 can be chained to the trigger to execute the specified function.
@@ -116,7 +119,7 @@ can be chained to the trigger to execute the specified function.
 
 ********************************************
 
-##Hooks
+## Hooks
 
 **data-scrollmap-loaded (boolean):**
 Once the element is initialized.

dist/scrollmap.js

@@ -20,7 +20,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
  * @namespace scrollMap
  * @description store element points and check if
  * elements are visible
-*/
+ */
 
 var Scroll_Event_Trigger = function () {
     function Scroll_Event_Trigger() {
@@ -157,7 +157,7 @@ var Scroll_Event_Trigger = function () {
         }
     }, {
         key: "elementInViewport",
-        value: function elementInViewport(el, percetageOfElement) {
+        value: function elementInViewport(el, percetageOfElement, treshold) {
 
             /*
              * @desc check if element is in viewport
@@ -173,7 +173,7 @@ var Scroll_Event_Trigger = function () {
             var rect = el.getBoundingClientRect();
 
             var stats = {
-                top: rect.top - window.innerHeight,
+                top: rect.top - window.innerHeight + treshold,
                 bottom: rect.bottom + rect.height,
                 height: rect.height
             };
@@ -188,7 +188,7 @@ var Scroll_Event_Trigger = function () {
     }, {
         key: "checkVisible",
         value: function checkVisible(point) {
-            var viewport = this.elementInViewport(point.element, point.surfaceVisible);
+            var viewport = this.elementInViewport(point.element, point.surfaceVisible, point.treshold);
 
             if (viewport) {
                 this.setTriggerIn(point);
@@ -234,8 +234,20 @@ var Scroll_Event_Trigger = function () {
         value: function events() {
             var _this2 = this;
 
+            var supportsPassive = false;
+
+            try {
+                var opts = Object.defineProperty({}, "passive", {
+                    get: function get() {
+                        supportsPassive = true;
+                    }
+                });
+
+                window.addEventListener("test", null, opts);
+            } catch (e) {} // eslint-disable-line no-empty
+
             // initial check on page load to see if elements are visible
-            window.addEventListener('load', function () {
+            window.addEventListener("load", function () {
                 _this2.points.forEach(function (point) {
                     _this2.checkVisible(point);
                 });
@@ -247,15 +259,13 @@ var Scroll_Event_Trigger = function () {
                 _this2.points.forEach(function (point) {
                     _this2.checkVisible(point);
                 });
-            });
+            }, supportsPassive ? { passive: true } : false);
         }
     }]);
 
     return Scroll_Event_Trigger;
 }();
 
-;
-
 var Scrollmap = new Scroll_Event_Trigger();
 
 window.Scrollmap = Scrollmap;

dist/trigger.js

@@ -1,44 +1,44 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
-	value: true
+    value: true
 });
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var Trigger = function () {
-	function Trigger(element, options, callback) {
-		_classCallCheck(this, Trigger);
-
-		this.element = element;
-		this.surfaceVisible = 0.5;
-		this.callback = callback;
-		this.triggeredIn = false;
-		this.triggeredOut = false;
-		this.runOnScroll = false;
-		this.alwaysRunOnTrigger = false;
-		if (options) {
-			Object.assign(this, options);
-		}
-	}
-
-	_createClass(Trigger, [{
-		key: "onTriggerIn",
-		value: function onTriggerIn() {
-			this.callback(this.element);
-			return this;
-		}
-	}, {
-		key: "destroy",
-		value: function destroy() {
-			this.element = null;
-			this.isDestroyed = true;
-		}
-	}]);
-
-	return Trigger;
+    function Trigger(element, options, callback) {
+        _classCallCheck(this, Trigger);
+
+        this.element = element;
+        this.surfaceVisible = 0.5;
+        this.treshold = 0;
+        this.callback = callback;
+        this.triggeredIn = false;
+        this.triggeredOut = false;
+        this.runOnScroll = false;
+        this.alwaysRunOnTrigger = false;
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+
+    _createClass(Trigger, [{
+        key: "onTriggerIn",
+        value: function onTriggerIn() {
+            this.callback(this.element);
+            return this;
+        }
+    }, {
+        key: "destroy",
+        value: function destroy() {
+            this.element = null;
+        }
+    }]);
+
+    return Trigger;
 }();
 
 exports.default = Trigger;

package.json

@@ -4,11 +4,11 @@
   "description": "A module for testing if an element is visible in the viewport, then triggers callbacks on execution.",
   "main": "./dist/scrollmap.js",
   "scripts": {
-    "start": "set PROD_ENV=false&&webpack --progress --colors --watch",
+    "start": "PROD_ENV=false webpack --progress --colors --watch",
     "watch": "./node_modules/.bin/webpack -d --watch --colors",
-    "build": "set PROD_ENV=true&&babel src -d dist",
-    "dev": "set PROD_ENV=false&&webpack-dev-server ./src/scrollmap.js --hot --watch --colors",
-    "cdn" : "set PROD_ENV=false&&webpack&&set PROD_ENV=true&&webpack -p",
+    "build": "PROD_ENV=true babel src -d dist",
+    "dev": "PROD_ENV=false webpack-dev-server ./src/scrollmap.js --hot --watch --colors",
+    "cdn": "PROD_ENV=false webpack && PROD_ENV=true webpack -p",
     "lint": "eslint src"
   },
   "repository": {
@@ -47,7 +47,9 @@
     "webpack-dev-server": "^2.4.2"
   },
   "babel": {
-      "presets": ["latest"]
+    "presets": [
+      "latest"
+    ]
   },
   "keywords": [
     "element",