angular-progress-button
Version:
Brings buttons with built-in progress meters to AngularJS.
2 lines • 1.5 kB
JavaScript
/* angular-progress-button-enhanced v0.3.1 (https://github.com/FizzBuzz791/angular-progress-button) */
;angular.module("progressButton").directive("progressButton",["$timeout",function(a){return{restrict:"AE",transclude:!0,replace:!0,scope:{value:"&",type:"@",inProgressText:"@inProgress",completionText:"@complete"},template:'<a class="progress-button"><span class="progress-button-text" ng-transclude></span><span class="progress-button-bar progress-button-{{type}}"></span></a>',link:function(b,c,d){var e=angular.element(c[0].querySelectorAll(".progress-button-bar")),f=angular.element(c[0].querySelectorAll(".progress-button-text"));b.defaultText=f.text(),d.$observe("type",function(a){b.type=a||"horizontal"}),d.$observe("inProgress",function(a){b.inProgressText=a||"Loading…"}),d.$observe("complete",function(a){b.completionText=a||"Complete."}),b.$watch("value()",function(c){c||(c=0),c>1&&(c=1),0===c?(f.text(b.defaultText),e.css("display","none")):1===c?(f.text(b.completionText),e.css("display","block"),a(function(){g(e)},500)):(f.text(b.inProgressText),e.css("display","block")),a(function(){"vertical"===b.type?e.css("height",100*c+"%"):e.css("width",100*c+"%")})});var g=function(a,b){a.css("opacity",1);var c=+new Date,d=function(){a.css("opacity",+a.css("opacity")-(new Date-c)/400),c=+new Date,+a.css("opacity")>0?window.requestAnimationFrame&&requestAnimationFrame(d)||setTimeout(d,16):(a.css("display","none"),a.css("opacity",1),"function"==typeof b&&b())};d()}}}}]);