Skip to content

Commit

Permalink
change how minDuration + delay work, change how backdrop animates
Browse files Browse the repository at this point in the history
  • Loading branch information
@cgross
cgross committed Jul 6, 2014
1 parent 55755a9 commit fe72f9a
Show file tree
Hide file tree
Showing 10 changed files with 101 additions and 26 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,9 @@ Only the values you'd like overriden need to be specified.


## Release History
* v4.1.0
* 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.
* Backdrop now fades in with no movement. Message still animates in from the top.
* v4.0.4 - Added bower_components to bower ignore.
* v4.0.3 - Now supports Q promises.
* v4.0.2 - Fix for min duration only being used when delay also being set.
Expand Down
15 changes: 15 additions & 0 deletions angular-busy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
left:0px;
right:0px;
bottom:0px;
z-index:1001;
}

.cg-busy-animation.ng-hide-add,
Expand Down Expand Up @@ -52,6 +53,19 @@
opacity:.7;
}

.cg-busy-backdrop-animation.ng-hide-add,
.cg-busy-backdrop-animation.ng-hide-remove {
-webkit-transition:opacity .3s ease;
-moz-transition:opacity .3s ease;
-o-transition:opacity .3s ease;
transition:opacity .3s ease;
display:block !important;
}

.cg-busy-backdrop-animation.ng-hide {
opacity:0;
}

/* All styles below are for the default template. */

.cg-busy-default-wrapper {
Expand All @@ -61,6 +75,7 @@
.cg-busy-default-sign{
display: inline-block;
position:relative;
z-index:1002;
padding-bottom: 6px;
color:#333333;
text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);
Expand Down
39 changes: 30 additions & 9 deletions angular-busy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
tracker.promises = [];
tracker.delayPromise = null;
tracker.durationPromise = null;
tracker.delayJustFinished = false;

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

tracker.delayJustFinished = false;
if (options.delay) {
tracker.delayPromise = $timeout(function(){
tracker.delayPromise = null;
},options.delay);
tracker.delayJustFinished = true;
},parseInt(options.delay,10));
}
if (options.minDuration) {
tracker.durationPromise = $timeout(function(){
tracker.durationPromise = null;
},options.minDuration);
},parseInt(options.minDuration,10) + (options.delay ? parseInt(options.delay,10) : 0));
}
};

Expand Down Expand Up @@ -80,10 +83,19 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
if (tracker.delayPromise){
return false;
}
if (tracker.durationPromise){
return true;
}
return tracker.promises.length > 0;

if (!tracker.delayJustFinished){
if (tracker.durationPromise){
return true;
}
return tracker.promises.length > 0;
} else {
//if both delay and min duration are set,
//we don't want to initiate the min duration if the
//promise finished before the delay was complete
tracker.delayJustFinished = false;
return tracker.promises.length > 0;
}
};

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

var templateElement;
var backdropElement;
var currentTemplate;
var templateScope;
var backdrop;
Expand Down Expand Up @@ -176,19 +189,27 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy
if (templateElement) {
templateElement.remove();
}
if (backdropElement){
backdropElement.remove();
}

currentTemplate = options.templateUrl;
backdrop = options.backdrop;

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

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

var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">'+ backdrop + indicatorTemplate+'</div>';
if (options.backdrop){
var backdrop = '<div class="cg-busy cg-busy-backdrop cg-busy-backdrop-animation ng-hide" ng-show="$cgBusyIsActive()"></div>';
backdropElement = $compile(backdrop)(templateScope);
element.append(backdropElement);
}

var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">' + indicatorTemplate + '</div>';
templateElement = $compile(template)(templateScope);

angular.element(templateElement.children()[options.backdrop?1:0])
angular.element(templateElement.children()[0])
.css('position','absolute')
.css('top',0)
.css('left',0)
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-busy",
"version": "4.0.3",
"version": "4.1.0",
"main": [
"dist/angular-busy.js",
"dist/angular-busy.css"
Expand Down
15 changes: 15 additions & 0 deletions dist/angular-busy.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
left:0px;
right:0px;
bottom:0px;
z-index:1001;
}

.cg-busy-animation.ng-hide-add,
Expand Down Expand Up @@ -52,6 +53,19 @@
opacity:.7;
}

.cg-busy-backdrop-animation.ng-hide-add,
.cg-busy-backdrop-animation.ng-hide-remove {
-webkit-transition:opacity .3s ease;
-moz-transition:opacity .3s ease;
-o-transition:opacity .3s ease;
transition:opacity .3s ease;
display:block !important;
}

.cg-busy-backdrop-animation.ng-hide {
opacity:0;
}

/* All styles below are for the default template. */

.cg-busy-default-wrapper {
Expand All @@ -61,6 +75,7 @@
.cg-busy-default-sign{
display: inline-block;
position:relative;
z-index:1002;
padding-bottom: 6px;
color:#333333;
text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);
Expand Down
39 changes: 30 additions & 9 deletions dist/angular-busy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
tracker.promises = [];
tracker.delayPromise = null;
tracker.durationPromise = null;
tracker.delayJustFinished = false;

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

tracker.delayJustFinished = false;
if (options.delay) {
tracker.delayPromise = $timeout(function(){
tracker.delayPromise = null;
},options.delay);
tracker.delayJustFinished = true;
},parseInt(options.delay,10));
}
if (options.minDuration) {
tracker.durationPromise = $timeout(function(){
tracker.durationPromise = null;
},options.minDuration);
},parseInt(options.minDuration,10) + (options.delay ? parseInt(options.delay,10) : 0));
}
};

Expand Down Expand Up @@ -80,10 +83,19 @@ angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',functi
if (tracker.delayPromise){
return false;
}
if (tracker.durationPromise){
return true;
}
return tracker.promises.length > 0;

if (!tracker.delayJustFinished){
if (tracker.durationPromise){
return true;
}
return tracker.promises.length > 0;
} else {
//if both delay and min duration are set,
//we don't want to initiate the min duration if the
//promise finished before the delay was complete
tracker.delayJustFinished = false;
return tracker.promises.length > 0;
}
};

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

var templateElement;
var backdropElement;
var currentTemplate;
var templateScope;
var backdrop;
Expand Down Expand Up @@ -176,19 +189,27 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy
if (templateElement) {
templateElement.remove();
}
if (backdropElement){
backdropElement.remove();
}

currentTemplate = options.templateUrl;
backdrop = options.backdrop;

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

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

var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">'+ backdrop + indicatorTemplate+'</div>';
if (options.backdrop){
var backdrop = '<div class="cg-busy cg-busy-backdrop cg-busy-backdrop-animation ng-hide" ng-show="$cgBusyIsActive()"></div>';
backdropElement = $compile(backdrop)(templateScope);
element.append(backdropElement);
}

var template = '<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">' + indicatorTemplate + '</div>';
templateElement = $compile(template)(templateScope);

angular.element(templateElement.children()[options.backdrop?1:0])
angular.element(templateElement.children()[0])
.css('position','absolute')
.css('top',0)
.css('left',0)
Expand Down
Loading

0 comments on commit fe72f9a

Please sign in to comment.