Skip to content

Commit fe72f9a

Browse files
cgrosscgross
committed
change how minDuration + delay work, change how backdrop animates
1 parent 55755a9 commit fe72f9a

10 files changed

+101
-26
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ Only the values you'd like overriden need to be specified.
8989

9090

9191
## Release History
92+
* v4.1.0
93+
* Change to how `delay` and `minDuration` work together. If specified together, `minDuration` will only take effect if the promise was active through the delay. For example, if `delay`=200 and `minDuration`=500 and the actual promise only took 100ms, no indicator will be shown. If the delay threshold is reached, the indicator will show for `minDuration` ms rather than `minDuration` minus `delay` as it had been before.
94+
* Backdrop now fades in with no movement. Message still animates in from the top.
9295
* v4.0.4 - Added bower_components to bower ignore.
9396
* v4.0.3 - Now supports Q promises.
9497
* v4.0.2 - Fix for min duration only being used when delay also being set.

‎angular-busy.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
left:0px;
55
right:0px;
66
bottom:0px;
7+
z-index:1001;
78
}
89

910
.cg-busy-animation.ng-hide-add,
@@ -52,6 +53,19 @@
5253
opacity:.7;
5354
}
5455

56+
.cg-busy-backdrop-animation.ng-hide-add,
57+
.cg-busy-backdrop-animation.ng-hide-remove {
58+
-webkit-transition:opacity .3s ease;
59+
-moz-transition:opacity .3s ease;
60+
-o-transition:opacity .3s ease;
61+
transition:opacity .3s ease;
62+
display:block !important;
63+
}
64+
65+
.cg-busy-backdrop-animation.ng-hide {
66+
opacity:0;
67+
}
68+
5569
/* All styles below are for the default template. */
5670

5771
.cg-busy-default-wrapper {
@@ -61,6 +75,7 @@
6175
.cg-busy-default-sign{
6276
display: inline-block;
6377
position:relative;
78+
z-index:1002;
6479
padding-bottom: 6px;
6580
color:#333333;
6681
text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);

‎angular-busy.js

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
99
tracker.promises = [];
1010
tracker.delayPromise = null;
1111
tracker.durationPromise = null;
12+
tracker.delayJustFinished = false;
1213

1314
tracker.reset = function(options){
1415
tracker.minDuration = options.minDuration;
@@ -26,15 +27,17 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
2627
return;
2728
}
2829

30+
tracker.delayJustFinished = false;
2931
if (options.delay) {
3032
tracker.delayPromise = $timeout(function(){
3133
tracker.delayPromise = null;
32-
},options.delay);
34+
tracker.delayJustFinished = true;
35+
},parseInt(options.delay,10));
3336
}
3437
if (options.minDuration) {
3538
tracker.durationPromise = $timeout(function(){
3639
tracker.durationPromise = null;
37-
},options.minDuration);
40+
},parseInt(options.minDuration,10) + (options.delay ? parseInt(options.delay,10) : 0));
3841
}
3942
};
4043

@@ -80,10 +83,19 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
8083
if (tracker.delayPromise){
8184
return false;
8285
}
83-
if (tracker.durationPromise){
84-
return true;
85-
}
86-
return tracker.promises.length > 0;
86+
87+
if (!tracker.delayJustFinished){
88+
if (tracker.durationPromise){
89+
return true;
90+
}
91+
return tracker.promises.length > 0;
92+
} else {
93+
//if both delay and min duration are set,
94+
//we don't want to initiate the min duration if the
95+
//promise finished before the delay was complete
96+
tracker.delayJustFinished = false;
97+
return tracker.promises.length > 0;
98+
}
8799
};
88100

89101
return tracker;
@@ -106,6 +118,7 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy
106118
}
107119

108120
var templateElement;
121+
var backdropElement;
109122
var currentTemplate;
110123
var templateScope;
111124
var backdrop;
@@ -176,19 +189,27 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy
176189
if (templateElement) {
177190
templateElement.remove();
178191
}
192+
if (backdropElement){
193+
backdropElement.remove();
194+
}
179195

180196
currentTemplate = options.templateUrl;
181197
backdrop = options.backdrop;
182198

