Notification plugin

Frontfire UI provides a notification that overlays the page and disappears after a short while. It can be used to display quick status messages like success or completion of a requested operation.

This plugin is available in the Minimal and Complete bundles.

Description

A notification is a small text panel that appears at the top of the window. This is comparable to Toast messages on Android. It can have different colours depending of the type of message. Multiple concurrent notifications stack vertically. Usually, a notification automatically disappears after a short moment, or when it is clicked before the timeout, but it can be set to permanent, too. Notifications are less abtrusive than modal messages because they are smaller, usually out of the way and do not require any attention or confirmation. They should not be used for messages that should not go unnoticed because they might be missed.

The colours of the notification types are the same as for the Message plugin. The timeout progress bar can be adjusted to the colours with the --notification-bar-critical-opacity, --notification-bar-error-opacity, --notification-bar-warning-opacity, --notification-bar-information-opacity and --notification-bar-success-opacity CSS variables.

On pages with a dark header, the visibility of notifications can be improved by shifting them down under the header. This offset can be set with the --notification-top-base CSS variable. Additionally, the Z-index can be set with the --notification-z-index variable to put it just below the fixed header.

Usage

To show a notification, call the Frontfire.notify() plugin function. It is a static method and does not operate on any HTML elements. The function takes 3 arguments:

1. The plain text to display. This may contain HTML special characters or line breaks.
2. The display style: “critical”, “error”, “warning”, “information”, “success” or other. Unknown or unset values render as “information”.
3. An object with additional options:
   • timeout: The timeout to automatically hide the notification, in milliseconds. Default: 8000
   • quick: Changes the default timeout to 3000.
   • permanent: If true, the notification has no timeout and cannot be closed by the user.
   • onclose: A callback function that is called when the notification is closed. It receives the close reason as first argument (“click”, “timeout”).

The returned object contains methods and properties to manipulate the notification:

• close(reason): Closes the notification. Can be called at any time. The reason parameter is passed to the onclose callback.
• isOpen: Determines whether the notification is still open. This property is read-only.

Example