NotificationUI

Import :

const NotificationUI = brackets.getModule("widgets/NotificationUI")

widgets/NotificationUI

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.

Usage

Simple example

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

Example

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.");
})

Advanced example

Another advanced example where you can specify html and interactive components in the notification Example

// 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 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.

• widgets/NotificationUI
  • .API
  • .NOTIFICATION_STYLES_CSS_CLASS : enum
  • .CLOSE_REASON : enum
  • .createFromTemplate(title, template, [elementID], [options]) ⇒ Notification
  • .createToastFromTemplate(title, template, [options]) ⇒ Notification
  • .showToastOn(containerOrSelector, template, [options]) ⇒ Notification
  • .showHUD(iconClass, label, [options]) ⇒ Notification
  • .hideRichTooltip() : function
  • .attachRichTooltip(elements, html, [options]) ⇒ Object

widgets/NotificationUI.API

This section outlines the properties and methods available in this module

Kind: inner property of widgets/NotificationUI

widgets/NotificationUI.NOTIFICATION_STYLES_CSS_CLASS : enum

CSS class names for notification styles.

Kind: inner enum of widgets/NotificationUI
Properties

Name	Type	Default
INFO	string	"style-info"
WARNING	string	"style-warning"
SUCCESS	string	"style-success"
ERROR	string	"style-error"
DANGER	string	"style-danger"
SUBTLE	string	"style-subtle"

widgets/NotificationUI.CLOSE_REASON : enum

Closing notification reason.

Kind: inner enum of widgets/NotificationUI
Properties

Name	Type	Default
TIMEOUT	string	"closeTimeout"
CLICK_DISMISS	string	"clickDismiss"
CLOSE_BTN_CLICK	string	"closeBtnClick"

widgets/NotificationUI.createFromTemplate(title, template, [elementID], [options]) ⇒ Notification

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.

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 locate the file in file tree</div>", "showInfileTree",{
      allowedPlacements: ['top', 'bottom'],
      dismissOnClick: false,
      autoCloseTimeS: 300 // auto close the popup after 5 minutes
  });

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the notification closes.

Param	Type	Description
title	string	The title for the notification.
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). * toastStyle - To style the toast notification for error, warning, info etc. Can be one of NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.* or your own css class name.

widgets/NotificationUI.createToastFromTemplate(title, template, [options]) ⇒ Notification

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.

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 locate the file in file tree</div>", {
      dismissOnClick: false,
      autoCloseTimeS: 300 // auto close the popup after 5 minutes
  });

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the notification closes.

Param	Type	Description
title	string	The title for the notification.
template	string | Element	A string template or HTML Element to use as the dialog HTML.
[options]	Object	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 of NotificationUI.NOTIFICATION_STYLES_CSS_CLASS.* or your own css class name. * instantOpen - To instantly open the popup without any open animation delays

widgets/NotificationUI.showToastOn(containerOrSelector, template, [options]) ⇒ Notification

Shows a small, transient inline toast notification inside a given DOM container. The toast is centered at the bottom of the container and auto-dismisses.

NotificationUI.showToastOn(document.getElementById("my-panel"), "Hello!", {
    autoCloseTimeS: 5,
    dismissOnClick: true
});

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the toast closes.

Param	Type	Description
containerOrSelector	Element | string	A DOM element or CSS selector for the parent container. The container should have position: relative or absolute so the toast is positioned correctly.
template	string | Element	HTML string or DOM Element for the toast content.
[options]	Object	optional, supported options: * autoCloseTimeS - Time in seconds after which the toast auto-closes. Default is 5. * dismissOnClick - If true, clicking the toast dismisses it. Default is true.

widgets/NotificationUI.showHUD(iconClass, label, [options]) ⇒ Notification

Shows a large, centered HUD overlay (like macOS volume/brightness indicator) with an icon and label. The HUD fades in/out and auto-dismisses. Only one HUD is shown at a time — calling this while a previous HUD is visible replaces it instantly.

NotificationUI.showHUD("fa-solid fa-magnifying-glass-plus", "110%");

Kind: inner method of widgets/NotificationUI
Returns: Notification - Object with a done handler that resolves when the HUD closes.

Param	Type	Description
iconClass	string	Font Awesome class string for the icon (e.g. "fa-solid fa-magnifying-glass-plus").
label	string	Text to display below the icon (e.g. "110%").
[options]	Object	optional, supported options: * autoCloseTimeS - Time in seconds after which the HUD auto-closes. Default is 1.

widgets/NotificationUI.hideRichTooltip() : function

Hide the currently showing rich tooltip (if any).

Kind: inner method of widgets/NotificationUI

widgets/NotificationUI.attachRichTooltip(elements, html, [options]) ⇒ Object

Attaches a rich (HTML-capable) hover tooltip to the given element(s). The tooltip is Phoenix-themed for both light and dark themes, positioned beside the element, clamped to the viewport, and attached to <body> so scrolling containers cannot clip it.

NotificationUI.attachRichTooltip($(".my-info-icon"), "<b>Hello</b> world");
// or compute content per element on show:
NotificationUI.attachRichTooltip($(".my-info-icon"), el => $(el).attr("data-info"));

Kind: inner method of widgets/NotificationUI
Returns: Object - call detach() to unbind the handlers and hide the tooltip

Param	Type	Description
elements	jQuery | Element | string	element(s) or selector to attach to
html	string | function	TRUSTED html string (escape untrusted parts yourself), or a function returning it for the hovered element
[options]	Object	optional, supported options: * showDelayMs - hover delay before the tooltip appears. Default 250.