Background

My name is Eyal Weiss, I'm a web developer and UI/UX expert, currently focused in client-side frameworks, real time web and node.js and entrepreneur.

Backbone.Notifier was born as part of JSNAIL.IT (not live at the moment, maybe will revive it some day), an independent project I've worked on. It started as a component I were quite pleased with, and thought it may be also useful by others, so I've decided to add some features, make it completely independent and open it's source.

After years of working and using dozens of open-sourced projects, I'm glad to contribute to this amazing community and hope you'll find it useful. Feel free to contact me for any purpose.

What's new? Recent Commits from Github

Compatibility

Dependencies

  1. jQuery
  2. Backbone.js

Cross-Browser Support

Fully supports Internet Explorer 7+, all versions of Chrome, Firefox, Safari, Opera and more.

Download

Development Package

Download the full open-sourced packed, under the MIT license.

Build for Production

Selected resources will be combined to a single file.

Modules Javascript
Components
Themes CSS
Components

Installation

Instructions

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.

Usage

1. Initializate an instance of Backbone.Notifier

Create notifier (with default config - optional)
var notifier = new Backbone.Notifier({	// defaults
		el: 'body', 	// container for notification (default: 'body')
		baseCls: 'notifier',// css classes prefix, should match css file. Change to solve conflicts.
		theme: 'plastic',// default theme for notifications (available: 'plastic'/'clean').
		types: ['warning', 'error', 'info', 'success'],// available notification styles
		type: null, 	// default notification type (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 (0 to 1)
		width: undefined,// notification's width ('auto' if not set)
		modules: {...}// modules to register immediately
	});

2. Party

Notify by supplying a string or a config object
	nofitier.notify({message: 'Hello world!', ...}); //same options as in initialization,
							// will override the initialized defaults
	// can also supply string instead of options
	nofitier.notify('Hello world!');
				

Extendability (using 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).

To enable a module (after it has been loaded): call Backbone.Notifier.enableModule(moduleName).

To disable a module (after it has been loaded): call Backbone.Notifier.disableModule(moduleName).

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);

Examples

Basic

	notifier.notify("Hello World!");
	// Is equivalent to:
	//  notifier.notify({
	//    message: "Hello World!"
	//  });
	notifier.info("Hello World!");
	// Is equivalent to:
	//  notifier.notify({
	//    type: "info",
	//    message: "Hello World!"
	//  });
	notifier.warning("Hello World!");
	// Is equivalent to:
	//  notifier.notify({
	//    type: "warning",
	//    message: "Hello World!"
	//  });
	notifier.error("Hello World!");
	// Is equivalent to:
	//  notifier.notify({
	//    type: "error",
	//    message: "Hello World!"
	//  });
	notifier.success("Hello World!");
	// Is equivalent to:
	//  notifier.notify({
	//    type: "success",
	//    message: "Hello World!"
	//  });

Advanced

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: "I won't leave until you click me!",
	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: 'http://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: 'http://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: 'http://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: 'http://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>"
		});
	}
});