<!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.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/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.2.17" src="http://code.angularjs.org/1.2.17/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" cg-busy="myPromise">
<div class="col-md-10">
<h1>Hello Plunker!</h1>
<form name="myForm" role="form">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="vname">Name</label>
<input type="text" class="form-control" name="vname" id="vname" ng-model="v_name" />
</div>
<div class="form-group">
<label for="vurl">URL</label>
<div class="input-group">
<span class="input-group-addon">https://</span>
<input type="text" class="form-control" name="vurl" id="vurl" ng-model="v_url"
placeholder="NOT editable after pushing the 'Click' button, try it out!"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<button ng-click="submit()">Click</button>
</div>
</div>
</form>
</div>
</div>
<h5> Adding New items : {{ items | json }}</h5>
</body>
</html>
// Code goes here
// Declare the main module
var myApp = angular.module('myApp', ['cgBusy']);
myApp.controller('myCtrl', function($scope, $timeout) {
$scope.submit = function(){
$scope.myPromise = $timeout(function() {
console.log('boooooo')
}, 4000)
.then(function(d){
$scope.data = d;
}).then(function(){
return data();
}).then(function(){
alert('success');
});
return $scope.myPromise;
};
var data = function(){
$scope.items = [{
vname: 'abc',
vurl: 'abc.com'
}];
$scope.items.push({vname: $scope.v_name, vurl: $scope.v_url});
return $scope.items;
};
});
/* Styles go here */
.pages {
padding: 2rem;
}
.cg-busy { /* this is the fix*/
z-index:10000;
}
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.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;
}
if (options.delay) {
tracker.delayPromise = $timeout(function(){
tracker.delayPromise = null;
},options.delay);
}
if (options.minDuration) {
tracker.durationPromise = $timeout(function(){
tracker.durationPromise = null;
},options.minDuration);
}
};
tracker.getThen = function(promise){
var then = promise && (promise.then || promise.$then ||
(promise.$promise && promise.$promise.then));
if (promise.denodeify) {
return $q.when(promise).then;
}
return then;
};
var addPromiseLikeThing = function(promise){
var then = tracker.getThen(promise);
if (!then) {
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);
then(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.durationPromise){
return true;
}
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 currentTemplate;
var templateScope;
var backdrop;
var tracker = _cgBusyTrackerFactory();
var defaults = {
templateUrl: 'angular-busy.html',
delay:0,
minDuration:0,
backdrop: true,
message:'Please Wait...'
};
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.getThen(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();
}
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>';
templateElement = $compile(template)(templateScope);
angular.element(templateElement.children()[options.backdrop?1:0])
.css('position','absolute')
.css('top',0)
.css('left',0)
.css('right',0)
.css('bottom',0);
element.append(templateElement);
}).error(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;
}
.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;
}
/* All styles below are for the default template. */
.cg-busy-default-wrapper {
text-align:center;
}
.cg-busy-default-sign{
display: inline-block;
position:relative;
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"
}