From 7c62632cbc5f1b936bc3b400f074066a0566c419 Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 30 Jun 2015 14:55:32 +0300 Subject: [PATCH 1/3] Replace disabling the button, with ignoring subsequent clicks during a click-in-progress --- README.md | 6 +++--- bower.json | 4 ++++ dist/angular-progress-button-styles.js | 19 ++++++------------- dist/angular-progress-button-styles.min.css | 2 +- dist/angular-progress-button-styles.min.js | 2 +- js/angular-progress-button-styles.js | 19 ++++++------------- 6 files changed, 21 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 38ca1b0..d96b630 100644 --- a/README.md +++ b/README.md @@ -40,9 +40,9 @@ Here is a list of supported HTML attributes and their meaning: | Attribute | Available values | Meaning | |---|---|---------| | pb-style | | Defines button appearance. Default value is fill. | -| pb-direction | | To be used with pb-style=(fill or shrink). Defines the direction of the progress bar. Default value is horizontal. | -| pb-random-progress | | Runs random fill function from the moment button is clicked till promise is resolved. Default value is true. | -| pb-profile | _String value_ | The profile from which to fetch configuration during the button initialization. For more information look JS configuration section | +| pb-direction | | To be used with pb-style=(fill or shrink). Defines the direction of the progress bar.
Default value is horizontal. | +| pb-random-progress | | Runs random fill function from the moment button is clicked till promise is resolved.
Default value is true. | +| pb-profile | _String value_ | The profile from which to fetch configuration during the button initialization.
For more information look JS configuration section | ##### Javascript configuration For those ones, who don't like to have a lot of configuration in HTML as well to prevent the copy-paste there also is possibility to define configuration in Javascript using profiles. diff --git a/bower.json b/bower.json index 1d5942f..971dfe8 100644 --- a/bower.json +++ b/bower.json @@ -4,6 +4,10 @@ "authors": [ "Vladimir Lugovsky " ], + "main": [ + "dist/angular-progress-button-styles.min.js", + "dist/angular-progress-button-styles.min.css" + ], "description": "Different types of progressbuttons implemented on AngularJS", "keywords": [ "angular", diff --git a/dist/angular-progress-button-styles.js b/dist/angular-progress-button-styles.js index 503f4af..67334c7 100644 --- a/dist/angular-progress-button-styles.js +++ b/dist/angular-progress-button-styles.js @@ -77,7 +77,7 @@ }, template: '' + '' + - '' + + '' + '', controller: function() {}, link: function($scope, $element, $attrs) { @@ -92,7 +92,7 @@ $element.addClass('progress-button-perspective'); } $scope.progressStyles = {}; - $scope.allowProgressTransition = false; + $scope.clickInProgress = false; // TODO: fetch from attributes probably $element.addClass('progress-button'); @@ -101,8 +101,9 @@ $element.on('click', function() { $scope.$apply(function() { - $scope.allowProgressTransition = true; - $element.addClass('state-loading').attr('disabled', 'disabled'); + if( $scope.clickInProgress ) return; + $scope.clickInProgress = true; + $element.addClass('state-loading'); var interval = null; $q.when($scope.progressButton()).then( function success() { @@ -144,10 +145,6 @@ $scope.progressStyles[progressProperty] = 100 * val + '%'; } - function enable() { - $element.removeAttr('disabled'); - } - function runProgressInterval() { var progress = 0; return $interval(function() { @@ -162,7 +159,7 @@ if (ev.propertyName !== 'opacity') return; $element.off(transitionEndEventName, onOpacityTransitionEnd); $scope.$apply(function() { - $scope.allowProgressTransition = false; + $scope.clickInProgress = false; setProgress(0); $scope.progressStyles.opacity = 1; }); @@ -178,12 +175,8 @@ $element.addClass(statusClass); setTimeout(function() { $element.removeClass(statusClass); - enable(); }, 1500); // TODO: fetch it from the options } - else { - enable(); - } $element.removeClass('state-loading'); } } diff --git a/dist/angular-progress-button-styles.min.css b/dist/angular-progress-button-styles.min.css index 5be46a4..57f0ccc 100644 --- a/dist/angular-progress-button-styles.min.css +++ b/dist/angular-progress-button-styles.min.css @@ -1 +1 @@ -.progress-button{position:relative;display:inline-block;padding:0 60px;outline:0;border:none;background:#1d9650;color:#FFF;text-transform:uppercase;letter-spacing:1px;font-size:1em;line-height:4;cursor:pointer}.progress-button *,.progress-button ::before,.progress-button :after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.progress-button .notransition{-webkit-transition:none!important;transition:none!important}.progress-button[disabled]{cursor:default}.progress-button .content{position:relative;display:block}.progress-button .content:after,.progress-button .content:before{position:absolute;right:20px;color:#0e7138;font-family:FontAwesome;opacity:0;-webkit-transition:opacity .3s .3s;transition:opacity .3s .3s}.progress-button .content:before{content:"\f00c"}.progress-button .content:after{content:"\f05e"}.progress-button.state-error .content:after,.progress-button.state-success .content:before{opacity:1}.progress-button .progress{background:#148544}.progress-button .progress-inner{position:absolute;left:0;background:#0e7138}.progress-button-dir-horizontal .progress-inner{top:0;width:0;height:100%;-webkit-transition:width .3s,opacity .3s;transition:width .3s,opacity .3s}.progress-button-dir-vertical .progress-inner{bottom:0;width:100%;height:0;-webkit-transition:height .3s,opacity .3s;transition:height .3s,opacity .3s}.progress-button-perspective{position:relative;display:inline-block;padding:0;background:0 0;-webkit-perspective:900px;perspective:900px}.progress-button-perspective .content,.progress-button-perspective .progress{outline:1px solid transparent}.progress-button-perspective .progress-wrap{display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.progress-button-perspective .content{padding:0 60px;background:#1d9650}.progress-button-style-fill.progress-button-dir-horizontal{overflow:hidden}.progress-button-style-fill.progress-button-dir-horizontal .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-horizontal .content:after,.progress-button-style-fill.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-horizontal.state-error .content,.progress-button-style-fill.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-fill.progress-button-dir-vertical{overflow:hidden}.progress-button-style-fill.progress-button-dir-vertical .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-vertical .content:after,.progress-button-style-fill.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-vertical.state-error .content,.progress-button-style-fill.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink.progress-button-dir-horizontal .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-horizontal .content:after,.progress-button-style-shrink.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading{-webkit-transform:scaleY(.3);transform:scaleY(.3)}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading .content{opacity:0}.progress-button-style-shrink.progress-button-dir-horizontal.state-error .content,.progress-button-style-shrink.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink{overflow:hidden;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-shrink.progress-button-dir-vertical .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-vertical .content:after,.progress-button-style-shrink.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-vertical.state-loading{-webkit-transform:scaleX(.1);transform:scaleX(.1)}.progress-button-style-shrink.progress-button-dir-vertical.state-loading .content{opacity:0}.progress-button-style-shrink.progress-button-dir-vertical.state-error .content,.progress-button-style-shrink.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-rotate-angle-bottom .progress{position:absolute;top:100%;left:0;width:100%;height:20px;box-shadow:0 -1px 0 #148544;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-rotate-angle-bottom.state-loading .progress-wrap{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-rotate-angle-top .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;box-shadow:0 1px 0 #148544;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.progress-button-style-rotate-angle-top.state-loading .progress-wrap{-webkit-transform:rotateX(-45deg);transform:rotateX(-45deg)}.progress-button-style-rotate-angle-left .progress{position:absolute;top:0;right:100%;width:20px;height:100%;box-shadow:1px 0 0 #148544;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-angle-left.state-loading .progress-wrap{-webkit-transform:rotateY(45deg);transform:rotateY(45deg)}.progress-button-style-rotate-angle-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;box-shadow:-1px 0 0 #148544;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-angle-right.state-loading .progress-wrap{-webkit-transform:rotateY(-45deg);transform:rotateY(-45deg)}.progress-button-style-rotate-side-down .progress{position:absolute;top:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-down.state-loading .progress-wrap{-webkit-transform:rotateX(90deg) translateZ(10px);transform:rotateX(90deg) translateZ(10px)}.progress-button-style-rotate-side-up .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-up.state-loading .progress-wrap{-webkit-transform:rotateX(-90deg) translateZ(10px);transform:rotateX(-90deg) translateZ(10px)}.progress-button-style-rotate-side-left .progress-wrap{-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left .progress{position:absolute;top:0;left:0;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left.state-loading .progress-wrap{-webkit-transform:translateX(50%) rotateY(90deg) translateZ(10px);transform:translateX(50%) rotateY(90deg) translateZ(10px)}.progress-button-style-rotate-side-right .progress-wrap{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-side-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-right.state-loading .progress-wrap{-webkit-transform:translateX(-50%) rotateY(-90deg) translateZ(10px);transform:translateX(-50%) rotateY(-90deg) translateZ(10px)}.progress-button-style-rotate-back .progress-wrap{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.progress-button-style-rotate-back .content{-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-back .progress{position:absolute;top:100%;left:0;width:100%;height:100%;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-back.state-loading .progress-wrap{-webkit-transform:rotateX(180deg) scaleX(.6) scaleY(.3);transform:rotateX(180deg) scaleX(.6) scaleY(.3)}.progress-button-style-flip-open .content{z-index:10;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-flip-open .progress{position:absolute;top:0;left:0;width:100%;height:100%}.progress-button-style-flip-open.state-loading .content{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-slide-down{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-slide-down .content{z-index:10;padding:0 60px;background:#1d9650}.progress-button-style-slide-down .progress{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-slide-down.state-loading .progress{-webkit-transform:translateY(10px);transform:translateY(10px)}.progress-button-style-move-up{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-move-up .content{z-index:10;padding:0 60px;background:#1d9650;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-move-up .progress{position:absolute;top:0;left:0;width:100%;height:100%}.progress-button-style-move-up.state-loading .content{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.progress-button-style-top-line .progress-inner{height:3px}.progress-button-style-top-line .content:after,.progress-button-style-top-line .content:before{right:auto;left:100%;margin-left:25px}.progress-button-style-lateral-lines .progress-inner{width:100%;border-right:3px solid #0e7138;border-left:3px solid #0e7138;background:0 0}.progress-button-style-lateral-lines .content:after,.progress-button-style-lateral-lines .content:before{right:auto;left:100%;margin-left:25px} \ No newline at end of file +.progress-button-style-fill.progress-button-dir-horizontal,.progress-button-style-fill.progress-button-dir-vertical{overflow:hidden}.progress-button{position:relative;display:inline-block;padding:0 60px;outline:0;border:none;background:#1d9650;color:#FFF;text-transform:uppercase;letter-spacing:1px;font-size:1em;line-height:4;cursor:pointer}.progress-button *,.progress-button ::before,.progress-button :after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.progress-button .notransition{-webkit-transition:none!important;transition:none!important}.progress-button[disabled]{cursor:default}.progress-button .content{position:relative;display:block}.progress-button .content:after,.progress-button .content:before{position:absolute;right:20px;color:#0e7138;font-family:FontAwesome;opacity:0;-webkit-transition:opacity .3s .3s;transition:opacity .3s .3s}.progress-button .content:before{content:"\f00c"}.progress-button .content:after{content:"\f05e"}.progress-button.state-error .content:after,.progress-button.state-success .content:before{opacity:1}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading .content,.progress-button-style-shrink.progress-button-dir-vertical.state-loading .content{opacity:0}.progress-button .progress{background:#148544}.progress-button .progress-inner{position:absolute;left:0;background:#0e7138}.progress-button-dir-horizontal .progress-inner{top:0;width:0;height:100%;-webkit-transition:width .3s,opacity .3s;transition:width .3s,opacity .3s}.progress-button-dir-vertical .progress-inner{bottom:0;width:100%;height:0;-webkit-transition:height .3s,opacity .3s;transition:height .3s,opacity .3s}.progress-button-perspective{position:relative;display:inline-block;padding:0;background:0 0;-webkit-perspective:900px;perspective:900px}.progress-button-perspective .content,.progress-button-perspective .progress{outline:transparent solid 1px}.progress-button-perspective .progress-wrap{display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.progress-button-perspective .content{padding:0 60px;background:#1d9650}.progress-button-style-fill.progress-button-dir-horizontal .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-horizontal .content:after,.progress-button-style-fill.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-horizontal.state-error .content,.progress-button-style-fill.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-fill.progress-button-dir-vertical .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-vertical .content:after,.progress-button-style-fill.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-vertical.state-error .content,.progress-button-style-fill.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink.progress-button-dir-horizontal .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-horizontal .content:after,.progress-button-style-shrink.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading{-webkit-transform:scaleY(.3);transform:scaleY(.3)}.progress-button-style-shrink.progress-button-dir-horizontal.state-error .content,.progress-button-style-shrink.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink{overflow:hidden;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-shrink.progress-button-dir-vertical .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-vertical .content:after,.progress-button-style-shrink.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-vertical.state-loading{-webkit-transform:scaleX(.1);transform:scaleX(.1)}.progress-button-style-shrink.progress-button-dir-vertical.state-error .content,.progress-button-style-shrink.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-rotate-angle-bottom .progress{position:absolute;top:100%;left:0;width:100%;height:20px;box-shadow:0 -1px 0 #148544;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-rotate-angle-bottom.state-loading .progress-wrap{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-rotate-angle-top .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;box-shadow:0 1px 0 #148544;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.progress-button-style-rotate-angle-top.state-loading .progress-wrap{-webkit-transform:rotateX(-45deg);transform:rotateX(-45deg)}.progress-button-style-rotate-angle-left .progress{position:absolute;top:0;right:100%;width:20px;height:100%;box-shadow:1px 0 0 #148544;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-angle-left.state-loading .progress-wrap{-webkit-transform:rotateY(45deg);transform:rotateY(45deg)}.progress-button-style-rotate-angle-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;box-shadow:-1px 0 0 #148544;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-angle-right.state-loading .progress-wrap{-webkit-transform:rotateY(-45deg);transform:rotateY(-45deg)}.progress-button-style-rotate-side-down .progress{position:absolute;top:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-down.state-loading .progress-wrap{-webkit-transform:rotateX(90deg) translateZ(10px);transform:rotateX(90deg) translateZ(10px)}.progress-button-style-rotate-side-up .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-up.state-loading .progress-wrap{-webkit-transform:rotateX(-90deg) translateZ(10px);transform:rotateX(-90deg) translateZ(10px)}.progress-button-style-rotate-side-left .progress-wrap{-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left .progress{position:absolute;top:0;left:0;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left.state-loading .progress-wrap{-webkit-transform:translateX(50%) rotateY(90deg) translateZ(10px);transform:translateX(50%) rotateY(90deg) translateZ(10px)}.progress-button-style-rotate-side-right .progress-wrap{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-side-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-right.state-loading .progress-wrap{-webkit-transform:translateX(-50%) rotateY(-90deg) translateZ(10px);transform:translateX(-50%) rotateY(-90deg) translateZ(10px)}.progress-button-style-rotate-back .progress-wrap{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.progress-button-style-rotate-back .content{-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-back .progress{position:absolute;top:100%;left:0;width:100%;height:100%;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-flip-open .progress,.progress-button-style-move-up .progress,.progress-button-style-slide-down .progress{width:100%;position:absolute;top:0;left:0;height:100%}.progress-button-style-rotate-back.state-loading .progress-wrap{-webkit-transform:rotateX(180deg) scaleX(.6) scaleY(.3);transform:rotateX(180deg) scaleX(.6) scaleY(.3)}.progress-button-style-flip-open .content{z-index:10;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-flip-open.state-loading .content{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-slide-down{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-slide-down .content{z-index:10;padding:0 60px;background:#1d9650}.progress-button-style-slide-down .progress{-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-slide-down.state-loading .progress{-webkit-transform:translateY(10px);transform:translateY(10px)}.progress-button-style-move-up{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-move-up .content{z-index:10;padding:0 60px;background:#1d9650;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-lateral-lines .content:after,.progress-button-style-lateral-lines .content:before,.progress-button-style-top-line .content:after,.progress-button-style-top-line .content:before{right:auto;left:100%;margin-left:25px}.progress-button-style-move-up.state-loading .content{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.progress-button-style-top-line .progress-inner{height:3px}.progress-button-style-lateral-lines .progress-inner{width:100%;border-right:3px solid #0e7138;border-left:3px solid #0e7138;background:0 0} \ No newline at end of file diff --git a/dist/angular-progress-button-styles.min.js b/dist/angular-progress-button-styles.min.js index f49bbb2..3db6117 100644 --- a/dist/angular-progress-button-styles.min.js +++ b/dist/angular-progress-button-styles.min.js @@ -1 +1 @@ -"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:'',controller:function(){},link:function(f,g,h){function i(){var a=d.getProfile(f.pbProfile);f.pbStyle=f.pbStyle||a.style||"fill",f.pbDirection="lateral-lines"!=f.pbStyle?f.pbDirection||a.direction||"horizontal":"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(){g.removeAttr("disabled")}function l(){var a=0;return e(function(){a+=(1-a)*Math.random()*.5,j(a)},200)}function m(a){function b(a){"opacity"===a.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),k()},1500)}else k();g.removeClass("state-loading")}i();var n=b(g[0]),o="vertical"==f.pbDirection?"height":"width";if(f.pbPerspective){var p=a.element('');p.append(g.children()),g.append(p),g.addClass("progress-button-perspective")}f.progressStyles={},f.allowProgressTransition=!1,g.addClass("progress-button"),g.addClass("progress-button-dir-"+f.pbDirection),g.addClass("progress-button-style-"+f.pbStyle),g.on("click",function(){f.$apply(function(){f.allowProgressTransition=!0,g.addClass("state-loading").attr("disabled","disabled");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=l())})})}}}var e=a.module("angular-progress-button-styles",[]);e.provider("progressButtonConfig",c),e.directive("progressButton",d),d.$inject=["$q","progressButtonConfig","$interval"]}(angular); \ No newline at end of file +"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:'',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[n]=100*a+"%"}function k(){var a=0;return e(function(){a+=(1-a)*Math.random()*.5,j(a)},200)}function l(a){function b(a){"opacity"===a.propertyName&&(g.off(m,b),f.$apply(function(){f.clickInProgress=!1,j(0),f.progressStyles.opacity=1}))}if(m&&(f.progressStyles.opacity=0,g.on(m,b)),"number"==typeof a){var c=a>=0?"state-success":"state-error";g.addClass(c),setTimeout(function(){g.removeClass(c)},1500)}g.removeClass("state-loading")}i();var m=b(g[0]),n="vertical"==f.pbDirection?"height":"width";if(f.pbPerspective){var o=a.element('');o.append(g.children()),g.append(o),g.addClass("progress-button-perspective")}f.progressStyles={},f.clickInProgress=!1,g.addClass("progress-button"),g.addClass("progress-button-dir-"+f.pbDirection),g.addClass("progress-button-style-"+f.pbStyle),g.on("click",function(){f.$apply(function(){if(!f.clickInProgress){f.clickInProgress=!0,g.addClass("state-loading");var a=null;c.when(f.progressButton()).then(function(){j(1),a&&e.cancel(a),l(1)},function(){a&&e.cancel(a),l(-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); \ No newline at end of file diff --git a/js/angular-progress-button-styles.js b/js/angular-progress-button-styles.js index 503f4af..67334c7 100644 --- a/js/angular-progress-button-styles.js +++ b/js/angular-progress-button-styles.js @@ -77,7 +77,7 @@ }, template: '' + '' + - '' + + '' + '', controller: function() {}, link: function($scope, $element, $attrs) { @@ -92,7 +92,7 @@ $element.addClass('progress-button-perspective'); } $scope.progressStyles = {}; - $scope.allowProgressTransition = false; + $scope.clickInProgress = false; // TODO: fetch from attributes probably $element.addClass('progress-button'); @@ -101,8 +101,9 @@ $element.on('click', function() { $scope.$apply(function() { - $scope.allowProgressTransition = true; - $element.addClass('state-loading').attr('disabled', 'disabled'); + if( $scope.clickInProgress ) return; + $scope.clickInProgress = true; + $element.addClass('state-loading'); var interval = null; $q.when($scope.progressButton()).then( function success() { @@ -144,10 +145,6 @@ $scope.progressStyles[progressProperty] = 100 * val + '%'; } - function enable() { - $element.removeAttr('disabled'); - } - function runProgressInterval() { var progress = 0; return $interval(function() { @@ -162,7 +159,7 @@ if (ev.propertyName !== 'opacity') return; $element.off(transitionEndEventName, onOpacityTransitionEnd); $scope.$apply(function() { - $scope.allowProgressTransition = false; + $scope.clickInProgress = false; setProgress(0); $scope.progressStyles.opacity = 1; }); @@ -178,12 +175,8 @@ $element.addClass(statusClass); setTimeout(function() { $element.removeClass(statusClass); - enable(); }, 1500); // TODO: fetch it from the options } - else { - enable(); - } $element.removeClass('state-loading'); } } From 7bbc38d2278202311c54a25fbc4c086081bb47a4 Mon Sep 17 00:00:00 2001 From: daniel Date: Wed, 31 Aug 2016 18:47:45 +0300 Subject: [PATCH 2/3] Test support to start progress on a different event then click --- dist/angular-progress-button-styles.js | 6 ++++-- dist/angular-progress-button-styles.min.css | 2 +- dist/angular-progress-button-styles.min.js | 2 +- js/angular-progress-button-styles.js | 6 ++++-- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/dist/angular-progress-button-styles.js b/dist/angular-progress-button-styles.js index d9cf22c..af1696c 100644 --- a/dist/angular-progress-button-styles.js +++ b/dist/angular-progress-button-styles.js @@ -73,7 +73,8 @@ 'progressButton': '&', 'pbStyle': '@', 'pbDirection': '@', - 'pbProfile': '@' + 'pbProfile': '@', + 'customEvent': '@' }, template: '' + '' + @@ -84,6 +85,7 @@ _configure(); var transitionEndEventName = whichTransitionEnd($element[0]); var progressProperty = $scope.pbDirection == 'vertical' ? 'height' : 'width'; + var startProgressEvent = angular.isUndefined($scope.customEvent) ? 'click' : $scope.customEvent; if ($scope.pbPerspective) { var wrap = angular.element(''); @@ -104,7 +106,7 @@ $element.toggleClass('disabled', newValue); }); - $element.on('click', function() { + $element.on(startProgressEvent, function() { $scope.$apply(function() { if ($scope.disabled) return; $scope.disabled = true; diff --git a/dist/angular-progress-button-styles.min.css b/dist/angular-progress-button-styles.min.css index ab02f0f..1b7162d 100644 --- a/dist/angular-progress-button-styles.min.css +++ b/dist/angular-progress-button-styles.min.css @@ -1 +1 @@ -.progress-button-style-fill.progress-button-dir-horizontal,.progress-button-style-fill.progress-button-dir-vertical{overflow:hidden}.progress-button{position:relative;display:inline-block;padding:0 60px;outline:0;border:none;background:#1d9650;color:#FFF;text-transform:uppercase;letter-spacing:1px;font-size:1em;line-height:4;cursor:pointer}.progress-button *,.progress-button ::before,.progress-button :after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.progress-button .notransition{-webkit-transition:none!important;transition:none!important}.progress-button.disabled,.progress-button[disabled]{cursor:default}.progress-button .content{position:relative;display:block}.progress-button .content:after,.progress-button .content:before{position:absolute;right:20px;color:#0e7138;font-family:FontAwesome;opacity:0;-webkit-transition:opacity .3s .3s;transition:opacity .3s .3s}.progress-button .content:before{content:"\f00c"}.progress-button .content:after{content:"\f05e"}.progress-button.state-error .content:after,.progress-button.state-success .content:before{opacity:1}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading .content,.progress-button-style-shrink.progress-button-dir-vertical.state-loading .content{opacity:0}.progress-button .progress{background:#148544}.progress-button .progress-inner{position:absolute;left:0;background:#0e7138}.progress-button-dir-horizontal .progress-inner{top:0;width:0;height:100%;-webkit-transition:width .3s,opacity .3s;transition:width .3s,opacity .3s}.progress-button-dir-vertical .progress-inner{bottom:0;width:100%;height:0;-webkit-transition:height .3s,opacity .3s;transition:height .3s,opacity .3s}.progress-button-perspective{position:relative;display:inline-block;padding:0;background:0 0;-webkit-perspective:900px;perspective:900px}.progress-button-perspective .content,.progress-button-perspective .progress{outline:transparent solid 1px}.progress-button-perspective .progress-wrap{display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.progress-button-perspective .content{padding:0 60px;background:#1d9650}.progress-button-style-fill.progress-button-dir-horizontal .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-horizontal .content:after,.progress-button-style-fill.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-horizontal.state-error .content,.progress-button-style-fill.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-fill.progress-button-dir-vertical .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-vertical .content:after,.progress-button-style-fill.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-vertical.state-error .content,.progress-button-style-fill.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink.progress-button-dir-horizontal .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-horizontal .content:after,.progress-button-style-shrink.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading{-webkit-transform:scaleY(.3);transform:scaleY(.3)}.progress-button-style-shrink.progress-button-dir-horizontal.state-error .content,.progress-button-style-shrink.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink{overflow:hidden;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-shrink.progress-button-dir-vertical .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-vertical .content:after,.progress-button-style-shrink.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-vertical.state-loading{-webkit-transform:scaleX(.1);transform:scaleX(.1)}.progress-button-style-shrink.progress-button-dir-vertical.state-error .content,.progress-button-style-shrink.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-rotate-angle-bottom .progress{position:absolute;top:100%;left:0;width:100%;height:20px;box-shadow:0 -1px 0 #148544;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-rotate-angle-bottom.state-loading .progress-wrap{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-rotate-angle-top .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;box-shadow:0 1px 0 #148544;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.progress-button-style-rotate-angle-top.state-loading .progress-wrap{-webkit-transform:rotateX(-45deg);transform:rotateX(-45deg)}.progress-button-style-rotate-angle-left .progress{position:absolute;top:0;right:100%;width:20px;height:100%;box-shadow:1px 0 0 #148544;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-angle-left.state-loading .progress-wrap{-webkit-transform:rotateY(45deg);transform:rotateY(45deg)}.progress-button-style-rotate-angle-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;box-shadow:-1px 0 0 #148544;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-angle-right.state-loading .progress-wrap{-webkit-transform:rotateY(-45deg);transform:rotateY(-45deg)}.progress-button-style-rotate-side-down .progress{position:absolute;top:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-down.state-loading .progress-wrap{-webkit-transform:rotateX(90deg) translateZ(10px);transform:rotateX(90deg) translateZ(10px)}.progress-button-style-rotate-side-up .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-up.state-loading .progress-wrap{-webkit-transform:rotateX(-90deg) translateZ(10px);transform:rotateX(-90deg) translateZ(10px)}.progress-button-style-rotate-side-left .progress-wrap{-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left .progress{position:absolute;top:0;left:0;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left.state-loading .progress-wrap{-webkit-transform:translateX(50%) rotateY(90deg) translateZ(10px);transform:translateX(50%) rotateY(90deg) translateZ(10px)}.progress-button-style-rotate-side-right .progress-wrap{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-side-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-right.state-loading .progress-wrap{-webkit-transform:translateX(-50%) rotateY(-90deg) translateZ(10px);transform:translateX(-50%) rotateY(-90deg) translateZ(10px)}.progress-button-style-rotate-back .progress-wrap{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.progress-button-style-rotate-back .content{-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-back .progress{position:absolute;top:100%;left:0;width:100%;height:100%;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-flip-open .progress,.progress-button-style-move-up .progress,.progress-button-style-slide-down .progress{width:100%;position:absolute;top:0;left:0;height:100%}.progress-button-style-rotate-back.state-loading .progress-wrap{-webkit-transform:rotateX(180deg) scaleX(.6) scaleY(.3);transform:rotateX(180deg) scaleX(.6) scaleY(.3)}.progress-button-style-flip-open .content{z-index:10;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-flip-open.state-loading .content{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-slide-down{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-slide-down .content{z-index:10;padding:0 60px;background:#1d9650}.progress-button-style-slide-down .progress{-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-slide-down.state-loading .progress{-webkit-transform:translateY(10px);transform:translateY(10px)}.progress-button-style-move-up{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-move-up .content{z-index:10;padding:0 60px;background:#1d9650;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-lateral-lines .content:after,.progress-button-style-lateral-lines .content:before,.progress-button-style-top-line .content:after,.progress-button-style-top-line .content:before{right:auto;left:100%;margin-left:25px}.progress-button-style-move-up.state-loading .content{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.progress-button-style-top-line .progress-inner{height:3px}.progress-button-style-lateral-lines .progress-inner{width:100%;border-right:3px solid #0e7138;border-left:3px solid #0e7138;background:0 0} \ No newline at end of file +.progress-button-style-fill.progress-button-dir-horizontal,.progress-button-style-fill.progress-button-dir-vertical{overflow:hidden}.progress-button{position:relative;display:inline-block;padding:0 60px;outline:0;border:none;background:#1d9650;color:#FFF;text-transform:uppercase;letter-spacing:1px;font-size:1em;line-height:4;cursor:pointer}.progress-button *,.progress-button ::before,.progress-button :after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.progress-button .notransition{-webkit-transition:none!important;transition:none!important}.progress-button.disabled,.progress-button[disabled]{cursor:default}.progress-button .content{position:relative;display:block}.progress-button .content:after,.progress-button .content:before{position:absolute;right:20px;color:#0e7138;font-family:FontAwesome;opacity:0;-webkit-transition:opacity .3s .3s;transition:opacity .3s .3s}.progress-button .content:before{content:"\f00c"}.progress-button .content:after{content:"\f05e"}.progress-button.state-error .content:after,.progress-button.state-success .content:before{opacity:1}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading .content,.progress-button-style-shrink.progress-button-dir-vertical.state-loading .content{opacity:0}.progress-button .progress{background:#148544}.progress-button .progress-inner{position:absolute;left:0;background:#0e7138}.progress-button-dir-horizontal .progress-inner{top:0;width:0;height:100%;-webkit-transition:width .3s,opacity .3s;transition:width .3s,opacity .3s}.progress-button-dir-vertical .progress-inner{bottom:0;width:100%;height:0;-webkit-transition:height .3s,opacity .3s;transition:height .3s,opacity .3s}.progress-button-perspective{position:relative;display:inline-block;padding:0;background:0 0;-webkit-perspective:900px;perspective:900px}.progress-button-perspective .content,.progress-button-perspective .progress{outline:transparent solid 1px}.progress-button-perspective .progress-wrap{display:block;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.progress-button-perspective .content{padding:0 60px;background:#1d9650}.progress-button-style-fill.progress-button-dir-horizontal .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-horizontal .content:after,.progress-button-style-fill.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-horizontal.state-error .content,.progress-button-style-fill.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-fill.progress-button-dir-vertical .content{z-index:10;-webkit-transition:-webkit-transform .3s;transition:transform .3s}.progress-button-style-fill.progress-button-dir-vertical .content:after,.progress-button-style-fill.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-fill.progress-button-dir-vertical.state-error .content,.progress-button-style-fill.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink.progress-button-dir-horizontal .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-horizontal .content:after,.progress-button-style-shrink.progress-button-dir-horizontal .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-horizontal.state-loading{-webkit-transform:scaleY(.3);transform:scaleY(.3)}.progress-button-style-shrink.progress-button-dir-horizontal.state-error .content,.progress-button-style-shrink.progress-button-dir-horizontal.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-shrink{overflow:hidden;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-shrink.progress-button-dir-vertical .content{-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s}.progress-button-style-shrink.progress-button-dir-vertical .content:after,.progress-button-style-shrink.progress-button-dir-vertical .content:before{top:100%;right:auto;left:50%;-webkit-transition:opacity .3s;transition:opacity .3s;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-button-style-shrink.progress-button-dir-vertical.state-loading{-webkit-transform:scaleX(.1);transform:scaleX(.1)}.progress-button-style-shrink.progress-button-dir-vertical.state-error .content,.progress-button-style-shrink.progress-button-dir-vertical.state-success .content{-webkit-transform:translateY(-100%);transform:translateY(-100%)}.progress-button-style-rotate-angle-bottom .progress{position:absolute;top:100%;left:0;width:100%;height:20px;box-shadow:0 -1px 0 #148544;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-rotate-angle-bottom.state-loading .progress-wrap{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-rotate-angle-top .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;box-shadow:0 1px 0 #148544;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.progress-button-style-rotate-angle-top.state-loading .progress-wrap{-webkit-transform:rotateX(-45deg);transform:rotateX(-45deg)}.progress-button-style-rotate-angle-left .progress{position:absolute;top:0;right:100%;width:20px;height:100%;box-shadow:1px 0 0 #148544;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-angle-left.state-loading .progress-wrap{-webkit-transform:rotateY(45deg);transform:rotateY(45deg)}.progress-button-style-rotate-angle-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;box-shadow:-1px 0 0 #148544;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-angle-right.state-loading .progress-wrap{-webkit-transform:rotateY(-45deg);transform:rotateY(-45deg)}.progress-button-style-rotate-side-down .progress{position:absolute;top:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-down.state-loading .progress-wrap{-webkit-transform:rotateX(90deg) translateZ(10px);transform:rotateX(90deg) translateZ(10px)}.progress-button-style-rotate-side-up .progress{position:absolute;bottom:100%;left:0;width:100%;height:20px;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-side-up.state-loading .progress-wrap{-webkit-transform:rotateX(-90deg) translateZ(10px);transform:rotateX(-90deg) translateZ(10px)}.progress-button-style-rotate-side-left .progress-wrap{-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left .progress{position:absolute;top:0;left:0;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-left.state-loading .progress-wrap{-webkit-transform:translateX(50%) rotateY(90deg) translateZ(10px);transform:translateX(50%) rotateY(90deg) translateZ(10px)}.progress-button-style-rotate-side-right .progress-wrap{-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.progress-button-style-rotate-side-right .progress{position:absolute;top:0;left:100%;width:20px;height:100%;-webkit-transform:rotateY(90deg);transform:rotateY(90deg);-webkit-transform-origin:0 50%;transform-origin:0 50%}.progress-button-style-rotate-side-right.state-loading .progress-wrap{-webkit-transform:translateX(-50%) rotateY(-90deg) translateZ(10px);transform:translateX(-50%) rotateY(-90deg) translateZ(10px)}.progress-button-style-rotate-back .progress-wrap{-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}.progress-button-style-rotate-back .content{-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-rotate-back .progress{position:absolute;top:100%;left:0;width:100%;height:100%;-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-flip-open .progress,.progress-button-style-move-up .progress,.progress-button-style-slide-down .progress{position:absolute;top:0;left:0;height:100%;width:100%}.progress-button-style-rotate-back.state-loading .progress-wrap{-webkit-transform:rotateX(180deg) scaleX(.6) scaleY(.3);transform:rotateX(180deg) scaleX(.6) scaleY(.3)}.progress-button-style-flip-open .content{z-index:10;-webkit-transition:-webkit-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;transform-origin:50% 0}.progress-button-style-flip-open.state-loading .content{-webkit-transform:rotateX(45deg);transform:rotateX(45deg)}.progress-button-style-slide-down{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-slide-down .content{z-index:10;padding:0 60px;background:#1d9650}.progress-button-style-slide-down .progress{-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-slide-down.state-loading .progress{-webkit-transform:translateY(10px);transform:translateY(10px)}.progress-button-style-move-up{padding:0;overflow:visible;-webkit-backface-visibility:hidden;backface-visibility:hidden}.progress-button-style-move-up .content{z-index:10;padding:0 60px;background:#1d9650;-webkit-transition:-webkit-transform .2s;transition:transform .2s}.progress-button-style-lateral-lines .content:after,.progress-button-style-lateral-lines .content:before,.progress-button-style-top-line .content:after,.progress-button-style-top-line .content:before{right:auto;left:100%;margin-left:25px}.progress-button-style-move-up.state-loading .content{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.progress-button-style-top-line .progress-inner{height:3px}.progress-button-style-lateral-lines .progress-inner{width:100%;border-right:3px solid #0e7138;border-left:3px solid #0e7138;background:0 0} \ No newline at end of file diff --git a/dist/angular-progress-button-styles.min.js b/dist/angular-progress-button-styles.min.js index f1d81ee..98f6cd7 100644 --- a/dist/angular-progress-button-styles.min.js +++ b/dist/angular-progress-button-styles.min.js @@ -1 +1 @@ -"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:'',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('');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); +"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:"@",customEvent:"@"},template:'',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",p=a.isUndefined(f.customEvent)?"click":f.customEvent;if(f.pbPerspective){var q=a.element('');q.append(g.children()),g.append(q),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(p,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); \ No newline at end of file diff --git a/js/angular-progress-button-styles.js b/js/angular-progress-button-styles.js index d9cf22c..af1696c 100644 --- a/js/angular-progress-button-styles.js +++ b/js/angular-progress-button-styles.js @@ -73,7 +73,8 @@ 'progressButton': '&', 'pbStyle': '@', 'pbDirection': '@', - 'pbProfile': '@' + 'pbProfile': '@', + 'customEvent': '@' }, template: '' + '' + @@ -84,6 +85,7 @@ _configure(); var transitionEndEventName = whichTransitionEnd($element[0]); var progressProperty = $scope.pbDirection == 'vertical' ? 'height' : 'width'; + var startProgressEvent = angular.isUndefined($scope.customEvent) ? 'click' : $scope.customEvent; if ($scope.pbPerspective) { var wrap = angular.element(''); @@ -104,7 +106,7 @@ $element.toggleClass('disabled', newValue); }); - $element.on('click', function() { + $element.on(startProgressEvent, function() { $scope.$apply(function() { if ($scope.disabled) return; $scope.disabled = true; From badb432ddd6f5a2e031dcc3eeb291c504b40301f Mon Sep 17 00:00:00 2001 From: daniel Date: Wed, 31 Aug 2016 19:54:28 +0300 Subject: [PATCH 3/3] replace . with to support events already within --- dist/angular-progress-button-styles.js | 8 ++++---- dist/angular-progress-button-styles.min.js | 2 +- js/angular-progress-button-styles.js | 8 ++++---- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/dist/angular-progress-button-styles.js b/dist/angular-progress-button-styles.js index af1696c..0343060 100644 --- a/dist/angular-progress-button-styles.js +++ b/dist/angular-progress-button-styles.js @@ -64,8 +64,8 @@ mdl.directive('progressButton', ProgressButton); - ProgressButton.$inject = ['$q', 'progressButtonConfig', '$interval']; - function ProgressButton($q, progressButtonConfig, $interval) { + ProgressButton.$inject = ['$q', 'progressButtonConfig', '$interval', '$timeout']; + function ProgressButton($q, progressButtonConfig, $interval, $timeout) { return { restrict: 'A', transclude: true, @@ -107,7 +107,7 @@ }); $element.on(startProgressEvent, function() { - $scope.$apply(function() { + $timeout(function() { if ($scope.disabled) return; $scope.disabled = true; $element.addClass('state-loading'); @@ -130,7 +130,7 @@ if ($scope.pbRandomProgress) { interval = runProgressInterval(); } - }); + },0); }); function _configure() { diff --git a/dist/angular-progress-button-styles.min.js b/dist/angular-progress-button-styles.min.js index 98f6cd7..8ce2080 100644 --- a/dist/angular-progress-button-styles.min.js +++ b/dist/angular-progress-button-styles.min.js @@ -1 +1 @@ -"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:"@",customEvent:"@"},template:'',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",p=a.isUndefined(f.customEvent)?"click":f.customEvent;if(f.pbPerspective){var q=a.element('');q.append(g.children()),g.append(q),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(p,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); \ No newline at end of file +"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,f){return{restrict:"A",transclude:!0,scope:{progressButton:"&",pbStyle:"@",pbDirection:"@",pbProfile:"@",customEvent:"@"},template:'',controller:function(){},link:function(g,h,i){function j(){var a=d.getProfile(g.pbProfile);g.pbStyle=g.pbStyle||a.style||"fill","lateral-lines"!=g.pbStyle?g.pbDirection=g.pbDirection||a.direction||"horizontal":g.pbDirection="vertical",g.pbPerspective=0==g.pbStyle.indexOf("rotate")||0==g.pbStyle.indexOf("flip-open"),g.pbRandomProgress=i.pbRandomProgress?"false"!==i.pbRandomProgress:a.randomProgress||!0}function k(a){g.progressStyles[p]=100*a+"%"}function l(){var a=0;return e(function(){a+=(1-a)*Math.random()*.5,k(a)},200)}function m(){g.$apply(function(){g.disabled=!1})}function n(a){function b(a){("opacity"===a.propertyName||a.originalEvent&&"opacity"===a.originalEvent.propertyName)&&(h.off(o,b),g.$apply(function(){g.allowProgressTransition=!1,k(0),g.progressStyles.opacity=1}))}if(o&&(g.progressStyles.opacity=0,h.on(o,b)),"number"==typeof a){var c=a>=0?"state-success":"state-error";h.addClass(c),setTimeout(function(){h.removeClass(c),m()},1500)}else m();h.removeClass("state-loading")}j();var o=b(h[0]),p="vertical"==g.pbDirection?"height":"width",q=a.isUndefined(g.customEvent)?"click":g.customEvent;if(g.pbPerspective){var r=a.element('');r.append(h.children()),h.append(r),h.addClass("progress-button-perspective")}g.progressStyles={},g.disabled=!1,g.allowProgressTransition=!1,h.addClass("progress-button"),h.addClass("progress-button-dir-"+g.pbDirection),h.addClass("progress-button-style-"+g.pbStyle),g.$watch("disabled",function(a){h.toggleClass("disabled",a)}),h.on(q,function(){f(function(){if(!g.disabled){g.disabled=!0,h.addClass("state-loading"),g.allowProgressTransition=!0;var a=null;c.when(g.progressButton()).then(function(){k(1),a&&e.cancel(a),n(1)},function(){a&&e.cancel(a),n(-1)},function(a){!g.pbRandomProgress&&k(a)}),g.pbRandomProgress&&(a=l())}},0)})}}}var e=a.module("angular-progress-button-styles",[]);e.provider("progressButtonConfig",c),e.directive("progressButton",d),d.$inject=["$q","progressButtonConfig","$interval","$timeout"]}(angular); \ No newline at end of file diff --git a/js/angular-progress-button-styles.js b/js/angular-progress-button-styles.js index af1696c..0343060 100644 --- a/js/angular-progress-button-styles.js +++ b/js/angular-progress-button-styles.js @@ -64,8 +64,8 @@ mdl.directive('progressButton', ProgressButton); - ProgressButton.$inject = ['$q', 'progressButtonConfig', '$interval']; - function ProgressButton($q, progressButtonConfig, $interval) { + ProgressButton.$inject = ['$q', 'progressButtonConfig', '$interval', '$timeout']; + function ProgressButton($q, progressButtonConfig, $interval, $timeout) { return { restrict: 'A', transclude: true, @@ -107,7 +107,7 @@ }); $element.on(startProgressEvent, function() { - $scope.$apply(function() { + $timeout(function() { if ($scope.disabled) return; $scope.disabled = true; $element.addClass('state-loading'); @@ -130,7 +130,7 @@ if ($scope.pbRandomProgress) { interval = runProgressInterval(); } - }); + },0); }); function _configure() {