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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
angular-ui-notification
=======================
[](https://david-dm.org/alexcrack/angular-ui-notification)
[](https://david-dm.org/alexcrack/angular-ui-notification#info=devDependencies)
[](https://travis-ci.org/alexcrack/angular-ui-notification)
[](https://www.versioneye.com/user/projects/54f96af44f3108e7800000e4)
[](https://codeclimate.com/github/alexcrack/angular-ui-notification)
Angular.js service providing simple notifications using Bootstrap 3 styles with css transitions for animations
## Features
* No dependencies except of angular.js.
* CSS3 Animations.
* Small size.
* 5 message types.
* Use HTML in your messages.
* Configure options globally py the provider
* Use custom options by the message
* Use custom template
## Install
To install the package using bower and save as a dependency use...
```bash
bower install angular-ui-notification --save
```
## Usage
[Heres a plunker demo](http://plnkr.co/edit/5Gk8UVvzUsjyof7Gxsua?p=preview)
In your html/template add
```html
...
<link rel="stylesheet" href="angular-ui-notification.min.css">
...
<script src="angular-ui-notification.min.js"></script>
...
```
In your application, declare dependency injection like so..
```javascript
angular.module('notificationTest', ['ui-notification']);
...
```
You can configure module by the provider
```javascript
angular.module('notificationTest', ['ui-notification'])
.config(function(NotificationProvider) {
NotificationProvider.setOptions({
delay: 10000,
startTop: 20,
startRight: 10,
verticalSpacing: 20,
horizontalSpacing: 20,
positionX: 'left',
positionY: 'bottom'
});
});
...
```
And when you need to show notifications, inject service and call it!
```javascript
angular.module('notificationTest').controller('notificationController', function($scope, Notification) {
Notification.primary('Primary notification');
// or simply..
Notification('Primary notification');
// Other Options
// Success
Notification.success('Success notification');
// With Title
Notification({message: 'Primary notification', title: 'Primary notification'});
// Message with custom delay
Notification.error({message: 'Error notification 1s', delay: 1000});
// Embed HTML within your message.....
Notification.success({message: 'Success notification<br>Some other <b>content</b><br><a href="https://github.com/alexcrack/angular-ui-notification">This is a link</a><br><img src="https://angularjs.org/img/AngularJS-small.png">', title: 'Html content'});
// Change position notification
Notification.error({message: 'Error Bottom Right', positionY: 'bottom', positionX: 'right'});
// Replace message
Notification.error({message: 'Error notification 1s', replaceMessage: true});
}
```
## Service
Module name: "ui-notification"
Service: "Notification"
Configuration provider: "NotificationProvider"
## Options
Options can be passed to configuration provider globally or used in the current message.
The options list:
| Option | Possible values | Default value | Description |
| ----------------- | ------------------------- | ------------------------------ | ------------------------------------------------------------------------ |
| delay | Any integer value | 5000 | The time in ms the message is showing before start fading out |
| startTop | Any integer value | 10 | Vertical padding between messages and vertical border of the browser |
| startRight | Any integer value | 10 | Horizontal padding between messages and horizontal border of the browser |
| verticalSpacing | Any integer value | 10 | Vertical spacing between messages |
| horizontalSpacing | Any integer value | 10 | Horizontal spacing between messages |
| positionX | "right", "left", "center" | "right" | Horizontal position of the message |
| positionY | "top", "bottom" | "top" | Vertical position of the message |
| replaceMessage | true, false | false | If true every next appearing message replace old messages |
| templateUrl | Any string | "angular-ui-notification.html" | Custom template filename (URL) |
Also you can pass the "scope" option. This is an angular scope option Notification scope will be inherited from. This option can be passed only in the methods. The default value is $rootScope
## Methods
#### Notification service methods
| Method name | Description |
|----------------------------------------|-------------------------------------------------|
| Notification(), Notification.primary() | Show the message with bootstrap's primary class |
| Notification.info() | Show the message with bootstrap's info class |
| Notification.success() | Show the message with bootstrap's success class |
| Notification.warning() | Show the message with bootstrap's warn class |
| Notification.error() | Show the message with bootstrap's danger class |
| Notification.clearAll() | Remove all shown messages |
#### Notification service options
| Option | Possible values | Default value | Description |
| -------------- | ------------------------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------ |
| title | *String* | `""` | Title to appear at the top of the notification |
| message | *String* | `""` | Message to appear in the notification |
| templateUrl | *String* | `"angular-ui-notification.html"` | URL of template to be used for notification |
| delay | *Int* (?) | `5000` or configured global delay | Number of ms before notification fades out. If not an integer, notification will persist until killed. |
| type | "primary", "info", "success", "warning", "error" | `"primary"` | Bootstrap flavoring |
| positionY | "top", "bottom" | `"top"` | |
| positionX | "right", "left", "center" | `"right" | |
| replaceMessage | *Boolean* | `false` | If true this message will replace old(er) message(s) |
#### Returning value
Every "show" method returns a promise resolves a notification scope with methods:
| Method name | Description |
|--------------------------------|------------------------------------------------------------------------------------------------------------------|
| notificationScope.kill(isHard) | Remove the specific message<br>isHard - if false or omitted kill message with fadeout effect (default). If true - immediately remove the message|
## Custom Templates
Custom template can be provided.
```html
<div class="ui-notification">
<h3 ng-show="title" ng-bind-html="title"></h3>
<div class="message" ng-bind-html="message"></div>
</div>
```
Default existing scope values is "title" - the title of the message and "message".
Also any custom scope's properties can be used.
|
