Initial status-bar implementation, improved docs

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-promise-status",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "authors": [
     "Barak Chamo <[email protected]>"
   ],

demo/demo.css

@@ -17,6 +17,7 @@ button {
   will-change: all;
 }
 
+
 /*Default status-button usage demo styles*/
 
 button:not(.btn){
@@ -63,4 +64,12 @@ button.inprogress {
   background: #FFF9C4;
   border: 1px solid #FFF59D;
   border-radius: 1em;
+}
+
+
+/*Default status-bar usage demo styles*/
+
+/*Hide idle alerts*/
+.alert.idle {
+  display: none;
 }

demo/demo.js

@@ -26,6 +26,14 @@ app.controller('demoController', ['$scope', '$q', '$timeout', function($scope, $
     delay: 2000
   };
 
+  $scope.alertConfig = {
+    success_class:  'alert-success',
+    progress_class: 'alert-warning',
+    error_class:     'alert-danger'
+  };
+
+  // Button demo methods
+
   // Create a new promise that will succeed in 3 seconds
   $scope.setSuccessPromise = function(){
     // Reassign $scope.promise with a new promise
@@ -42,7 +50,7 @@ app.controller('demoController', ['$scope', '$q', '$timeout', function($scope, $
   };
 
   // Create a new promise that will succeed in 3 seconds
-  $scope.setValuePromise = function(){
+  $scope.setalertValuePromise = function(){
     // Reassign $scope.promise with a new promise
     $scope.valuePromise = {value: 'this ain\'t a promise!'};
   };
@@ -61,4 +69,58 @@ app.controller('demoController', ['$scope', '$q', '$timeout', function($scope, $
       $scope.errorPromise.reject('Error!');
     }, 3000);
   };
+
+
+  // Alert demo methods
+  // Create a new promise that will succeed in 3 seconds
+  $scope.setAlertSuccessPromise = function(){
+    // Reassign $scope.promise with a new promise
+    $scope.alertSuccessPromise = $q.defer();
+
+    $scope.alertSuccessPromise.promise.then(function(){
+      console.log('Done from controller');
+    });
+
+    // Set a timeout for 3 seconds and resolve the promise
+    $timeout(function(){
+      $scope.alertSuccessPromise.resolve('Done!');
+    }, 3000);
+  };
+
+    // Alert demo methods
+  // Create a new promise that will succeed in 3 seconds
+  $scope.setExamplePromise = function(){
+    // Reassign $scope.promise with a new promise
+    $scope.examplePromise = $q.defer();
+
+    $scope.examplePromise.promise.then(function(){
+      console.log('Done from controller');
+    });
+
+    // Set a timeout for 3 seconds and resolve the promise
+    $timeout(function(){
+      $scope.examplePromise.resolve('Done!');
+    }, 3000);
+  };
+
+  // Create a new promise that will succeed in 3 seconds
+  $scope.setAlertValuePromise = function(){
+    // Reassign $scope.promise with a new promise
+    $scope.alertValuePromise = {value: 'this ain\'t a promise!'};
+  };
+
+  // Create a new promise that will fail within 3 seconds
+  $scope.setAlertErrorPromise = function(){
+    // Reassign $scope.promise with a new promise
+    $scope.alertErrorPromise = $q.defer();
+
+    $scope.alertErrorPromise.promise.then(function(){
+      console.log('Error from controller');
+    });
+
+    // Set a timeout for 3 seconds and resolve the promise
+    $timeout(function(){
+      $scope.alertErrorPromise.reject('Error!');
+    }, 3000);
+  };
 }]);

dist/directive.css

@@ -1,7 +1,7 @@
 /*!
  * ng-promise-status
  * 
- * Version: 0.0.1 - 2015-04-28T15:06:53.753Z
+ * Version: 0.1.1 - 2015-05-06T15:36:52.550Z
  * License: MIT
  */
 

dist/directive.js

@@ -1,7 +1,7 @@
 /*!
  * ng-promise-status
  * 
- * Version: 0.0.1 - 2015-04-28T16:20:08.907Z
+ * Version: 0.1.1 - 2015-05-07T10:40:47.345Z
  * License: MIT
  */
 
@@ -106,6 +106,10 @@ angular.module('ngPromiseStatus', [])
       }
 
 
+      /*
+        Render
+      */ 
+
       // Transclude the button's content
       //- Transclusion is done here and not with ngTransclude 
       //- because we want to expose some scope goodies back to
@@ -115,5 +119,137 @@ angular.module('ngPromiseStatus', [])
       });
     }
   };
