Skip to content

Commit 72c8eb1

Browse files
author
Chris Gross
committed
Angular 1.2 support
1 parent c0a48ac commit 72c8eb1

File tree

13 files changed

+173
-94
lines changed

13 files changed

+173
-94
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ module.exports = function (grunt) {
4949
},
5050
jasmine: {
5151
unit: {
52-
src: ['./bower_components/jquery/jquery.js','./bower_components/angular-unstable/angular.js','./lib/angular-mocks.js','./bower_components/angular-promise-tracker/promise-tracker.js','./dist/angular-busy.js','./demo/demo.js'],
52+
src: ['./bower_components/jquery/jquery.js','./bower_components/angular-unstable/angular.min.js','./bower_components/angular-animate/angular-animate.js','./lib/angular-mocks.js','./bower_components/angular-promise-tracker/promise-tracker.js','./dist/angular-busy.js','./demo/demo.js'],
5353
options: {
5454
specs: 'test/*.js'
5555
}

‎README.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ This library depends on [Andy Joslin's angular-promise-tracker](https://github.c
77
Annotate an `$http` request using `angular-promise-tracker` and add `cg-busy` on an element to display a busy
88
indication on a specific element during the `$http` request.
99

10+
This library builds on Angular 1.2 and the new Angular animate module in `animate.js`.
11+
1012
Supports IE 10, and recent versions of FF and Chrome.
1113

1214
## Demo
@@ -15,12 +17,12 @@ Supports IE 10, and recent versions of FF and Chrome.
1517

1618
## Getting Started
1719

18-
Add `dist/angular-busy.js` and `dist/angular-busy.css` to your index.html. Also add the `angular-promise-tracker` files as necessary.
20+
Add `dist/angular-busy.js` and `dist/angular-busy.css` to your index.html. Also add the `angular-promise-tracker` files as necessary. You'll
1921

20-
Add `cgBusy` as a module dependency for your module (in addition to `ajoslin.promise-tracker`):
22+
Add `cgBusy` as a module dependency for your module (in addition to `ajoslin.promise-tracker` and the Angular 1.2 `ngAnimate` module):
2123

2224
```js
23-
angular.module('your_app', ['cgBusy','ajoslin.promise-tracker']);
25+
angular.module('your_app', ['ngAnimate','ajoslin.promise-tracker','cgBusy']);
2426
```
2527

2628
Add the promise trackers as you normally would using `angular-promise-tracker`:
@@ -74,6 +76,7 @@ angular.module('yourapp').value('cgBusyTemplateName','your_custom_template_here.
7476
Templates are full, normal Angular partials with access to the scope of where the `cg-busy` was used.
7577

7678
## Release History
79+
* v2.0.0 - Moved to Angular 1.2.0-rc1.
7780
* v1.0.0 - Added Bower support.
7881
* v0.1.1 - Updated to Angular 1.1.5 animation syntax.
7982
* v0.1.0 - Initial release.

‎angular-busy.css‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,45 @@
66
bottom:0px;
77
}
88

9-
.cg-busy-show, .cg-busy-hide{
10-
-webkit-transition:all .3s ease;
11-
-moz-transition:all .3s ease;
12-
-o-transition:all .3s ease;
13-
transition:all .3s ease;
9+
.cg-busy-animation.ng-hide-add,
10+
.cg-busy-animation.ng-hide-remove {
11+
-webkit-transition:all .3s ease;
12+
-moz-transition:all .3s ease;
13+
-o-transition:all .3s ease;
14+
transition:all .3s ease;
15+
display:block !important;
1416
}
15-
16-
.cg-busy-show {
17-
opacity:0;
18-
-webkit-transform:translate(0px,-40px);
19-
-moz-transform:translate(0px,-40px);
20-
-ms-transform:translate(0px,-40px);
21-
-o-transform:translate(0px,-40px);
22-
transform:translate(0px,-40px);
17+
.cg-busy-animation.ng-hide-remove {
18+
opacity:0;
19+
-webkit-transform:translate(0px,-40px);
20+
-moz-transform:translate(0px,-40px);
21+
-ms-transform:translate(0px,-40px);
22+
-o-transform:translate(0px,-40px);
23+
transform:translate(0px,-40px);
2324
}
24-
25-
.cg-busy-hide {
26-
opacity:1;
27-
-webkit-transform:translate(0px,0px);
28-
-moz-transform:translate(0px,0px);
29-
-ms-transform:translate(0px,0px);
30-
-o-transform:translate(0px,0px);
31-
transform:translate(0px,0px);
25+
.cg-busy-animation.ng-hide-remove.ng-hide-remove-active {
26+
opacity:1;
27+
-webkit-transform:translate(0px,0px);
28+
-moz-transform:translate(0px,0px);
29+
-ms-transform:translate(0px,0px);
30+
-o-transform:translate(0px,0px);
31+
transform:translate(0px,0px);
3232
}
33-
34-
.cg-busy-show.cg-busy-show-active{
35-
opacity:1;
36-
-webkit-transform:translate(0px,0px);
37-
-moz-transform:translate(0px,0px);
38-
-ms-transform:translate(0px,0px);
39-
-o-transform:translate(0px,0px);
40-
transform:translate(0px,0px);
33+
.cg-busy-animation.ng-hide-add {
34+
opacity:1;
35+
-webkit-transform:translate(0px,0px);
36+
-moz-transform:translate(0px,0px);
37+
-ms-transform:translate(0px,0px);
38+
-o-transform:translate(0px,0px);
39+
transform:translate(0px,0px);
4140
}
42-
43-
.cg-busy-hide.cg-busy-hide-active {
44-
opacity:0;
45-
-webkit-transform:translate(0px,-40px);
46-
-moz-transform:translate(0px,-40px);
47-
-ms-transform:translate(0px,-40px);
48-
-o-transform:translate(0px,-40px);
49-
transform:translate(0px,-40px);
41+
.cg-busy-animation.ng-hide-add.ng-hide-add-active {
42+
opacity:0;
43+
-webkit-transform:translate(0px,-40px);
44+
-moz-transform:translate(0px,-40px);
45+
-ms-transform:translate(0px,-40px);
46+
-o-transform:translate(0px,-40px);
47+
transform:translate(0px,-40px);
5048
}
5149

5250
.cg-busy-backdrop {

‎angular-busy.js‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ angular.module('cgBusy',['ajoslin.promise-tracker']);
22

33
angular.module('cgBusy').value('cgBusyTemplateName','angular-busy.html');
44

5-
angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templateCache','cgBusyTemplateName','$http',
6-
function(promiseTracker,$compile,$templateCache,cgBusyTemplateName,$http){
5+
angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templateCache','cgBusyTemplateName','$http','$animate',
6+
function(promiseTracker,$compile,$templateCache,cgBusyTemplateName,$http,$animate){
77
return {
88
restrict: 'A',
99
link: function(scope, element, attrs, fn) {
@@ -36,7 +36,9 @@ angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templ
3636
options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop;
3737
var backdrop = options.backdrop ? '<div class="cg-busy cg-busy-backdrop"></div>' : '';
3838

39-
var template = '<div class="cg-busy" ng-show="$cgBusyTracker[\''+options.tracker+'\'].active()" ng-animate="\'cg-busy\'" style="display:none">'+ backdrop + indicatorTemplate+'</div>';
39+
40+
41+
var template = '<div class="cg-busy cg-busy-animation ng-hide">'+ backdrop + indicatorTemplate+'</div>';
4042
var templateElement = $compile(template)(scope);
4143

4244
angular.element(templateElement.children()[options.backdrop?1:0])
@@ -48,6 +50,41 @@ angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templ
4850

4951
element.append(templateElement);
5052

53+
54+
/****************************************************************
55+
In 1.1.5 I had cg-show="$cgBusyTracker[\''+options.tracker+'\'].active()" in the template
56+
with 1.2.0-rc1 that works but it shows the busy animation when the element is loaded
57+
I dont understand why but the ng-show is triggering an extra watch call than what seems to
58+
happen with elements that arent compiled and appended like this. Not sure if this is something
59+
I'm doing or a bug in angular.
60+
61+
To resolve this problem, I basically created my own ng-show that ignores the first auto-triggered
62+
watch expression. All code below is that
63+
*****************************************************************/
64+
65+
/*jslint eqeq: true */
66+
67+
function toBoolean(value) {
68+
if (value && value.length !== 0) {
69+
var v = angular.lowercase("" + value);
70+
value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
71+
} else {
72+
value = false;
73+
}
74+
return value;
75+
}
76+
77+
var first = true;
78+
scope.$watch('$cgBusyTracker.' + options.tracker + '.active()',function(value){
79+
if (first){
80+
first = false;
81+
return; //ignore first
82+
}
83+
$animate[toBoolean(value) ? 'removeClass' : 'addClass'](templateElement, 'ng-hide');
84+
});
85+
86+
/***** end internal ng-show functionality *********************/
87+
5188
}).error(function(data){
5289
throw new Error('Template specified for cgBusy ('+options.template+') could not be loaded. ' + data);
5390
});

‎bower.json‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
22
"name": "angular-busy",
3-
"version": "1.0.0",
3+
"version": "2.0.0",
44
"main": [
55
"dist/angular-busy.js",
66
"dist/angular-busy.css"
77
],
88
"dependencies": {
9-
"angular-unstable": "johannestroeger/bower-angular-unstable#~1.1.5",
10-
"angular-promise-tracker": "~1.3.3"
9+
"angular-unstable": "1.2.0rc1",
10+
"angular-promise-tracker": "~1.3.3",
11+
"angular-animate": "*"
1112
},
1213
"ignore": [
1314
"**/.*",
@@ -26,5 +27,8 @@
2627
],
2728
"devDependencies": {
2829
"jquery": "~2.0.2"
30+
},
31+
"resolutions": {
32+
"angular-unstable": "1.2.0rc1"
2933
}
30-
}
34+
}

‎demo/demo.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('app', ['cgBusy','ajoslin.promise-tracker']);
1+
angular.module('app', ['ngAnimate','ajoslin.promise-tracker','cgBusy']);
22

33
angular.module('app').controller('DemoCtrl',function($scope,promiseTracker,$q,$timeout){
44

‎demo/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@
151151

152152

153153
<script src="../bower_components/angular-unstable/angular.js"></script>
154+
<script src="../bower_components/angular-animate/angular-animate.js"></script>
154155
<script src="../bower_components/angular-promise-tracker/promise-tracker.js"></script>
155156
<script src="../dist/angular-busy.js"></script>
156157
<script src="demo.js"></script>

‎dist/angular-busy.css‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,45 @@
66
bottom:0px;
77
}
88

9-
.cg-busy-show, .cg-busy-hide{
10-
-webkit-transition:all .3s ease;
11-
-moz-transition:all .3s ease;
12-
-o-transition:all .3s ease;
13-
transition:all .3s ease;
9+
.cg-busy-animation.ng-hide-add,
10+
.cg-busy-animation.ng-hide-remove {
11+
-webkit-transition:all .3s ease;
12+
-moz-transition:all .3s ease;
13+
-o-transition:all .3s ease;
14+
transition:all .3s ease;
15+
display:block !important;
1416
}
15-
16-
.cg-busy-show {
17-
opacity:0;
18-
-webkit-transform:translate(0px,-40px);
19-
-moz-transform:translate(0px,-40px);
20-
-ms-transform:translate(0px,-40px);
21-
-o-transform:translate(0px,-40px);
22-
transform:translate(0px,-40px);
17+
.cg-busy-animation.ng-hide-remove {
18+
opacity:0;
19+
-webkit-transform:translate(0px,-40px);
20+
-moz-transform:translate(0px,-40px);
21+
-ms-transform:translate(0px,-40px);
22+
-o-transform:translate(0px,-40px);
23+
transform:translate(0px,-40px);
2324
}
24-
25-
.cg-busy-hide {
26-
opacity:1;
27-
-webkit-transform:translate(0px,0px);
28-
-moz-transform:translate(0px,0px);
29-
-ms-transform:translate(0px,0px);
30-
-o-transform:translate(0px,0px);
31-
transform:translate(0px,0px);
25+
.cg-busy-animation.ng-hide-remove.ng-hide-remove-active {
26+
opacity:1;
27+
-webkit-transform:translate(0px,0px);
28+
-moz-transform:translate(0px,0px);
29+
-ms-transform:translate(0px,0px);
30+
-o-transform:translate(0px,0px);
31+
transform:translate(0px,0px);
3232
}
33-
34-
.cg-busy-show.cg-busy-show-active{
35-
opacity:1;
36-
-webkit-transform:translate(0px,0px);
37-
-moz-transform:translate(0px,0px);
38-
-ms-transform:translate(0px,0px);
39-
-o-transform:translate(0px,0px);
40-
transform:translate(0px,0px);
33+
.cg-busy-animation.ng-hide-add {
34+
opacity:1;
35+
-webkit-transform:translate(0px,0px);
36+
-moz-transform:translate(0px,0px);
37+
-ms-transform:translate(0px,0px);
38+
-o-transform:translate(0px,0px);
39+
transform:translate(0px,0px);
4140
}
42-
43-
.cg-busy-hide.cg-busy-hide-active {
44-
opacity:0;
45-
-webkit-transform:translate(0px,-40px);
46-
-moz-transform:translate(0px,-40px);
47-
-ms-transform:translate(0px,-40px);
48-
-o-transform:translate(0px,-40px);
49-
transform:translate(0px,-40px);
41+
.cg-busy-animation.ng-hide-add.ng-hide-add-active {
42+
opacity:0;
43+
-webkit-transform:translate(0px,-40px);
44+
-moz-transform:translate(0px,-40px);
45+
-ms-transform:translate(0px,-40px);
46+
-o-transform:translate(0px,-40px);
47+
transform:translate(0px,-40px);
5048
}
5149

5250
.cg-busy-backdrop {

‎dist/angular-busy.js‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ angular.module('cgBusy',['ajoslin.promise-tracker']);
22

33
angular.module('cgBusy').value('cgBusyTemplateName','angular-busy.html');
44

5-
angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templateCache','cgBusyTemplateName','$http',
6-
function(promiseTracker,$compile,$templateCache,cgBusyTemplateName,$http){
5+
angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templateCache','cgBusyTemplateName','$http','$animate',
6+
function(promiseTracker,$compile,$templateCache,cgBusyTemplateName,$http,$animate){
77
return {
88
restrict: 'A',
99
link: function(scope, element, attrs, fn) {
@@ -36,7 +36,9 @@ angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templ
3636
options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop;
3737
var backdrop = options.backdrop ? '<div class="cg-busy cg-busy-backdrop"></div>' : '';
3838

39-
var template = '<div class="cg-busy" ng-show="$cgBusyTracker[\''+options.tracker+'\'].active()" ng-animate="\'cg-busy\'" style="display:none">'+ backdrop + indicatorTemplate+'</div>';
39+
40+
41+
var template = '<div class="cg-busy cg-busy-animation ng-hide">'+ backdrop + indicatorTemplate+'</div>';
4042
var templateElement = $compile(template)(scope);
4143

4244
angular.element(templateElement.children()[options.backdrop?1:0])
@@ -48,6 +50,41 @@ angular.module('cgBusy').directive('cgBusy',['promiseTracker','$compile','$templ
4850

4951
element.append(templateElement);
5052

53+
54+
/****************************************************************
55+
In 1.1.5 I had cg-show="$cgBusyTracker[\''+options.tracker+'\'].active()" in the template
56+
with 1.2.0-rc1 that works but it shows the busy animation when the element is loaded
57+
I dont understand why but the ng-show is triggering an extra watch call than what seems to
58+
happen with elements that arent compiled and appended like this. Not sure if this is something
59+
I'm doing or a bug in angular.
60+
61+
To resolve this problem, I basically created my own ng-show that ignores the first auto-triggered
62+
watch expression. All code below is that
63+
*****************************************************************/
64+
65+
/*jslint eqeq: true */
66+
67+
function toBoolean(value) {
68+
if (value && value.length !== 0) {
69+
var v = angular.lowercase("" + value);
70+
value = !(v == 'f' || v == '0' || v == 'false' || v == 'no' || v == 'n' || v == '[]');
71+
} else {
72+
value = false;
73+
}
74+
return value;
75+
}
76+
77+
var first = true;
78+
scope.$watch('$cgBusyTracker.' + options.tracker + '.active()',function(value){
79+
if (first){
80+
first = false;
81+
return; //ignore first
82+
}
83+
$animate[toBoolean(value) ? 'removeClass' : 'addClass'](templateElement, 'ng-hide');
84+
});
85+
86+
/***** end internal ng-show functionality *********************/
87+
5188
}).error(function(data){
5289
throw new Error('Template specified for cgBusy ('+options.template+') could not be loaded. ' + data);
5390
});

0 commit comments

Comments
 (0)