Added support to send flashes only to named subscribers.

wmluke · Oct 3, 2013 · 615ad89 · 615ad89
1 parent 2f4645d
commit 615ad89
Show file tree

Hide file tree

Showing 12 changed files with 173 additions and 30 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -70,7 +70,8 @@ module.exports = function (grunt) {
                 browsers: ['PhantomJS']
             },
             debug: {
-                singleRun: false
+                singleRun: false,
+                reporters: ['progress', 'junit']
             }
         },
         concat: {

diff --git a/app/index.html b/app/index.html
@@ -52,9 +52,23 @@
     </div>
 
     <div ng-view></div>
+
+    <div class="row row-alert">
+        <div class="span12">
+            <div id="alert-1" flash-alert active-class="in" class="alert fade" duration="0">
+                <button type="button" class="close" ng-click="hide()">&times;</button>
+                <i class="icon-ok-sign"></i>
+                <strong class="alert-heading">{{flash.type}}</strong>
+                <span class="alert-message">{{flash.message}}</span>
+                <h4 class="pull-right">Alert #1</h4>
+            </div>
+
+        </div>
+    </div>
 </div>
 
 <script src="components/jquery/jquery.js"></script>
+<script src="components/bootstrap/docs/assets/js/bootstrap.min.js"></script>
 <script src="components/angular/angular.js"></script>
 <script src="components/angular-route/angular-route.js"></script>
 <script src="angular-flash.js"></script>

diff --git a/app/scripts/controllers/main-ctrl.js b/app/scripts/controllers/main-ctrl.js
@@ -1,7 +1,8 @@
 (function () {
     'use strict';
 
-    var MainCtrl = function ($scope, flash, $timeout) {
+    var MainCtrl = function ($scope, flash) {
+
 
         $scope.all = function () {
             $scope.info();
@@ -14,21 +15,37 @@
             flash.info = 'info message';
         };
 
+        $scope.info1 = function () {
+            flash.to('alert-1').info = 'info message';
+        };
+
         $scope.warn = function () {
             flash.warn = 'warn message';
         };
 
+        $scope.warn1 = function () {
+            flash.to('alert-1').warn = 'warn message';
+        };
+
         $scope.success = function () {
             flash.success = 'success message';
         };
 
+        $scope.success1 = function () {
+            flash.to('alert-1').success = 'success message';
+        };
+
         $scope.error = function () {
             flash.error = 'error message';
         };
 
+        $scope.error1 = function () {
+            flash.to('alert-1').error = 'error message';
+        };
+
         $scope.all();
     };
 
     angular.module('App.main-ctrl', [])
-        .controller('MainCtrl', ['$scope', 'flash', '$timeout', MainCtrl]);
-}());
+        .controller('MainCtrl', ['$scope', 'flash', MainCtrl]);
+}());
diff --git a/app/views/main.html b/app/views/main.html
@@ -2,10 +2,27 @@
     <div class="navbar-inner">
         <div class="container">
             <a class="brand" href="/">angular-flash <i class="icon-bolt"></i></a>
-            <button class="btn btn-info" ng-click="info()"><i class="icon-info-sign"></i> Info</button>
-            <button class="btn btn-warning" ng-click="warn()"><i class="icon-warning-sign"></i> Warning</button>
-            <button class="btn btn-success" ng-click="success()"><i class="icon-ok-sign"></i> Success</button>
-            <button class="btn btn-danger" ng-click="error()"><i class="icon-exclamation-sign"></i> Error</button>
+
+            <div class="btn-group">
+                <button class="btn btn-info" ng-click="info()"><i class="icon-info-sign"></i> Info</button>
+                <button class="btn btn-info" ng-click="info1()">Alert #1</button>
+            </div>
+
+            <div class="btn-group">
+                <button class="btn btn-warning" ng-click="warn()"><i class="icon-warning-sign"></i> Warning</button>
+                <button class="btn btn-warning" ng-click="warn1()">Alert #1</button>
+            </div>
+
+            <div class="btn-group">
+                <button class="btn btn-success" ng-click="success()"><i class="icon-ok-sign"></i> Success</button>
+                <button class="btn btn-success" ng-click="success1()">Alert #1</button>
+            </div>
+
+            <div class="btn-group">
+                <button class="btn btn-danger" ng-click="error()"><i class="icon-exclamation-sign"></i> Error</button>
+                <button class="btn btn-danger" ng-click="error1()">Alert #1</button>
+            </div>
+
             <button class="btn btn-primary" ng-click="all()"><i class="icon-flag"></i> All</button>
         </div>
     </div>

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
     "name": "angular-flash",
     "description": "Flash messages for Angular Js",
