NotificationUI API
The global NotificationUI can be used to create popup notifications over dom elements or generics app notifications.
A global window.EventManager
object is made available in phoenix that can be called anytime after AppStart.
This global can be triggered from anywhere without using require context.
For Eg. Let's say we have to create a popup notification over the HTML element with ID showInfileTree
.
We can do this with the following
const NotificationUI = brackets.getModule("widgets/NotificationUI");
// or use window.NotificationUI global object has the same effect.
let notification = NotificationUI.createFromTemplate("Click me to locate the file in file tree", "showInfileTree",{});
notification.done(()=>{
console.log("notification is closed in ui.");
})
Another advanced example where you can specify html and interactive components in the notification
// note that you can even provide an HTML Element node with
// custom event handlers directly here instead of HTML text.
let notification1 = NotificationUI.createFromTemplate(
"<div>Click me to </br>locate the file in file tree</div>", "showInfileTree",{
allowedPlacements: ['top', 'bottom'],
dismissOnClick: false,
autoCloseTimeS: 300 // auto close the popup after 5 minutes
});
// do stuff
notification1.done((closeReason)=>{
console.log("notification is closed in ui reason:", closeReason);
})
The createFromTemplate API can be configured with numerous options. See API options below.
This section outlines the properties and methods available in this module
This is an instance of the notification returned by the createFromTemplate
call. The object can be used to
control the created notification. See Notification docs below.
Type: Object
Closes the Notification if is visible and destroys then dom nodes
Type: function
-
closeType
string an optional reason as to why the notification is closed.
Adds a done callback to the Notification promise. The promise will be resolved when the Notification is dismissed. Never rejected.
Type: function
Print the close reason on console when the notification closes
notificationInstance.done((closeReason)=>{
console.log(closeReason)
})
Creates a new notification popup from given template. The template can either be a string or a jQuery object representing a DOM node that is not in the current DOM.
Type: function
-
template
(string | Element) A string template or HTML Element to use as the dialog HTML. -
elementID
String? optional id string if provided will show the notification pointing to the element. If no element is specified, it will be managed as a generic notification. -
options
Object? optional, supported* options are:-
allowedPlacements
- Optional String array with values restricting where the notification will be shown. Values can be a mix of['top', 'bottom', 'left', 'right']
-
autoCloseTimeS
- Time in seconds after which the notification should be auto closed. Default is never. -
dismissOnClick
- when clicked, the notification is closed. Default is true(dismiss). (optional, default{}
)
-
Creating a notification popup
// note that you can even provide an HTML Element node with
// custom event handlers directly here instead of HTML text.
let notification1 = NotificationUI.createFromTemplate(
"<div>Click me to </br>locate the file in file tree</div>", "showInfileTree",{
allowedPlacements: ['top', 'bottom'],
dismissOnClick: false,
autoCloseTimeS: 300 // auto close the popup after 5 minutes
});
Returns Notification Object with a done handler that resolves when the notification closes.
Creates a new toast notification popup from given title and html message. The message can either be a string or a jQuery object representing a DOM node that is not in the current DOM.
Type: function
-
title
string The title for the notification. -
template
(string | Element) A string template or HTML Element to use as the dialog HTML. -
options
{dismissOnClick, autoCloseTimeS, toastStyle}? optional, supported* options are:-
autoCloseTimeS
- Time in seconds after which the notification should be auto closed. Default is never. -
dismissOnClick
- when clicked, the notification is closed. Default is true(dismiss). -
toastStyle
- To style the toast notification for error, warning, info etc. Can be one ofNotificationUI.NOTIFICATION_STYLES_CSS_CLASS.*
or your own css class name. (optional, default{}
)
-
Creating a toast notification popup
// note that you can even provide an HTML Element node with
// custom event handlers directly here instead of HTML text.
let notification1 = NotificationUI.createToastFromTemplate( "Title here",
"<div>Click me to </br>locate the file in file tree</div>", {
dismissOnClick: false,
autoCloseTimeS: 300 // auto close the popup after 5 minutes
});
Returns Notification Object with a done handler that resolves when the notification closes.