ember-notifyme v3.0.0
Ember-notifyme
Simple addon that adds ability to show popup notifications.
DEMO: http://igorkvasn.github.io/ember-notifyme/
Features
- countdown (notification message will disappear after certain timeout) + countdown progress bar
- onClick and onClose callbacks
- animations (VelocityJS)
- full customization of icons (by default FontAwesome is supported, but any HTML element can be used instead - e.g. Glyphicons, IcoMoon,...)
- supports HTML content
Installation
ember install ember-notifyme
- Ember.js v3.20 or above
- Ember CLI v3.20 or above
- Node.js v12 or above
Usage
Add this component anywhere into your hbs file (eg. application.hbs)
{{notification-panel}}
To trigger a notification message you can either:
this.notifications.addMessage({
message: "My message"
//other options here
});
or use convenience methods success
, info
or error
:
this.notifications.info("My info message", options);
To hide a notification:
this.notifications.removeMessage(message);
To hide all notifications:
this.notifications.removeAll();
Note: by default, FontAwesome must be included in your project - to use different icon set, see Global Configuration section below for a configuration hints
Callbacks
You can also use callbacks onClick
and onClose
that take a function with one parameter (message that triggered this callback);
this.notifications.addMessage({
message: "My message"
onClick(message){
alert('message clicked!');
},
onClose(message){
alert('message closed!');
}
});
Another callback available is onCloseTimeout
that is called whenever notification's timeout expires and the notification message is auto-closing.
this.notifications.addMessage({
message: "My message"
onCloseTimeout(message){
alert('message timeout expired');
}
});
List of available options:
Option | Description | Default value |
---|---|---|
type | type of message; possible values: 'info', 'error', 'success'; CSS class of the same name will be added to notification message to allow styling | 'info' |
message | text of a message | |
timeout | time before notification disappears | based on notification type (errors have no timeout, otherwise 8000 milis) |
sticky | if true, notification will not disappear | based on notification type (errors are sticky=true) |
htmlContent | enabled/disables HTML content in message (Warning: be sure to properly escape message if this option is set to true ) | false |
closeOnClick | if set to true , message is closed when user clicks on it | false |
onClose | callback triggered when user clicks on X button to close the notification | |
onClick | callback triggered when user clicks on the notification | |
onCloseTimeout | callback triggered when message timeout expires and message is automatically closed (see timeout option above) | false |
data | any arbitrary data |
Global configuration
Some options can be globally configured so you do not have to set the same options over and over. Additionally icons can be configured as well.
In config/environment.js
you can configure globals such as (every entry is optional, eg. if you do not specify success timeout, default will be used):
ENV['ember-notifyme']={
closeIconHTML: '<i class="fa fa-times"></i>',
messages:{
success: {
timeout: 8000,
icon: '<span class="fa-stack fa-sm"><i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-check fa-stack-1x"></i></span>'
},
error: {
sticky: true,
icon: '<span class="fa-stack fa-sm"><i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-exclamation fa-stack-1x"></i></span>'
},
info: {
timeout: 8000,
icon: '<span class="fa-stack fa-sm"><i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-info fa-stack-1x"></i></span>'
},
}
}
Addon Development
git clone
this repositorynpm install
bower install
Linting
ember server
- Visit your app at http://localhost:4200.
Running tests
npm test
(Runsember try:testall
to test your addon against multiple Ember versions)ember test
ember test --server
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit http://www.ember-cli.com/.
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago