Making Dashboard Dialogs
Starting with NodeCG 0.7, all dashboard panels are iframes. This was done to provide full code and style encapsulation, eliminating the need for bundle authors to worry about what they are putting into the global scope with their panel. However, because every panel is an iframe, it is not possible for a panel to draw anything outside of its bounding box. This limitation made having dialogs and modals impossible, among other things. To address this, we created a dedicated system for displaying dialogs.
A dialog is defined the same as any other dashboard panel would be in package.json, with an
additional dialog: true
property.
Opening dialogs
To open a dialog, add a nodecg-dialog
attribute to any clickable element on one of your panels. For example, this
<paper-button>
element will open the edit-total
dialog when clicked:
<paper-button id="edit" class="nodecg-configure" nodecg-dialog="edit-total">Edit...</paper-button>
When a dialog is opened, NodeCG will emit a dialog-opened
event on your dialog's document
. For example:
<!-- bundles/my-bundle/dashboard/my-dialog.html -->
<script>
document.addEventListener('dialog-opened', function() {
// The user opened the dialog.
});
</script>
Closing dialogs
By default, a dialog can only be closed by clicking outside of it. Optional confirmation and dismissal buttons can be
added via package.json
. See the package.json tutorial for information on the dialogButtons
property.
When a confirm
or dismiss
button is pressed, NodeCG will emit a dialog-confirmed
or dialog-dismissed
event
on your dialog's document
. For example:
<!-- bundles/my-bundle/dashboard/my-dialog.html -->
<script>
document.addEventListener('dialog-confirmed', function() {
// The user pressed the confirm button.
});
document.addEventListener('dialog-dismissed', function() {
// The user pressed the dismiss button.
});
</script>