-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #932 from bartbutenaers/notification-confirmation
notification ui node enhancements
- Loading branch information
Showing
5 changed files
with
299 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <script type="text/html" data-help-name="ui-notification"> | ||
| <p> | ||
| Displays text/HTML in a small window, that will appear on the screen | ||
| a defined duration of time(out) at a defined location. | ||
| </p> | ||
| <p> | ||
| Each received <code>msg.payload</code> will update the value shown | ||
| inside the notification dialog (and the notification will be displayed). | ||
| </p> | ||
| <h3>Properties</h3> | ||
| <dl class="message-properties"> | ||
| <dt>Position <span class="property-type">list</span></dt> | ||
| <dd>The position on the screen whethere the notification will appear.</dd> | ||
| <dt>Color <span class="property-type">color</span></dt> | ||
| <dd>The color that should be used for the notification border.</dd> | ||
| <dt>Timeout <span class="property-type">number</span></dt> | ||
| <dd>Number of seconds before the notification will automatically close.</dd> | ||
| <dt>Show Countdown Bar <span class="property-type">boolean</span></dt> | ||
| <dd>Whether or not to show a reducing progress bar to indicate the time remaining.</dd> | ||
| <dt>Allow Manual Dismissal <span class="property-type">boolean</span></dt> | ||
| <dd>Whether or not to show a button that will allow the user to dismiss the notification.</dd> | ||
| <dt>Allow Manual Confirmation <span class="property-type">boolean</span></dt> | ||
| <dd>Whether or not to show a button that will allow the user to confirm the notification.</dd> | ||
| <dt>Accept Raw <span class="property-type">boolean</span></dt> | ||
| <dd>Whether you're passing in raw HTML that should be processed client-side.</dd> | ||
| </dl> | ||
| <h3>Dynamic Properties (Inputs)</h3> | ||
| <p>Any of the following can be appended to a <code>msg.ui_update</code> in order to override or set properties on this node at runtime.</p> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">allowConfirm<span class="property-type">boolean</span></dt> | ||
| <dd>Whether or not to show a button that will allow the user to confirm the notification.</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">allowDismiss<span class="property-type">boolean</span></dt> | ||
| <dd>Whether or not to show a button that will allow the user to dismiss the notification.</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">color<span class="property-type">string</span></dt> | ||
| <dd>The color that should be used for the notification border.</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">confirmText<span class="property-type">string</span></dt> | ||
| <dd>The text that will displayed on the confirmation button.</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">dismissText<span class="property-type">string</span></dt> | ||
| <dd>The text that will displayed on the dismiss button.</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">displayTime<span class="property-type">number</span></dt> | ||
| <dd>Number of seconds before the notification will automatically close. Note: this needs to be overridden before the notification becomes visible!</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">position<span class="property-type">string</span></dt> | ||
| <dd> | ||
| The position on the screen whethere the notification will appear. | ||
| <ul> | ||
| <li><code>top right</code></li> | ||
| <li><code>top center</code></li> | ||
| <li><code>top left</code></li> | ||
| <li><code>bottom right</code></li> | ||
| <li><code>bottom center</code></li> | ||
| <li><code>bottom left</code></li> | ||
| <li><code>center center</code></li> | ||
| </ul> | ||
| </dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">raw<span class="property-type">boolean</span></dt> | ||
| <dd>Whether you're passing in raw HTML that should be processed client-side.</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">show<span class="property-type">boolean</span></dt> | ||
| <dd>Whether you want to show (even when no <code>msg.payload</code> available) or hide the notification.</dd> | ||
| </dl> | ||
| <dl class="message-properties"> | ||
| <dt class="optional">showCountdown<span class="property-type">boolean</span></dt> | ||
| <dd>Whether or not to show a reducing progress bar to indicate the time remaining.</dd> | ||
| </dl> | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,70 @@ | ||
| const statestore = require('../store/state.js') | ||
|
|
||
| module.exports = function (RED) { | ||
| function NotificationNode (config) { | ||
| const node = this | ||
|
|
||
| RED.nodes.createNode(this, config) | ||
|
|
||
| // which group are we rendering this widget | ||
| // Which ui are we rendering this widget. | ||
| // In contradiction to other ui nodes (which belong to a group), the notification node belongs to a ui instead. | ||
| const ui = RED.nodes.getNode(config.ui) | ||
|
|
||
| const evts = { | ||
| onAction: true, | ||
| beforeSend: function (msg) { | ||
| if (msg.ui_update) { | ||
| const updates = msg.ui_update | ||
|
|
||
| const allowedPositions = ['top right', 'top center', 'top left', 'bottom right', 'bottom center', 'bottom left', 'center center'] | ||
|
|
||
| if (updates) { | ||
| if (typeof updates.allowConfirm !== 'undefined') { | ||
| // dynamically set "allowConfirm" property | ||
| statestore.set(ui, node, msg, 'allowConfirm', updates.allowConfirm) | ||
| } | ||
| if (typeof updates.allowDismiss !== 'undefined') { | ||
| // dynamically set "allowDismiss" property | ||
| statestore.set(ui, node, msg, 'allowDismiss', updates.allowDismiss) | ||
| } | ||
| if (typeof updates.color !== 'undefined') { | ||
| // dynamically set "color" property | ||
| statestore.set(ui, node, msg, 'color', updates.color) | ||
| } | ||
| if (typeof updates.confirmText !== 'undefined') { | ||
| // dynamically set "confirmText" property | ||
| statestore.set(ui, node, msg, 'confirmText', updates.confirmText) | ||
| } | ||
| if (typeof updates.dismissText !== 'undefined') { | ||
| // dynamically set "dismissText" property | ||
| statestore.set(ui, node, msg, 'dismissText', updates.dismissText) | ||
| } | ||
| if (typeof updates.displayTime !== 'undefined') { | ||
| // dynamically set "displayTime" property | ||
| statestore.set(ui, node, msg, 'displayTime', updates.displayTime) | ||
| } | ||
| if (typeof updates.position !== 'undefined' && allowedPositions.includes(updates.position)) { | ||
| // dynamically set "position" property | ||
| statestore.set(ui, node, msg, 'position', updates.position) | ||
| } | ||
| if (typeof updates.raw !== 'undefined') { | ||
| // dynamically set "raw" property | ||
| statestore.set(ui, node, msg, 'raw', updates.raw) | ||
| } | ||
| if (typeof updates.showCountdown !== 'undefined') { | ||
| // dynamically set "showCountdown" property | ||
| statestore.set(ui, node, msg, 'showCountdown', updates.showCountdown) | ||
| } | ||
| // Note that update.close will NOT be stored in the data store, | ||
| // since it does not need to be remembered | ||
| } | ||
| } | ||
| return msg | ||
| } | ||
| } | ||
|
|
||
| // inform the dashboard UI that we are adding this node | ||
| ui.register(null, null, node, config) | ||
| ui.register(null, null, node, config, evts) | ||
| } | ||
| RED.nodes.registerType('ui-notification', NotificationNode) | ||
| } |
Oops, something went wrong.