UNPKG

angular-progress-button-styles

Version:

Different types of progressbuttons implemented on AngularJS

1 lines 2.86 kB
"use strict";!function(a){function b(a){var b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return b[c]}function c(){var a={},b=null,c={style:"fill",direction:"horizontal",randomProgress:!0};this.profile=function(c,d){if(1==arguments.length){if(b)throw Error("Default profile already set.");b=c}else{if(a[c])throw Error("Profile ["+c+"] aready set.");a[c]=d}},this.$get=function(){return{getProfile:function(d){return d&&a[d]?a[d]:b||c}}}}function d(c,d,e){return{restrict:"A",transclude:!0,scope:{progressButton:"&",pbStyle:"@",pbDirection:"@",pbProfile:"@"},template:'<span class="content" ng-transclude></span><span class="progress"><span class="progress-inner" ng-style="progressStyles" ng-class="{ notransition: !allowProgressTransition }"></span></span>',controller:function(){},link:function(f,g,h){function i(){var a=d.getProfile(f.pbProfile);f.pbStyle=f.pbStyle||a.style||"fill","lateral-lines"!=f.pbStyle?f.pbDirection=f.pbDirection||a.direction||"horizontal":f.pbDirection="vertical",f.pbPerspective=0==f.pbStyle.indexOf("rotate")||0==f.pbStyle.indexOf("flip-open"),f.pbRandomProgress=h.pbRandomProgress?"false"!==h.pbRandomProgress:a.randomProgress||!0}function j(a){f.progressStyles[o]=100*a+"%"}function k(){var a=0;return e(function(){a+=(1-a)*Math.random()*.5,j(a)},200)}function l(){f.$apply(function(){f.disabled=!1})}function m(a){function b(a){("opacity"===a.propertyName||a.originalEvent&&"opacity"===a.originalEvent.propertyName)&&(g.off(n,b),f.$apply(function(){f.allowProgressTransition=!1,j(0),f.progressStyles.opacity=1}))}if(n&&(f.progressStyles.opacity=0,g.on(n,b)),"number"==typeof a){var c=a>=0?"state-success":"state-error";g.addClass(c),setTimeout(function(){g.removeClass(c),l()},1500)}else l();g.removeClass("state-loading")}i();var n=b(g[0]),o="vertical"==f.pbDirection?"height":"width";if(f.pbPerspective){var p=a.element('<span class="progress-wrap"></span>');p.append(g.children()),g.append(p),g.addClass("progress-button-perspective")}f.progressStyles={},f.disabled=!1,f.allowProgressTransition=!1,g.addClass("progress-button"),g.addClass("progress-button-dir-"+f.pbDirection),g.addClass("progress-button-style-"+f.pbStyle),f.$watch("disabled",function(a){g.toggleClass("disabled",a)}),g.on("click",function(){f.$apply(function(){if(!f.disabled){f.disabled=!0,g.addClass("state-loading"),f.allowProgressTransition=!0;var a=null;c.when(f.progressButton()).then(function(){j(1),a&&e.cancel(a),m(1)},function(){a&&e.cancel(a),m(-1)},function(a){!f.pbRandomProgress&&j(a)}),f.pbRandomProgress&&(a=k())}})})}}}var e=a.module("angular-progress-button-styles",[]);e.provider("progressButtonConfig",c),e.directive("progressButton",d),d.$inject=["$q","progressButtonConfig","$interval"]}(angular);