Notification.js – Version 1.1.0

Made to let you focus on anything else that is not the user feedback. It was designed using the KISS (Keep It Simple Stupid!) spirit to make the less effort implementing it. Don't forget to link the stylesheet and the Javascript class in your project.

If you want to try it out now, and skip the setup parts, please click here to be moved to the API sandbox.

Basic setup:

Once assets are safely linked to your project, you can initialize a Notification object. This object is both the notification handler and the notification itself, which means you won't have several object to create. We recommend that you attach the newly created Notification object to the window DOM object as follow, so you can access it from anywhere.

window.notification = new Notification();

That's it! Now all you have to do is to call for a typed notification when needed:

notification.success({ message: 'Success notification' });
notification.info({ message: 'Info notification' });
notification.warning({ message: 'Warning notification' });
notification.error({ message: 'Error notification' });

Try it out!

Advanced setup:

If you want to customize notifications and their behavior, you can also pass an options object that will contain some useful attributes to tweak. Let's start again, with a new notification handler. The values used here are the default ones.

Notification handler settings

Code sample:

window.notification = new Notification({
    position: 'top-right',
    thickBorder: 'top',
    duration: 5000,
    transition: 200,
    maxActive: 10,
    imgPath: './img/'
});

These values are the default ones that will be used if you don't provide any options object to the Notification constructor, like in the basic setup section.

Key: position - The container position relative to the viewport.
Value: top-left top-right bottom-left bottom-right

Key: thickBorder - The location of a thicker border in the notification.
Value: left right top bottom none

Key: duration - The on-screen time in milliseconds the notification will remain visible.
Value: Number > 0

Key: transition - The fade in and out timing in milliseconds.
Value: Number > 0 && Number < (duration / 2)

Key: maxActive - The maximum number of active notifications.
Value: Number > 0

Key: imgPath - The path to the image folder.
Value: String (os path)

Once the notification handler is customly setted up, you can also call for custom notifications using the new() public method that also can take an options object:

Notification settings

Code sample:

let id = window.notification.new({
   type: 'info',
   title: '',
   message: 'Lorem ipsum dolor sit amet.',
   duration: 5000,
   iconless: false,
   thickBorder: 'top'
   closable: true,
   sticky: false,
   renderTo: document.body,
   CBtitle: 'My callback',
   callback: function() {
       alert('Called from my notification');
   }
});

Please mind to give a type and a message otherwise, the notification handler will raise an error. These are not the default values, they are just here to stand as an use case example.

Key: type - The notification type.
Value: success info warning error - MANDATORY

Key: title - The notification title.
Value: String

Key: message - The notification message.
Value: String - MANDATORY

Key: duration - The notification duration.
Value: Number > 0

Key: iconless - No icon in the notification.
Value: Boolean

Key: thickBorder - The location of the thicker border in the notification.
Value: left right top bottom none

Key: closable - Allow user to close the notification.
Value: Boolean

Key: sticky - Dismissable notification only on user action.
Value: Boolean

Key: renderTo - The DOM object to render the notification in.
Value: Object

Key: CBTitle - The callback label in the notification.
Value: String

Key: callback - Add a callback button in the notification.
Value: Function

Notification playground:

Type:
Title:
Message:
Duration:
Iconless:
Thick border:
Closable:
Sticky:
Render to:
Callback title:
Alert callback:

Use Elsewhere in the 'Render to' select menu tu make a notification appear here.

Going further:

You're now good to go! If however you need more information, you can read the online documentation. Now that your are familliar with the Notification system, here are several other customization that you can do :

You can set your own notification special variables in the notification.scss file to obtain a fully personnalized notification system: margin, padding, icon size, border sizes and width.

If you intend to change the color values in the notification.scss file, beware to change them accordingly in the Notification.js constructor, in the this._default object since they are used on both file for different purpose.

Finally, feel free to contribute to this project by openning an issue or by making a pull request! Check out the GitHub repository.

Arthur Beaulieu – October 2020