Skip to content

Commit f8d12a5

Browse files
Ricardo-MarquesRicardo-Marques
committed
Merge branch 'master' of github.com:TheSharpieOne/angular-off-click into es6-rework
2 parents 0bf62ee + 004ddc5 commit f8d12a5

7 files changed

Lines changed: 71 additions & 59 deletions

File tree

‎README.md‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,39 @@
1+
[![GitHub version](https://badge.fury.io/gh/TheSharpieOne%2Fangular-off-click.svg)](https://badge.fury.io/gh/TheSharpieOne%2Fangular-off-click) [![npm version](https://badge.fury.io/js/angular-off-click.svg)](https://badge.fury.io/js/angular-off-click) [![Bower version](https://badge.fury.io/bo/angular-off-click.svg)](https://badge.fury.io/bo/angular-off-click) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/TheSharpieOne/angular-off-click/master/LICENSE.md)
12
angular-off-click
23
=================
34

45
It's like click, but when you don't click on your element.
56

67
<h4>Installing</h4>
78
```
9+
npm install angular-off-click --save
10+
```
11+
```html
12+
<script scr="node_modules/angular-off-click/dist/angular-off-click.js"></script>
13+
```
14+
15+
-OR-
16+
```
817
bower install angular-off-click --save
918
```
19+
```html
20+
<script scr="bower_components/angular-off-click/dist/angular-off-click.js"></script>
21+
```
1022

23+
-THEN-
1124
```javascript
1225
angular('yourAngularApp',['offClick']);
1326
```
1427

1528
<h4>Usage/Example</h4>
1629
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`).
1730
```html
18-
<button id="nav-toggle" off-click-filter="#slide-out-nav" ng-click="showNav = !showNav">Show Navigation</button>
31+
<button id="nav-toggle" off-click-filter="'#slide-out-nav'" ng-click="showNav = !showNav">Show Navigation</button>
1932
<div id="slide-out-nav" ng-show="showNav" off-click="showNav = false" off-click-if="showNav">
2033
...
2134
</div>
2235
```
2336

2437
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 />
2538
The optional `off-click-if` attribute is an expression that will determine if the `off-click` should trigger or not.<br/>
26-
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.
27-
39+
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)

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-off-click",
3-
"version": "1.0.0",
3+
"version": "1.0.2",
44
"main": [
55
"./dist/angular-off-click.js"
66
],

‎dist/angular-off-click.js‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -78,28 +78,28 @@ angular.module('offClick').directive('offClick', ["$rootScope", "$parse", "OffCl
7878
var elmId = id++;
7979
var removeWatcher = void 0;
8080

81-
var on = function on() {
82-
listeners[elmId] = {
83-
elm: element[0],
84-
cb: fn,
85-
scope: scope
81+
return function (scope, element) {
82+
var on = function on() {
83+
listeners[elmId] = {
84+
elm: element[0],
85+
cb: fn,
86+
scope: scope
87+
};
8688
};
87-
};
8889

89-
var off = function off() {
90-
listeners[elmId] = null;
91-
delete listeners[elmId];
92-
};
90+
var off = function off() {
91+
listeners[elmId] = null;
92+
delete listeners[elmId];
93+
};
9394

94-
if (attrs.offClickIf) {
95-
removeWatcher = $rootScope.$watch(function () {
96-
return $parse(attrs.offClickIf)(scope);
97-
}, function (newVal) {
98-
newVal && on() || !newVal && off();
99-
});
100-
} else on();
95+
if (attrs.offClickIf) {
96+
removeWatcher = $rootScope.$watch(function () {
97+
return $parse(attrs.offClickIf)(scope);
98+
}, function (newVal) {
99+
newVal && on() || !newVal && off();
100+
});
101+
} else on();
101102

102-
return function (scope, element) {
103103
scope.$on('$destroy', function () {
104104
off();
105105
if (removeWatcher) {
@@ -113,23 +113,24 @@ angular.module('offClick').directive('offClick', ["$rootScope", "$parse", "OffCl
113113
}]);
114114
angular.module('offClick').directive('offClickFilter', ["OffClickFilterCache", "$parse", function (OffClickFilterCache, $parse) {
115115
var filters = void 0;
116-
var addFiltersToCache = function addFiltersToCache(filters) {
117-
filters.forEach(function (filter) {
118-
OffClickFilterCache[filter] ? OffClickFilterCache[filter].push(elem[0]) : OffClickFilterCache[filter] = [elem[0]];
119-
});
120-
};
116+
121117
return {
122118
restrict: 'A',
123119
compile: function compile(elem, attrs) {
124-
addFiltersToCache($parse(attrs.OffClickFilterCache).split(',').map(function (x) {
125-
return x.trim();
126-
}));
127120
return function (scope, element) {
121+
filters = $parse(attrs.offClickFilter)(scope).split(',').map(function (x) {
122+
return x.trim();
123+
});
124+
125+
filters.forEach(function (filter) {
126+
OffClickFilterCache[filter] ? OffClickFilterCache[filter].push(element[0]) : OffClickFilterCache[filter] = [element[0]];
127+
});
128+
128129
scope.$on('$destroy', function () {
129130
element = null;
130131
filters.forEach(function (filter) {
131132
if (OffClickFilterCache[filter].length > 1) {
132-
OffClickFilterCache[filter].splice(OffClickFilterCache[filter].indexOf(elem[0]), 1);
133+
OffClickFilterCache[filter].splice(OffClickFilterCache[filter].indexOf(element[0]), 1);
133134
} else {
134135
OffClickFilterCache[filter] = null;
135136
delete OffClickFilterCache[filter];

‎dist/angular-off-click.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
{
22
"name": "angular-off-click",
3-
"version": "1.0.0",
3+
"version": "1.0.2",
44
"repository": {
55
"type": "git"
66
},
7-
"main": [
8-
"./dist/angular-off-click.js"
9-
],
7+
"main": "./dist/angular-off-click.js",
108
"scripts": {
119
"build": "gulp build"
1210
},

‎src/directives/offClick.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -79,26 +79,26 @@ angular.module('offClick')
7979
const elmId = id++;
8080
let removeWatcher;
8181

82-
const on = () => {
83-
listeners[elmId] = {
84-
elm: element[0],
85-
cb: fn,
86-
scope: scope
82+
return (scope, element) => {
83+
const on = () => {
84+
listeners[elmId] = {
85+
elm: element[0],
86+
cb: fn,
87+
scope: scope
88+
};
8789
};
88-
};
8990

90-
const off = () => {
91-
listeners[elmId] = null;
92-
delete listeners[elmId];
93-
};
91+
const off = () => {
92+
listeners[elmId] = null;
93+
delete listeners[elmId];
94+
};
9495

95-
if (attrs.offClickIf) {
96-
removeWatcher = $rootScope.$watch(() => $parse(attrs.offClickIf)(scope), (newVal) => {
97-
newVal && on() || !newVal && off()
98-
});
99-
} else on();
96+
if (attrs.offClickIf) {
97+
removeWatcher = $rootScope.$watch(() => $parse(attrs.offClickIf)(scope), (newVal) => {
98+
newVal && on() || !newVal && off()
99+
});
100+
} else on();
100101

101-
return (scope, element) => {
102102
scope.$on('$destroy', () => {
103103
off();
104104
if (removeWatcher) {

‎src/directives/offClickFilter.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
angular.module('offClick')
22
.directive('offClickFilter', (OffClickFilterCache, $parse) => {
33
let filters;
4-
const addFiltersToCache = (filters) => {
5-
filters.forEach((filter) => {
6-
OffClickFilterCache[filter] ? OffClickFilterCache[filter].push(elem[0]) : OffClickFilterCache[filter] = [elem[0]];
7-
});
8-
};
4+
95
return {
106
restrict:'A',
117
compile : (elem, attrs) => {
12-
addFiltersToCache ($parse(attrs.OffClickFilterCache).split(',').map(x => x.trim()));
138
return (scope, element) => {
9+
filters = $parse(attrs.offClickFilter)(scope).split(',').map(x => x.trim());
10+
11+
filters.forEach(filter => {
12+
OffClickFilterCache[filter] ? OffClickFilterCache[filter].push(element[0]) : OffClickFilterCache[filter] = [element[0]];
13+
});
14+
1415
scope.$on('$destroy',() => {
1516
element = null;
1617
filters.forEach((filter) => {
1718
if(OffClickFilterCache[filter].length > 1) {
18-
OffClickFilterCache[filter].splice(OffClickFilterCache[filter].indexOf(elem[0]), 1);
19+
OffClickFilterCache[filter].splice(OffClickFilterCache[filter].indexOf(element[0]), 1);
1920
}
2021
else {
2122
OffClickFilterCache[filter] = null;

0 commit comments

Comments
 (0)