<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>