new ES6 build pipeline and reworked off-click-filter

Author: Ricardo-Marques

.gitignore

@@ -0,0 +1 @@
+node_modules

.nmpignore

@@ -0,0 +1,4 @@
+node_modules
+src
+bower.json
+gulpfile.js

README.md

@@ -7,24 +7,25 @@ It's like click, but when you don't click on your element.
 ```
 bower install angular-off-click --save
 ```
+or
+```
+npm install angular-off-click --save
+
+
 ```javascript
 angular('yourAngularApp',['offClick']);
 ```
 
 <h4>Usage/Example</h4>
 Here we have a slide out navigation div that will appear when the user clicks a button. We want the div to go away when they click off of it (`off-click`).  We also want to make sure the button that triggers the div to open, also does initial close it (`off-click-filter`).
 ```html
-<button id="nav-toggle">Show Navigation</button>
-<div id="slide-out-nav" ng-show="showNav" off-click="showNav = false" off-click-filter="'#nav-toggle'" off-click-if="showNav">
+<button id="nav-toggle" off-click-filter="#slide-out-nav" ng-click="showNav = !showName">Show Navigation</button>
+<div id="slide-out-nav" ng-show="showNav" off-click="showNav = false" off-click-if="showNav">
     ...
 </div>
 ```
 
 The `off-click` attribute is the expression or function that will execute each time the user doesn't click on your element (or filter)<br />
-The optional `off-click-filter` attribute is a comma separated list of selectors that will not trigger `off-click` when they are clicked.<br />
-The optional `off-click-if` attribute is an expression that will determine if the `off-click` should trigger or not.
-
-<h4>Other Features</h4>
-Ability to choose elements outside of your element that will not trigger the `off-click` event.<br />
-Ability to pass an expression to determine of the `off-click` event should trigger.
+The optional `off-click-if` attribute is an expression that will determine if the `off-click` should trigger or not.<br/>
+The optional `off-click-filter` directive allows you to pass a comma separated list of targets whose `off-click` will not be triggered when the element `off-click-filter` was applied to is clicked.
 

bower.json

@@ -6,6 +6,25 @@
     ".jshintrc",
     "**/*.txt"
   ],
+  "main": [
+    "./dist/angular-off-click.js"
+  ],
+  "license": "MIT",
+  "keywords":[
+    "angular",
+    "off",
+    "click"
+  ],
+    "author": {
+    "name": "Evan Sharp",
+    "url":"https://github.com/TheSharpieOne"
+  },
+  "contributors": [
+    {
+      "name": "Ricardo Marques",
+      "url": "https://github.com/RicardoAlmeidaMarques"
+    }
+  ],
   "dependencies": {
     "angular": "*"
   }

dist/angular-off-click.js

@@ -0,0 +1,146 @@
+'use strict';
+
+angular.module('offClick', []);
+angular.module('offClick').directive('offClick', ["$rootScope", "$parse", "OffClickFilterCache", function ($rootScope, $parse, OffClickFilterCache) {
+    var id = 0;
+    var listeners = {};
+    // add variable to detect touch users moving..
+    var touchMove = false;
+
+    var targetInFilter = function targetInFilter(target, elms) {
+        if (!target || !elms) return false;
+        var elmsLen = elms.length;
+        for (var i = 0; i < elmsLen; ++i) {
+            var currentElem = elms[i];
+            var containsTarget = false;
+            try {
+                containsTarget = currentElem.contains(target);
+            } catch (e) {
+                // If the node is not an Element (e.g., an SVGElement) node.contains() throws Exception in IE,
+                // see https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect
+                // In this case we use compareDocumentPosition() instead.
+                if (typeof currentElem.compareDocumentPosition !== 'undefined') {
+                    containsTarget = currentElem === target || Boolean(currentElem.compareDocumentPosition(target) & 16);
+                }
+            }
+
+            if (containsTarget) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    var offClickEventHandler = function offClickEventHandler(event) {
+        // If event is a touchmove adjust touchMove state
+        if (event.type === 'touchmove') {
+            touchMove = true;
+            // And end function
+            return false;
+        }
+        // This will always fire on the touchend after the touchmove runs...
+        if (touchMove) {
+            // Reset touchmove to false
+            touchMove = false;
+            // And end function
+            return false;
+        }
+        var target = event.target || event.srcElement;
+        angular.forEach(listeners, function (listener, i) {
+            var filters = [];
+            if (listener.elm.id && listener.elm.id !== '') {
+                if (OffClickFilterCache['#' + listener.elm.id]) filters = filters.concat(OffClickFilterCache['#' + listener.elm.id]);
+            }
+            // classList is an object in IE10 and 11 iirc, using angular.forEach to iterate both over an array or object values
+            angular.forEach(listener.elm.classList, function (className) {
+                if (OffClickFilterCache['.' + className]) filters = filters.concat(OffClickFilterCache['.' + className]);
+            });
+            if (!(listener.elm.contains(target) || targetInFilter(target, filters))) {
+                $rootScope.$evalAsync(function () {
+                    listener.cb(listener.scope, {
+                        $event: event
+                    });
+                });
+            }
+        });
+    };
+
+    // Add event listeners to handle various events. Destop will ignore touch events
+    document.addEventListener("touchmove", offClickEventHandler, true);
+    document.addEventListener("touchend", offClickEventHandler, true);
+    document.addEventListener('click', offClickEventHandler, true);
+
+    return {
+        restrict: 'A',
+        compile: function compile(elem, attrs) {
+            var fn = $parse(attrs.offClick);
+
+            var elmId = id++;
+            var removeWatcher = void 0;
+
+            var on = function on() {
+                listeners[elmId] = {
+                    elm: element[0],
+                    cb: fn,
+                    scope: scope
+                };
+            };
+
+            var off = function off() {
+                listeners[elmId] = null;
+                delete listeners[elmId];
+            };
+
+            if (attrs.offClickIf) {
+                removeWatcher = $rootScope.$watch(function () {
+                    return $parse(attrs.offClickIf)(scope);
+                }, function (newVal) {
+                    newVal && on() || !newVal && off();
+                });
+            } else on();
+
+            return function (scope, element) {
+                scope.$on('$destroy', function () {
+                    off();
+                    if (removeWatcher) {
+                        removeWatcher();
+                    }
+                    element = null;
+                });
+            };
+        }
+    };
+}]);
+angular.module('offClick').directive('offClickFilter', ["OffClickFilterCache", "$parse", function (OffClickFilterCache, $parse) {
+    var filters = void 0;
+    var addFiltersToCache = function addFiltersToCache(filters) {
+        filters.forEach(function (filter) {
+            OffClickFilterCache[filter] ? OffClickFilterCache[filter].push(elem[0]) : OffClickFilterCache[filter] = [elem[0]];
+        });
+    };
+    return {
+        restrict: 'A',
+        compile: function compile(elem, attrs) {
+            addFiltersToCache($parse(attrs.OffClickFilterCache).split(',').map(function (x) {
+                return x.trim();
+            }));
+            return function (scope, element) {
+                scope.$on('$destroy', function () {
+                    element = null;
+                    filters.forEach(function (filter) {
+                        if (OffClickFilterCache[filter].length > 1) {
+                            OffClickFilterCache[filter].splice(OffClickFilterCache[filter].indexOf(elem[0]), 1);
+                        } else {
+                            OffClickFilterCache[filter] = null;
+                            delete OffClickFilterCache[filter];
+                        }
+                    });
+                });
+            };
+        }
+    };
+}]);
+angular.module('offClick').factory('OffClickFilterCache', function () {
+    var filterCache = {};
+    return filterCache;
+});

dist/angular-off-click.min.js

@@ -0,0 +1,18 @@
+var gulp = require('gulp');
+var tasks = ['concat','uglify','ng-annotate','babel','rename'];
+tasks.forEach((task) => {
+    gulp[task] = require(`gulp-${ task }`);
+});
+
+gulp.task('build',() => {
+    gulp.src(['src/*.module.js','src/**/*.js'])
+        .pipe(gulp.concat('angular-off-click.js'))
+        .pipe(gulp.babel({
+            presets: ['es2015']
+        }))
+        .pipe(gulp['ng-annotate']())
+        .pipe(gulp.dest('dist'))
+        .pipe(gulp.rename('angular-off-click.min.js'))
+        .pipe(gulp.uglify())
+        .pipe(gulp.dest('dist'));
+});

gulpfile.js

@@ -4,8 +4,38 @@
   "repository": {
     "type": "git"
   },
-  "main": "./offClick",
+  "main": [
+    "./dist/angular-off-click.js"
+  ],
+  "scripts": {
+    "build": "gulp build"
+  },
+  "keywords": [
+    "angular",
+    "off",
+    "click"
+  ],
+  "author": {
+    "name": "Evan Sharp",
+    "url": "https://github.com/TheSharpieOne"
+  },
+  "contributors": [
+    {
+      "name": "Ricardo Marques",
+      "url": "https://github.com/RicardoAlmeidaMarques"
+    }
+  ],
+  "license": "MIT",
   "dependencies": {
     "angular": "*"
+  },
+  "devDependencies": {
+    "babel-preset-es2015": "^6.9.0",
+    "gulp": "^3.9.1",
+    "gulp-babel": "^6.1.2",
+    "gulp-concat": "^2.6.0",
+    "gulp-ng-annotate": "^2.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^1.5.3"
   }
 }

package.json

@@ -0,0 +1 @@
+angular.module('offClick',[]);