Customizable message CSS classes

README.md

@@ -269,6 +269,12 @@ app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvi
 	growlProvider.messageTextKey("messagetext");
 	growlProvider.messageSeverityKey("severity-level");
 	$httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
+	growlProvider.messageClasses({
+		'success' : 'success-notification',
+		'error' : 'error-notification bold',
+		'info' : 'info-notification',
+		'warn' : 'warn-notification'
+	});
 }]);
 ````
 

bower.json

@@ -1,12 +1,12 @@
 {
-	"author": "Marco Rinck",
-	"name": "angular-growl",
+	"author": "Dmitry Ishkov",
+	"name": "angular-growl-fork",
 	"description": "growl like notifications for angularJS projects, using bootstrap alert classes",
-	"version": "0.4.0",
-	"homepage": "https://github.com/marcorinck/angular-growl",
+	"version": "0.4.1",
+	"homepage": "https://github.com/TheRusskiy/angular-growl",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/marcorinck/angular-growl"
+		"url": "https://github.com/TheRusskiy/angular-growl"
 	},
 	"license": "MIT",
 	"main": "./build/angular-growl.js",
@@ -22,9 +22,9 @@
 		".gitignore"
 	],
 	"dependencies": {
-		"angular": "1.2.1"
+		"angular": "~1.2"
 	},
 	"devDependencies": {
-		"angular-mocks": "1.2.1"
+		"angular-mocks": "~1.2"
 	}
 }

build/angular-growl.js

@@ -1,7 +1,7 @@
 /**
- * angular-growl - v0.4.0 - 2013-11-19
+ * angular-growl - v0.4.0 - 2014-01-08
  * https://github.com/marcorinck/angular-growl
- * Copyright (c) 2013 Marco Rinck; Licensed MIT
+ * Copyright (c) 2014 Marco Rinck; Licensed MIT
  */
 angular.module('angular-growl', []);
 angular.module('angular-growl').directive('growl', [
@@ -50,13 +50,7 @@ angular.module('angular-growl').directive('growl', [
             }
           };
           $scope.computeClasses = function (message) {
-            return {
-              'alert-success': message.severity === 'success',
-              'alert-error': message.severity === 'error',
-              'alert-danger': message.severity === 'error',
-              'alert-info': message.severity === 'info',
-              'alert-warning': message.severity === 'warn'
-            };
+            return growl.messageClasses()[message.severity];
           };
         }
       ]
