<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.18" src="https://code.angularjs.org/1.6.0/angular.js"></script>
<script data-require="jquery@*" data-semver="1.10.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular-animate@*" data-semver="1.3.18" src="http://code.angularjs.org/1.6.0/angular-animate.js"></script>
<!--script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script-->
<!--script data-require="prefixfree@*" data-semver="1.0.7" src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script-->
<!--script data-require="angular-ui@*" data-semver="0.4.0" src="https://rawgithub.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script-->
<link rel="stylesheet" href="angular-busy.css" />
<link rel="stylesheet" href="style.css" />
<script src="angular-busy.js"></script>
<script src="script.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
</head>
<body ng-controller="myCtrl" >
<div class="row" >
<div class="col-md-10" cg-busy="cgBusyPromises">
<h3> cg busy Plunker. Problem: when promises are pushed to cg busy array from an Http Interceptor </h3>
<h5> Pending Http Requests : {{ pendingRequests() }}<br/>
CG Busy Promises Array length: {{ cgBusyPromises.length }}
</h5>
<div>
<p>
<button ng-click="submitSingleRequest()">Submit Single Non Http Request</button>
</p>
</div>
<div>
<p>
<button ng-click="submitRequests()">Submit multiple non Http Request</button></p>
</div>
<div>
<p><button ng-click="submitHttpRequests()">Submit Http Requests!!, CG BUSY doesnt show!!</button></p>
</div>
</div>
</div>
</body>
</html>
// Code goes here
// Declare the main module
var myApp = angular.module('myApp', ['cgBusy'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
});
myApp.controller('myCtrl', function(myService,$rootScope, $scope, $timeout, $http) {
$rootScope.cgBusyPromises = [];
var baseurl = 'https://rest.bandsintown.com/artists/'; //{0}?app_id=test';
var artists = ['acdc', 'metallica', 'korn', 'systemofadown'];
$scope.results = [];
//console.log('$rootScope: ' + $rootScope.$id);
$scope.submitSingleRequest = function() {
$rootScope.cgBusyPromises.push(myService.getAnswer(100));
};
$scope.submitRequests = function() {
for (var i = 0; i <= 5; i++) {
$rootScope.cgBusyPromises.push(myService.getAnswer(i));
}
};
$scope.submitHttpRequests = function() {
for (var i = 0; i <= 5; i++) {
artists.forEach(function(artist) {
var url = baseurl + artist + '?app_id=test';
var prms = $http.get(url);
//$rootScope.cgBusyPromises.push(prms);
prms.then(function(resp) {
$scope.results.push(resp);
});
});
}
};
$scope.pendingRequests = function() {
return $http.pendingRequests.length;
}
})
.factory('myService', ['$timeout', function($timeout) {
return {
getAnswer: function(x) {
if(!x)x=1;
// retuern a 3 second timeout promise
return $timeout(function() { console.log(x); }, 3000);
}
};
}])
.factory('authInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
request: function(config) {
var deferred = $q.defer();
deferred.resolve(config);
if(config.url!='angular-busy.html'){
$rootScope.cgBusyPromises.push(deferred.promise);
}
return deferred.promise;
},
response: function(response) {
return $q.when(response);
},
responseError: function(response) {
return $q.reject(response);
}
};
}]);
/* Styles go here */
.pages {
padding: 2rem;
}
.cg-busy { /* this is the fix*/
z-index:10000;
}
Trying to Implement an Http Interceptor that will automatiocally show cg-busy
spinner if any http requests are pending.
angular.module('cgBusy',[]);
//loosely modeled after angular-promise-tracker
angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout','$q',function($timeout,$q){
return function(){
var tracker = {};
tracker.promises = [];
tracker.delayPromise = null;
tracker.durationPromise = null;
tracker.delayJustFinished = false;
tracker.reset = function(options){
tracker.minDuration = options.minDuration;
tracker.promises = [];
angular.forEach(options.promises,function(p){
if (!p || p.$cgBusyFulfilled) {
return;
}
addPromiseLikeThing(p);
});
if (tracker.promises.length === 0) {
//if we have no promises then dont do the delay or duration stuff
return;
}
tracker.delayJustFinished = false;
if (options.delay) {
tracker.delayPromise = $timeout(function(){
tracker.delayPromise = null;
tracker.delayJustFinished = true;
},parseInt(options.delay,10));
}
if (options.minDuration) {
tracker.durationPromise = $timeout(function(){
tracker.durationPromise = null;
},parseInt(options.minDuration,10) + (options.delay ? parseInt(options.delay,10) : 0));
}
};
tracker.isPromise = function(promiseThing){
var then = promiseThing && (promiseThing.then || promiseThing.$then ||
(promiseThing.$promise && promiseThing.$promise.then));
return typeof then !== 'undefined';
};
tracker.callThen = function(promiseThing,success,error){
var promise;
if (promiseThing.then || promiseThing.$then){
promise = promiseThing;
} else if (promiseThing.$promise){
promise = promiseThing.$promise;
} else if (promiseThing.denodeify){
promise = $q.when(promiseThing);
}
var then = (promise.then || promise.$then);
then.call(promise,success,error);
};
var addPromiseLikeThing = function(promise){
if (!tracker.isPromise(promise)) {
throw new Error('cgBusy expects a promise (or something that has a .promise or .$promise');
}
if (tracker.promises.indexOf(promise) !== -1){
return;
}
tracker.promises.push(promise);
tracker.callThen(promise, function(){
promise.$cgBusyFulfilled = true;
if (tracker.promises.indexOf(promise) === -1) {
return;
}
tracker.promises.splice(tracker.promises.indexOf(promise),1);
},function(){
promise.$cgBusyFulfilled = true;
if (tracker.promises.indexOf(promise) === -1) {
return;
}
tracker.promises.splice(tracker.promises.indexOf(promise),1);
});
};
tracker.active = function(){
if (tracker.delayPromise){
return false;
}
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;
if (tracker.promises.length === 0) {
tracker.durationPromise = null;
}
return tracker.promises.length > 0;
}
};
return tracker;
};
}]);
angular.module('cgBusy').value('cgBusyDefaults',{});
angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusyDefaults','$http','_cgBusyTrackerFactory',
function($compile,$templateCache,cgBusyDefaults,$http,_cgBusyTrackerFactory){
return {
restrict: 'A',
link: function(scope, element, attrs, fn) {
//Apply position:relative to parent element if necessary
var position = element.css('position');
if (position === 'static' || position === '' || typeof position === 'undefined'){
element.css('position','relative');
}
var templateElement;
var backdropElement;
var currentTemplate;
var templateScope;
var backdrop;
var tracker = _cgBusyTrackerFactory();
var defaults = {
templateUrl: 'angular-busy.html',
delay:0,
minDuration:0,
backdrop: true,
message:'Please Wait...',
wrapperClass: 'cg-busy cg-busy-animation'
};
angular.extend(defaults,cgBusyDefaults);
scope.$watchCollection(attrs.cgBusy,function(options){
if (!options) {
options = {promise:null};
}
if (angular.isString(options)) {
throw new Error('Invalid value for cg-busy. cgBusy no longer accepts string ids to represent promises/trackers.');
}
//is it an array (of promises) or one promise
if (angular.isArray(options) || tracker.isPromise(options)) {
options = {promise:options};
}
options = angular.extend(angular.copy(defaults),options);
if (!options.templateUrl){
options.templateUrl = defaults.templateUrl;
}
if (!angular.isArray(options.promise)){
options.promise = [options.promise];
}
// options.promise = angular.isArray(options.promise) ? options.promise : [options.promise];
// options.message = options.message ? options.message : 'Please Wait...';
// options.template = options.template ? options.template : cgBusyTemplateName;
// options.minDuration = options.minDuration ? options.minDuration : 0;
// options.delay = options.delay ? options.delay : 0;
if (!templateScope) {
templateScope = scope.$new();
}
templateScope.$message = options.message;
if (!angular.equals(tracker.promises,options.promise)) {
tracker.reset({
promises:options.promise,
delay:options.delay,
minDuration: options.minDuration
});
}
templateScope.$cgBusyIsActive = function() {
return tracker.active();
};
if (!templateElement || currentTemplate !== options.templateUrl || backdrop !== options.backdrop) {
if (templateElement) {
templateElement.remove();
}
if (backdropElement){
backdropElement.remove();
}
currentTemplate = options.templateUrl;
backdrop = options.backdrop;
$http.get(currentTemplate,{cache: $templateCache}).then(function(indicatorTemplate){
options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop;
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="'+options.wrapperClass+' ng-hide" ng-show="$cgBusyIsActive()">' + indicatorTemplate.data + '</div>';
templateElement = $compile(template)(templateScope);
angular.element(templateElement.children()[0])
.css('position','absolute')
.css('top',0)
.css('left',0)
.css('right',0)
.css('bottom',0);
element.append(templateElement);
}).catch(function(data){
throw new Error('Template specified for cgBusy ('+options.templateUrl+') could not be loaded. ' + data);
});
}
},true);
}
};
}
]);
angular.module('cgBusy').run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('angular-busy.html',
"<div class=\"cg-busy-default-wrapper\">\n" +
"\n" +
" <div class=\"cg-busy-default-sign\">\n" +
"\n" +
" <div class=\"cg-busy-default-spinner\">\n" +
" <div class=\"bar1\"></div>\n" +
" <div class=\"bar2\"></div>\n" +
" <div class=\"bar3\"></div>\n" +
" <div class=\"bar4\"></div>\n" +
" <div class=\"bar5\"></div>\n" +
" <div class=\"bar6\"></div>\n" +
" <div class=\"bar7\"></div>\n" +
" <div class=\"bar8\"></div>\n" +
" <div class=\"bar9\"></div>\n" +
" <div class=\"bar10\"></div>\n" +
" <div class=\"bar11\"></div>\n" +
" <div class=\"bar12\"></div>\n" +
" </div>\n" +
"\n" +
" <div class=\"cg-busy-default-text\">{{$message}}</div>\n" +
"\n" +
" </div>\n" +
"\n" +
"</div>"
);
}]);
.cg-busy{
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
z-index:1001;
}
.cg-busy-animation.ng-hide-add,
.cg-busy-animation.ng-hide-remove {
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
display:block !important;
}
.cg-busy-animation.ng-hide-remove {
opacity:0;
-webkit-transform:translate(0px,-40px);
-moz-transform:translate(0px,-40px);
-ms-transform:translate(0px,-40px);
-o-transform:translate(0px,-40px);
transform:translate(0px,-40px);
}
.cg-busy-animation.ng-hide-remove.ng-hide-remove-active {
opacity:1;
-webkit-transform:translate(0px,0px);
-moz-transform:translate(0px,0px);
-ms-transform:translate(0px,0px);
-o-transform:translate(0px,0px);
transform:translate(0px,0px);
}
.cg-busy-animation.ng-hide-add {
opacity:1;
-webkit-transform:translate(0px,0px);
-moz-transform:translate(0px,0px);
-ms-transform:translate(0px,0px);
-o-transform:translate(0px,0px);
transform:translate(0px,0px);
}
.cg-busy-animation.ng-hide-add.ng-hide-add-active {
opacity:0;
-webkit-transform:translate(0px,-40px);
-moz-transform:translate(0px,-40px);
-ms-transform:translate(0px,-40px);
-o-transform:translate(0px,-40px);
transform:translate(0px,-40px);
}
.cg-busy-backdrop {
background-color:white;
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 {
text-align:center;
}
.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);
background-color:#e9eeee;
border:1px solid #dddddd;
border-top-width:0;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border-top-left-radius:0;
border-top-right-radius:0;
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.cg-busy-default-text{
margin:13px 12px 6px 49px;
font-size:16px;
color:#555;
text-align: left;
max-width: 400px;
}
.cg-busy-default-spinner{
position:absolute;
width:25px;
height:25px;
display:inline-block;
top:12px;
left:14px;
}
.cg-busy-default-spinner div{
width:12%;
height:26%;
background:#000;
position:absolute;
left:44.5%;
top:37%;
opacity:0;
-webkit-animation:cg-busy-spinner-anim 1s linear infinite;
-moz-animation:cg-busy-spinner-anim 1s linear infinite;
-ms-animation:cg-busy-spinner-anim 1s linear infinite;
-o-animation:cg-busy-spinner-anim 1s linear infinite;
animation:cg-busy-spinner-anim 1s linear infinite;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);
box-shadow:0 0 3px rgba(0,0,0,0.2);
}
.cg-busy-default-spinner div.bar1{
-webkit-transform:rotate(0deg) translate(0, -142%);
-moz-transform:rotate(0deg) translate(0, -142%);
-ms-transform:rotate(0deg) translate(0, -142%);
-o-transform:rotate(0deg) translate(0, -142%);
transform:rotate(0deg) translate(0, -142%);
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}
.cg-busy-default-spinner div.bar2{
-webkit-transform:rotate(30deg) translate(0, -142%);
-moz-transform:rotate(30deg) translate(0, -142%);
-ms-transform:rotate(30deg) translate(0, -142%);
-o-transform:rotate(30deg) translate(0, -142%);
transform:rotate(30deg) translate(0, -142%);
-webkit-animation-delay:-0.9167s;
-moz-animation-delay:-0.9167s;
-ms-animation-delay:-0.9167s;
-o-animation-delay:-0.9167s;
animation-delay:-0.9167s;
}
.cg-busy-default-spinner div.bar3{
-webkit-transform:rotate(60deg) translate(0, -142%);
-moz-transform:rotate(60deg) translate(0, -142%);
-ms-transform:rotate(60deg) translate(0, -142%);
-o-transform:rotate(60deg) translate(0, -142%);
transform:rotate(60deg) translate(0, -142%);
-webkit-animation-delay:-0.833s;
-moz-animation-delay:-0.833s;
-ms-animation-delay:-0.833s;
-o-animation-delay:-0.833s;
animation-delay:-0.833s;
}
.cg-busy-default-spinner div.bar4{
-webkit-transform:rotate(90deg) translate(0, -142%);
-moz-transform:rotate(90deg) translate(0, -142%);
-ms-transform:rotate(90deg) translate(0, -142%);
-o-transform:rotate(90deg) translate(0, -142%);
transform:rotate(90deg) translate(0, -142%);
-webkit-animation-delay:-0.75s;
-moz-animation-delay:-0.75s;
-ms-animation-delay:-0.75s;
-o-animation-delay:-0.75s;
animation-delay:-0.75s;
}
.cg-busy-default-spinner div.bar5{
-webkit-transform:rotate(120deg) translate(0, -142%);
-moz-transform:rotate(120deg) translate(0, -142%);
-ms-transform:rotate(120deg) translate(0, -142%);
-o-transform:rotate(120deg) translate(0, -142%);
transform:rotate(120deg) translate(0, -142%);
-webkit-animation-delay:-0.667s;
-moz-animation-delay:-0.667s;
-ms-animation-delay:-0.667s;
-o-animation-delay:-0.667s;
animation-delay:-0.667s;
}
.cg-busy-default-spinner div.bar6{
-webkit-transform:rotate(150deg) translate(0, -142%);
-moz-transform:rotate(150deg) translate(0, -142%);
-ms-transform:rotate(150deg) translate(0, -142%);
-o-transform:rotate(150deg) translate(0, -142%);
transform:rotate(150deg) translate(0, -142%);
-webkit-animation-delay:-0.5833s;
-moz-animation-delay:-0.5833s;
-ms-animation-delay:-0.5833s;
-o-animation-delay:-0.5833s;
animation-delay:-0.5833s;
}
.cg-busy-default-spinner div.bar7{
-webkit-transform:rotate(180deg) translate(0, -142%);
-moz-transform:rotate(180deg) translate(0, -142%);
-ms-transform:rotate(180deg) translate(0, -142%);
-o-transform:rotate(180deg) translate(0, -142%);
transform:rotate(180deg) translate(0, -142%);
-webkit-animation-delay:-0.5s;
-moz-animation-delay:-0.5s;
-ms-animation-delay:-0.5s;
-o-animation-delay:-0.5s;
animation-delay:-0.5s;
}
.cg-busy-default-spinner div.bar8{
-webkit-transform:rotate(210deg) translate(0, -142%);
-moz-transform:rotate(210deg) translate(0, -142%);
-ms-transform:rotate(210deg) translate(0, -142%);
-o-transform:rotate(210deg) translate(0, -142%);
transform:rotate(210deg) translate(0, -142%);
-webkit-animation-delay:-0.41667s;
-moz-animation-delay:-0.41667s;
-ms-animation-delay:-0.41667s;
-o-animation-delay:-0.41667s;
animation-delay:-0.41667s;
}
.cg-busy-default-spinner div.bar9{
-webkit-transform:rotate(240deg) translate(0, -142%);
-moz-transform:rotate(240deg) translate(0, -142%);
-ms-transform:rotate(240deg) translate(0, -142%);
-o-transform:rotate(240deg) translate(0, -142%);
transform:rotate(240deg) translate(0, -142%);
-webkit-animation-delay:-0.333s;
-moz-animation-delay:-0.333s;
-ms-animation-delay:-0.333s;
-o-animation-delay:-0.333s;
animation-delay:-0.333s;
}
.cg-busy-default-spinner div.bar10{
-webkit-transform:rotate(270deg) translate(0, -142%);
-moz-transform:rotate(270deg) translate(0, -142%);
-ms-transform:rotate(270deg) translate(0, -142%);
-o-transform:rotate(270deg) translate(0, -142%);
transform:rotate(270deg) translate(0, -142%);
-webkit-animation-delay:-0.25s;
-moz-animation-delay:-0.25s;
-ms-animation-delay:-0.25s;
-o-animation-delay:-0.25s;
animation-delay:-0.25s;
}
.cg-busy-default-spinner div.bar11{
-webkit-transform:rotate(300deg) translate(0, -142%);
-moz-transform:rotate(300deg) translate(0, -142%);
-ms-transform:rotate(300deg) translate(0, -142%);
-o-transform:rotate(300deg) translate(0, -142%);
transform:rotate(300deg) translate(0, -142%);
-webkit-animation-delay:-0.1667s;
-moz-animation-delay:-0.1667s;
-ms-animation-delay:-0.1667s;
-o-animation-delay:-0.1667s;
animation-delay:-0.1667s;
}
.cg-busy-default-spinner div.bar12{
-webkit-transform:rotate(330deg) translate(0, -142%);
-moz-transform:rotate(330deg) translate(0, -142%);
-ms-transform:rotate(330deg) translate(0, -142%);
-o-transform:rotate(330deg) translate(0, -142%);
transform:rotate(330deg) translate(0, -142%);
-webkit-animation-delay:-0.0833s;
-moz-animation-delay:-0.0833s;
-ms-animation-delay:-0.0833s;
-o-animation-delay:-0.0833s;
animation-delay:-0.0833s;
}
@-webkit-keyframes cg-busy-spinner-anim{
from {opacity: 1;}
to {opacity: 0.25;}
}
@-moz-keyframes cg-busy-spinner-anim{
from {opacity: 1;}
to {opacity: 0.25;}
}
@keyframes cg-busy-spinner-anim{
from {opacity: 1;}
to {opacity: 0.25;}
}
{
"vname": "Pete",
"vurl":"abc.xyz.com"
}