├── .gitignore ├── CHANGELOG.md ├── .editorconfig ├── bower.json ├── package.json ├── LICENSE ├── src └── angular-pnotify.js ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | dev 3 | node_modules 4 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.1.2 4 | 5 | * Add removeNotifications method #13 6 | * Add npm support 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-pnotify", 3 | "version": "0.1.2", 4 | "homepage": "https://github.com/jacqueslareau/angular-pnotify", 5 | "authors": [ 6 | "Jacques Lareau " 7 | ], 8 | "description": "AngularJS wrapper for PNotify", 9 | "main": "./src/angular-pnotify.js", 10 | "keywords": [ 11 | "angular", 12 | "notification", 13 | "pines", 14 | "pnotify" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ], 24 | "dependencies": { 25 | "angular": "~1.5.5", 26 | "pnotify": "~3.0.0", 27 | "jquery": ">=1.9", 28 | "bootstrap": "^3.3.6" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-pnotify", 3 | "version": "0.1.2", 4 | "description": "AngularJS wrapper for PNotify", 5 | "main": "src/angular-pnotify.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/jacqueslareau/angular-pnotify.git" 12 | }, 13 | "author": "Jacques Lareau ", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/jacqueslareau/angular-pnotify/issues" 17 | }, 18 | "homepage": "https://github.com/jacqueslareau/angular-pnotify#readme", 19 | "keywords": [ 20 | "angular", 21 | "notification", 22 | "pines", 23 | "pnotify" 24 | ], 25 | "dependencies": { 26 | "angular": "~1.5.5", 27 | "bootstrap": "^3.3.6", 28 | "jquery": ">=1.9", 29 | "pnotify": "~3.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Jacques Lareau 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /src/angular-pnotify.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | 'use strict'; 4 | 5 | angular.module('jlareau.pnotify', []) 6 | 7 | .provider('notificationService', [ function() { 8 | 9 | var settings = { 10 | styling: 'bootstrap3' 11 | }; 12 | 13 | var stacks = {}; 14 | var defaultStack = false; 15 | 16 | var initHash = function(stackName) { 17 | 18 | var hash = angular.copy(settings); 19 | 20 | if ((stackName || (stackName = defaultStack)) && stackName in stacks) { 21 | 22 | hash.stack = stacks[stackName].stack; 23 | 24 | if (stacks[stackName].addclass) { 25 | 26 | hash.addclass = 'addclass' in hash 27 | ? hash.addclass + ' ' + stacks[stackName].addclass 28 | : stacks[stackName].addclass; 29 | 30 | } 31 | } 32 | 33 | return hash; 34 | 35 | }; 36 | 37 | this.setDefaults = function(defaults) { 38 | 39 | settings = defaults; 40 | return this; 41 | 42 | }; 43 | 44 | this.setStack = function(name, addclass, stack) { 45 | 46 | if (angular.isObject(addclass)) { 47 | stack = addclass; 48 | addclass = false; 49 | } 50 | 51 | stacks[name] = { 52 | stack: stack, 53 | addclass: addclass 54 | }; 55 | 56 | return this; 57 | 58 | }; 59 | 60 | this.setDefaultStack = function(name) { 61 | 62 | defaultStack = name; 63 | 64 | return this; 65 | 66 | }; 67 | 68 | this.$get = [ function() { 69 | 70 | return { 71 | 72 | /* ========== SETTINGS RELATED METHODS =============*/ 73 | 74 | getSettings: function() { 75 | 76 | return settings; 77 | 78 | }, 79 | 80 | /* ============== NOTIFICATION METHODS ==============*/ 81 | 82 | notice: function(content, stack) { 83 | 84 | var hash = initHash(stack); 85 | hash.type = 'notice'; 86 | hash.text = content; 87 | return this.notify(hash); 88 | 89 | }, 90 | 91 | info: function(content, stack) { 92 | 93 | var hash = initHash(stack); 94 | hash.type = 'info'; 95 | hash.text = content; 96 | return this.notify(hash); 97 | 98 | }, 99 | 100 | success: function(content, stack) { 101 | 102 | var hash = initHash(stack); 103 | hash.type = 'success'; 104 | hash.text = content; 105 | return this.notify(hash); 106 | 107 | }, 108 | 109 | error: function(content, stack) { 110 | 111 | var hash = initHash(stack); 112 | hash.type = 'error'; 113 | hash.text = content; 114 | return this.notify(hash); 115 | 116 | }, 117 | 118 | notifyWithDefaults: function(options, stack) { 119 | 120 | var defaults = initHash(stack); 121 | var combined = angular.extend(defaults, options); 122 | return this.notify(combined); 123 | 124 | }, 125 | 126 | notify: function(hash) { 127 | 128 | return new PNotify(hash); 129 | 130 | }, 131 | 132 | removeNotifications: function() { 133 | 134 | return PNotify.removeAll(); 135 | 136 | } 137 | 138 | }; 139 | 140 | }]; 141 | 142 | }]) 143 | 144 | ; 145 | 146 | })(); 147 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-pnotify 2 | ==================== 3 | 4 | This is a simple wrapper for [PNotify](http://sciactive.com/pnotify/) as a [AngularJS](http://angularjs.org/) service. 5 | This service provides several helper methods to display notifications on web applications. 6 | 7 | A PNotify 2.0 port heavily based on [angular-pines-notify](https://github.com/mykabam/angular-pines-notify) project. 8 | 9 | ### Dependencies 10 | 11 | - [JQuery](http://jquery.com/) 12 | - [PNotify](http://sciactive.com/pnotify/) 13 | - [AngularJS](http://angularjs.org/) 14 | 15 | #### Optional 16 | 17 | Need to use at least Bootstrap 3 or jQuery UI to make pretty notifications. 18 | 19 | - [Bootstrap 3](http://getbootstrap.com) 20 | - [jQuery UI](http://http://jqueryui.com) 21 | - [FontAwesome](http://http://fontawesome.io) 22 | 23 | ### Demo 24 | 25 | [Check out the demo here!](http://pnotify.jlareau.com/demo/) 26 | 27 | ### Install 28 | 29 | `bower install angular-pnotify` 30 | 31 | Or 32 | 33 | `npm install angular-pnotify` 34 | 35 | ### Usage 36 | 37 | Include at least Bootstrap 3 or jQuery UI CSS. 38 | 39 | Include PNotify related assets. You need to include at least pnotify.css and pnotify.js. 40 | Don't forget pnotify.confirm.js if you need confirmation dialogs. 41 | 42 | Then add angular-pnotify.js. 43 | 44 | Here is an example using Bootstrap 3. 45 | 46 | ```html 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | ``` 58 | 59 | Add the angular-pnotify module as a dependency to your application module: 60 | 61 | ```javascript 62 | angular.module('MyApp', ['jlareau.pnotify']); 63 | ``` 64 | 65 | In order to use the API you need to inject the `notificationService` service into your controllers. 66 | 67 | ```javascript 68 | angular.module('MyApp') 69 | .controller('MyCtrl', ['$scope', 'notificationService', function($scope, notificationService) { 70 | $scope.action = function() { 71 | notificationService.success('Success!!!'); 72 | }; 73 | }]) 74 | ; 75 | ``` 76 | 77 | ### Methods 78 | 79 | #### info 80 | 81 | Display an info notice. 82 | 83 | `notificationService.info(text, [stack name]);` 84 | 85 | #### notice 86 | 87 | Display notification as a notice. 88 | 89 | `notificationService.notice(text, [stack name]);` 90 | 91 | #### error 92 | 93 | Display an error notice. 94 | 95 | `notificationService.error(text, [stack name]);` 96 | 97 | #### success 98 | 99 | Display a success notice. 100 | 101 | `notificationService.success(text, [stack name]);` 102 | 103 | #### notify 104 | 105 | Display a generic PNotify notification with the options you pass to it. It ignores defaults. 106 | 107 | `notificationService.notify(options);` 108 | 109 | #### notifyWithDefaults 110 | 111 | Same as `notify` but will merge the options with defaults. Useful when you only want to override or add one options, without 112 | clearing all defaults. 113 | 114 | `notificationService.notifyWithDefaults(options, [stack name]);` 115 | 116 | #### removeNotifications 117 | 118 | Will clear all currently showing notifications. 119 | 120 | `notificationService.removeNotifications();` 121 | 122 | ### Provider 123 | 124 | Sometimes you want to set defaults for the whole application. You can do so in your module's config. 125 | 126 | ```javascript 127 | angular.module('MyApp') 128 | .config(['notificationServiceProvider', function(notificationServiceProvider) { 129 | 130 | notificationServiceProvider.setDefaults({ 131 | history: false, 132 | delay: 4000, 133 | closer: false, 134 | closer_hover: false 135 | }); 136 | 137 | }]) 138 | ; 139 | ``` 140 | 141 | You can also chain configuration calls: 142 | 143 | ```javascript 144 | angular.module('MyApp') 145 | .config(['notificationServiceProvider', function(notificationServiceProvider) { 146 | 147 | notificationServiceProvider 148 | 149 | .setDefaults({ 150 | history: false, 151 | delay: 4000, 152 | closer: false, 153 | closer_hover: false 154 | }) 155 | 156 | // Configure a stack named 'bottom_right' that append a call 'stack-bottomright' 157 | .setStack('bottom_right', 'stack-bottomright', { 158 | dir1: 'up', 159 | dir2: 'left', 160 | firstpos1: 25, 161 | firstpos2: 25 162 | }) 163 | 164 | // Configure a stack named 'top_left' that append a call 'stack-topleft' 165 | .setStack('top_left', 'stack-topleft', { 166 | dir1: 'down', 167 | dir2: 'right', 168 | push: 'top' 169 | }) 170 | 171 | ; 172 | 173 | }]) 174 | ; 175 | ``` 176 | 177 | 178 | ### PNotify Stacks 179 | 180 | You can set the position and direction of notifications by using PNotify stacks. You can add stack information to the following methods: 181 | 182 | * info 183 | * notice 184 | * error 185 | * success 186 | 187 | You need to define the stacks in the config section before: 188 | 189 | ```javascript 190 | angular.module('MyApp') 191 | .config(['notificationServiceProvider', function(notificationServiceProvider) { 192 | 193 | // Configure a stack named 'top_left' that append a call 'stack-topleft' 194 | notificationServiceProvider.setStack('top_left', 'stack-topleft', { 195 | dir1: 'down', 196 | dir2: 'right', 197 | push: 'top' 198 | }); 199 | 200 | }]) 201 | ; 202 | ``` 203 | 204 | Later, in a controller: 205 | 206 | ```javascript 207 | notificationService.info('Hello World : Top left', 'top_left'); 208 | ``` 209 | 210 | You can also set a defined stack as the default: 211 | 212 | ```javascript 213 | notificationServiceProvider.setDefaultStack('top_left'); 214 | ``` 215 | 216 | ### Examples 217 | 218 | ```javascript 219 | angular.module('MyApp') 220 | .controller('MyCtrl', ['$scope', 'notificationService', function($scope, notificationService) { 221 | 222 | $scope.action = function() { 223 | // This is a sample using the success helper method 224 | notificationService.success('This is a success notification'); 225 | }; 226 | 227 | $scope.anotherAction = function() { 228 | // This is a sample using the generic PNotify notification object 229 | notificationService.notify({ 230 | title: 'Notice Title', 231 | text: 'Notice Text', 232 | hide: false 233 | }); 234 | }; 235 | 236 | }]) 237 | ; 238 | ``` 239 | 240 | ### Options 241 | 242 | All the PNotify options can be passed through the notify functions. 243 | You can read more about the supported list of options and what they do on the 244 | [PNotify Github Page](https://github.com/sciactive/pnotify) 245 | 246 | ### See Also 247 | 248 | - [ngToast](https://github.com/tameraydin/ngToast) 249 | - [Angular Material: Toast](https://material.angularjs.org/#/demo/material.components.toast) 250 | - [angular-toastr](https://github.com/Foxandxss/angular-toastr) 251 | - [angular-toasty](https://github.com/Salakar/angular-toasty) 252 | 253 | ### Thanks 254 | 255 | To the [angular-pines-notify](https://github.com/mykabam/angular-pines-notify) contributors: 256 | 257 | - [mykabam](https://github.com/mykabam) 258 | - [valmy](https://github.com/valmy) 259 | - [mibamur](https://github.com/mibamur) 260 | - [MaximilianoRicoTabo](https://github.com/MaximilianoRicoTabo) 261 | 262 | Thanks to [mehdi-ghezal](https://github.com/mehdi-ghezal) for stack implementation. 263 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 |
27 |

