adds global filter option to off-click-filter

Author: Ricardo-Marques

README.md

@@ -35,5 +35,8 @@ Here we have a slide out navigation div that will appear when the user clicks a
 ```
 
 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-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 (gets parsed as javascript, so remember to wrap in single quotes)
+
+The included `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 (gets parsed as javascript, so remember to wrap in single quotes).
+If you pass `off-click-filter="'*'"` that element will be a filter for every off-click on the page.

dist/angular-off-click.js

@@ -47,7 +47,7 @@ angular.module('offClick').directive('offClick', ["$rootScope", "$parse", "OffCl
         }
         var target = event.target || event.srcElement;
         angular.forEach(listeners, function (listener, i) {
-            var filters = [];
+            var filters = OffClickFilterCache['*'] || [];
             if (listener.elm.id && listener.elm.id !== '') {
                 if (OffClickFilterCache['#' + listener.elm.id]) filters = filters.concat(OffClickFilterCache['#' + listener.elm.id]);
             }

dist/angular-off-click.min.js

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

dist/angular-off-click.module.js

@@ -0,0 +1,112 @@
+'use strict';
+
+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;
+                });
+            };
+        }
+    };
+}]);

dist/directives/offClick.js

@@ -0,0 +1,31 @@
+'use strict';
+
+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];
+                        }
+                    });
+                });
+            };
+        }
+    };
+}]);

dist/directives/offClickFilter.js

@@ -0,0 +1,6 @@
+'use strict';
+
+angular.module('offClick').factory('OffClickFilterCache', function () {
+    var filterCache = {};
+    return filterCache;
+});

dist/providers/OffClickFilterCache.factory.js

@@ -45,7 +45,7 @@ angular.module('offClick')
         }
         const target = event.target || event.srcElement;
         angular.forEach(listeners, (listener, i) => {
-            let filters=[];
+            let filters = OffClickFilterCache['*'] || [];
             if(listener.elm.id && listener.elm.id !== '') {
                 if(OffClickFilterCache['#' + listener.elm.id]) filters = filters.concat(OffClickFilterCache['#'+listener.elm.id]);
             }