v1.0.0: ES6 Refactor, Notification Positions, Custom Notification Wrappers
Use Babel to leave snarl.js as ES5-compatible code, but then have the source written in OO-friendly ES6 (which those who love ES6 could use). So each notification would be its own SnarlNotification object, rather than using a string id, which is easier to debug and use.
It also means notifications can now be properly destroyed in memory, rather than every…
Use Babel to leave snarl.js as ES5-compatible code, but then have the source written in OO-friendly ES6 (which those who love ES6 could use). So each notification would be its own SnarlNotification object, rather than using a string id, which is easier to debug and use.
It also means notifications can now be properly destroyed in memory, rather than every notification being kept in memory in case any of the IDs are re-opened. From a software design perspective, moving to a more OO-friendly ES6 implementation is much cleaner. This also means Snarl.exists() and Snarl.isDismissed() don't constantly need checked.
API Proposal
| JS Functions | Description |
|---|---|
Snarl.openNotification(options, htmlTemplate) |
Would build and return a SnarlNotification object (notification), and inject it into a snarl-wrapper to display it on the screen. |
Snarl.setDefaultOptions(options, htmlTemplate) |
Set the default HTML template, and options for notifications |
notification.open() |
re-open the notification on the web page, or reset the timer if it's already open |
notification.edit(options) |
edit the title/text/etc. of the notification in a similar manner to the current Snarl.editNotification() |
notification.close() |
dismiss a notification through JS. |
notification.isOpen() |
check if a notification is currently being displayed. |
The notification's clicked callback function will now change to become function(e, notification) where e is the JS click event, and notification is the SnarlNotification object which was clicked.
Position Proposal
Allow the user to specify a position by having multiple #snarl-wrapper-xs (x being: top, left, top-left etc.) that are only injected into the HTML when they don't exist. The user can use an string in the notification options for where they want the notification to display. These #snarl-wrappers will also all make use of the new Custom Notification Wrappers, detailed next.
Custom Notification Wrappers
Custom notification wrappers will allow developers to integrate Snarl into notification sidebars for example, allowing developers to specify elements which hold notifications inside their apps. These elements can:
- Override whether a notification is dismissible or not (for sidebars holding past notifications)
- Override a notification's timeout
- Specify/override notification HTML templates (change structure and custom classes for animations)
- Choose whether this element will automatically include all notifications.
- Specify which classes are automatically added to the notification template. (Allow current and past wrappers to share the same template, but have different CSS applied).
- Pre-populate the notifications with past notifications loaded from the server.
- Have a scrolled-to-bottom callback to allow more past notifications to be loaded and injected into the wrapper.
- Specify where new notifications are added, and past notifications are added (pre- or appended).
Notification wrappers will come in two variants:
- Current Wrappers: intended to hold dismissible notifications for a temporary period.
- Past Wrappers*: intended to hold all past notifications (in a sidebar for example), all notifications are placed here without a timeout. Whether they're dismissible can be configured. Optionally use an overridden HTML template.
It must be simple to pre-populate a specific notification wrapper (in particular past wrappers), and also to have a callback when the user has scrolled to the bottom, so that more past notifications can be loaded server-side. (And post-populated into the wrapper). Notifications just added go to the top/"front" of the past notification wrapper (prepended), whereas JSON loaded notifications would be added to the back (appended) (which is pre/appended can be changed too). There may be a requirement to have different classes added to prepended and appended notifications if animations are in use.
Site Redesign
It needs to be [significantly] prettier. The current site is okay, some aspects are reasonably nice, but using UIKit or Semantic UI, along with a nice nav and a few animations would improve it vastly.