What's New? Recent Commits ( see all )
1. Dependencies
2. Installation
Javascript Core
<script type="text/javascript" src="js/Backbone.Notifier.js"></script>Place this tag after backbone.js (Required)
Styles (Themes) notifier-base.css is mandatory, and you can choose to include both themes or just one of them.
<link rel="stylesheet" type="text/css" href="css/notifier-base.css">Add this to the head section. Feel free to modify. (Required) ( source LESS file )-
'Clean' Theme (see demo)
<link rel="stylesheet" type="text/css" href="css/notifier-theme-clean.css">Add this to the head section. Feel free to modify. ( source LESS file )imgs/notifier-loader-clean.gifYou can use your own loader animation (referenced by css file)
-
'Plastic' Theme (see demo)
<link rel="stylesheet" type="text/css" href="css/notifier-theme-plastic.css">Add this to the head section. Feel free to modify. ( source LESS file )imgs/notifier-loader-plastic.gifYou can use your own loader animation (referenced by css file)
- Or make your own themes! making new themes is straightforward and relatively easy. Start by taking a look at the LESS files. I would really appreciate it if you send themes you've made and I would consider adding them here if you like.
3. Initialization
1. Create notifier with default config The config is optional!
var notifier = new Backbone.Notifier({ // defaults
el: 'body', // container for notification (default: 'body')
baseCls: 'notifier', // css classes prefix, should match css file and can be changed to avoid conflicts.
theme: 'plastic', // default theme for notifications (currently available: 'plastic' / 'clean').
types: ['warning', 'error', 'info', 'success'], // available notification styles
type: null, // default notification style (null / 'warning' / 'error' / 'info' / 'success')
dialog: false, // whether display the notification with a title bar and a dialog style.
// - sets 'hideOnClick' to false, unless defined otherwise
// - sets 'position' to 'center', unless defined otherwise
// - sets 'ms' to null, unless defined otherwise
modal: false, // whether to dark and block the UI behind the notification (default: false)
message: '', // default message content
title: undefined, // default notification title, if defined, causes the notification
// to be 'dialog' (unless dialog is 'false')
closeBtn: false, // whether to display an enabled close button on notification
ms: 5000, // milliseconds before hiding, (null || false => no timeout) (default: 10000)
'class': null, // additional css class
hideOnClick: true, // whether to hide the notifications on mouse click (default: true)
loader: false, // whether to display loader animation in notifications (default: false)
destroy: false, // notification or selector of notifications to hide on show (default: false)
opacity: 1, // notification's opacity (default: 1)
offsetY: -500, // distance between the notifications and the top/bottom edge (default: 0)
fadeInMs: 500, // duration (milliseconds) of notification's fade-in effect (default: 500)
fadeOutMs: 500, // duration (milliseconds) of notification's fade-out effect (default: 500)
position: 'top', // default notifications position ('top' / 'center' / 'bottom')
zIndex: 10000, // minimal z-index for notifications
screenOpacity: 0.5, // opacity of dark screen background that goes behind for modals (between 0 to 1)
width: undefined, // notification's width ('auto' if not set)
modules: {...} // modules to register immediately
});
Usage - Examples
Basic Examples
Default notification
notifier.notify("Hello World!");
// Is equivalent to:
// notifier.notify({
// message: "Hello World!"
// });
Warning notification
notifier.warning("Hello World!");
// Is equivalent to:
// notifier.notify({
// message: "Hello World!"
// type: 'warning'
// });
Advanced Examples
Dialogs
notifier.notify({
title: "Default Dialog Notification",
message: "This is a default styled dialog notification.<br />Wanna see other styles?",
buttons: [
{'data-role': 'myOk', text: 'Sure', 'class': 'default', css: {width: 120}},
{'data-role': 'myOk', text: 'Yes'},
// 'data-role' - an identifier for binding event using notification.on('click:myOk', function(){...});
{'data-handler': 'destroy', text: 'No', 'class': 'link'}
// 'data-handler' - calls a function of notification object,
// i.g.: 'data-handler': 'destroy' => calls notification.destroy() upon clicking the button
],
modal: true,
ms: null,
modal: true,
destroy: false
})
.on('click:myOk', function(){
this.destroy();
notifier.notify({
'type': 'info',
title: "Information",
message: "This is an 'info' styled dialog notification.",
buttons: [
{'data-role': 'ok', text: 'Show More', 'class': 'default'},
{'data-handler': 'destroy', text: 'Cancel', 'class': 'link'}
],
closeBtn: true,
modal: false,
ms: null,
destroy: false
})
.on('click:ok', function(){
notifier.warning({
destroy: true, // will hide all existing notification
title: "Warning!",
message: "This is a warning!",
buttons: [{'data-handler': 'destroy', text: 'Errrr'}]
})
.on('destroy', function(){
notifier.error({
title: "Error Dialog",
message: "That's our error dialog notification",
buttons: [{'data-handler': 'destroy', 'class': 'default', text: 'Ok'}]
})
.on('destroy', function(){
notifier.success({
title: "Success!",
message: "You have successfully completed this example. Well done!",
buttons: [{'data-handler': 'destroy', 'class': 'default', text: 'Finish'}]
});
});
});
});
});"Warning" Modal + Buttons + Events
var confirmMsg = notifier.notify({
message: "Unsaved changes will be lost. Continue anyway?",
'type': "warning",
buttons: [
{'data-role': 'ok', text: 'Continue'},
{'data-role': 'cancel', text: 'Cancel', 'class': 'default'}
],
modal: true,
ms: null,
destroy: false
})
.on('click:ok', function(){
this.destroy();
notifier.success('You have clicked "Continue".');
})
.on('click:cancel', 'destroy');"Info" Centered Modal + Buttons + Events
var confirmMsg = notifier.notify({
message: "Unsaved changes will be lost. Continue anyway?",
'type': "info",
buttons: [
{'data-role': 'ok', text: 'Continue'},
{'data-role': 'cancel', text: 'Cancel', 'class': 'default'}
],
modal: true,
position: 'center',
ms: null,
destroy: false
})
.on('click:ok', function(){
this.destroy();
notifier.success('You have clicked "Continue".');
})
.on('click:cancel', 'destroy');Transparent "Info" + (3 sec.) Loader
notifier.info({
message: "Loading...",
destroy: true, // hides all existing notification
opacity: .5,
ms: 3000,
loader: true
});No Animation Centered Modal + (3 sec.) Loader
notifier.notify({
message: "Loading...",
position: 'center',
fadeInMs: 0,
fadeOutMs: 0,
ms: 3000,
modal: true,
loader: true
});Error + Slow Fading + Stays Until Click
notifier.error({
message: "<em>Error</em>: An error has occurred",
ms: false,
fadeInMs: 2500,
fadeOutMs: 2500
});Success + Modal + Long Text
notifier.notify({
'type': 'success',
fadeInMs: 1000,
fadeOutMs: 1000,
modal: true,
hideOnClick: true,
message: "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>"
});Ultimate Destruction
Destruction by Reference
var loader = notifier.notify({
'type': 'info',
modal: true,
loader: true,
myAttr: 'ajaxLoader',
ms: false,
position: 'center',
message: "Loading..."
});
notifier.warning({
ms: false,
message: "This is another message, unrelated to the ajax request."
});
$.ajax({
url: 'https://www.google.com/dummy-url/?callback=?',
timeout: 2000,
dataType: 'jsonp',
complete: function(){
loader.destroy(); // reference
}
});Notifier.destroyAll()
notifier.info({
modal: true,
loader: true,
message: "Loading..."
});
$.ajax({
url: 'https://www.google.com/dummy-url/?callback=?',
timeout: 2000,
dataType: 'jsonp',
complete: function(){
notifier.destroyAll(); // hide all instances
}
});Notifier.destroyAll(attributeSelectorKey, attributeSelectorValue)
notifier.notify({
'type': 'info',
modal: true,
loader: true,
myAttr: 'ajaxLoader',
ms: false,
position: 'center',
message: "Loading..."
});
notifier.notify({
'type': 'warning',
ms: 8000,
message: "This is another message, unrelated to the ajax request."
});
$.ajax({
url: 'https://www.google.com/dummy-url/?callback=?',
timeout: 2000,
dataType: 'jsonp',
complete: function(){
notifier.destroyAll('myAttr', 'ajaxLoader'); // attribute selector or no arguments to hide all instances
}
});Destroy Previous Notifications
notifier.notify({
'type': 'info',
modal: true,
loader: true,
message: "Loading..."
});
$.ajax({
url: 'https://www.google.com/dummy-url/?callback=?',
timeout: 2000,
dataType: 'jsonp',
complete: function(){
notifier.notify({
'type': 'success',
ms: 10000,
destroy: true, // destroy any existing notifications.
// can also pass attribute selector (e.g. ['loader', true] )
message: "Request completed.<br /> <strong>Notice how this notification caused " +
"previous notifications to disappear.</strong>"
});
}
});Modules
Backbone.Notifier also features light and simple extendability abilities using unique modules architecture.
Load a module: add a script tag with 'src' to its path, after <script type="text/javascript" src="js/Backbone.Notifier.js"></script>.
The module should call Notifier.regModule() (as described below).
Enable a module (after it has been loaded): call Backbone.Notifier.enableModule(moduleName).
Disable a module (after it has been loaded): call Backbone.Notifier.disableModule(moduleName).
Please note, modules are shared by all instances of Backbone.Notifier!
Demo: Logger module - logs notification info using console.log (hit F12 to check it out)
Demo: 3D module (requires modern browser)
Module Design - Logger Module (Example)
(function(Notifier, $){
Notifier.regModule({
name: 'logger', // Required.
enabled: true, // Optional. Whether you like the module to be auto-enabled upon registration (default: false).
extend: { // Optional. Data/functions to extend Backbone.Notifier.prototype
defaults: {
'showInLog': true
},
// Overriding existing function of Backbone.Notifier.prototype
// "this" refers to:
// {
// supr: function(){/* the function we override */},
// module: {/* this module */}},
// scope: {/* this context of the function we override (an *instance* of Backbone.Notifier) */}}
// }
// 'initialize' is called when instantiating a new Backbone.Notifier
initialize: function(){
this.scope._loggerNotifierId = ++this.module._notifiers;
this.module._log('initializing notifier #' + this.scope._loggerNotifierId);
return this.supr.apply(this.scope, arguments);
}
},
// Optional. Unique events accessible for modules, dynamic binding/unbinding is not supported (at the moment).
// In all event handlers, "this" refers to:
// {
// module: {/* this module */}},
// scope: {/* this context of the function we override (an *instance* of Backbone.Notifier) */}}
// }
events: {
'beforeAppendMsgEl': function(settings, msgEl, msgInner){
settings._loggerNotificationId = ++this.module._notifications;
settings.showInLog && this.module._log('beforeAppendMsgEl #' + settings._loggerNotificationId, settings);
},
'beforeAnimateInMsgEl': function(settings, msgEl, msgInner, msgView){
settings.showInLog && this.module._log('beforeAnimateInMsgEl #' + settings._loggerNotificationId, msgView);
},
'afterAnimateInMsgEl': function(settings, msgEl, msgInner, msgView){
settings.showInLog && this.module._log('afterAnimateInMsgEl #' + settings._loggerNotificationId, msgView);
},
'beforeHideMsgEl': function(settings, msgEl, msgInner, msgView){
settings.showInLog && this.module._log('beforeHideMsgEl #' + settings._loggerNotificationId, msgView);
},
'afterDestroyMsgEl': function(settings, msgEl, msgInner, msgView){
settings.showInLog && this.module._log('afterDestroyMsgEl #' + settings._loggerNotificationId, msgView);
}
},
// Helper function defined for this module.
_log: function(a, b){
a = 'logger: ' + a;
arguments.length >= 2 ? console.log(a, b) : console.log(a);
},
// Optional. Triggers immediately when Backbone.Notifier finishes the 'regModule' action
register: function(){
this._notifications = 0;
this._notifiers = 0;
this._log(this.name + ' module was registered');
},
// Optional. Called after module is enabled by Backbone.Notifier.enableModule(moduleName)
// or after registration when 'enabled' property is set to true.
enable: function(){
this._log(this.name + ' module was enabled');
},
// Optional. Called after module is disabled by Backbone.Notifier.disableModule(moduleName)
disable: function(){
this._log(this.name + ' module was disabled');
}
});
})(Backbone.Notifier, jQuery);