From fe72f9aa16698a28fc889312535ffea11174a228 Mon Sep 17 00:00:00 2001 From: Chris Gross Date: Sun, 6 Jul 2014 14:12:32 -0400 Subject: [PATCH] change how minDuration + delay work, change how backdrop animates --- README.md | 3 +++ angular-busy.css | 15 +++++++++++++++ angular-busy.js | 39 ++++++++++++++++++++++++++++++--------- bower.json | 2 +- dist/angular-busy.css | 15 +++++++++++++++ dist/angular-busy.js | 39 ++++++++++++++++++++++++++++++--------- dist/angular-busy.min.css | 2 +- dist/angular-busy.min.js | 2 +- package.json | 2 +- test/spec.js | 8 ++++---- 10 files changed, 101 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 8abc4eb..87f3eb5 100755 --- a/README.md +++ b/README.md @@ -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. diff --git a/angular-busy.css b/angular-busy.css index 57dbbe6..7999513 100755 --- a/angular-busy.css +++ b/angular-busy.css @@ -4,6 +4,7 @@ left:0px; right:0px; bottom:0px; + z-index:1001; } .cg-busy-animation.ng-hide-add, @@ -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 { @@ -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); diff --git a/angular-busy.js b/angular-busy.js index 20576a3..a2870a6 100755 --- a/angular-busy.js +++ b/angular-busy.js @@ -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; @@ -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)); } }; @@ -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; @@ -106,6 +118,7 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy } var templateElement; + var backdropElement; var currentTemplate; var templateScope; var backdrop; @@ -176,6 +189,9 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy if (templateElement) { templateElement.remove(); } + if (backdropElement){ + backdropElement.remove(); + } currentTemplate = options.templateUrl; backdrop = options.backdrop; @@ -183,12 +199,17 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy $http.get(currentTemplate,{cache: $templateCache}).success(function(indicatorTemplate){ options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop; - var backdrop = options.backdrop ? '
' : ''; - var template = '
'+ backdrop + indicatorTemplate+'
'; + if (options.backdrop){ + var backdrop = '
'; + backdropElement = $compile(backdrop)(templateScope); + element.append(backdropElement); + } + + var template = '
' + indicatorTemplate + '
'; 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) diff --git a/bower.json b/bower.json index a9e03c5..9d2fe29 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-busy", - "version": "4.0.3", + "version": "4.1.0", "main": [ "dist/angular-busy.js", "dist/angular-busy.css" diff --git a/dist/angular-busy.css b/dist/angular-busy.css index 57dbbe6..7999513 100644 --- a/dist/angular-busy.css +++ b/dist/angular-busy.css @@ -4,6 +4,7 @@ left:0px; right:0px; bottom:0px; + z-index:1001; } .cg-busy-animation.ng-hide-add, @@ -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 { @@ -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); diff --git a/dist/angular-busy.js b/dist/angular-busy.js index 1eb3051..ff8f000 100644 --- a/dist/angular-busy.js +++ b/dist/angular-busy.js @@ -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; @@ -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)); } }; @@ -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; @@ -106,6 +118,7 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy } var templateElement; + var backdropElement; var currentTemplate; var templateScope; var backdrop; @@ -176,6 +189,9 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy if (templateElement) { templateElement.remove(); } + if (backdropElement){ + backdropElement.remove(); + } currentTemplate = options.templateUrl; backdrop = options.backdrop; @@ -183,12 +199,17 @@ angular.module('cgBusy').directive('cgBusy',['$compile','$templateCache','cgBusy $http.get(currentTemplate,{cache: $templateCache}).success(function(indicatorTemplate){ options.backdrop = typeof options.backdrop === 'undefined' ? true : options.backdrop; - var backdrop = options.backdrop ? '
' : ''; - var template = '
'+ backdrop + indicatorTemplate+'
'; + if (options.backdrop){ + var backdrop = '
'; + backdropElement = $compile(backdrop)(templateScope); + element.append(backdropElement); + } + + var template = '
' + indicatorTemplate + '
'; 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) diff --git a/dist/angular-busy.min.css b/dist/angular-busy.min.css index 8bb1f97..5d79638 100644 --- a/dist/angular-busy.min.css +++ b/dist/angular-busy.min.css @@ -1 +1 @@ -.cg-busy{position:absolute;top:0;left:0;right:0;bottom:0}.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-add,.cg-busy-animation.ng-hide-remove.ng-hide-remove-active{opacity:1;-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}.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:#fff;opacity:.7}.cg-busy-default-wrapper{text-align:center}.cg-busy-default-sign{display:inline-block;position:relative;padding-bottom:6px;color:#333;text-shadow:0 1px 1px rgba(255,255,255,.75);background-color:#e9eeee;border:1px solid #ddd;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,.2);-moz-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(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:-.9167s;-moz-animation-delay:-.9167s;-ms-animation-delay:-.9167s;-o-animation-delay:-.9167s;animation-delay:-.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:-.833s;-moz-animation-delay:-.833s;-ms-animation-delay:-.833s;-o-animation-delay:-.833s;animation-delay:-.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:-.75s;-moz-animation-delay:-.75s;-ms-animation-delay:-.75s;-o-animation-delay:-.75s;animation-delay:-.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:-.667s;-moz-animation-delay:-.667s;-ms-animation-delay:-.667s;-o-animation-delay:-.667s;animation-delay:-.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:-.5833s;-moz-animation-delay:-.5833s;-ms-animation-delay:-.5833s;-o-animation-delay:-.5833s;animation-delay:-.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:-.5s;-moz-animation-delay:-.5s;-ms-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.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:-.41667s;-moz-animation-delay:-.41667s;-ms-animation-delay:-.41667s;-o-animation-delay:-.41667s;animation-delay:-.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:-.333s;-moz-animation-delay:-.333s;-ms-animation-delay:-.333s;-o-animation-delay:-.333s;animation-delay:-.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:-.25s;-moz-animation-delay:-.25s;-ms-animation-delay:-.25s;-o-animation-delay:-.25s;animation-delay:-.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:-.1667s;-moz-animation-delay:-.1667s;-ms-animation-delay:-.1667s;-o-animation-delay:-.1667s;animation-delay:-.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:-.0833s;-moz-animation-delay:-.0833s;-ms-animation-delay:-.0833s;-o-animation-delay:-.0833s;animation-delay:-.0833s}@-webkit-keyframes cg-busy-spinner-anim{from{opacity:1}to{opacity:.25}}@-moz-keyframes cg-busy-spinner-anim{from{opacity:1}to{opacity:.25}}@keyframes cg-busy-spinner-anim{from{opacity:1}to{opacity:.25}} \ No newline at end of file +.cg-busy{position:absolute;top:0;left:0;right:0;bottom:0;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-add,.cg-busy-animation.ng-hide-remove.ng-hide-remove-active{opacity:1;-webkit-transform:translate(0px,0);-moz-transform:translate(0px,0);-ms-transform:translate(0px,0);-o-transform:translate(0px,0);transform:translate(0px,0)}.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:#fff;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}.cg-busy-default-wrapper{text-align:center}.cg-busy-default-sign{display:inline-block;position:relative;z-index:1002;padding-bottom:6px;color:#333;text-shadow:0 1px 1px rgba(255,255,255,.75);background-color:#e9eeee;border:1px solid #ddd;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,.2);-moz-box-shadow:0 0 3px rgba(0,0,0,.2);box-shadow:0 0 3px rgba(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:-.9167s;-moz-animation-delay:-.9167s;-ms-animation-delay:-.9167s;-o-animation-delay:-.9167s;animation-delay:-.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:-.833s;-moz-animation-delay:-.833s;-ms-animation-delay:-.833s;-o-animation-delay:-.833s;animation-delay:-.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:-.75s;-moz-animation-delay:-.75s;-ms-animation-delay:-.75s;-o-animation-delay:-.75s;animation-delay:-.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:-.667s;-moz-animation-delay:-.667s;-ms-animation-delay:-.667s;-o-animation-delay:-.667s;animation-delay:-.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:-.5833s;-moz-animation-delay:-.5833s;-ms-animation-delay:-.5833s;-o-animation-delay:-.5833s;animation-delay:-.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:-.5s;-moz-animation-delay:-.5s;-ms-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.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:-.41667s;-moz-animation-delay:-.41667s;-ms-animation-delay:-.41667s;-o-animation-delay:-.41667s;animation-delay:-.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:-.333s;-moz-animation-delay:-.333s;-ms-animation-delay:-.333s;-o-animation-delay:-.333s;animation-delay:-.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:-.25s;-moz-animation-delay:-.25s;-ms-animation-delay:-.25s;-o-animation-delay:-.25s;animation-delay:-.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:-.1667s;-moz-animation-delay:-.1667s;-ms-animation-delay:-.1667s;-o-animation-delay:-.1667s;animation-delay:-.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:-.0833s;-moz-animation-delay:-.0833s;-ms-animation-delay:-.0833s;-o-animation-delay:-.0833s;animation-delay:-.0833s}@-webkit-keyframes cg-busy-spinner-anim{from{opacity:1}to{opacity:.25}}@-moz-keyframes cg-busy-spinner-anim{from{opacity:1}to{opacity:.25}}@keyframes cg-busy-spinner-anim{from{opacity:1}to{opacity:.25}} \ No newline at end of file diff --git a/dist/angular-busy.min.js b/dist/angular-busy.min.js index c46cf63..6abdbe7 100644 --- a/dist/angular-busy.min.js +++ b/dist/angular-busy.min.js @@ -1 +1 @@ -angular.module("cgBusy",[]),angular.module("cgBusy").factory("_cgBusyTrackerFactory",["$timeout","$q",function(a,b){return function(){var c={};c.promises=[],c.delayPromise=null,c.durationPromise=null,c.reset=function(b){c.minDuration=b.minDuration,c.promises=[],angular.forEach(b.promises,function(a){a&&!a.$cgBusyFulfilled&&d(a)}),0!==c.promises.length&&(b.delay&&(c.delayPromise=a(function(){c.delayPromise=null},b.delay)),b.minDuration&&(c.durationPromise=a(function(){c.durationPromise=null},b.minDuration)))},c.getThen=function(a){var c=a&&(a.then||a.$then||a.$promise&&a.$promise.then);return a.denodeify?b.when(a).then:c};var d=function(a){var b=c.getThen(a);if(!b)throw new Error("cgBusy expects a promise (or something that has a .promise or .$promise");-1===c.promises.indexOf(a)&&(c.promises.push(a),b(function(){a.$cgBusyFulfilled=!0,-1!==c.promises.indexOf(a)&&c.promises.splice(c.promises.indexOf(a),1)},function(){a.$cgBusyFulfilled=!0,-1!==c.promises.indexOf(a)&&c.promises.splice(c.promises.indexOf(a),1)}))};return c.active=function(){return c.delayPromise?!1:c.durationPromise?!0:c.promises.length>0},c}}]),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?'
':"",e='
'+d+b+"
";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",'
\n\n
\n\n \n\n
{{$message}}
\n\n
\n\n
')}]); \ No newline at end of file +angular.module("cgBusy",[]),angular.module("cgBusy").factory("_cgBusyTrackerFactory",["$timeout","$q",function(a,b){return function(){var c={};c.promises=[],c.delayPromise=null,c.durationPromise=null,c.delayJustFinished=!1,c.reset=function(b){c.minDuration=b.minDuration,c.promises=[],angular.forEach(b.promises,function(a){a&&!a.$cgBusyFulfilled&&d(a)}),0!==c.promises.length&&(c.delayJustFinished=!1,b.delay&&(c.delayPromise=a(function(){c.delayPromise=null,c.delayJustFinished=!0},parseInt(b.delay,10))),b.minDuration&&(c.durationPromise=a(function(){c.durationPromise=null},parseInt(b.minDuration,10)+(b.delay?parseInt(b.delay,10):0))))},c.getThen=function(a){var c=a&&(a.then||a.$then||a.$promise&&a.$promise.then);return a.denodeify?b.when(a).then:c};var d=function(a){var b=c.getThen(a);if(!b)throw new Error("cgBusy expects a promise (or something that has a .promise or .$promise");-1===c.promises.indexOf(a)&&(c.promises.push(a),b(function(){a.$cgBusyFulfilled=!0,-1!==c.promises.indexOf(a)&&c.promises.splice(c.promises.indexOf(a),1)},function(){a.$cgBusyFulfilled=!0,-1!==c.promises.indexOf(a)&&c.promises.splice(c.promises.indexOf(a),1)}))};return c.active=function(){return c.delayPromise?!1:c.delayJustFinished?(c.delayJustFinished=!1,c.promises.length>0):c.durationPromise?!0:c.promises.length>0},c}}]),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,o=e(),p={templateUrl:"angular-busy.html",delay:0,minDuration:0,backdrop:!0,message:"Please Wait..."};angular.extend(p,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)||o.getThen(c))&&(c={promise:c}),c=angular.extend(angular.copy(p),c),c.templateUrl||(c.templateUrl=p.templateUrl),angular.isArray(c.promise)||(c.promise=[c.promise]),m||(m=f.$new()),m.$message=c.message,angular.equals(o.promises,c.promise)||o.reset({promises:c.promise,delay:c.delay,minDuration:c.minDuration}),m.$cgBusyIsActive=function(){return o.active()},j&&l===c.templateUrl&&n===c.backdrop||(j&&j.remove(),k&&k.remove(),l=c.templateUrl,n=c.backdrop,d.get(l,{cache:b}).success(function(b){if(c.backdrop="undefined"==typeof c.backdrop?!0:c.backdrop,c.backdrop){var d='
';k=a(d)(m),g.append(k)}var e='
'+b+"
";j=a(e)(m),angular.element(j.children()[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",'
\n\n
\n\n \n\n
{{$message}}
\n\n
\n\n
')}]); \ No newline at end of file diff --git a/package.json b/package.json index 0e10996..aeca536 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-busy", - "version": "4.0.3", + "version": "4.1.0", "description": "", "repository": { "type": "git", diff --git a/test/spec.js b/test/spec.js index e8a37ae..ca879e4 100755 --- a/test/spec.js +++ b/test/spec.js @@ -28,7 +28,7 @@ describe('cgBusy', function() { scope.$apply(); - expect(this.element.children().length).toBe(1); //ensure element is added + expect(this.element.children().length).toBe(2); //ensure the elements are added expect(this.element.children().css('display')).toBe('block');//ensure its visible (promise is ongoing) @@ -53,7 +53,7 @@ describe('cgBusy', function() { scope.$apply(); - expect(this.element.children().length).toBe(1); //ensure element is added + expect(this.element.children().length).toBe(2); //ensure the elements are added expect(this.element.children().css('display')).toBe('block');//ensure its visible (promise is ongoing) @@ -90,7 +90,7 @@ describe('cgBusy', function() { scope.$apply(); - expect(this.element.children().length).toBe(1); //ensure element is added + expect(this.element.children().length).toBe(2); //ensure the elements are added expect(this.element.children().css('display')).toBe('none'); @@ -115,7 +115,7 @@ describe('cgBusy', function() { scope.$apply(); - expect(this.element.children().length).toBe(1); //ensure element is added + expect(this.element.children().length).toBe(2); //ensure the elements are added expect(this.element.children().css('display')).toBe('block');