-}]);
+}])
+
+.directive('statusBar', ['$timeout', '$q', function ( $timeout, $q ) {
+  return {
+    restrict: 'AE',
+    transclude: true,
+    replace: true,
+    template: '<div class="status-bar" ng-class="$class"></div>',
+    scope: {
+      promise: '=',
+      options: '='
+    },
+    link: function (scope, element, attrs, controller, transclude) {
+      /*
+        Scope properties
+      */ 
+
+      // Set directive configuration defaults
+      scope.$config = {
+        // Status classes
+        success_class:  'success',
+        error_class:    'error',
+        progress_class: 'inprogress',
+        idle_class:     'idle',
+
+        // Timeout for clearing status (back to idle) - 0 is disabled, keeps the status
+        delay: 0,
+
+        // Watch the promise property for re-assignments
+        watch: true
+      };
+
+      // Apply custom configuration
+      angular.extend(scope.$config, scope.options);
+
+      // Initialize exposed scope properties
+      scope.$status = 'idle';
+      scope.$class  = scope.$config.idle_class;
+
+
+      /*
+        Private Methods
+      */ 
+
+      function setPromise(promise){
+        var p;
+
+        // Reset exposed scope values
+        setProps('inprogress', scope.$config.progress_class, false, undefined);
+
+        // Check for supported types
+        p = promise.propertyIsEnumerable('promise') ? promise.promise : promise;
+        p = p instanceof Array ? p : [p];
+
+        $q.all(p)
+          .then(success, error, progress);
+      }
+
+      // Handle sucessful promises
+      function success(value){
+        setProps('success', scope.$config.success_class, true, scope.promise instanceof Array ? value : value[0]);
+      }
+
+      // Handle promise errors
+      function error(err){
+        setProps('error', scope.$config.error_class, true, err);
+      }
+
+      // Handle promise notify (progress)
+      function progress(value){
+        scope.$value = value;
+      }
+
+      // Update exposed scope properties
+      function setProps(status, className, done, value){
+        scope.$status  = status;
+        scope.$class   = className;
+        scope.$done    = done;
+        scope.$value   = value;
+
+        // If done and delay is set, set a timeout to clear the class
+        if (scope.$config.delay > 0 && done) {
+          $timeout(function(){
+            scope.$status = 'idle';
+            scope.$class  = scope.$config.idle_class;            
+          }, scope.$config.delay);
+        }
+      }
+
+
+      /*
+        Event handling
+      */ 
+
+      // I DON'T LIKE THIS!
+      if (scope.$config.watch) {
+        var watch = scope.$watch('promise', function(promise){
+          if (!promise) return;
+
+          $timeout(function(){
+            setPromise(promise);
+          });
+        });
+
+        // Scope cleanup
+        scope.$on('$destroy', function(){
+          // Clear the watch
+          watch();
+        });
+      }
+
+      scope.$on('promise:status', function(){
+        $timeout(function(){
+          setPromise(scope.promise);
+        });
+      });
+
+
+      /*
+        Render
+      */
+
+      // Transclude the bar's content
+      //- Transclusion is done here and not with ngTransclude 
+      //- because we want to expose some scope goodies back to
+      //- the original template from the directive's isolate scope.
+      transclude(scope, function(clone){
+        element.append(clone);
+      });
+    }
+  };
+}])
+;
 angular.module("ngPromiseStatus").run(["$templateCache", function($templateCache) {$templateCache.put("directive.html","<button class=\"status-button\" ng-click=\"; statusButtonClick($event)\" ng-class=\"$class\" ng-disabled=\"$config.progress_disable && $status === \'inprogress\'\"></button>");}]);

dist/directive.min.css

@@ -1,6 +1,6 @@
 /*!
  * ng-promise-status
  * 
- * Version: 0.0.1 - 2015-04-28T15:06:53.753Z
+ * Version: 0.1.1 - 2015-05-06T15:36:52.550Z
  * License: MIT
  */.the-directive{color:green}.the-directive button{padding:10px;color:#00f}