added working return function syntax

johannesjo · Mar 14, 2015 · 1da0026 · 1da0026
1 parent 56db8cb
commit 1da0026
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 29 deletions.
diff --git a/example/example1.html b/example/example1.html
@@ -6,6 +6,8 @@
         ng-click="error()"
         promise-btn="errorPromise">Error after delay
 </button>
+<br>
+<br>
 <button class="btn"
         ng-click="endless()"
         promise-btn="endlessPromise">Never resolving promise
@@ -15,6 +17,34 @@
         promise-btn="autoPromise">Loading initially and forever
 </button>
 
+<h3>Same promise buttons</h3>
+<button class="btn"
+        ng-click="success()"
+        promise-btn="successPromise">We
+</button>
+<button class="btn"
+        ng-click="success()"
+        promise-btn="successPromise">share
+</button>
+
+<h3>multiple ng-click with return and same promise</h3>
+<button class="btn"
+        promise-btn
+        ng-click="ngClickOnly()">Just ng-click
+</button>
+<button class="btn"
+        promise-btn
+        ng-click="ngClickOnly()">Just ng-click
+</button>
+
+<span ng-if="true">
+    <span ng-if="true">
+        <button class="btn"
+                promise-btn
+                ng-click="ngClickOnly()">Just ng-click
+        </button>
+    </span>
+</span>
 
 <h3>Inside a form</h3>
 <form ng-submit="submit()">

diff --git a/example/scripts/example.js b/example/scripts/example.js
@@ -64,6 +64,13 @@ angular.module('exampleApp', [
         {
             $scope.submitPromise = fakeFac.success();
         };
+        $scope.ngClickOnly = function ()
+        {
+            console.log('I am here! NGCLICKONLY');
+
+            return fakeFac.success();
+        };
+
 
         $scope.auto();
     });
diff --git a/src/angular-promise-buttons-p.js b/src/angular-promise-buttons-p.js
@@ -10,7 +10,8 @@ angular.module('angularPromiseButtons')
         var config = {
             spinnerTpl: '<span class="btn-spinner"></span>',
             disableBtn: true,
-            btnLoadingClass: 'is-loading'
+            btnLoadingClass: 'is-loading',
+            eventPrefix: 'ANGULAR_PROMISE_BUTTONS_'
         };
 
 

diff --git a/src/promise-btn-d.js b/src/promise-btn-d.js
@@ -1,5 +1,5 @@
 angular.module('angularPromiseButtons')
-    .directive('promiseBtn', ['angularPromiseButtons', function (angularPromiseButtons)
+    .directive('promiseBtn', ['angularPromiseButtons', '$rootScope', function (angularPromiseButtons, $rootScope)
     {
         'use strict';
 
@@ -8,45 +8,85 @@ angular.module('angularPromiseButtons')
             transclude: true,
             replace: true,
             scope: {
-                promiseBtn: '='
+                promiseBtn: '=',
+                ngClick: '@',
+                btnSpinnerClass: '@'
             },
             templateUrl: 'promise-btn-d.html',
-            link: function (scope, el)
+            link: function (scope, el, attrs)
             {
-                var cfg = angularPromiseButtons.config;
+                var cfg = angularPromiseButtons.config,
+                    ev = {
+                        loading: 'LOADING',
+                        loadingStopped: 'LOADING_STOPPED'
+                    };
 
-                el.append(cfg.spinnerTpl);
+                function makeFunc(func, funcName)
+                {
+                    $rootScope.$on(cfg.eventPrefix + '_' + funcName + '_' + ev.loading, loading);
+                    $rootScope.$on(cfg.eventPrefix + '_' + funcName + '_' + ev.loadingStopped, loadingFinished);
 
-                var loading = function ()
-                    {
-                        if (cfg.btnLoadingClass) {
-                            el.addClass(cfg.btnLoadingClass);
-                        }
-                        if (cfg.disableBtn) {
-                            el.attr('disabled', 'disabled');
-                        }
-                    },
-                    loadingFinished = function ()
+                    return function ()
                     {
-                        if (cfg.btnLoadingClass) {
-                            el.removeClass(cfg.btnLoadingClass);
-                        }
-                        if (cfg.disableBtn) {
-                            el.attr('disabled', '');
+                        var curPromise = func.apply(this, arguments);
+                        if (curPromise && curPromise.then) {
+                            $rootScope.$broadcast(cfg.eventPrefix + '_' + funcName + '_' + ev.loading);
+                            curPromise.then(function ()
+                            {
+                                $rootScope.$broadcast(cfg.eventPrefix + '_' + funcName + '_' + ev.loadingStopped);
+                            }, function ()
+                            {
+                                $rootScope.$broadcast(cfg.eventPrefix + '_' + funcName + '_' + ev.loadingStopped);
+                            });
                         }
                     };
+                }
 
-
-                scope.$watch(function ()
+                function loading()
                 {
-                    return scope.promiseBtn;
-                }, function (mVal)
+                    if (cfg.btnLoadingClass) {
+                        el.addClass(cfg.btnLoadingClass);
+                    }
+                    if (cfg.disableBtn) {
+                        el.attr('disabled', 'disabled');
+                    }
+                }
+
+                function loadingFinished()
                 {
-                    if (mVal && mVal.then) {
-                        loading();
-                        mVal.then(loadingFinished, loadingFinished);
+                    if (cfg.btnLoadingClass) {
+                        el.removeClass(cfg.btnLoadingClass);
                     }
-                });
+                    if (cfg.disableBtn) {
+                        el.attr('disabled', '');
+                    }
+                }
+
+
+                // append spinner
+                el.append(cfg.spinnerTpl);
+
+
+                // wrap function
+                if (!attrs.promiseBtn && scope.ngClick) {
+                    var funcName = scope.ngClick.replace(/\([^\)]*\)/, '');
+                    var func = scope.$parent.$parent[funcName];
+                    scope.$parent.$parent[funcName] = makeFunc(func, funcName);
+
+                }
+                // simple watch
+                else {
+                    scope.$watch(function ()
+                    {
+                        return scope.promiseBtn;
+                    }, function (mVal)
+                    {
+                        if (mVal && mVal.then) {
+                            loading();
+                            mVal.then(loadingFinished, loadingFinished);
+                        }
+                    });
+                }
             }
         };
     }]);