├── .gitignore
├── .jshintrc
├── LICENSE
├── README.md
├── bower.json
├── build
├── angular-growl.js
├── angular-growl.min.css
└── angular-growl.min.js
├── demo
├── demo.html
└── demo.js
├── doc
└── screenshot.jpg
├── gruntfile.js
├── karma.conf.js
├── package.json
├── src
├── growl.css
├── growl.js
├── growlDirective.js
└── growlFactory.js
└── test
└── growlDirectiveTest.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | components
4 | bower_components
5 | .idea
6 | *.iml
7 | nbproject
8 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "curly": true,
3 | "eqeqeq": true,
4 | "immed": true,
5 | "latedef": true,
6 | "newcap": true,
7 | "noarg": true,
8 | "sub": true,
9 | "undef": true,
10 | "boss": true,
11 | "eqnull": true,
12 | "unused": true,
13 | "strict": true,
14 | "bitwise": true,
15 | "trailing": true,
16 | "regexp": true,
17 | "nonew": true,
18 | "forin": true,
19 | "globals": {
20 | "angular": true,
21 | "console": true,
22 | "define": true,
23 | "require": true,
24 | "document": true,
25 | "describe": true,
26 | "it": true,
27 | "expect": true,
28 | "jasmine": true,
29 | "window": true,
30 | "beforeEach": true,
31 | "module": true,
32 | "inject": true
33 | }
34 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 Marco Rinck
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #angular-growl
2 |
3 | > growl like notifications for angularJS projects, using bootstrap alert classes
4 |
5 | ##Features
6 |
7 | 
8 |
9 | * growl like notifications like in MacOS X
10 | * using standard bootstrap classes (alert, alert-info, alert-error, alert-success)
11 | * global or per message configuration of a timeout when message will be automatically closed
12 | * automatic translation of messages if [angular-translate](https://github.com/PascalPrecht/angular-translate) filter is
13 | present, you only have to provide keys as messages, angular-translate will translate them
14 | * pre-defined $http-Interceptor to automatically handle $http responses for server-sent messages
15 | * automatic CSS animations when adding/closing notifications (only when using >= angularJS 1.2)
16 | * < 1 kB after GZIP
17 |
18 | ##Changelog
19 |
20 | **0.4.0** - 19th Nov 2013
21 |
22 | * updated dependency to angularJS 1.2.x, angular-growl does not work with 1.0.x anymore (BREAKING CHANGE)
23 | * new option: only display unique messages, which is the new default, disable to allow same message more than once (BREAKING CHANGE)
24 | * new option: allow html tags in messages, default is off you need to
25 |
26 | **0.3.1** - 1st Oct 2013
27 |
28 | * bugfix: translating of messages works again
29 | * change: also set alert css classes introduced by bootstrap 3
30 |
31 | **0.3.0** - 26th Sept 2013
32 |
33 | * adding css animations support via ngAnimate (for angularJS >= 1.2)
34 | * ability to configure server message keys
35 |
36 | **0.2.0** - 22nd Sept 2013
37 |
38 | * reworking, bugfixing and documenting handling of server sent messages/notifications
39 | * externalizing css styles of growl class
40 | * provide minified versions of js and css files in build folder
41 |
42 | **0.1.3** - 20th Sept 2013
43 |
44 | * introducing ttl config option, fixes #2
45 |
46 | ##Installation
47 |
48 | You can install angular-growl with bower:
49 |
50 | > bower install angular-growl
51 |
52 | Alternatively you can download the files in the [build folder](build/) manually and include them in your project.
53 |
54 | ````html
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | ````
66 |
67 | As angular-growl is based on its own angularJS module, you have to alter your dependency list when creating your application
68 | module:
69 |
70 | ````javascript
71 | var app = angular.module('myApp', ['angular-growl']);
72 | ````
73 |
74 | Finally, you have to include the directive somewhere in your HTML like this:
75 |
76 | ````html
77 |
78 |
79 |
80 | ````
81 |
82 | ##Usage
83 |
84 | Just let angular inject the growl Factory into your code and call the 4 functions that the factory provides accordingly:
85 |
86 | ````javascript
87 | app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
88 | $scope.addSpecialWarnMessage = function() {
89 | growl.addWarnMessage("This adds a warn message");
90 | growl.addInfoMessage("This adds a info message");
91 | growl.addSuccessMessage("This adds a success message");
92 | growl.addErrorMessage("This adds a error message");
93 | }
94 | }]);
95 | ````
96 |
97 | If [angular-translate](https://github.com/PascalPrecht/angular-translate) is present, its filter is automatically called for translating of messages, so you have to provide
98 | only the key:
99 |
100 | ````javascript
101 | app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
102 | $scope.addSpecialWarnMessage = function() {
103 | growl.addSuccessMessage("SAVE_SUCCESS_MESSAGE");
104 | growl.addErrorMessage("VALIDATION_ERROR");
105 | }
106 | }]);
107 | ````
108 |
109 | ##Configuration
110 |
111 | ###Only unique messages
112 |
113 | * Default: true
114 |
115 | Accept only unique messages as a new message. If a message is already displayed (text and severity are the same) then this
116 | message will not be added to the displayed message list. Set to false, to always display all messages regardless if they
117 | are already displayed or not:
118 |
119 | ````javascript
120 | var app = angular.module('myApp', ['angular-growl']);
121 |
122 | app.config(['growlProvider', function(growlProvider) {
123 | growlProvider.onlyUniqueMessages(false);
124 | }]);
125 | ````
126 |
127 | ###Automatic closing of notifications (timeout, ttl)
128 |
129 | * Default: none (all messages need to be closed manually by the user.)
130 |
131 | However, you can configure a global timeout (TTL) after which notifications should be automatically closed. To do
132 | this, you have to configure this during config phase of angular bootstrap like this:
133 |
134 | ````javascript
135 | var app = angular.module('myApp', ['angular-growl']);
136 |
137 | app.config(['growlProvider', function(growlProvider) {
138 | growlProvider.globalTimeToLive(5000);
139 | }]);
140 | ````
141 |
142 | This sets a global timeout of 5 seconds after which every notification will be closed.
143 |
144 | You can override TTL generally for every single message if you want:
145 |
146 | ````javascript
147 | app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
148 | $scope.addSpecialWarnMessage = function() {
149 | growl.addWarnMessage("Override global ttl setting", {ttl: 10000});
150 | }
151 | }]);
152 | ````
153 |
154 | This sets a 10 second timeout, after which the notification will be automatically closed.
155 |
156 | If you have set a global TTL, you can disable automatic closing of single notifications by setting their ttl to -1:
157 |
158 | ````javascript
159 | app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
160 | $scope.addSpecialWarnMessage = function() {
161 | growl.addWarnMessage("this will not be closed automatically even when a global ttl is set", {ttl: -1});
162 | }
163 | }]);
164 | ````
165 |
166 | ###Allow HTML in messages
167 |
168 | * Default: false
169 |
170 | Turn this on to be able to display html tags in messages, default behaviour is to NOT display HTML.
171 |
172 | For this to work, you have to declare a dependency to "ngSanitize" (and load the extra javascript) in your own application
173 | module!
174 |
175 | ````javascript
176 | var app = angular.module('myApp', ['angular-growl', 'ngSanitize']);
177 |
178 | app.config(['growlProvider', function(growlProvider) {
179 | growlProvider.globalEnableHtml(true);
180 | }]);
181 | ````
182 |
183 | You can override the global option and allow HTML tags in single messages too:
184 |
185 | ````javascript
186 | app.controller("demoCtrl", ['$scope', 'growl', function($scope, growl) {
187 | $scope.addSpecialWarnMessage = function() {
188 | growl.addWarnMessage("This is a HTML message", {enableHtml: true});
189 | }
190 | }]);
191 | ````
192 |
193 | ###Animations
194 |
195 | Beginning with angularJS 1.2 growl messages can be automatically animated with CSS animations when adding and/or closing
196 | them. All you have to do is load the angular-animate.js provided by angularJS and add **ngAnimate** to your applications
197 | dependency list:
198 |
199 | ````html
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 | ````
211 |
212 | ````javascript
213 | var app = angular.module('myApp', ['angular-growl', 'ngAnimate']);
214 | ````
215 |
216 | That's it. The angular-growl.css comes with a pre-defined animation of 0.5s to opacity.
217 |
218 | To configure the animations, just change the _growl-item.*_ classes in the css file to your preference. F.i. to change length
219 | of animation from 0.5s to 1s do this:
220 |
221 | ````css
222 | .growl-item.ng-enter,
223 | .growl-item.ng-leave {
224 | -webkit-transition:1s linear all;
225 | -moz-transition:1s linear all;
226 | -o-transition:1s linear all;
227 | transition:1s linear all;
228 | }
229 | ````
230 |
231 | Basically you can style your animations just as you like if ngAnimate can pick it up automatically. See the [ngAnimate
232 | docs](http://docs.angularjs.org/api/ngAnimate) for more info.
233 |
234 | ###Handling of server sent notifications
235 |
236 | When doing $http requests, you can configure angular-growl to look automatically for messages in $http responses, so your
237 | business logic on the server is able to send messages/notifications to the client and you can display them automagically:
238 |
239 | ````javascript
240 | var app = angular.module('myApp', ['angular-growl']);
241 |
242 | app.config(['growlProvider', '$httpProvider', function(growlProvider, $httpProvider) {
243 | $httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
244 | }]);
245 | ````
246 |
247 | This adds a pre-defined angularJS HTTP interceptor that is called on every HTTP request and looks if response contains
248 | messages. Interceptor looks in response for a "messages" array of objects with "text" and "severity" key. This is an example
249 | response which results in 3 growl messages:
250 |
251 | ````json
252 | {
253 | "someOtherData": {...},
254 | "messages": [
255 | {"text":"this is a server message", "severity": "warn"},
256 | {"text":"this is another server message", "severity": "info"},
257 | {"text":"and another", "severity": "error"}
258 | ]
259 | }
260 | ````
261 |
262 | You can configure the keys, the interceptor is looking for like this:
263 |
264 | ````javascript
265 | var app = angular.module("demo", ["angular-growl"]);
266 |
267 | app.config(["growlProvider", "$httpProvider", function(growlProvider, $httpProvider) {
268 | growlProvider.messagesKey("my-messages");
269 | growlProvider.messageTextKey("messagetext");
270 | growlProvider.messageSeverityKey("severity-level");
271 | $httpProvider.responseInterceptors.push(growlProvider.serverMessagesInterceptor);
272 | }]);
273 | ````
274 |
275 | Server messages will be created with default TTL.
276 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "author": "Marco Rinck",
3 | "name": "angular-growl",
4 | "description": "growl like notifications for angularJS projects, using bootstrap alert classes",
5 | "version": "0.4.0",
6 | "homepage": "https://github.com/marcorinck/angular-growl",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/marcorinck/angular-growl"
10 | },
11 | "license": "MIT",
12 | "main": "./build/angular-growl.js",
13 | "ignore": [
14 | "src",
15 | "test",
16 | ".jshintrc",
17 | "package.json",
18 | "gruntfile.js",
19 | "karma.conf.js",
20 | "bower.json",
21 | "demo",
22 | ".gitignore"
23 | ],
24 | "dependencies": {
25 | "angular": "1.2.1"
26 | },
27 | "devDependencies": {
28 | "angular-mocks": "1.2.1"
29 | }
30 | }
--------------------------------------------------------------------------------
/build/angular-growl.js:
--------------------------------------------------------------------------------
1 | /**
2 | * angular-growl - v0.4.0 - 2013-11-19
3 | * https://github.com/marcorinck/angular-growl
4 | * Copyright (c) 2013 Marco Rinck; Licensed MIT
5 | */
6 | angular.module('angular-growl', []);
7 | angular.module('angular-growl').directive('growl', [
8 | '$rootScope',
9 | function ($rootScope) {
10 | 'use strict';
11 | return {
12 | restrict: 'A',
13 | template: '