Repository files navigation

Notification.js is a standalone ES6 module that allows you to easily handle several notifications from different types at the same time. It features a lot of options so you can customize it.

Notification.js handles four different types of notifications :Success,Info,Warning andError.

The first step for you to get started withNotification.js is to copy both thedist/Notification.min.js anddist/notification.min.css files in your code base. Once pasted, don't forget to include the style and the script in your HTML page.Notification.js is ready to be used.

With ~18Ko minified,Notification.js is designed to be stable and remain as light as possible. It is meant to be used application wide.

To makeNotification.js work, you must call for a new notification handler. It will handle all new notifications coming to the stack, with their specificities. Attach preferably this handler to the window object, so you can access it from anywhere in your app:

importNotificationfrom'path/to/Notification.js';window.notification=newNotification();

Now that the handler is set, you can call for new notifications anywhere, at anytime using the following calls:

window.notification.success({message:'Great success!'});window.notification.info({message:'Much info, very text'});window.notification.warning({message:'Snake?'});window.notification.error({message:'Snaaaaaaaake!'});

The message string passed ismandatory. Forget to pass it and you will raise an error in the console.

The Notification constructor can take an options object with the following attributes :

importNotificationfrom'path/to/Notification.js';window.notification=newNotification({position:'top-left',thickBorder:'bottom',duration:2000,transition:100,maxActive:5});

The handler is now ready with your custom settings. To call for a new notification, you can still use the typed methods.success(),.info(),.warning() and.error() fromBasic Usage, but you can also use the.new() method :

letid=window.notification.new({type:'info',// Mandatorytitle:'My test notification',message:'My test message.',// MandatorythickBorder:'top',iconless:false,closable:true,sticky:true,renderTo:document.body,CBtitle:'My callback',callback:()=>{alert('Called from my test notification');}});

The only difference with the typed methods is that with the.new() method, you must give it a type beside giving it a message: those are the two required options to create a standard notification. You can also pass this options object to the typed methods.

As for the typed methods, thenew() method return the notification ID, in case you want some manual control over your notifications, this is why we store it in theid variable. Using this ID, you can dismiss a specific notification :

window.notification.dismiss(id);

Or dismiss them all :

window.notification.dismissAll();

Or dismiss them by type :

window.notification.dismissType('error');

Finally, if you want to clear the Notification singleton, use thedestroy() method on the handler :

window.notification.destroy();

You're now good to go! If however you need more information, you can read the onlinedocumentation.

If you clone this repository, you cannpm install to install development dependencies. This will allow you to build dist file, run the component tests or generate the documentation ;

• npm run build to generate the minified file ;
• npm run dev to watch for any change in source code ;
• npm run web-server to launch a local development server ;
• npm run doc to generate documentation ;
• npm run test to perform all tests at once ;
• npm run testdev to keep browsers open to debug tests ;
• npm run beforecommit to perform tests, generate doc and bundle the JavaScript.

To avoid CORS when locally loading the example HTML file, run the web server. Please do not use it on a production environment. Unit tests are performed on both Firefox and Chrome ; ensure you have both installed before running tests, otherwise they might fail.

If you have any question or idea, feel free to DM or open an issue (or even a PR, who knows) ! I'll be glad to answer your request.