183199
$http.get(currentTemplate,{cache: $templateCache}).success(function(indicatorTemplate){
184200

185201
options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop;
186-
var backdrop = options.backdrop ? '<div class="cg-busy cg-busy-backdrop"></div>' : '';
187202

188-
var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">'+ backdrop + indicatorTemplate+'</div>';
203+
if (options.backdrop){
204+
var backdrop = '<div class="cg-busy cg-busy-backdrop cg-busy-backdrop-animation ng-hide" ng-show="$cgBusyIsActive()"></div>';
205+
backdropElement = $compile(backdrop)(templateScope);
206+
element.append(backdropElement);
207+
}
208+
209+
var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">' + indicatorTemplate + '</div>';
189210
templateElement = $compile(template)(templateScope);
190211

191-
angular.element(templateElement.children()[options.backdrop?1:0])
212+
angular.element(templateElement.children()[0])
192213
.css('position','absolute')
193214
.css('top',0)
194215
.css('left',0)

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-busy",
3-
"version": "4.0.3",
3+
"version": "4.1.0",
44
"main": [
55
"dist/angular-busy.js",
66
"dist/angular-busy.css"

‎dist/angular-busy.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
left:0px;
55
right:0px;
66
bottom:0px;
7+
z-index:1001;
78
}
89

910
.cg-busy-animation.ng-hide-add,
@@ -52,6 +53,19 @@
5253
opacity:.7;
5354
}
5455

56+
.cg-busy-backdrop-animation.ng-hide-add,
57+
.cg-busy-backdrop-animation.ng-hide-remove {
58+
-webkit-transition:opacity .3s ease;
59+
-moz-transition:opacity .3s ease;
60+
-o-transition:opacity .3s ease;
61+
transition:opacity .3s ease;
62+
display:block !important;
63+
}
64+
65+
.cg-busy-backdrop-animation.ng-hide {
66+
opacity:0;
67+
}
68+
5569
/* All styles below are for the default template. */
5670

5771
.cg-busy-default-wrapper {
@@ -61,6 +75,7 @@
6175
.cg-busy-default-sign{
6276
display: inline-block;
6377
position:relative;
78+
z-index:1002;
6479
padding-bottom: 6px;
6580
color:#333333;
6681
text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);

‎dist/angular-busy.js

Lines changed: 30 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
99
tracker.promises = [];
1010
tracker.delayPromise = null;
1111
tracker.durationPromise = null;
12+
tracker.delayJustFinished = false;
1213

1314
tracker.reset = function(options){
1415
tracker.minDuration = options.minDuration;
@@ -26,15 +27,17 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
2627
return;
2728
}
2829

30+
tracker.delayJustFinished = false;
2931
if (options.delay) {
3032
tracker.delayPromise = $timeout(function(){
3133
tracker.delayPromise = null;
32-
},options.delay);
34+
tracker.delayJustFinished = true;
35+
},parseInt(options.delay,10));
3336
}
3437
if (options.minDuration) {
3538
tracker.durationPromise = $timeout(function(){
3639
tracker.durationPromise = null;
37-
},options.minDuration);
40+
},parseInt(options.minDuration,10) + (options.delay ? parseInt(options.delay,10) : 0));
3841
}
3942
};
4043

@@ -80,10 +83,19 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
8083
if (tracker.delayPromise){
8184
return false;
8285
}
83-
if (tracker.durationPromise){
84-
return true;
85-
}
86-
return tracker.promises.length > 0;
86+
87+
if (!tracker.delayJustFinished){
88+
if (tracker.durationPromise){
89+
return true;
90+
}
91+
return tracker.promises.length > 0;
92+
} else {
93+
//if both delay and min duration are set,
94+
//we don't want to initiate the min duration if the
95+
//promise finished before the delay was complete
96+
tracker.delayJustFinished = false;
97+
return tracker.promises.length > 0;
98+
}
8799
};
88100

89101
return tracker;
@@ -106,6 +118,7 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy
106118
}
107119

108120
var templateElement;
121+
var backdropElement;
109122
var currentTemplate;
110123
var templateScope;
111124
var backdrop;
@@ -176,19 +189,27 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy
176189
if (templateElement) {
177190
templateElement.remove();
178191
}
192+
if (backdropElement){
193+
backdropElement.remove();
194+
}
179195

180196
currentTemplate = options.templateUrl;
181197
backdrop = options.backdrop;
182198

183199
$http.get(currentTemplate,{cache: $templateCache}).success(function(indicatorTemplate){
184200

185201
options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop;
186-
var backdrop = options.backdrop ? '<div class="cg-busy cg-busy-backdrop"></div>' : '';
187202

188-
var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">'+ backdrop + indicatorTemplate+'</div>';
203+
if (options.backdrop){
204+
var backdrop = '<div class="cg-busy cg-busy-backdrop cg-busy-backdrop-animation ng-hide" ng-show="$cgBusyIsActive()"></div>';
205+
backdropElement = $compile(backdrop)(templateScope);
206+
element.append(backdropElement);
207+
}
208+
209+
var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">' + indicatorTemplate + '</div>';
189210
templateElement = $compile(template)(templateScope);
190211

191-
angular.element(templateElement.children()[options.backdrop?1:0])
212+
angular.element(templateElement.children()[0])
192213
.css('position','absolute')
193214
.css('top',0)
194215
.css('left',0)

0 commit comments

Comments
 (0)