angular-pnotify demo

28 |
29 | 30 |

View source for more details.

31 |
32 | 33 |

34 | 

notificationService.success('Successing text')

35 |
36 | 37 |

38 | 

notificationService.info('Infomative text')

39 |
40 | 41 |

42 | 

notificationService.notice('Notice text')

43 |
44 | 45 |

46 | 

notificationService.error('Error text')

47 |
48 | 49 |

Use the generic PNotify object.

50 |

51 |

52 | 

 53 | notificationService.notify({
 54 | 	title: 'The notice title.',
 55 | 	title_escape: false,
 56 | 	text: 'The notice text.',
 57 | 	text_escape: false,
 58 | 	styling: "bootstrap3",
 59 | 	type: "notice",
 60 | 	icon: true
 61 | });
 62 |
63 |

64 |
65 | 66 |

67 |

68 | 

 69 | notificationService.notify({
 70 | 	title: 'Confirmation Needed',
 71 | 	text: 'Are you sure?',
 72 | 	hide: false,
 73 | 	confirm: {
 74 | 		confirm: true
 75 | 	},
 76 | 	buttons: {
 77 | 		closer: false,
 78 | 		sticker: false
 79 | 	},
 80 | 	history: {
 81 | 		history: false
 82 | 	}
 83 | }).get().on('pnotify.confirm', function() {
 84 | 	alert('Ok, cool.');
 85 | }).on('pnotify.cancel', function() {
 86 | 	alert('Oh ok. Chicken, I see.');
 87 | });
 88 |
