158 lines
7.7 KiB
HTML
158 lines
7.7 KiB
HTML
<style>
|
|
#ui-chart-colors input[type="color"] {
|
|
font-weight: bold;
|
|
}
|
|
#ui-chart-colors input[type="color"]::-webkit-color-swatch,
|
|
#ui-chart-colors input[type="color"]::-moz-color-swatch {
|
|
border: none;
|
|
}
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
(function () {
|
|
RED.nodes.registerType('ui-notification', {
|
|
category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
|
|
color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
|
|
defaults: {
|
|
ui: { type: 'ui-base', value: '', required: true },
|
|
position: { value: 'top right' },
|
|
colorDefault: { value: true },
|
|
color: { value: null },
|
|
displayTime: { value: '3' },
|
|
showCountdown: { value: true },
|
|
outputs: { value: 1 },
|
|
allowDismiss: { value: true },
|
|
dismissText: { value: 'Close' },
|
|
allowConfirm: { value: false },
|
|
confirmText: { value: 'Confirm' },
|
|
raw: { value: false },
|
|
className: { value: '' },
|
|
name: { value: '' }
|
|
},
|
|
inputs: 1,
|
|
outputs: 1,
|
|
align: 'right',
|
|
icon: 'font-awesome/fa-envelope-o',
|
|
paletteLabel: 'notification',
|
|
label: function () { return this.name || (this.position === 'prompt' ? 'show dialog' : (this.position === 'dialog' ? 'show dialog' : 'show notification')) },
|
|
labelStyle: function () { return this.name ? 'node_label_italic' : '' },
|
|
oneditprepare: function () {
|
|
$('#node-input-topic').typedInput({
|
|
default: 'str',
|
|
typeField: $('#node-input-topicType'),
|
|
types: ['str', 'msg', 'flow', 'global']
|
|
})
|
|
|
|
$('#node-input-allowDismiss').on('change', function () {
|
|
const allowDismiss = $('#node-input-allowDismiss').is(':checked')
|
|
if (allowDismiss) {
|
|
$('#node-notification-dismissText').show()
|
|
} else {
|
|
$('#node-notification-dismissText').hide()
|
|
}
|
|
})
|
|
|
|
$('#node-input-allowConfirm').on('change', function () {
|
|
const allowConfirm = $('#node-input-allowConfirm').is(':checked')
|
|
if (allowConfirm) {
|
|
$('#node-notification-confirmText').show()
|
|
} else {
|
|
$('#node-notification-confirmText').hide()
|
|
}
|
|
})
|
|
|
|
$('#node-input-colorDefault').on('change', function () {
|
|
const defaultColor = $('#node-input-colorDefault').is(':checked')
|
|
if (defaultColor) {
|
|
$('#node-input-color').hide()
|
|
} else {
|
|
$('#node-input-color').show()
|
|
}
|
|
})
|
|
|
|
// use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
|
|
$('.ui-node-popover-title').tooltip({
|
|
show: {
|
|
effect: 'slideDown',
|
|
delay: 150
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})()
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui-notification">
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
<input type="text" id="node-input-name" placeholder="Name">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-ui"><i class="fa fa-bookmark"></i> UI</label>
|
|
<input type="text" id="node-input-ui">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-position"><i class="fa fa-th-large"></i> Position</label>
|
|
<select type="text" id="node-input-position" style="display:inline-block; width:70%; vertical-align:baseline;">
|
|
<option value="top right">Top Right</option>
|
|
<option value="top center">Top Center</option>
|
|
<option value="top left">Top Left</option>
|
|
<option value="bottom right">Bottom Right</option>
|
|
<option value="bottom center">Bottom Center</option>
|
|
<option value="bottom left">Bottom Left</option>
|
|
<option value="center center">Center</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-color"><i class="fa fa-paint-brush"></i> Color</label>
|
|
<div style="display: inline-flex; gap: 8px; align-items: center;">
|
|
<input type="checkbox" id="node-input-colorDefault" style="width: auto; margin: 0;">
|
|
<label for="node-input-colorDefault" style="margin: 0; line-height: 34px;">Default</label>
|
|
<input type="color" id="node-input-color" placeholder="#FFFFFF">
|
|
</div>
|
|
</div>
|
|
<div class="form-row" id="node-toast-displaytime">
|
|
<label for="node-input-displayTime"><i class="fa fa-clock-o"></i> Timeout (S)</label>
|
|
<input type="text" id="node-input-displayTime" placeholder="[msg.timeout]">
|
|
</div>
|
|
<div class="form-row form-row-flex" id="node-notification-showCountdown">
|
|
<input type="checkbox" id="node-input-showCountdown">
|
|
<label for="node-input-showCountdown">Show timeout countdown bar on notification</label>
|
|
</div>
|
|
<div class="form-row form-row-flex" id="node-notification-allowDismiss">
|
|
<input type="checkbox" id="node-input-allowDismiss">
|
|
<label for="node-input-allowDismiss"> Allow Manual Dismissal</label>
|
|
</div>
|
|
<div class="form-row form-row-flex" style="margin-left: 32px;" id="node-notification-dismissText">
|
|
<label for="node-input-dismissText"><i class="fa fa-check"></i> Button Label</label>
|
|
<input type="text" id="node-input-dismissText" placeholder="Close">
|
|
</div>
|
|
<div class="form-row form-row-flex" id="node-notification-allowConfirm">
|
|
<input type="checkbox" id="node-input-allowConfirm">
|
|
<label for="node-input-allowConfirm"> Allow Manual Confirmation</label>
|
|
</div>
|
|
<div class="form-row form-row-flex" style="margin-left: 32px;" id="node-notification-confirmText">
|
|
<label for="node-input-confirmText"><i class="fa fa-check"></i> Button Label</label>
|
|
<input type="text" id="node-input-confirmText" placeholder="Confirm">
|
|
</div>
|
|
<div class="form-row form-row-flex" id="node-toast-raw">
|
|
<input type="checkbox" id="node-input-raw" style="display:inline-block; width:auto; vertical-align:baseline;">
|
|
<label style="width:auto" for="node-input-raw"> Accept raw HTML/JavaScript input in msg.payload to format popup.</label>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-className"><i class="fa fa-code"></i> Class</label>
|
|
<div style="display: inline;">
|
|
<input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
|
|
<a
|
|
data-html="true"
|
|
title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
|
|
class="red-ui-button ui-node-popover-title"
|
|
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
|
|
<i style="font-family: ui-serif;">fx</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="form-tips"><b>Note</b>: checking <i>Accept raw HTML/JavaScript</i> can allow injection of code.
|
|
Ensure the input comes from trusted sources.</span></div>
|
|
</script>
|