-    "version": "0.1.8",
+    "version": "0.1.9",
     "main": [
         "dist/angular-flash.min.js",
         "dist/angular-flash.js"

diff --git a/dist/angular-flash.js b/dist/angular-flash.js
@@ -1,5 +1,5 @@
 /**! 
- * @license angular-flash v0.1.8
+ * @license angular-flash v0.1.9
  * Copyright (c) 2013 William L. Bunselmeyer. https://github.com/wmluke/angular-flash
  * License: MIT
  */
@@ -10,6 +10,8 @@
 
     var Flash = function (options) {
         var _options = angular.extend({
+            id: null,
+            subscribers: [],
             classnames: {
                 error: [],
                 warn: [],
@@ -19,37 +21,45 @@
         }, options);
 
         var _self = this;
-        var _subscribers = [];
         var _success;
         var _info;
         var _warn;
         var _error;
         var _type;
 
         function _notify(type, message) {
-            angular.forEach(_subscribers, function (subscriber) {
-                if (!subscriber.type || subscriber.type === type) {
+            angular.forEach(_options.subscribers, function (subscriber) {
+                var matchesType = !subscriber.type || subscriber.type === type;
+                var matchesId = (!_options.id && !subscriber.id) || subscriber.id === _options.id;
+                if (matchesType && matchesId) {
                     subscriber.cb(message, type);
                 }
             });
         }
 
         this.clean = function () {
-            _subscribers = [];
+            _options.subscribers = [];
             _success = null;
             _info = null;
             _warn = null;
             _error = null;
             _type = null;
         };
 
-        this.subscribe = function (subscriber, type) {
-            _subscribers.push({
+        this.subscribe = function (subscriber, type, id) {
+            _options.subscribers.push({
                 cb: subscriber,
-                type: type
+                type: type,
+                id: id
             });
         };
 
+        this.to = function (id) {
+            var options = angular.copy(_options);
+            options.id = id;
+            return new Flash(options);
+        };
+
         Object.defineProperty(this, 'success', {
             get: function () {
                 return _success;
@@ -111,6 +121,12 @@
                 return _options.classnames;
             }
         });
+
+        Object.defineProperty(this, 'id', {
+            get: function () {
+                return _options.id;
+            }
+        });
     };
 
     angular.module('angular-flash.service', [])
@@ -196,7 +212,7 @@
                     }
                 }
 
-                flash.subscribe(show, attr.flashAlert);
+                flash.subscribe(show, attr.flashAlert, attr.id);
 
                 /**
                  * Fixes timing issues: display the last flash message sent before this directive subscribed.

diff --git a/dist/angular-flash.min.js b/dist/angular-flash.min.js
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "angular-flash",
   "description": "Flash messages for Angular JS",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.1.9",
   "homepage": "https://github.com/wmluke/angular-flash",
   "author": {
     "name": "William L. Bunselmeyer",

diff --git a/readme.md b/readme.md
@@ -51,6 +51,9 @@ var FooController = function(flash){
 
     // Publish a error flash
     flash.error = 'Fail!';
+
+    // Publish an info flash to the `alert-1` subscriber
+    flash.to('alert-1').info = 'Only for alert 1';
 };
 
 FooController.$inject = ['flash'];
@@ -78,6 +81,12 @@ Use the `flash-alert` directive to subscribe to flash messages...
     <span class="alert-message">{{flash.message}}</span>
 </div>
 
+<!-- Subscribe to all flash messages sent to `alert-1`. -->
+<div id="alert-1" flash-alert active-class="in" class="alert fade">
+    <strong class="alert-heading">Boo!</strong>
+    <span class="alert-message">{{flash.message}}</span>
+</div>
+
 <!-- Set the display duration in milli-secs.  Default is 5000, 0 disables the fade-away. -->
 <div flash-alert active-class="in" class="alert fade" duration="0">
     <!-- Manually hide the alert with `hide()` -->

diff --git a/src/directives/flash-alert-directive.js b/src/directives/flash-alert-directive.js
@@ -59,7 +59,7 @@
                     }
                 }
 
-                flash.subscribe(show, attr.flashAlert);
+                flash.subscribe(show, attr.flashAlert, attr.id);
 
                 /**
                  * Fixes timing issues: display the last flash message sent before this directive subscribed.

diff --git a/src/services/flash-service.js b/src/services/flash-service.js
@@ -5,6 +5,8 @@
 
     var Flash = function (options) {
         var _options = angular.extend({
+            id: null,
+            subscribers: [],
             classnames: {
                 error: [],
                 warn: [],
@@ -14,37 +16,45 @@
         }, options);
 
         var _self = this;
-        var _subscribers = [];
         var _success;
         var _info;
         var _warn;
         var _error;
         var _type;
 
         function _notify(type, message) {
-            angular.forEach(_subscribers, function (subscriber) {
-                if (!subscriber.type || subscriber.type === type) {
+            angular.forEach(_options.subscribers, function (subscriber) {
+                var matchesType = !subscriber.type || subscriber.type === type;
+                var matchesId = (!_options.id && !subscriber.id) || subscriber.id === _options.id;
+                if (matchesType && matchesId) {
                     subscriber.cb(message, type);
                 }
             });
         }
 
         this.clean = function () {
-            _subscribers = [];
+            _options.subscribers = [];
             _success = null;
             _info = null;
             _warn = null;
             _error = null;
             _type = null;
         };
 
-        this.subscribe = function (subscriber, type) {
-            _subscribers.push({
+        this.subscribe = function (subscriber, type, id) {
+            _options.subscribers.push({
                 cb: subscriber,
-                type: type
+                type: type,
+                id: id
             });
         };
 
+        this.to = function (id) {
+            var options = angular.copy(_options);
+            options.id = id;
+            return new Flash(options);
+        };
+
         Object.defineProperty(this, 'success', {
             get: function () {
                 return _success;
@@ -106,6 +116,12 @@
                 return _options.classnames;
             }
         });
+
+        Object.defineProperty(this, 'id', {
+            get: function () {
+                return _options.id;
+            }
+        });
     };
 
     angular.module('angular-flash.service', [])