Merge pull request #3108 from xissy/master

Added angular-busy 4.0.2
This commit is contained in:
Drew Freyling
2014-05-05 15:00:34 +10:00
5 changed files with 551 additions and 0 deletions
@@ -0,0 +1,270 @@
.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;}
}
+237
View File
@@ -0,0 +1,237 @@
angular.module('cgBusy',[]);
//loosely modeled after angular-promise-tracker
angular.module('cgBusy').factory('_cgBusyTrackerFactory',['$timeout',function($timeout){
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));
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>"
);
}]);
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
angular.module("cgBusy",[]),angular.module("cgBusy").factory("_cgBusyTrackerFactory",["$timeout",function(a){return function(){var b={};b.promises=[],b.delayPromise=null,b.durationPromise=null,b.reset=function(d){b.minDuration=d.minDuration,b.promises=[],angular.forEach(d.promises,function(a){a&&!a.$cgBusyFulfilled&&c(a)}),0!==b.promises.length&&(d.delay&&(b.delayPromise=a(function(){b.delayPromise=null},d.delay)),d.minDuration&&(b.durationPromise=a(function(){b.durationPromise=null},d.minDuration)))},b.getThen=function(a){var b=a&&(a.then||a.$then||a.$promise&&a.$promise.then);return b};var c=function(a){var c=b.getThen(a);if(!c)throw new Error("cgBusy expects a promise (or something that has a .promise or .$promise");-1===b.promises.indexOf(a)&&(b.promises.push(a),c(function(){a.$cgBusyFulfilled=!0,-1!==b.promises.indexOf(a)&&b.promises.splice(b.promises.indexOf(a),1)},function(){a.$cgBusyFulfilled=!0,-1!==b.promises.indexOf(a)&&b.promises.splice(b.promises.indexOf(a),1)}))};return b.active=function(){return b.delayPromise?!1:b.durationPromise?!0:b.promises.length>0},b}}]),angular.module("cgBusy").value("cgBusyDefaults",{}),angular.module("cgBusy").directive("cgBusy",["$compile","$templateCache","cgBusyDefaults","$http","_cgBusyTrackerFactory",function(a,b,c,d,e){return{restrict:"A",link:function(f,g,h){var i=g.css("position");("static"===i||""===i||"undefined"==typeof i)&&g.css("position","relative");var j,k,l,m,n=e(),o={templateUrl:"angular-busy.html",delay:0,minDuration:0,backdrop:!0,message:"Please Wait..."};angular.extend(o,c),f.$watchCollection(h.cgBusy,function(c){if(c||(c={promise:null}),angular.isString(c))throw new Error("Invalid value for cg-busy. cgBusy no longer accepts string ids to represent promises/trackers.");(angular.isArray(c)||n.getThen(c))&&(c={promise:c}),c=angular.extend(angular.copy(o),c),c.templateUrl||(c.templateUrl=o.templateUrl),angular.isArray(c.promise)||(c.promise=[c.promise]),l||(l=f.$new()),l.$message=c.message,angular.equals(n.promises,c.promise)||n.reset({promises:c.promise,delay:c.delay,minDuration:c.minDuration}),l.$cgBusyIsActive=function(){return n.active()},j&&k===c.templateUrl&&m===c.backdrop||(j&&j.remove(),k=c.templateUrl,m=c.backdrop,d.get(k,{cache:b}).success(function(b){c.backdrop="undefined"==typeof c.backdrop?!0:c.backdrop;var d=c.backdrop?'<div class="cg-busy cg-busy-backdrop"></div>':"",e='<div class="cg-busy cg-busy-animation ng-hide" ng-show="$cgBusyIsActive()">'+d+b+"</div>";j=a(e)(l),angular.element(j.children()[c.backdrop?1:0]).css("position","absolute").css("top",0).css("left",0).css("right",0).css("bottom",0),g.append(j)}).error(function(a){throw new Error("Template specified for cgBusy ("+c.templateUrl+") could not be loaded. "+a)}))},!0)}}}]),angular.module("cgBusy").run(["$templateCache",function(a){"use strict";a.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>')}]);
+42
View File
@@ -0,0 +1,42 @@
{
"name": "angular-busy",
"filename": "angular-busy.min.js",
"description": "Show busy/loading indicators on any $http or $resource request, or on any promise",
"version": "4.0.2",
"npmName": "angular-busy",
"npmFileMap": [
{
"basePath": "/dist/",
"files": [
"*.js",
"*.css"
]
}
],
"files": [
"dist/angular-busy.js",
"dist/angular-busy.min.js",
"dist/angular-busy.css",
"dist/angular-busy.min.css"
],
"homepage": "https://github.com/cgross/angular-busy",
"author": {
"name": "Chris Gross",
"email": "schtoo@schtoo.com"
},
"repository": {
"type": "git",
"url": "git://github.com/cgross/angular-busy.git"
},
"licenses": [
{
"url": "https://github.com/cgross/angular-busy/blob/master/LICENSE"
}
],
"dependencies": {},
"keywords": [
"angularjs",
"busy",
"indicator"
]
}