Do you remember the last post where we talked about how easy it is to create global notifications with Marionette?
You’ll be pleased to know that we’ve developed a plugin using the solution we shared.
So now it’s even easier to manage global notifications in your Marionette applications thanks to marionette.notifications (what an amazing name for our plugin, right? Well… it isn’t the coolest name, but at least you know what it does!).
Global notifications allow to users to know what is happening while they’re using an application, which is particularly helpful after performing an action.
The source is available in GitHub so you can take a look at the documentation and find out how to use it. Of course, feel free to fork the repository, make the changes you want and send us a pull request if you want to have them in the plugin.
Demonstration
We’ve also developed a demo you can see online or, if you need extra help, you can take a look at the source code.
Step-by-step guide
Install the plugin
This is the easiest part. You can do it just using bower or by including one of our dist files into your code.
bower install marionette.notifications --save
Include the containers
In our demo, we use two tabs, one for using the plugin with the default configuration and the other for using it with a custom configuration. So, let’s add both containers.
The first container will display the notifications fixed at the top of the page, so we include it as child of the body.
<body> <div class="js-notifications-view notifications"></div> ... </body>
.notifications {
position: fixed;
top: 0;
width: 100%;
}
The second one will be inside the second tab with a maximum height, with the need to scroll if we add many notifications to it.
<div role="tabpanel" class="tab-pane fade" id="custom">
<div class="row">
<div class="col-md-6">...</div>
<div class="col-md-6">
<div class="js-custom-notifications-view custom-notifications">
</div>
</div>
</div>
.custom-notifications {
max-height: 100px;
overflow-y: auto;
}
Define the templates
We’re going to use a Bootstrap alert component for the default notification and a simple div for the custom one, containing the notification message and its date-time.
We have two variables available in the template: message and type. These two variables are defined when adding notifications to the application, as explained below.
<script type="text/template" class="js-notification-template">
<div class="alert alert-<%= type %> alert-dismissible" role="alert">
<button type="button" class="close js-notification-close" data-dismiss="alert">×</button>
<strong><%= message %></strong>
</div>
</script>
<script type="text/template" class="js-custom-notification-template">
<div class="custom-notification">
<i class="glyphicon glyphicon-bell"></i><%= message %> <span class="date">(<%= new Date() %>)</span>
</div>
</script>
Create the Marionette applications
We have our HTML ready, so the next step is to create our Marionette applications.
var DefaultApp = Marionette.Application.extend({});
var CustomApp = Marionette.Application.extend({
notificationTemplate: '.js-custom-notification-template',
notificationViewEl: '.js-custom-notifications-view',
notificationAutoremove: false,
notificationAnimation: false
});
defaultApp.start();
customApp.start();
Add notifications
And that’s all! The applications are now ready to add notifications.
defaultApp.addNotification('success', 'This is a success notification');
customApp.addNotification('custom', 'This is a custom notification');
Good luck trying out the plugin and, as always, reach out if you have any questions!