0.5.0 • Published 8 years ago
marionette-notifications v0.5.0
marionette-notifications
Shows sexy notifications in a region.
Some features:
- When a notification is added that already has the same content as a notification that already exists, no notification is added.
- A notification will disappear after 3 seconds. When hovering over a notification, it will not disappear.
Installation:
$ npm install marionette-notifications --save
Usage
First make sure you have underscore
, marionette
and backbone
as a dependency.
Now create a view where you listen to all events that need to trigger a notification (I will name it view/notification.js
);
var Notification = require('marionette-notifications').CollectionView;
var vent = require('vent');
module.exports = Notification.extend({
initialize: function () {
Notification.prototype.initialize.call(this);
// Listen to events here, e.g.:
this.listenTo(vent, 'user:delete', this.onUserDelete);
},
onUserDelete: function () {
// Let's create the notification, shall we?
this.info({
content: 'User is successfully deleted.'
});
}
});
In your template, create a div: <div id="_notifications></div>
. Then add this as a region:
app.addRegions({
notification: '#_notification'
});
Now show the region:
app.addInitializer(function () {
var VNotification = require('view/notification');
app.notification.show(new VNotification());
});
For now, no CSS is added. You can copy/paste this to use as a base:
.notifications {
position: absolute;
top: 20px;
z-index: 100;
width: 100%;
display: flex;
flex-flow: column wrap;
align-items: center;
pointer-events: none;
}
.notification {
max-width: 300px;
padding: 10px 40px 10px 14px;
color: #000;
background: #fbf9e4;
margin-bottom: 15px;
position: relative;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: 10px 10px;
pointer-events: all;
a {
text-decoration: underline;
}
&.notification-error {
padding-left: 40px;
background-image: url('img/alert.svg');
color: #ba0000;
a {
color: #ba0000;
}
}
.action-small {
margin-left: 11px;
position: absolute;
top: 13px;
right: 7px;
}
}
Usage
Option | Description | Type | Default |
---|---|---|---|
prependContent | Add some text wrapped in <strong> before content . | string | null |
content | Content of the notification. | string | '' |
type | Type of the notification. Must be one of these: error , info or success . | string | 'info' |
closeAfter | Close the popup after x ms. | integer | 3000 |
linkText | Add a link after the content . Can also be an array of text | string || [string] | null |
link | URL of the link. Can also be a callback. If a callback, the url will be set to # . Can also be an array of links or callbacks. | mixed | null |
Shortcuts for adding a notification:
this.info(options)
, this.error(options)
and this.success(options)
.