@@ -6,12 +6,19 @@ This service provides several helper methods to display notifications on web app
6
6
7
7
A PNotify 2.0 port heavily based on [ angular-pines-notify] ( https://github.com/mykabam/angular-pines-notify ) project.
8
8
9
- ### Requirements
9
+ ### Dependencies
10
10
11
11
- [ JQuery] ( http://jquery.com/ )
12
12
- [ PNotify] ( http://sciactive.com/pnotify/ )
13
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
+
14
19
- [ Bootstrap 3] ( http://getbootstrap.com )
20
+ - [ jQuery UI] ( http://http://jqueryui.com )
21
+ - [ FontAwesome] ( http://http://fontawesome.io )
15
22
16
23
### Demo
17
24
@@ -26,6 +33,8 @@ A PNotify 2.0 port heavily based on [angular-pines-notify](https://github.com/my
26
33
Include PNotify related assets. You need to include at least pnotify.core.css and pnotify.core.js.
27
34
Don't forget pnotify.confirm.js if you need confirmation dialogs.
28
35
36
+ Include at least Bootstrap 3 or jQuery UI.
37
+
29
38
Then add angular-pnotify.js.
30
39
31
40
``` html
@@ -94,18 +103,56 @@ Sometimes you want to set defaults for the whole application. You can do so in y
94
103
95
104
``` javascript
96
105
angular .module (' MyApp' )
97
- .config ([' notificationServiceProvider' , function (notificationServiceProvider ) {
106
+ .config ([' notificationServiceProvider' , function (notificationServiceProvider ) {
98
107
99
- notificationServiceProvider .setDefaults ({
100
- history: false ,
101
- delay: 4000 ,
102
- closer: false ,
103
- closer_hover: false
104
- });
108
+ notificationServiceProvider .setDefaults ({
109
+ history: false ,
110
+ delay: 4000 ,
111
+ closer: false ,
112
+ closer_hover: false
113
+ });
105
114
106
- }]);
115
+ }])
116
+ ;
117
+ ```
118
+
119
+ You can also chain configuration calls:
120
+
121
+ ``` javascript
122
+ angular .module (' MyApp' )
123
+ .config ([' notificationServiceProvider' , function (notificationServiceProvider ) {
124
+
125
+ notificationServiceProvider
126
+
127
+ .setDefaults ({
128
+ history: false ,
129
+ delay: 4000 ,
130
+ closer: false ,
131
+ closer_hover: false
132
+ })
133
+
134
+ // Configure a stack named 'bottom_right' that append a call 'stack-bottomright'
135
+ .setStack (' bottom_right' , ' stack-bottomright' , {
136
+ dir1: ' up' ,
137
+ dir2: ' left' ,
138
+ firstpos1: 25 ,
139
+ firstpos2: 25
140
+ })
141
+
142
+ // Configure a stack named 'top_left' that append a call 'stack-topleft'
143
+ .setStack (' top_left' , ' stack-topleft' , {
144
+ dir1: ' down' ,
145
+ dir2: ' right' ,
146
+ push: ' top'
147
+ })
148
+
149
+ ;
150
+
151
+ }])
152
+ ;
107
153
```
108
154
155
+
109
156
### PNotify Stacks
110
157
111
158
You can set the position and direction of notifications by using PNotify stacks. You can add stack information to the following methods:
@@ -119,16 +166,17 @@ You need to define the stacks in the config section before:
119
166
120
167
``` javascript
121
168
angular .module (' MyApp' )
122
- .config ([' notificationServiceProvider' , function (notificationServiceProvider ) {
169
+ .config ([' notificationServiceProvider' , function (notificationServiceProvider ) {
123
170
124
- // Configure a stack named 'top_left' that append a call 'stack-topleft'
125
- notificationServiceProvider .setStack (' top_left' , ' stack-topleft' , {
126
- dir1: ' down' ,
127
- dir2: ' right' ,
128
- push: ' top'
129
- });
171
+ // Configure a stack named 'top_left' that append a call 'stack-topleft'
172
+ notificationServiceProvider .setStack (' top_left' , ' stack-topleft' , {
173
+ dir1: ' down' ,
174
+ dir2: ' right' ,
175
+ push: ' top'
176
+ });
130
177
131
- }]);
178
+ }])
179
+ ;
132
180
```
133
181
134
182
Later, in a controller:
@@ -147,23 +195,24 @@ notificationServiceProvider.setDefaultStack('top_left');
147
195
148
196
``` javascript
149
197
angular .module (' MyApp' )
150
- .controller (' MyCtrl' , [' $scope' , ' notificationService' , function ($scope , notificationService ) {
151
-
152
- $scope .action = function () {
153
- // This is a sample using the success helper method
154
- notificationService .success (' This is a success notification' );
155
- };
156
-
157
- $scope .anotherAction = function () {
158
- // This is a sample using the generic PNotify notification object
159
- notificationService .notify ({
160
- title: ' Notice Title' ,
161
- text: ' Notice Text' ,
162
- hide: false
163
- });
164
- };
165
-
166
- }]);
198
+ .controller (' MyCtrl' , [' $scope' , ' notificationService' , function ($scope , notificationService ) {
199
+
200
+ $scope .action = function () {
201
+ // This is a sample using the success helper method
202
+ notificationService .success (' This is a success notification' );
203
+ };
204
+
205
+ $scope .anotherAction = function () {
206
+ // This is a sample using the generic PNotify notification object
207
+ notificationService .notify ({
208
+ title: ' Notice Title' ,
209
+ text: ' Notice Text' ,
210
+ hide: false
211
+ });
212
+ };
213
+
214
+ }])
215
+ ;
167
216
```
168
217
169
218
### Options
0 commit comments