@@ -65,7 +59,12 @@ angular.module('angular-growl').directive('growl', [
 ]);
 angular.module('angular-growl').provider('growl', function () {
   'use strict';
-  var _ttl = null, _enableHtml = false, _messagesKey = 'messages', _messageTextKey = 'text', _messageSeverityKey = 'severity', _onlyUniqueMessages = true;
+  var _ttl = null, _enableHtml = false, _messagesKey = 'messages', _messageTextKey = 'text', _messageSeverityKey = 'severity', _onlyUniqueMessages = true, _messageClasses = {
+      'success': 'alert-success',
+      'error': 'alert-error alert-danger',
+      'info': 'alert-info',
+      'warn': 'alert-warning'
+    };
   this.globalTimeToLive = function (ttl) {
     _ttl = ttl;
   };
@@ -84,6 +83,9 @@ angular.module('angular-growl').provider('growl', function () {
   this.onlyUniqueMessages = function (onlyUniqueMessages) {
     _onlyUniqueMessages = onlyUniqueMessages;
   };
+  this.messageClasses = function (messageClasses) {
+    _messageClasses = messageClasses;
+  };
   this.serverMessagesInterceptor = [
     '$q',
     'growl',
@@ -170,13 +172,17 @@ angular.module('angular-growl').provider('growl', function () {
       function onlyUnique() {
         return _onlyUniqueMessages;
       }
+      function messageClasses() {
+        return _messageClasses;
+      }
       return {
         addWarnMessage: addWarnMessage,
         addErrorMessage: addErrorMessage,
         addInfoMessage: addInfoMessage,
         addSuccessMessage: addSuccessMessage,
         addServerMessages: addServerMessages,
-        onlyUnique: onlyUnique
+        onlyUnique: onlyUnique,
+        messageClasses: messageClasses
       };
     }
   ];

build/angular-growl.min.css

@@ -1,7 +1,7 @@
 /**
- * angular-growl - v0.4.0 - 2013-11-19
+ * angular-growl - v0.4.0 - 2014-01-08
  * https://github.com/marcorinck/angular-growl
- * Copyright (c) 2013 Marco Rinck; Licensed MIT
+ * Copyright (c) 2014 Marco Rinck; Licensed MIT
  */
 
 .growl{position:fixed;top:10px;right:10px;float:right;width:250px}.growl-item.ng-enter,.growl-item.ng-leave{-webkit-transition:.5s linear all;-moz-transition:.5s linear all;-o-transition:.5s linear all;transition:.5s linear all}.growl-item.ng-enter,.growl-item.ng-leave.ng-leave-active{opacity:0}.growl-item.ng-leave,.growl-item.ng-enter.ng-enter-active{opacity:1}

src/growlDirective.js

@@ -54,13 +54,7 @@ angular.module("angular-growl").directive("growl", ["$rootScope", function ($roo
 			};
 
 			$scope.computeClasses = function (message) {
-				return {
-					'alert-success': message.severity === "success",
-					'alert-error': message.severity === "error", //bootstrap 2.3
-					'alert-danger': message.severity === "error", //bootstrap 3
-					'alert-info': message.severity === "info",
-					'alert-warning': message.severity === "warn" //bootstrap 3, no effect in bs 2.3
-				};
+				return growl.messageClasses()[message.severity];
 			};
 		}]
 	};

src/growlFactory.js

@@ -6,7 +6,13 @@ angular.module("angular-growl").provider("growl", function() {
 		_messagesKey = 'messages',
 		_messageTextKey = 'text',
 		_messageSeverityKey = 'severity',
-		_onlyUniqueMessages = true;
+		_onlyUniqueMessages = true,
+		_messageClasses = {
+			'success' : 'alert-success',
+			'error' : 'alert-error alert-danger',
+			'info' : 'alert-info',
+			'warn' : 'alert-warning'
+		};
 
 	/**
 	 * set a global timeout (time to live) after which messages will be automatically closed
@@ -58,6 +64,19 @@ angular.module("angular-growl").provider("growl", function() {
 		_onlyUniqueMessages = onlyUniqueMessages;
 	};
 
+	/**
+	 * Sets association between message severity and applied css class
+	 *
+	 * @param {object} classes default: twitter bootstrap alert classes:
+	 *		'success' : 'alert-success',
+	 *		'error'   : 'alert-error alert-danger',
+	 *		'info'    : 'alert-info',
+	 *		'warn'    : 'alert-warning' 
+	 */
+	this.messageClasses = function (messageClasses) {
+		_messageClasses = messageClasses;
+	};
+
 	/**
 	 * $http interceptor that can be added to array of $http interceptors during config phase of application
 	 * via $httpProvider.responseInterceptors.push(...)
@@ -189,13 +208,22 @@ angular.module("angular-growl").provider("growl", function() {
 			return _onlyUniqueMessages;
 		}
 
+		/**
+		 * Returns object with severity levels
+		 * as keys and CSS classes (string) as values
+		 */
+		function messageClasses() {
+			return _messageClasses;
+		}
+
 		return {
 			addWarnMessage: addWarnMessage,
 			addErrorMessage: addErrorMessage,
 			addInfoMessage: addInfoMessage,
 			addSuccessMessage: addSuccessMessage,
 			addServerMessages: addServerMessages,
-			onlyUnique: onlyUnique
+			onlyUnique: onlyUnique,
+			messageClasses: messageClasses
 		};
 	}];
 });

test/growlDirectiveTest.js

@@ -1,7 +1,43 @@
 describe("growlDirective", function() {
 	"use strict";
 
-	it("should be true ", function() {
-		expect(true).toBe(true);
+	var ele, scope, growl, $timeout;
+	beforeEach(module('angular-growl'));
+
+	beforeEach(inject(function($compile, $rootScope, _growl_, _$timeout_) {
+		scope = $rootScope;
+		$timeout = _$timeout_;
+		growl = _growl_;
+		ele = angular.element(
+			'<div growl></div>'
+		);
+		$compile(ele)(scope);
+		scope.$apply();
+	}));
+
+	it("initially messages should be empty", function() {
+		expect(ele.scope().messages.length).toEqual(0);
+	});
+
+	it("messages can be added", function() {
+		growl.addWarnMessage("Warn message");
+		growl.addErrorMessage("Error message");
+		growl.addInfoMessage("Info message");
+		growl.addSuccessMessage("Success message");
+		expect(ele.scope().messages.length).toEqual(4);
+	});
+
+	it("should generate correct html", function() {
+		growl.addWarnMessage("Warn message");
+		expect(ele.html()).not.toMatch("Warn message");
+		scope.$apply();
+		expect(ele.html()).toMatch("Warn message");
+	});
+
+	it("message should live limited time", function() {
+		growl.addWarnMessage("Some message", {ttl:100});
+		expect(ele.scope().messages.length).toEqual(1);
+		$timeout.flush(100);
+		expect(ele.scope().messages.length).toEqual(0);
 	});
 });

test/growlProviderTest.js

@@ -0,0 +1,29 @@
+describe("growlProvider", function() {
+	"use strict";
+
+	var ele, scope, growl, $timeout;
+	var provider;
+	beforeEach(module('angular-growl', function(growlProvider) {
+		provider = growlProvider;
+	}));
+
+	beforeEach(inject(function($compile, $rootScope, _growl_, _$timeout_) {
+		scope = $rootScope;
+		$timeout = _$timeout_;
+		growl = _growl_;
+		ele = angular.element(
+			'<div growl></div>'
+		);
+		$compile(ele)(scope);
+		scope.$apply();
+	}));
+
+	it('should let you configure CSS classes', function() {
+		provider.messageClasses({
+			'warn' : 'custom-warn-class'
+		});
+		growl.addWarnMessage("Warn message");
+		scope.$apply();
+		expect(ele.html()).toMatch("custom-warn-class");
+	});
+});