115 lines
5.9 KiB
HTML
115 lines
5.9 KiB
HTML
<script type="text/javascript">
|
|
RED.nodes.registerType('ui_toast', {
|
|
category: RED._("node-red-dashboard/ui_base:ui_base.label.category"),
|
|
color: 'rgb(119, 198, 204)',
|
|
defaults: {
|
|
position: {value: 'top right'},
|
|
displayTime: {value: '3'},
|
|
highlight: {value: ''},
|
|
sendall: {value: true},
|
|
outputs: {value: 0},
|
|
ok: {value: 'OK', required: true},
|
|
cancel: {value: ''},
|
|
raw: {value: false},
|
|
className: {value: ''},
|
|
topic: {value: ''},
|
|
name: {value: ''}
|
|
},
|
|
inputs:1,
|
|
outputs:0,
|
|
align: "right",
|
|
icon: "ui_toast.png",
|
|
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-position").on("change", function() {
|
|
if ($("#node-input-position option:selected").val() === 'dialog') {
|
|
$("#node-toast-displaytime").hide();
|
|
$("#node-toast-highlightcolor").hide();
|
|
$("#node-toast-sendall").hide();
|
|
$("#node-dialog-displayok").show();
|
|
$("#node-dialog-displaycancel").show();
|
|
$("#node-dialog-topic").show();
|
|
}
|
|
else if ($("#node-input-position option:selected").val() === 'prompt') {
|
|
$("#node-toast-displaytime").hide();
|
|
$("#node-toast-highlightcolor").hide();
|
|
$("#node-toast-sendall").hide();
|
|
$("#node-dialog-displayok").show();
|
|
$("#node-dialog-displaycancel").show();
|
|
$("#node-dialog-topic").show();
|
|
if (typeof $("#node-input-cancel").val() !== "string" || $("#node-input-cancel").val() === "" ) {
|
|
$("#node-input-cancel").val("Cancel");
|
|
}
|
|
}
|
|
else {
|
|
$("#node-toast-displaytime").show();
|
|
$("#node-toast-highlightcolor").show();
|
|
$("#node-toast-sendall").show();
|
|
$("#node-dialog-displayok").hide();
|
|
$("#node-dialog-displaycancel").hide();
|
|
$("#node-dialog-topic").show();
|
|
}
|
|
});
|
|
},
|
|
oneditsave: function() {
|
|
if ($("#node-input-position option:selected").val() === 'dialog') { this.outputs = 1; }
|
|
else if ($("#node-input-position option:selected").val() === 'prompt') { this.outputs = 1; }
|
|
else { this.outputs = 0; }
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui_toast">
|
|
<div class="form-row">
|
|
<label for="node-input-position"><i class="fa fa-th-large"></i> Layout</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="bottom right">Bottom Right</option>
|
|
<option value="top left">Top Left</option>
|
|
<option value="bottom left">Bottom Left</option>
|
|
<option value="dialog">OK / Cancel Dialog</option>
|
|
<option value="prompt">OK / Cancel Dialog with Input</option>
|
|
</select>
|
|
</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" id="node-toast-highlightcolor">
|
|
<label for="node-input-highlight"><i class="fa fa-square-o"></i> Border</label>
|
|
<input type="text" id="node-input-highlight" placeholder="(optional) border highlight colour">
|
|
</div>
|
|
<div class="form-row" id="node-toast-sendtoall">
|
|
<label style="width:auto" for="node-input-sendall"><i class="fa fa-arrow-right"></i> Send to all browser sessions. </label>
|
|
<input type="checkbox" checked id="node-input-sendall" style="display:inline-block; width:auto; vertical-align:baseline;">
|
|
</div>
|
|
<div class="form-row" id="node-dialog-displayok">
|
|
<label for="node-input-ok"><i class="fa fa-check"></i> Default action label</label>
|
|
<input type="text" id="node-input-ok" placeholder="label for OK button">
|
|
</div>
|
|
<div class="form-row" id="node-dialog-displaycancel">
|
|
<label for="node-input-cancel"><i class="fa fa-times"></i> Secondary action label</label>
|
|
<input type="text" id="node-input-cancel" placeholder="(optional label for Cancel button)">
|
|
</div>
|
|
<div class="form-row" id="node-toast-raw">
|
|
<label style="width:auto" for="node-input-raw"><i class="fa fa-exclamation-triangle"></i> Accept raw HTML/JavaScript input in msg.payload to format popup.</label>
|
|
<input type="checkbox" id="node-input-raw" style="display:inline-block; width:auto; vertical-align:baseline;">
|
|
</div>
|
|
<div class="form-row" id="node-dialog-className">
|
|
<label for="node-input-className"><i class="fa fa-code"></i> Class</label>
|
|
<input type="text" id="node-input-className" placeholder="[msg.className]">
|
|
</div>
|
|
<div class="form-row" id="node-dialog-topic">
|
|
<label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
|
|
<input type="text" id="node-input-topic" placeholder="[msg.topic]">
|
|
</div>
|
|
<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-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>
|