You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 exampleFor 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
9
+
The global NotificationUI can be used to create popup notifications over dom elements or generics app notifications.
10
+
11
+
A global `window.EventManager` object is made available in phoenix that can be called anytime after AppStart.
12
+
This global can be triggered from anywhere without using require context.
13
+
14
+
## Usage
15
+
### Simple example
16
+
For Eg. Let's say we have to create a popup notification over the HTML element with ID `showInfileTree`.
17
+
We can do this with the following
10
18
11
19
**Example**
12
-
```jsconst 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 exampleAnother advanced example where you can specify html and interactive components in the notification
// or use window.NotificationUI global object has the same effect.
23
+
let notification =NotificationUI.createFromTemplate("Click me to locate the file in file tree", "showInfileTree",{});
24
+
notification.done(()=>{
25
+
console.log("notification is closed in ui.");
26
+
})
27
+
```
28
+
### Advanced example
29
+
Another advanced example where you can specify html and interactive components in the notification
13
30
**Example**
14
-
```js// 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 stuffnotification1.done((closeReason)=>{ console.log("notification is closed in ui reason:", closeReason);})```The `createFromTemplate` API can be configured with numerous options. See API options below.
31
+
```js
32
+
// note that you can even provide an HTML Element node with
33
+
// custom event handlers directly here instead of HTML text.
34
+
let notification1 =NotificationUI.createFromTemplate(
35
+
"<div>Click me to locate the file in file tree</div>", "showInfileTree",{
36
+
allowedPlacements: ['top', 'bottom'],
37
+
dismissOnClick:false,
38
+
autoCloseTimeS:300// auto close the popup after 5 minutes
39
+
});
40
+
// do stuff
41
+
notification1.done((closeReason)=>{
42
+
console.log("notification is closed in ui reason:", closeReason);
43
+
})
44
+
```
45
+
The `createFromTemplate` API can be configured with numerous options. See API options below.
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```js// 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 });```
95
+
Creates a new notification popup from given template.
96
+
The template can either be a string or a jQuery object representing a DOM node that is *not* in the current DOM.
97
+
98
+
Creating a notification popup
99
+
100
+
```js
101
+
// note that you can even provide an HTML Element node with
102
+
// custom event handlers directly here instead of HTML text.
103
+
let notification1 =NotificationUI.createFromTemplate(
104
+
"<div>Click me to locate the file in file tree</div>", "showInfileTree",{
105
+
allowedPlacements: ['top', 'bottom'],
106
+
dismissOnClick:false,
107
+
autoCloseTimeS:300// auto close the popup after 5 minutes
108
+
});
109
+
```
64
110
65
111
**Kind**: inner method of [<code>widgets/NotificationUI</code>](#module_widgets/NotificationUI)
66
112
**Returns**: <code>Notification</code> - Object with a done handler that resolves when the notification closes.
@@ -75,7 +121,20 @@ Creates a new notification popup from given template.The template can either be
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```js// 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 });```
124
+
Creates a new toast notification popup from given title and html message.
125
+
The message can either be a string or a jQuery object representing a DOM node that is *not* in the current DOM.
126
+
127
+
Creating a toast notification popup
128
+
129
+
```js
130
+
// note that you can even provide an HTML Element node with
131
+
// custom event handlers directly here instead of HTML text.
132
+
let notification1 =NotificationUI.createToastFromTemplate( "Title here",
133
+
"<div>Click me to locate the file in file tree</div>", {
134
+
dismissOnClick:false,
135
+
autoCloseTimeS:300// auto close the popup after 5 minutes
136
+
});
137
+
```
79
138
80
139
**Kind**: inner method of [<code>widgets/NotificationUI</code>](#module_widgets/NotificationUI)
81
140
**Returns**: <code>Notification</code> - Object with a done handler that resolves when the notification closes.
@@ -89,7 +148,15 @@ Creates a new toast notification popup from given title and html message.The me
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.```jsNotificationUI.showToastOn(document.getElementById("my-panel"), "Hello!", { autoCloseTimeS: 5, dismissOnClick: true});```
151
+
Shows a small, transient inline toast notification inside a given DOM container.
152
+
The toast is centered at the bottom of the container and auto-dismisses.
**Kind**: inner method of [<code>widgets/NotificationUI</code>](#module_widgets/NotificationUI)
95
162
**Returns**: <code>Notification</code> - Object with a done handler that resolves when the toast closes.
@@ -100,3 +167,23 @@ Shows a small, transient inline toast notification inside a given DOM container.
100
167
| template | <code>string</code> \| <code>Element</code> | HTML string or DOM Element for the toast content. |
101
168
|[options]| <code>Object</code> | 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. |
0 commit comments