89 |

90 |
91 | 92 |

93 |

94 | 

 95 | notificationService.notifyWithDefaults({
 96 | 	text: 'Keeps defaults but override delay',
 97 | 	delay: 1000,
 98 | });
 99 |
100 |

101 |
102 | 103 |

104 |

105 | In config: 106 | 

107 | // Configure a stack named 'top_left' that append a call 'stack-topleft'
108 | notificationServiceProvider.setStack('top_left', 'stack-topleft', {
109 | 	dir1: 'down',
110 | 	dir2: 'right',
111 | 	push: 'top'
112 | });
113 |
114 | In controller: 115 | 
116 | notificationService.info('Hello World : Top left', 'top_left');
117 |
118 |

119 |
120 | 121 |

122 |

123 | In config: 124 | 

125 | // Configure a stack named 'bottom_right' that append a call 'stack-bottomright'
126 | notificationServiceProvider.setStack('bottom_right', 'stack-bottomright', {
127 | 	dir1: 'up',
128 | 	dir2: 'left',
129 | 	firstpos1: 25,
130 | 	firstpos2: 25
131 | });
132 |
133 | In controller: 134 | 
135 | notificationService.info('Hello World : Bottom right', 'bottom_right');
136 |
137 |

138 |
139 | 140 |

141 |

142 | In controller: 143 | 

144 | notificationService.removeNotifications();
145 |
146 |

147 | 148 |
149 | 150 |
151 | 152 | 271 | 272 | 273 | 274 | 275 | --------------------------------------------------------------------------------