lightalertjs
v1.0.0
Published
A lightweight notification javascript library
Downloads
3
Maintainers
Readme
LightAlertJS
A lightweight javascript notification library with customisable templates and layout in just 3kB.
Start by creating a service provider
var notificationService = new NotificationService({
$elem: $("#notification-stack")
});
Then use service to create notifications
notificationService.notify("Hello world!")
Add an image to the notification:
notificationService.notify("Hello world!", "https://example.com/hello.svg")
Add a class, in this case changing background and text:
notificationService.notify("Hello world!", "https://example.com/hello.svg", "bg-black")
notificationService.notify("Hello world!", "https://example.com/hello.svg", "bg-success")
notificationService.notify("Hello world!", "https://example.com/hello.svg", "bg-warning")
notificationService.notify("Hello world!", "https://example.com/hello.svg", "bg-error")
notificationService.notify("Hello world!", "https://example.com/hello.svg", "bg-info")
notificationService.notify("Hello world!", "https://example.com/hello.svg", "bg-primary")
Add a debounce timer to the service, preventing the user from receiving a notification more than once per x seconds. Makes use of sessionStorage to persist timer countdown across page loads.
var notificationService = new NotificationService({
$elem: $("#notification-stack"),
debounce_seconds: 10
});
Change the template:
var notificationService = new NotificationService({
$elem: $("#notification-stack"),
template: "<div class='notification {{class}} id='{{uid}}'><img src='{{imageUrl}}'>{{content}}</div>'"
});
Change whether new notifications are appended or prepended to the stack:
var notificationService = new NotificationService({
$elem: $("#notification-stack"),
append: false
});
These settings can be changed after instantiation via properties:
notificationService.debounce_seconds = 5;
Requirements
- Bootstrap 3.3 (For default template, no CSS requirements if you provide your own)
- jQuery 1.8+